The web palette is the brand palette expressed as design-system tokens. Page and component code uses the semantic tokens on this page and nothing else — never a hex value, never a primitive such as a neutral or gold step. Each token resolves to a brand colour in light mode and to its counterpart in dark mode; a component written against the tokens gets both for free.
Semantic tokens
| Token | Light | Dark | Use |
|---|---|---|---|
| Body text, headings | |||
| Supporting text | |||
| 60 % black | 50 % white | Captions, disabled text | |
| Accented words, the link underline and the link hover colour; follows it. Link text at rest is | |||
| Text on an ink-coloured surface | |||
| The page | |||
| Secondary surfaces | |||
| Cards and fields on a tinted ground | |||
| 5 % black | 6 % white | Hover washes, inputs | |
| Accent fills | |||
| Menus and panels that open over the page | |||
| Structural rules | |||
| Decorative rules | |||
| 10 % black | 20 % white | Hairlines | |
| The boundary of a pressable control | |||
| Form field borders | |||
| 60 % black | 50 % white | Placeholder text | |
| A checked box | |||
| / | / | same | Text selection |
The primitive scales behind these — --neutral-50 to --neutral-990 and --gold-50 to --gold-950 — are listed on the brand page. They exist so the semantic tokens have something to resolve through; reaching past a semantic token to a primitive is a sign the semantic layer is missing a token, and the fix is to add one, not to use the primitive.
Where the web differs from the design file
Four Figma values are not used as written, because they fail WCAG AA where the design file puts them:
- Text Accent is 1.68:1 on paper. Accented words, link underlines and hover states use the gold scale's 800 step, , in light mode; the true gold is the dark-mode accent.
- Text Faded at 40 % black is 2.79:1. The site keeps 60 %.
- Input Placeholder at 50 % black is 3.86:1. The site keeps 60 %.
- Text Tertiary is 2.65:1 and is not a text colour on the web.
Two further defaults were raised for the same reason: the boundary of a control and of a form field takes the neutral 600 step (3.86:1 on paper), because the engine's default landed below the 3:1 a control boundary needs on this ramp.
Two brand surfaces have no web token yet. The peach highlighter is what <mark> paints, through the engine's --yellow-light; the mint highlighter has no slot at all and is recorded as an engine gap, so nothing on the site renders it.
Dark mode
Dark mode is opt-in through data-theme="dark" on the document, and follows the operating system's preference when no choice is stored. Every token above re-resolves; a component never carries its own dark colours.
Checking a pairing
Every text-on-background pairing must clear WCAG 2.1 AA. Use the Colour Pairing tool to measure any two palette colours before a pairing ships.