Foundations
Color
Four brand colors, a navy-tinted neutral scale and six semantic roles. Components reference roles, never raw values, so both modes stay in step.
Brand palette
- Modern Tech Navy18.38:1
#0B132B--color-brand-navyThe dark canvas, body text in light mode and the logo tile.
White text reads at 18.38:1.
- Electric Blue5.05:1
#1C64F2--color-brand-bluePrimary actions, selection and the light mode focus ring.
White text reads at 5.05:1.
- Signal Cyan13.24:1
#00F2FE--color-brand-cyanLive and in-flight states, the dark mode focus ring, glows.
Navy text reads at 13.24:1.
- Slate Dark Neutral14.62:1
#1E293B--color-brand-slateQuiet chrome and secondary surfaces in dark mode.
White text reads at 14.62:1.
Neutral tokens
| Token | Light | Dark | Role |
|---|---|---|---|
bg-background | #F5F7FB | #0B132B | Page canvas behind every surface. |
bg-card | #FFFFFF | #111A33 | Solid surfaces: cards, tables, inputs. |
bg-popover | #FFFFFF | #16203B | Raised surfaces: menus, dialogs, palettes. |
bg-muted | #EDF1F7 | #1A2440 | Quiet fills: table headers, code, tracks. |
bg-secondary | #E6EBF4 | #1E293B | Secondary button fill. |
bg-accent | #E9EFFA | #1D2844 | Hover and highlighted rows and items. |
border-border | #DCE2EC | #26324F | Hairline dividers and card outlines. |
border-border-strong | #C3CCDC | #34415F | Outline buttons and segmented controls. |
border-input | #7D89A1 | #66738F | Form control boundaries. Meets 3:1. |
text-foreground | #0B132B | #EDF1F7 | Primary text and icons. |
text-muted-foreground | #4A5672 | #9AA6BF | Secondary text, hints, placeholders. |
outline-ring | #1C64F2 | #00F2FE | Focus ring. Blue in light, cyan in dark. |
Semantic roles
Each role ships four tokens: a fill for buttons, dots and bars, a foreground for text on that fill, a subtle tint for badges and alerts, and an ink for text and icons on neutral or tinted surfaces.
Primary buttons, selected navigation, links, staged items.
bg-primary · text-primary-foreground · bg-primary-subtle · text-primary-ink
Dispatching work, live counters, implemented status.
bg-signal · text-signal-foreground · bg-signal-subtle · text-signal-ink
Read-back confirmed, certified evidence, mapped fields.
bg-success · text-success-foreground · bg-success-subtle · text-success-ink
Outcome unknown, unresolved fields, open questions.
bg-warning · text-warning-foreground · bg-warning-subtle · text-warning-ink
Unsupported required fields, failures, destructive gates.
bg-danger · text-danger-foreground · bg-danger-subtle · text-danger-ink
Mapping suggestions and diagnostics. Never on an approval.
bg-insight · text-insight-foreground · bg-insight-subtle · text-insight-ink
Contrast checks
| Pairing | Needs | Light | Dark |
|---|---|---|---|
Body text on pageforeground on background | 4.5:1 | 17.14:1AAA | 16.21:1AAA |
Body text on cardforeground on card | 4.5:1 | 18.38:1AAA | 15.19:1AAA |
Body text on popoverforeground on popover | 4.5:1 | 18.38:1AAA | 14.20:1AAA |
Body text on mutedforeground on muted | 4.5:1 | 16.21:1AAA | 13.51:1AAA |
Secondary text on pagemuted-foreground on background | 4.5:1 | 6.83:1AA | 7.51:1AAA |
Secondary text on cardmuted-foreground on card | 4.5:1 | 7.32:1AAA | 7.03:1AAA |
Secondary text on popovermuted-foreground on popover | 4.5:1 | 7.32:1AAA | 6.58:1AA |
Secondary text on mutedmuted-foreground on muted | 4.5:1 | 6.46:1AA | 6.26:1AA |
Secondary text on hover rowmuted-foreground on accent | 4.5:1 | 6.34:1AA | 5.96:1AA |
Control border on cardinput on card | 3:1 | 3.52:1UI | 3.61:1UI |
Control border on pageinput on background | 3:1 | 3.28:1UI | 3.86:1UI |
Control border on mutedinput on muted | 3:1 | 3.10:1UI | 3.22:1UI |
Focus ring on pagering on background | 3:1 | 4.71:1UI | 13.24:1UI |
Focus ring on cardring on card | 3:1 | 5.05:1UI | 12.40:1UI |
Primary label on primary fillprimary-foreground on primary | 4.5:1 | 5.05:1AA | 5.05:1AA |
Primary ink on pageprimary-ink on background | 4.5:1 | 5.76:1AA | 7.24:1AAA |
Primary ink on mutedprimary-ink on muted | 4.5:1 | 5.45:1AA | 6.03:1AA |
Primary ink on its tintprimary-ink on primary-subtle | 4.5:1 | 5.39:1AA | 5.81:1AA |
Primary fill against pageprimary on background | 3:1 | 4.71:1UI | 3.63:1UI |
Primary fill against cardprimary on card | 3:1 | 5.05:1UI | 3.40:1UI |
Signal label on signal fillsignal-foreground on signal | 4.5:1 | 5.35:1AA | 13.24:1AAA |
Signal ink on pagesignal-ink on background | 4.5:1 | 6.77:1AA | 12.68:1AAA |
Signal ink on mutedsignal-ink on muted | 4.5:1 | 6.41:1AA | 10.57:1AAA |
Signal ink on its tintsignal-ink on signal-subtle | 4.5:1 | 6.52:1AA | 10.30:1AAA |
Signal fill against pagesignal on background | 3:1 | 4.99:1UI | 13.24:1UI |
Signal fill against cardsignal on card | 3:1 | 5.35:1UI | 12.40:1UI |
Success label on success fillsuccess-foreground on success | 4.5:1 | 5.48:1AA | 9.56:1AAA |
Success ink on pagesuccess-ink on background | 4.5:1 | 7.16:1AAA | 12.06:1AAA |
Success ink on mutedsuccess-ink on muted | 4.5:1 | 6.77:1AA | 10.05:1AAA |
Success ink on its tintsuccess-ink on success-subtle | 4.5:1 | 6.78:1AA | 9.85:1AAA |
Success fill against pagesuccess on background | 3:1 | 5.11:1UI | 9.56:1UI |
Success fill against cardsuccess on card | 3:1 | 5.48:1UI | 8.95:1UI |
Warning label on warning fillwarning-foreground on warning | 4.5:1 | 5.02:1AA | 11.01:1AAA |
Warning ink on pagewarning-ink on background | 4.5:1 | 6.61:1AA | 12.75:1AAA |
Warning ink on mutedwarning-ink on muted | 4.5:1 | 6.25:1AA | 10.62:1AAA |
Warning ink on its tintwarning-ink on warning-subtle | 4.5:1 | 6.45:1AA | 10.45:1AAA |
Warning fill against pagewarning on background | 3:1 | 4.68:1UI | 11.01:1UI |
Warning fill against cardwarning on card | 3:1 | 5.02:1UI | 10.31:1UI |
Danger label on danger filldanger-foreground on danger | 4.5:1 | 5.73:1AA | 4.82:1AA |
Danger ink on pagedanger-ink on background | 4.5:1 | 7.59:1AAA | 9.68:1AAA |
Danger ink on muteddanger-ink on muted | 4.5:1 | 7.19:1AAA | 8.07:1AAA |
Danger ink on its tintdanger-ink on danger-subtle | 4.5:1 | 7.13:1AAA | 8.85:1AAA |
Danger fill against pagedanger on background | 3:1 | 5.34:1UI | 3.80:1UI |
Danger fill against carddanger on card | 3:1 | 5.73:1UI | 3.56:1UI |
Insight label on insight fillinsight-foreground on insight | 4.5:1 | 7.10:1AAA | 6.75:1AA |
Insight ink on pageinsight-ink on background | 4.5:1 | 8.37:1AAA | 9.95:1AAA |
Insight ink on mutedinsight-ink on muted | 4.5:1 | 7.92:1AAA | 8.30:1AAA |
Insight ink on its tintinsight-ink on insight-subtle | 4.5:1 | 7.72:1AAA | 8.80:1AAA |
Insight fill against pageinsight on background | 3:1 | 6.62:1UI | 6.75:1UI |
Insight fill against cardinsight on card | 3:1 | 7.10:1UI | 6.32:1UI |
Dark mode
Navy, not black
The canvas is Modern Tech Navy. Cards step up to #111A33 and popovers to #16203B, so depth reads without heavy shadows.
Lifted borders
Borders get lighter in dark mode, and control boundaries stay above 3:1 against every surface they sit on.
Lighter inks, same meaning
Inks move up to pastel values so small text stays above 4.5:1 on navy. Fills for success, warning and insight carry navy text.
Cyan takes focus
The focus ring switches from Electric Blue to Signal Cyan, which reads above 13:1 on the navy canvas.
Usage
Do
Pair every status color with an icon and a word
A verified record says Verified, shows the read-back icon and uses the success tint. Anyone can read it, including in grayscale.
Don't
Rely on a colored dot to tell states apart
Two dots that differ only by hue fail for color blind operators and in bright rooms. They also fail WCAG 1.4.1.
Do
Use the ink token for text on tints
Ink tokens are tuned to pass 4.5:1 on the page, on muted surfaces and on their own tint, in both modes.
Don't
Set small text in a raw brand color
Signal Cyan on a light surface reads at about 1.4:1. Brand colors are for marks and glows, not for words.