Use colour through semantic tokens; reach for the primitive ramp only for a specific shade.
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
Preview
Token
Resolves to
Value
On white
Use for
--govbb-color-brand
--govbb-blue-100
#00267f
13.3:1 AA
ultramarine
--govbb-color-brand-accent
--govbb-yellow-100
#ffc726
1.6:1 fails AA
gold
--govbb-color-ink
--govbb-black-00
#000
21.0:1 AA
--govbb-color-surface
--govbb-white-00
#fff
1.0:1 fails AA
--govbb-color-muted
--govbb-mid-grey-00
#595959
7.0:1 AA
--govbb-color-interactive
--govbb-teal-00
#0e5f64
7.4:1 AA
primary action, checked fill
--govbb-color-interactive-active
--govbb-teal-05
#0a4549
10.7:1 AA
--govbb-color-focus
--govbb-teal-100
#30c0c8
2.2:1 fails AA
focus ring
--govbb-color-focus-danger
--govbb-red-100
#ff6b6b
2.8:1 fails AA
--govbb-color-error
--govbb-red-00
#a42c2c
7.1:1 AA
invalid state
--govbb-color-neutral
--govbb-grey-00
#e0e4e9
1.3:1 fails AA
secondary fill, dividers
--govbb-color-highlight
--govbb-blue-10
#e5e9f2
1.2:1 fails AA
selected surfaces
--govbb-color-tertiary
--govbb-green-00
#00654a
7.1:1 AA
tertiary action
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
Preview
Token
Value
On white
Aliased by
--govbb-white-00
#fff
1.0:1 fails AA
--govbb-color-surface
--govbb-black-00
#000
21.0:1 AA
--govbb-color-ink
--govbb-grey-00
#e0e4e9
1.3:1 fails AA
--govbb-color-neutral
--govbb-mid-grey-00
#595959
7.0:1 AA
--govbb-color-muted
Blue
Preview
Token
Value
On white
Aliased by
--govbb-blue-00
#00164a
17.3:1 AA
--govbb-blue-10
#e5e9f2
1.2:1 fails AA
--govbb-color-highlight
--govbb-blue-40
#99a8cc
2.4:1 fails AA
--govbb-blue-100
#00267f
13.3:1 AA
--govbb-color-brand
Teal
Preview
Token
Value
On white
Aliased by
--govbb-teal-05
#0a4549
10.7:1 AA
--govbb-color-interactive-active
--govbb-teal-00
#0e5f64
7.4:1 AA
--govbb-color-interactive
--govbb-teal-10
#eaf9f9
1.1:1 fails AA
--govbb-link-hover-bg
--govbb-teal-40
#ace6e9
1.4:1 fails AA
--govbb-teal-100
#30c0c8
2.2:1 fails AA
--govbb-color-focus
Green
Preview
Token
Value
On white
Aliased by
--govbb-green-00
#00654a
7.1:1 AA
--govbb-color-tertiary
--govbb-green-10
#e9f9f3
1.1:1 fails AA
--govbb-green-40
#a5e5ce
1.4:1 fails AA
--govbb-green-100
#1fbf84
2.4:1 fails AA
Red
Preview
Token
Value
On white
Aliased by
--govbb-red-00
#a42c2c
7.1:1 AA
--govbb-color-error
--govbb-red-10
#fff0f0
1.1:1 fails AA
--govbb-red-40
#ffc4c4
1.5:1 fails AA
--govbb-red-100
#ff6b6b
2.8:1 fails AA
--govbb-color-focus-danger
Yellow
Preview
Token
Value
On white
Aliased by
--govbb-yellow-00
#e8a833
2.1:1 fails AA
--govbb-yellow-10
#fff9e9
1.1:1 fails AA
--govbb-yellow-40
#ffe9a8
1.2:1 fails AA
--govbb-yellow-100
#ffc726
1.6:1 fails AA
--govbb-color-brand-accent
Pink
Preview
Token
Value
On white
--govbb-pink-00
#ad1157
7.0:1 AA
--govbb-pink-10
#fff4fb
1.1:1 fails AA
--govbb-pink-40
#ffd4f0
1.3:1 fails AA
--govbb-pink-100
#ff94d9
2.0:1 fails AA
Purple
Preview
Token
Value
On white
--govbb-purple-00
#4a235a
12.5:1 AA
--govbb-purple-40
#ddc0e9
1.6:1 fails AA
--govbb-purple-100
#a962c7
4.0:1 AA large only
Accessibility
Every text and background combination must meet
WCAG AA contrast:
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-00); 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.
