Internal · not linked publicly
DigitalOps Design System
Brand foundation derived from the official logo. Source of truth for every future page.
Export the complete guidelines
PDF: the browser print dialog performs the save (A4, background graphics on). HTML: a standalone document containing the full guideline text and CSS.
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
Tab labels stay sentence-case and short; content never shifts the tab row.
Accordion (FAQ pattern)
Dialog shell
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 |
This page 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.