Colours
Brand, semantic, and universal colour tokens, plus a live token-resolution check and the data-visualisation palette.
Colours
Brand
Primary
Secondary
Accent
Neutral
muted
weakest
weaker
weak
base
strong
stronger
strongest
Semantics
Destructive
Success
Warning
muted
weakest
weaker
weak
base
strong
stronger
strongest
Universal
Black
White
Token resolution check
Reads computed CSS variables at runtime so you can verify the active brand is actually applied. The body text uses --foreground; on Adres it points at --neutral-strong.
Body text sample · this paragraph uses text-foreground; the swatch above for --foreground should be the same colour.
Body text sample · this paragraph uses text-foreground; the swatch above for --foreground should be the same colour.
Data Visualisation
Tableau 10 — production-tested categorical palette, used by D3, Vega, and Plotly as a baseline. Reserved exclusively for data encoding (chart series, map regions, graph nodes). Never use these for UI chrome. Avoid pairing chart-3 (red) against chart-5 (green) without an additional encoding (shape/label).
chart-1
Blue
chart-2
Orange
chart-3
Red
chart-4
Teal
chart-5
Green
chart-6
Yellow
chart-7
Purple
chart-8
Pink
chart-9
Brown
chart-10
Grey
Grouped bar chart
Multi-series line chart