Colour

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

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

Red

Intended to be used sparingly as an accent. Colour is based on 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

Off-white

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

Focus

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
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