Brand guidelines
DigitalOps
Website Brand Guidelines
| Edition | Generated 30 October 2026 |
|---|---|
| Status | Internal reference. Reflects the live design system at the time of export; it is not a formally approved release. |
| Source | /design-system — unlinked, noindex, internal only |
| Contents | 10 sections: tokens, components, layout and accessibility |
Every value in this document is read from the same source the website consumes. Nothing was redrawn, recoloured or re-specified for the export, and the logo is the supplied artwork used as-is.
Contents
Sections
- 01Logo system
- 02Colour
- 03Typography
- 04Spacing & elevation
- 05Buttons & forms
- 06Cards & stats
- 07Tabs, dialog, tables
- 08Layout
- 09Header & footer
- 10Accessibility
The order matches /design-system exactly. Page numbers are produced by the browser print dialog (enable “Headers and footers”), because Chromium does not support CSS page counters in page margins.
Brand asset
Logo system
The supplied artwork is the source of truth and is never redrawn, recoloured or re-proportioned. It is a circular badge lockup: the D mark with its three accent dots, plus the DigitalOps wordmark. Use the file as-is.
Primary lockup — on white / off-white
On dark surfaces — the badge keeps its white plate
Clear space
Keep at least the badge radius clear on every side. Nothing may enter that space — no text, rules, or image edges.
Minimum sizing
- Desktop headerBadge diameter; clear space 1× below40px
- Mobile headerNever below 32px or the "D" stroke muddies36px
- Footer brand blockSits above the tagline48px
- App icon / faviconServed from /public icons32 / 180 / 512px
Wordmark colours
“Digital” is #000000 in the supplied file; “Ops” is #00CCFF. On a dark ground the black half must switch to #FFFFFF — cyan alone on navy reads fine (9.11:1) but the black half would disappear.
Typed fallback for text-only placement — never instead of the badge where space allows.
Favicon & app icon
The badge crops cleanly to a square, so the supplied artwork doubles as the app icon. Keep the white plate — it protects the cyan dots on dark browser chrome and on light tabs alike. Do not place the mark on a coloured square.
32px already resolves the mark and all three dots.
Foundations
Colour system
Every value here is sampled from the supplied logo: the D-mark gradient, its three accent dots and the white badge with its mist wash. Ratios are measured WCAG 2.1 values for the pair stated — nothing is estimated.
Brand core
Neutrals
Semantic usage
Foundations
Typography
One family carries the whole system: Manrope for Latin, Noto Sans Hebrew for RTL. Hierarchy comes from size, weight and tracking — never from a second typeface.
Display / hero
.ds-display
clamp(40 → 72px) · 800 · -0.03em · lh 1.02
H1
.ds-h1
clamp(32 → 52px) · 800 · -0.025em · lh 1.08
H2
.ds-h2
clamp(26 → 38px) · 700 · -0.02em · lh 1.15
H3
.ds-h3
clamp(20 → 26px) · 700 · -0.015em · lh 1.25
H4
.ds-h4
18px · 700 · -0.01em · lh 1.35
Body large
.ds-lead
clamp(17 → 20px) · 400 · 0 · lh 1.6
Body
.ds-body
16px · 400 · 0 · lh 1.7
Body small
.ds-body-sm
14px · 400 · 0 · lh 1.6
Caption
.ds-caption
13px · 400 · 0 · lh 1.5
Eyebrow
.ds-eyebrow
12px · 700 · 0.12em · lh 1
Form label
.ds-label
14px · 600 · 0 · lh 1.4
Button text
.ds-body-sm
15px · 700 · 0 · lh 1.2
LTR pattern
Enterprise platforms, integrations and operations
Eyebrows are uppercase and tracked, headings tighten to -0.02em, and every block aligns to the start edge.
RTL pattern
פלטפורמות ארגוניות, אינטגרציות ומערכות הפעלה לעסקים.
אין ריווח אותיות ואין אותיות רישיות בעברית. הכותרות נשארות באותו משקל, והטקסט נצמד לשפת ההתחלה — ימין.
In RTL the system drops letter-spacing and uppercasing (`.ds-eyebrow`), relaxes heading tracking to 0 and lifts heading line-height to 1.18, because Hebrew needs the extra vertical room and tracking breaks word shaping.
Foundations
Spacing, radius, elevation, layout & motion
The scales everything else is built from. Spacing follows the 4px step, so every gap on the site is a multiple of 4 — including gaps inside components.
Spacing scale
| Token | Value | Usage |
|---|---|---|
| space-1 | 4px | Icon-to-text gap |
| space-2 | 8px | Tight stacks, label to input |
| space-3 | 12px | Button padding, inline groups |
| space-4 | 16px | Card inner rhythm |
| space-6 | 24px | Card padding, grid gutter (mobile) |
| space-8 | 32px | Section padding (mobile), grid gutter (desktop) |
| space-12 | 48px | Section padding (tablet) |
| space-16 | 64px | Section padding (desktop) |
| space-24 | 96px | Hero breathing room (desktop) |
Radius scale
| Token | Value | Usage |
|---|---|---|
| --ds-radius-xs | 6px | Badges, tiny chips |
| --ds-radius-sm | 8px | Buttons, inputs |
| --ds-radius-md | 12px | Alerts, small panels |
| --ds-radius-lg | 16px | Cards, dialogs |
| --ds-radius-xl | 24px | Hero panels, media |
| --ds-radius-pill | 999px | Pills, switches, avatars |
Elevation
| Token | Value | Usage |
|---|---|---|
| --ds-shadow-xs | 0 1px 2px rgba(6,26,58,.06) | Resting cards, inputs |
| --ds-shadow-sm | 0 2px 6px rgba(6,26,58,.08) | Hover on small surfaces |
| --ds-shadow-md | 0 8px 24px rgba(6,26,58,.10) | Card hover, dropdowns |
| --ds-shadow-lg | 0 18px 48px rgba(6,26,58,.16) | Dialogs, sticky header |
| --ds-shadow-brand | 0 8px 22px rgba(0,102,255,.24) | Primary CTA only |
Containers
| Token | Value | Usage |
|---|---|---|
| --ds-container-narrow | 768px | Legal pages, article reading width |
| --ds-container | 1280px | Default page container |
| --ds-container-wide | 1440px | Full-bleed marketing bands |
Breakpoints
| Token | Value | Usage |
|---|---|---|
| sm | 640px | Large phone |
| md | 768px | Tablet — grids widen to 2 columns |
| lg | 1024px | Laptop — desktop navigation appears |
| xl | 1280px | Full page container |
| 2xl | 1536px | Wide screens (rarely needed) |
Motion
| Token | Value | Usage |
|---|---|---|
| --ds-dur-fast | 120ms | Hover, press feedback |
| --ds-dur-base | 200ms | Default transition |
| --ds-dur-slow | 320ms | Dialog / drawer entrance |
| --ds-ease | cubic-bezier(.2,.7,.3,1) | Standard easing for all motion |
All motion is disabled under prefers-reduced-motion and by the site accessibility panel — durations collapse to 1ms, never to “no state change”.
Focus ring
One ring for the whole system: a 2px brand-blue outline at 2px offset. It must be visible on every interactive element without relying on hover.
Keyboard only — use Tab. Pointer users never see it; keyboard users always do.
Components
Buttons & form controls
One button height (48px) meets the mobile touch-target minimum everywhere. Every control below is keyboard reachable and uses the brand tokens only.
Button hierarchy
One primary action per view. Secondary supports it; outline/ghost live in dense toolbars; text links sit inside body copy.
Text, textarea & select
16px text — never smaller, so iOS does not zoom on focus.
Enter a valid work email address.
Choice controls
Components
Cards, stats, badges & section headers
The building blocks of every content block on the site: one card treatment, one KPI treatment, one badge language, one section header.
Section header
Capabilities
Systems that carry the business
Eyebrow, heading, one supporting sentence. Never a fourth line — detail belongs in the cards below.
Card (resting & hover)
ERP & operations
Modules, integrations and permissions that hold a business together.
42%
Less manual handling
Measured per engagement
3×
Faster onboarding
Average across rollouts
24/7
Monitored uptime
Support model
Tags & badges
Badges carry state, not decoration. Status always pairs colour with a word — never colour alone.
Navigation items & links
Inline links use brand blue with an underline so they never rely on colour alone to be recognised.
Components
Tabs, accordion, dialog, alerts, tables & empty states
Interactive shells keep their accessible behaviour and only take the brand tokens on top — nothing here re-implements focus management.
Tabs
Overview
Tab labels stay sentence-case and short; content never shifts the tab row.
Modules
One idea per tab — never hide the primary action inside a non-default tab.
Security
Roles, audit trails and data boundaries live in their own tab.
Accordion (FAQ pattern)
How long does an implementation take?
Scope-dependent. A core ERP rollout runs in phases, each with its own acceptance gate.
Can existing systems stay in place?
Yes — integrations are planned per system, with a fallback path during cut-over.
Dialog shell
Confirm scope change
This dialog uses the card radius, the large shadow and the brand heading weight. Focus is trapped by the shell, Escape closes it.
One primary action, one dismissive action — never two primaries.
Toast / alert states
Table
| Module | Status | Owner | Updated |
|---|---|---|---|
| Inventory | Live | Ops | 2 days ago |
| Procurement | Pending | Finance | 5 days ago |
| Field service | Blocked | Ops | today |
Scrolls horizontally on narrow screens rather than crushing columns.
Pagination
Empty state
Nothing here yet
Say what will appear and offer the one action that fills it.
Layout
Layout patterns
One container, one section rhythm, one grid. Everything is expressed in logical (start/end) terms so the identical markup mirrors correctly in Hebrew.
Container widths
Page padding is 20px (mobile) → 32px (md) → 40px (xl), applied with padding-inline.
Grid behaviour (12 column)
Gutters: 16px below md, 24px at md, 32px at lg. Cards never span fewer than 4 columns on desktop.
Section rhythm
Hero padding is applied once, by .page-hero-top — never twice, since the header is sticky in normal flow.
Responsive stacking
- ≥1280pxContainer 1280px, 3–4 column grids, 32px gutters
- 1024–1279pxContainer 1280px, 3 column grids, 24px gutters
- 768–1023px2 column grids, 24px gutters, desktop nav hidden
- <768pxSingle column, 20px page padding, 16px card padding, stacks top-to-bottom
Mirroring rules (LTR / RTL)
LTR
RTL
Use padding-inline, margin-inline, text-start and inset-inline. Never left/right, and never a mirrored duplicate layout. Icons that encode direction (arrows, chevrons) flip; icons that encode an object (logo, play, download) do not.
Preparation
Header & footer guidance
How the brand lands in the two global surfaces. This is the reference for the later rollout — the live header and footer are intentionally untouched in this step.
Header — desktop, sticky, 64px tall
DigitalOpsLogo placement
Start edge, 40px badge, 16px to the first nav item.
Navigation hierarchy
Max 5 top-level items; secondary links live in the footer.
CTA
One primary button: brand blue, 40–48px, always the last item.
Footer — brand block, link columns, contact & social
DigitalOpsEnterprise platforms, integrations and operations for businesses that run on their systems.
Solutions
- ERP core
- Integrations
- Automation
Company
- About
- Work
- Contact
Brand block
Navy ground, 48px badge beside the wordmark, one-line positioning, then social.
Link style
14px, #B4CDE8 (10.55:1 on navy); hover lifts to white. No underlines at rest.
Contact / social
36px circular targets, 44px minimum tap area with padding.
The live header and footer still render the previous logo. They are deliberately unchanged here so this step adds a foundation without altering any public page.
Guardrails
Accessibility
Contrast values on this page are measured, not assumed. These rules are requirements for every future page, not suggestions.
Contrast
Body text meets 4.5:1 minimum; large text and icons meet 3:1. Cyan is never used as light-ground text (1.90:1).
Focus
A 2px brand-blue ring at 2px offset on every interactive element, visible without hover.
Targets
48px minimum for buttons and inputs, 44px for icon buttons and footer links.
Text size
16px for inputs (no iOS zoom) and body; 13px is the smallest text in the system.
Motion
All durations collapse under prefers-reduced-motion and the in-page accessibility panel.
RTL
Logical properties only. No letter-spacing or uppercasing in Hebrew.
Meaning
State is never colour alone — a badge always carries its word or icon.
Structure
One h1 per page; sections labelled; skip link precedes the header.
Contrast pairs in use
| Foreground | Background | Ratio | Passes |
|---|---|---|---|
| #FFFFFF | #0066FF | 4.83:1 | AA |
| #061A3A | #F7FAFF | 16.50:1 | AAA |
| #4A5C78 | #FFFFFF | 6.79:1 | AA |
| #5A6B85 | #FFFFFF | 5.42:1 | AA |
| #00CCFF | #061A3A | 9.11:1 | AA |
| #00CCFF | #FFFFFF | 1.90:1 | Fails — decorative only |
| #D92D20 | #FFFFFF | 4.83:1 | AA |
| #067A55 | #FFFFFF | 5.35:1 | AA |
Notes
Using these guidelines
This document is the single source of truth for brand and UI. Public pages and site chrome consume these tokens; the mark itself is the supplied artwork, never a redraw.
What the print export cannot carry
- The sticky section navigation on the live page is interface, not content; the contents list above replaces it.
- Hover, focus and pressed states cannot exist on paper. Every component is reproduced in its resting state.
- Interactive shells are expanded: all three tab panels, both accordion answers and the dialog are shown open, because a printed page cannot hold state.
- Page numbers come from the browser’s own print header/footer, not from CSS.
- The live site header and footer are not captured. The examples in the “Header & footer” section are the reference.
Generated 30 October 2026 from /design-system.