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.
- White #FFFFFF or Grey 100 #F8F8F8
- Grey 800 #333333. About Typography
- Dark blue 2 #007AC7. About Inline links
Don't do this!
One example of a colour contrast checker: https://webaim.org/resources/contrastchecker/
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.