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, such as text and iconography, alongside colour to convey meaning. This applies to graphs, diagrams, or indicators of status in notices and alerts (e.g., success, warning, error).
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 grey are used for text, borders, backgrounds, and shadows.
Colour tokens
Color tokens define the colour palette for components and global styles.
Using these tokens helps maintain consistency when building experiences. Consistent, recognizable, and accessible colours allow people to complete tasks more efficiently.
Always use the Design System colour styles, as they meet or exceed all accessibility requirements.
Text
| Colour | Sass variable | Hex code | Role |
|---|---|---|---|
$scss_variable_tbc |
#1B1F22 |
Primary text | |
$scss_variable_tbc |
#363D44 |
Secondary text | |
$scss_variable_tbc |
#525C66 |
Tertiary text |
Links
| Colour | Sass variable | Hex code | Role |
|---|---|---|---|
$scss_variable_tbc |
#15487A |
Link | |
$scss_variable_tbc |
#1F6BB7 |
Link hover | |
$scss_variable_tbc |
#15487A |
Link visited |
State
| Colour | Sass variable | Hex code | Role |
|---|---|---|---|
$scss_variable_tbc |
#363D44 |
Input border colour | |
$scss_variable_tbc |
#1B1F22 |
Default focus state border 2 | |
$scss_variable_tbc |
#D2D6DB |
Default focus state border 1 | |
$scss_variable_tbc |
#1B1F22 |
Input fields, focus state border | |
$scss_variable_tbc |
#D2D6DB |
Focus colour for input field drop shadow border | |
$scss_variable_tbc |
#E1EDFA |
Focus fill / Hover, Pressing | |
$scss_variable_tbc |
#363D44 |
Selected fill / background |
Status
| Colour | Sass variable | Hex code | Role |
|---|---|---|---|
$scss_variable_tbc |
#65A346 |
Success | |
$scss_variable_tbc |
#DFEED8 |
Success background | |
$scss_variable_tbc |
#FFAF0A |
Warning | |
$scss_variable_tbc |
#FFEECC |
Warning background | |
$scss_variable_tbc |
#B7133A |
Error | |
$scss_variable_tbc |
#F9C8D3 |
Error background | |
$scss_variable_tbc |
#15487A |
Information | |
$scss_variable_tbc |
#DDF1F3 |
Information background |