Our users need to have a coherent experience when they interact with our products. In order to achieve this we have principal colours that should be used in all digital products.
Principal colours
Layout colours
To define areas of content, provide structure and rhythm to your design.
- Body #ffffff
- Page background #e4e9ec
- Section background #d4dfe1
- Section background #c3d1d6
- Hero, teaser, banner #2c3841
Text colours
- Body copy #2c3841
- Supporting text #525e67
- Active link #00557f
- Hovered link #e85e13
- Visited link #55007f
Theme colour
Our products need a certain level of visual distinctiveness. This is so users can orientate themselves when moving between different sites.
Picking a theme colour
Your theme colour needs to meet our accessibility guidance, be distinctive from others already in use and fit tonally with our brand. If you would like help and support choosing a theme colour for your product please contact user.experience@jisc.ac.uk
Visualising data with colour
Use these rules when choosing your colours
Get it right in black and white. Make sure your design works in greyscale (black and white) before adding in colour. Don’t assume colours will signal meaning when used on their own.
The safest hue is blue. The richest colour across all types of colour blindness is blue, therefore blue (#00557f) our primary choice.
Red and green should never be seen. Avoid using red and green together as they are difficult to distinguish from one another in the more common types of colour blindness.
(source: ONS Data visualisation > Using colours)