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:

Do's and don'ts

  • Make sure to have good contrast between text colour and background.
  • 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.



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

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

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

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

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


Use any shade of grey to support our primary colours. 

Examples of use of colours



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

Concept sketches (2017)





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