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.

--sunshine-500
#E7AB3F
hsl(39 78% 58%)

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.

--fire-500
#D5544F
hsl(2 61% 57%)

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.

--sapling-500
#81A479
hsl(109 19% 56%)

Wave

Cooling, inviting for a swim; also powerful. Wave goes to 90% at each end, with no hue shifts.

--wave-500
#89A6AB
hsl(189 17% 60%)

Sorbet

Refreshing on a hot summer day. Sorbet is cooled and desaturated a touch at the lighter end to avoid becoming saccharine.

--sorbet-500
#C1827A
hsl(7 36% 62%)

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.

--coffee-500
#BBA481
hsl(36 30% 62%)

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.

--gloaming-500
#4F4D4B
hsl(30 3% 30%)

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.

--limestone-500
#F2F2E7
hsl(60 30% 93%)

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: base500, dark550, extra-dark600, pale450, extra-pale400
  • Sunshine / Gloaming / Limestone mapping: base500, dark600, extra-dark700, pale400, extra-pale300