Colour

Always apply colour through tokens, never hex values. Start with the semantic tokens: they name a job, stay correct if the palette is retuned, and cover almost every case. Drop down to a primitive only when you genuinely need a specific shade with no semantic meaning.

Every swatch, value and contrast ratio on this page is generated from the design system’s tokens.css at build time, so what you see is what ships.

Semantic colours

Primitive ramp

Primitives mirror the Figma variable ramp. Each family runs from a dark 00 shade through pale tints (10, 40) to the saturated 100. The last column records which semantic token, if any, aliases the shade.

Neutrals

Blue

Teal

Green

Red

Yellow

Pink

Purple

Accessibility

Every text and background combination, and every interface graphic, must meet SC 1.4.3 Contrast (Minimum) for text and SC 1.4.11 Non-text Contrast for interface graphics: 4.5:1 for body text, 3:1 for large text and interface graphics. The “on white” column above shows each shade’s computed ratio against a white background. As a rule the dark 00 shades pass as text on white (except --govbb-yellow-80); the pale 10 and 40 tints and the vivid 100 shades do not, so treat those as backgrounds and accents. Check any combination the ratios above do not already cover before you ship it.