Colours
Our colour palette represents our inner sunshine, love of the natural world and occasional fieriness. Combined with our textures it's bold and organic, suggestive of craft rather than mechanisation.
This page covers the palette and how to use it. For implementation details (token names and where they live), see Tokens and CSS.
Sunshine
Warm yellow was the original Contentious colour, though Laura always thought it was orange. It was also the colour of Julius's rucksack. The palette is shifted 10% warmer at the dark end to retain its natural warmth and avoid turning green. The dark end only goes to 20% dark to avoid the dark yellow issue.
Fire
Warm your hands but be careful not to get too close. Fire is cooled and desaturated a little at the paler end to retain its ember-glow and stop it becoming too pink and pastelly. It goes to 80% at the darker end. Beyond that it becomes too dark.
Amber
Warm and resinous. Hold it up to the light and you might find a fossil inside. Desaturated 10% at the pale end, amber is used as the level 2 colour in the Content Health Check, halfway between fire and sunshine.
Sapling
Tended carefully, this will grow into a strong tree. Sapling is cooled and desaturated a little at the paler end to prevent it becoming pastel.
Olive
Dusty leaves on a Mediterranean hillside. Desaturated 10% at the pale end, olive is used as the level 4 colour in the Content Health Check, halfway between sapling and sunshine.
Wave
Cooling, inviting for a swim; also powerful. Wave goes to 90% at each end, with no hue shifts.
Sorbet
Refreshing on a hot summer day. Sorbet is cooled and desaturated a touch at the lighter end to avoid becoming saccharine.
Coffee
Freshly ground (always buy beans). The coffee palette is shifted 20% warmer at the dark end, 5% cooler and 5% desaturated at the light end, to avoid muddiness.
Gloaming
Late evening, first stars beginning to show, faint smell of woodsmoke in the air. Gloaming is designed to be used as a dark background and also as the default text colour.
Lichen
The pale growth on a granite dry-stone wall, or hanging in the mist off the branches of an oak tree. Lichen is a cooler, slightly greyer alternative to limestone, used as the background neutral in the Content Maturity app.
Limestone
Smooth flat rocks next to a Yorkshire beck. Limestone is used as the default background colour. It can suggest handmade paper, especially when combined with textures. Dark only goes to 20% because limestone is designed to be a light tone.
How our colour system works
Each brand colour is a set of primitive steps from 100 (lightest)
to 900 (darkest), in 50-step increments. 500 is the default “base” shade. We mostly use shades near the base colour; our
extended palettes give potential for extra contrast and depth.
Click on a colour to copy its hex value.
Primitives first
New work should use semantic names linked to the numbered primitives
directly, for example --wave-650 or --coffee-300. Palettes are sometimes tuned by hand to keep the character of the
colour and avoid unpleasant hue shifts at the extremes.
Semantic names (recommended)
Where possible, prefer semantic tokens (for example: --colour-text-default, --colour-surface-default, --colour-border-subtle) that map onto primitives. This keeps components expressing intent, and
makes later palette changes (and a potential dark mode) much easier.
Legacy aliases
For backwards compatibility we still expose the older names (--{colour}, --{colour}-dark, --{colour}-pale, etc). These are now just aliases pointing at the primitives in design-tokens.css.
- Default mapping:
base→500,dark→550,extra-dark→600,pale→450,extra-pale→400 - Sunshine / Gloaming / Limestone mapping:
base→500,dark→600,extra-dark→700,pale→400,extra-pale→300