Colours
Brand, foreground, background, neutrals, grays and accent palettes.
All site colours are defined as CSS custom properties on :root. Each swatch shows the token name, RGB triplet and hex code. Derived tokens that change by colour scheme show both light and dark values.
Foreground and background
These tokens resolve differently in light and dark mode using light-dark(). Each value points at a step from the neutral spectrum above.
Neutrals
Whites, grays and blacks form a continuous spectrum. The five grays sit between --white and --black on a perceptually-uniform ramp (≈15-point lightness step). The --absolute-* endpoints are reserved for pure-white and pure-black fills where absolutely no tint is wanted.
Absolute white
--absolute-white
L 100%--absolute-white
White
--white
L 98%--white
Gray 100
--gray-100
L 83%--gray-100
Gray 300
--gray-300
L 68%--gray-300
Gray 500
--gray-500
L 53%--gray-500
Gray 700
--gray-700
L 38%--gray-700
Gray 900
--gray-900
L 23%--gray-900
Black
--black
L 9%--black
Absolute black
--absolute-black
L 0%--absolute-black