Colours

Colour is versatile; it's used to express emotion and tone, as well as place emphasis and create associations. Colour should always be used in meaningful and intentional ways in order to create patterns and visual cues.

Short description

See codes for all colours and greys in the Swatches tab.

When and how to use it

When using colours choose primary colours (top row in Swatches) first. If more colours are needed, use tint colours (the other rows). For interactive elements it is recommended to use any of the blue colours.

Background colour
  • White #FFFFFF or Grey 100 #F8F8F8
Text colour
Link colour

 

Colour contrast

Do this!

Don't do this!

One example of a colour contrast checker: https://webaim.org/resources/contrastchecker/

Do's and don'ts

Do's
  • Make sure to have good contrast between text colour and background.
Don'ts
  • Again, don’t use white text on a light background, because of accessibilities issues.
  • Don’t make colours lighter except for in graphs. For graphs it’s possible to use several different colours.

Colours

Green

  • Green #60CD18
  • Dark Green 1 #45B400
  • Dark Green 2 #379D00
Yellow

  • Yellow #FFC500
  • Dark Yellow 1 #FFB400
  • Dark Yellow 2 #F8A000
Purple

  • Purple #673AB6
  • Dark Purple 1 #4F2C99
  • Dark Purple 2 #3F2587
Red

  • Red #F03529 
  • Dark Red 1 #D81A1A
  • Dark Red 2 #BB000C
Blue

  • Blue #41B0EE
  • Dark Blue 1 #0092E1
  • Dark Blue 2 #007AC7

Greyscale

Use any shade of grey to support our primary colours. 

Examples of use of colours

Hook-guid-act

(1)

(Above) The component Hook-guide-act in several colours, with a ghost button on coloured background.

Concept sketches (2017)

(1)

(2)

(3)

(4)

(Above) Sketches from the concept work that was done in 2017 when the (then) new design was tested on our public websites.