- 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.
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. Read more about Inline links here
- Default text colour: #333333. More about Typography here
- Background: White or grey #F1F1F1
- Don’t make colours lighter except for in graphs. For graphs it’s possible to use several different colours.
- Make sure to have good contrast between text colour and background.
- Don’t use white text on a light background, because of accessibilities issues, see image above.
- Here is one example of a colour contrast checker: https://webaim.org/resources/contrastchecker/
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.
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