Colour

Brand ramps — every shipped colour, raw

Every brand colour the system can reach for, by family — paper tints, navy ramp, blue ramp, AI accent. Hex values shown beneath each chip are the exact constants from the global stylesheet.

Paper · #FAFBFC

Paper warm · #F2EFE7

Paper cool · #ECEDF0

Navy 700 · #13192A

Navy 800 · #0F1F3D

Navy 900 · #0B1530

Blue 400 · #93B4F5

Blue 500 (peak) · #3B82F6

Blue 600 · #2563EB

Blue 700 · #1D4ED8

AI · #7C5CFF

AI soft · #F1ECFF

Semantic tokens — colours by intent

What components actually reach for. Each chip pulls its colour through a CSS variable rather than a raw hex - so swapping the underlying ramp in global.css recolours every consumer at once.

--bg-paper

--bg-inset

--bg-inverse

--fg-primary

--fg-secondary

--accent-link

--accent-ai

--border-strong

Where each colour goes

The placement rules behind Quiet Cobalt - one peak (--accent-link), one anchor ink (--fg-primary), one AI accent reserved for AI features. Apply colours by role, not by feel.

Headings + body type → --fg-primary (anchor ink, same tone as the mark).
Links + interactive accents → --accent-link (peak blue).
Hero / CTA bands → navy via .u-section-dark; never deploy peak as a flood.
AI features only → --accent-ai + --accent-ai-soft; never elsewhere.
Section rhythm → alternate .u-section (paper) with .u-section-tinted (subtle); never two of the same back-to-back.

Contrast targets the palette hits

The four pairings that have to clear WCAG, and what ratio each one actually hits. Anything not listed here either isn't shipped as a foreground/background pairing or stays at decorative weight (icons, ambient texture).

Body type on paper: --fg-primary on --bg-paper ≈ 14.6:1 (AAA).
Peak on paper: --accent-link on --bg-paper ≈ 4.7:1 (AA normal text).
White on navy: #FFFFFF on --u-navy-800 ≈ 16:1 (AAA).
Focus ring: 2px white gap + 2px peak (--shadow-focus) - visible on every surface.