Colour.
The system runs on neutrals, anchored by brand navy. Other colour is functional: it signals state and separates data. It does not decorate. Restraint is the brand.
- Anchor
- Navy #1b3644
- System
- Neutral greys
- Modes
- Light · Dark
- Standard
- WCAG AA
Principles
Three values do most of the work: a near-white page, near-black text, and brand navy. Status colours, data colours, and the rare highlight are reserved for a job. Colour earns its place by meaning, never by mood, and every value resolves from a token so light and dark stay in lockstep. Use the named role, not a raw sample or an invented value.
Neutrals
Semantic greys cover surfaces, text, hairlines, and states. They are named by role, not value. Use background, muted-foreground, or border rather than a raw grey, so one change applies everywhere.
background
Page surface
foreground
Body text
card
Raised surface
muted
Subtle fill
muted-foreground
Secondary text
border
Hairlines
accent
Hover / active fill
ring
Focus ring
card-foreground
Text on card
accent-foreground
Text on accent fill
popover
Overlay surface (menus, tooltips)
popover-foreground
Text on popover
input
Input border / control hairline
Brand
Navy is the anchor and the only dark surface. It is the wordmark’s colour and the system’s one confident note. Gold is a rare highlight, never a surface or large field. Sand is an occasional warm ground.
primary
Brand navy — anchor & the one dark surface
primary-foreground
On navy
secondary
Gold — the single accent, never a surface
secondary-foreground
On gold
sand
Warm neutral ground
Status
Red, green, and amber carry meaning, not decoration. They form the RAG vocabulary for delivery health, validation, and alerts. Use a tinted surface with its named foreground and always add a label.
destructive
Errors / destructive
success
Success
warning
Warning
destructive-foreground
Text on destructive
success-foreground
Text on success
warning-foreground
Text on warning
Data visualisation
The five-step chart palette stays distinct in both modes. Earlier values carry more visual weight. Use it for categories and comparisons; status colours keep their meaning and never stand in for a category.
chart-1
Series 1 — navy, the protagonist
chart-2
Series 2 — steel (a lighter rung of the navy ramp)
chart-3
Series 3 — sand
chart-4
Series 4 — gold, the single accent
chart-5
Series 5 — cool grey, a quiet 5th
Light & dark
Every token has a light value and a dark value. Mode switches the value; applications do not redefine it. Design with the token and both modes follow. Navy holds while neutrals and states invert.
Proportion
Judge colour by area, not swatch count. Neutrals fill the page, navy anchors a fraction, and all functional colour together forms a sliver. If a layout reads as colourful, the proportion is wrong.
Type & contrast
Type on colour must clear WCAG AA: at least 4.5:1 for body text and 3:1 for large text. Use the measured surface and foreground pairings below. Never improvise a lower-contrast combination.
Misuse
Colour is governed by tokens and meaning. Resolve every value from a token, keep colour functional, and never lean on it alone to carry information.