Colour serves as a powerful tool that can establish structure, highlight priority actions, communicate status, and convey meaning. It helps distinguish our brand and fosters a familiar and consistent experience across our products.
The following guidelines are based on the Brand hub materials available on Connect, and are designed to extend Brand hub guidance to support the creation of digital products.
How we use colour to enhance usability
Good colour choices can make a significant difference in how people understand and connect with our pages, products and services, and our message.
When designing with colour, it’s important to keep three key principles in mind: intentionality, accessibility, and consistency.
1. We use colour intentionally
We use colour intentionally. It’s not just decoration; colour is meant to be functional.
Our web components and patterns predominantly use neutral colours. Additionally, selected components offer supplementary variants that extend to our core brand colours (and their varying shades), allowing them to work with a wide array of supporting colours, photography, and illustrations.
Sticking to a limited palette ensures that these designs will be effective in various contexts.
2. We don’t rely on colour to convey meaning
Colour vision deficiency affects a significant percentage of our audience. In the UK, approximately 0.5% of adult women and 8% of adult men are colour blind.
To ensure that our designs are accessible to people who cannot see well or distinguish colours, we never use colour as the only means of providing information or requesting an action.
We use additional visual cues like text and iconography, as well as colour, to convey meaning—for example in our graphs or diagrams or to indicate states in notices and alerts (e.g., success, danger, caution).
3. We use colour consistently
The use of colour is often purposefully tied to a specific meaning to support a message or status. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention.
We need to ensure that the purpose and meaning of using colour are clear and consistent across our products.
Colour palette for digital products
Our digital colour palette is split into two distinct groups; Core colours and Neutral colours.
Core colours
Our digital colour palette extends our Core colours into a set of official swatches to allow for much richer and more refined user interfaces.
Each colour offers text contrast accessibility check.
Neutral colours
Shades of gray used for text, borders, backgrounds, and shadows.