/02Colours
Learn how to work with our colour system. Right click to copy raw values.
Scales
Five token scales, each a live 25 → 950 ramp. Every swatch is wired to a CSS variable — change a scale token once and every component and swatch that references it updates. Right-click any swatch to copy its raw value.
Backgrounds
paper
bg
Gray
25
50
100
200
300
400
500
600
700
800
900
950
Primary brand
25
50
100
200
300
400
500
600
700
800
900
950
Status operational
25
50
100
200
300
400
500
600
700
800
900
950
Success semantic
25
50
100
200
300
400
500
600
700
800
900
950
Info semantic
25
50
100
200
300
400
500
600
700
800
900
950
Warning semantic
25
50
100
200
300
400
500
600
700
800
900
950
Error semantic
25
50
100
200
300
400
500
600
700
800
900
950
Instrumentation terminal
bg
panel
line
accent
text-dim
good
warn
crit
- Primary (the blue) stays THE accent — buttons, active nav, links, key figures. Semantic scales are for feedback surfaces only (toasts, banners, validation, charts), never as a second accent.
- Every swatch reads
var(--scale-step); the semantic tokens (--ds-blue,--ds-success…) alias these scales, so updating a scale propagates everywhere at once. - 500 is the base step for each hue; 25–400 tint toward white, 600–950 shade toward black.
- The Status green is reserved for operational state — the live dot uses step 400 (
--ds-live), text-safe ok uses 600 (--ds-ok). It is distinct from the Success feedback scale.
Constant surfaces — never re-themed
notif / bg
#041745
notif / hair
#15347E
notif / text
#6E86BE
notif / text-bright
#9CB3E0
notif / text-data
#C3D2F2
nav / bg
#0D46DB
nav / text
#FFFFFF
nav / text-muted
#BCD0FF
footer / bg
#07256A
footer / panel
#0A2D7A
footer / hair
#1E458F
footer / text
#AEC2EC
footer / text-muted
#8499C8
footer / link-hover
#7FA8FF
hero / bg
#0D46DB
hero / ash
#BCD0FF
hero / dim
#7E9BD8
hero / accent
#9FC2FF
Opacity scale (shown on blue)
opacity / 5
0.05
opacity / 10
0.10
opacity / 16
0.16
opacity / 28
0.28
opacity / 40
0.40
opacity / 60
0.60
White-alpha scale (shown on ink-1)
white-alpha / 5
0.05
white-alpha / 10
0.10
white-alpha / 16
0.16
white-alpha / 28
0.28
white-alpha / 40
0.40
- Blue is the ONLY accent — buttons, active nav, links, key data figures
- Green appears ONLY on the live-status dot — never as a general "success" colour elsewhere
- Constant surfaces (notif/nav/footer/hero) are defined once and never repeated inside a theme override — that's what keeps them fixed across light/dark/blue