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.

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.

Greyscale 

Use of colour

  • 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.
  • Links: Dark Blue 2
  • Default text colour: #333333
  • Don’t make colours lighter except for in graphs. For graphs it’s possible to use several different colours.

Colour contrast

  • Make sure to have good contrast between text colour and background.
  • Don’t use white text on a light background, because of accessibilities issues.
  • Here is one example of a colour contrast checker: https://webaim.org/resources/contrastchecker/

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.

Q. Different contrasts?

The guideline on contrasts for text on coloured backgrounds differ in Brand Manual and Design Library.

  • Design Library says: use black text on Green, Yellow and Blue. Use white text on Purple and Red.
  • Brand Manual says: use black text on Yellow. Use white text on Green, Purple, Red and Blue.

Is this correct and if so, why is this?

A. Yes, you are correct!

Well done for noticing! Yes, Design Library is mainly for digital purposes and screens requires higher contrasts. If you are interested, see our page about Accessibility  or go to WCAG and read more