# Colour

Use colour through semantic tokens; reach for the primitive ramp only for a specific shade.

Always apply colour through [tokens](/styles/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

Semantic colour tokens

| Token | Declared value | Resolved value | Notes |
| --- | --- | --- | --- |
| `--govbb-color-brand` | `var(--govbb-blue-40)` | `#00267f` | ultramarine; 13.3:1 on white (AA) |
| `--govbb-color-brand-accent` | `var(--govbb-yellow-40)` | `#ffc726` | gold; 1.6:1 on white (fails AA) |
| `--govbb-color-ink` | `var(--govbb-black-00)` | `#000` | 21.0:1 on white (AA) |
| `--govbb-color-surface` | `var(--govbb-white-00)` | `#fff` | 1.0:1 on white (fails AA) |
| `--govbb-color-muted` | `var(--govbb-grey-70)` | `#595959` | 7.0:1 on white (AA) |
| `--govbb-color-interactive` | `var( --govbb-teal-80 )` | `#0e5f64` | primary action, checked fill; 7.4:1 on white (AA) |
| `--govbb-color-interactive-active` | `var(--govbb-teal-90)` | `#0a4549` | 10.7:1 on white (AA) |
| `--govbb-color-focus` | `var(--govbb-teal-40)` | `#30c0c8` | focus ring; 2.2:1 on white (fails AA) |
| `--govbb-color-focus-danger` | `var(--govbb-red-40)` | `#ff6b6b` | 2.8:1 on white (fails AA) |
| `--govbb-color-error` | `var(--govbb-red-80)` | `#a42c2c` | invalid state; 7.1:1 on white (AA) |
| `--govbb-color-neutral` | `var(--govbb-grey-20)` | `#e0e4e9` | secondary fill, dividers; 1.3:1 on white (fails AA) |
| `--govbb-color-highlight` | `var(--govbb-blue-10)` | `#e5e9f2` | selected surfaces; 1.2:1 on white (fails AA) |
| `--govbb-color-tertiary` | `var(--govbb-green-80)` | `#00654a` | tertiary action; 7.1:1 on white (AA) |

## 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

Neutral primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-white-00` | `#fff` | `#fff` | --govbb-color-surface; 1.0:1 on white (fails AA) |
| `--govbb-black-00` | `#000` | `#000` | --govbb-color-ink; 21.0:1 on white (AA) |
| `--govbb-grey-20` | `#e0e4e9` | `#e0e4e9` | --govbb-color-neutral; 1.3:1 on white (fails AA) |
| `--govbb-grey-70` | `#595959` | `#595959` | --govbb-color-muted; 7.0:1 on white (AA) |

### Blue

Blue primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-blue-10` | `#e5e9f2` | `#e5e9f2` | --govbb-color-highlight; 1.2:1 on white (fails AA) |
| `--govbb-blue-20` | `#99a8cc` | `#99a8cc` | 2.4:1 on white (fails AA) |
| `--govbb-blue-40` | `#00267f` | `#00267f` | --govbb-color-brand; 13.3:1 on white (AA) |
| `--govbb-blue-60` | `#001e65` | `#001e65` | 15.3:1 on white (AA) |
| `--govbb-blue-80` | `#00164a` | `#00164a` | 17.3:1 on white (AA) |
| `--govbb-blue-90` | `#000e30` | `#000e30` | 19.0:1 on white (AA) |

### Teal

Teal primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-teal-10` | `#eaf9f9` | `#eaf9f9` | --govbb-link-hover-bg; 1.1:1 on white (fails AA) |
| `--govbb-teal-20` | `#ace6e9` | `#ace6e9` | 1.4:1 on white (fails AA) |
| `--govbb-teal-40` | `#30c0c8` | `#30c0c8` | --govbb-color-focus; 2.2:1 on white (fails AA) |
| `--govbb-teal-60` | `#1a777d` | `#1a777d` | 5.3:1 on white (AA) |
| `--govbb-teal-80` | `#0e5f64` | `#0e5f64` | --govbb-color-interactive; 7.4:1 on white (AA) |
| `--govbb-teal-90` | `#0a4549` | `#0a4549` | --govbb-color-interactive-active; 10.7:1 on white (AA) |

### Green

Green primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-green-10` | `#e9f9f3` | `#e9f9f3` | 1.1:1 on white (fails AA) |
| `--govbb-green-20` | `#a5e5ce` | `#a5e5ce` | 1.4:1 on white (fails AA) |
| `--govbb-green-40` | `#1fbf84` | `#1fbf84` | 2.4:1 on white (fails AA) |
| `--govbb-green-60` | `#109067` | `#109067` | 4.0:1 on white (AA large only) |
| `--govbb-green-80` | `#00654a` | `#00654a` | --govbb-color-tertiary; 7.1:1 on white (AA) |
| `--govbb-green-90` | `#004d38` | `#004d38` | 9.9:1 on white (AA) |

### Red

Red primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-red-10` | `#fff0f0` | `#fff0f0` | 1.1:1 on white (fails AA) |
| `--govbb-red-20` | `#ffc4c4` | `#ffc4c4` | 1.5:1 on white (fails AA) |
| `--govbb-red-40` | `#ff6b6b` | `#ff6b6b` | --govbb-color-focus-danger; 2.8:1 on white (fails AA) |
| `--govbb-red-60` | `#bf3e3e` | `#bf3e3e` | 5.3:1 on white (AA) |
| `--govbb-red-80` | `#a42c2c` | `#a42c2c` | --govbb-color-error; 7.1:1 on white (AA) |
| `--govbb-red-90` | `#961e1f` | `#961e1f` | 8.4:1 on white (AA) |

### Yellow

Yellow primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-yellow-10` | `#fff9e9` | `#fff9e9` | 1.1:1 on white (fails AA) |
| `--govbb-yellow-20` | `#ffe9a8` | `#ffe9a8` | 1.2:1 on white (fails AA) |
| `--govbb-yellow-40` | `#ffc726` | `#ffc726` | --govbb-color-brand-accent; 1.6:1 on white (fails AA) |
| `--govbb-yellow-60` | `#f0b52c` | `#f0b52c` | 1.9:1 on white (fails AA) |
| `--govbb-yellow-80` | `#e8a833` | `#e8a833` | 2.1:1 on white (fails AA) |
| `--govbb-yellow-90` | `#c98d2a` | `#c98d2a` | 2.9:1 on white (fails AA) |

### Pink

Pink primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-pink-10` | `#fff4fb` | `#fff4fb` | 1.1:1 on white (fails AA) |
| `--govbb-pink-20` | `#ffd4f0` | `#ffd4f0` | 1.3:1 on white (fails AA) |
| `--govbb-pink-40` | `#ff94d9` | `#ff94d9` | 2.0:1 on white (fails AA) |
| `--govbb-pink-60` | `#da5298` | `#da5298` | 3.7:1 on white (AA large only) |
| `--govbb-pink-80` | `#ad1157` | `#ad1157` | 7.0:1 on white (AA) |
| `--govbb-pink-90` | `#820d42` | `#820d42` | 10.1:1 on white (AA) |

### Purple

Purple primitives

| Token | Declared value | Resolved value | Aliased by |
| --- | --- | --- | --- |
| `--govbb-purple-10` | `#f6eff9` | `#f6eff9` | 1.1:1 on white (fails AA) |
| `--govbb-purple-20` | `#ddc0e9` | `#ddc0e9` | 1.6:1 on white (fails AA) |
| `--govbb-purple-40` | `#a962c7` | `#a962c7` | 4.0:1 on white (AA large only) |
| `--govbb-purple-60` | `#7a4396` | `#7a4396` | 6.8:1 on white (AA) |
| `--govbb-purple-80` | `#4a235a` | `#4a235a` | 12.5:1 on white (AA) |
| `--govbb-purple-90` | `#371944` | `#371944` | 15.2:1 on white (AA) |

## Accessibility

Every text and background combination, and every interface graphic, must meet
[SC 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
for text and
[SC 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
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.