Style guide


The colour palette is deliberately minimal and references traditional printing where black and red were often the only pigments used.

Brand Colours

  • Eigengrau is used for text
  • Red is used sparingly as an accent and buttons
  • Off-white is used as the background colour


Eigengrau is the colour seen by the eye in perfect darkness. It’s not quite black and has a slight blue hue.

  • RGB(22, 22, 29)
  • #16161D
  • $dark


Intended to be used sparingly as an accent. Colour is based on a traditional printers’ reds such as Vermillion. Hue is slightly paler and less orange than print equivalents, as screens tend to render colour more vibrantly.

Colour values: #dc3131 RGB(225, 78, 78)

Variables: $primary $red

Colour values: #f33737 RGB(225, 78, 78)

Variables: $primary-on-dark $red


An off-white colour to mellow the contrast that you can get with pure white.

Colour values: #fafafa RGB(250, 250, 250)

Variables: $white

Grey Palette

  • Light grey is used for backgrounds but never for text
  • Middle Grey is used less important text
  • RGB(243, 243, 244)
  • #f3f3f4
  • $light
  • RGB(92, 92, 27)
  • #5c5c61
  • $middle
  • RGB(22, 22, 29)
  • #16161D
  • $dark

UI Colours

  • Yellow is used for the :focus state
  • In general that means links and form inputs


Colour contrast

The minimum colour contrast ratio recommended by the W3C for text is 4.5:1.

Background Colour Colour Value Text Large Text
Eigengrau Off white 17.20 AAA AAA
Eigengrau Primary on dark 4.63 AA AAA
Middle Grey Eigengrau 3.81 Fail AA
Light Grey Eigengrau 14.69 AAA AAA
Light Grey Middle Grey 3.85 Fail AA
Red Off White 4.44 AA AAA
Yellow Eigengrau 10.96 AAA AAA