Colours
Creams
The default page surface. Cream 100 is the site background, Cream 50 lifts cards and panels off it, Cream 200 sits underneath as a subtle recess.
Cream 50
Cards and panels raised above the page. Token
--color-cream-50Cream 100
The default page background. Token
--color-cream-100Cream 200
Recessed bands and alternating sections. Token
--color-cream-200Off white
Neutral alternative where cream reads too yellow. Token
--color-off-whiteCharcoals
All body copy and headings on light surfaces. Charcoal Light is for hover states and cards sitting on a charcoal ground, never for type.
Charcoal
Primary type, dark surfaces, the wordmark. Token
--color-charcoalCharcoal Light
Hover state on charcoal, cards on a charcoal ground. Token
--color-charcoal-lightGrey
Hairlines, dividers, disabled states. Token
--color-greyAccents
Orange is the only loud colour in the system. Use it sparingly, on the primary action and little else. Tan is the quiet support colour for highlights and large fills.
Orange
Primary buttons, links, the accent in the wordmark. Token
--color-orangeOrange Hover
Hover and active state for orange fills only. Token
--color-orange-hoverTan
Highlight blocks and large decorative fills. Token
--color-tanPairings and contrast
Measured WCAG 2.1 contrast ratios. AA needs 4.5:1 for body copy and 3:1 for text at 24px or above, or 19px bold. Anything below 3:1 is decoration, not text.
Charcoal on cream
Cream on charcoal
Charcoal on tan
Charcoal on orange
Orange on charcoal
White on orange
Orange on cream
Two things to know. White on orange is what the production site ships on primary buttons at 3.25:1, which clears AA Large but not AA for normal text, so keep button labels at 16px medium or heavier. Orange on cream at 2.89:1 fails outright: use it for rules, icons and shapes, never for words.