Colour

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. In special circumstances, lighter tints of our colour palette may be used to increase the range of tones available. They should never be the dominant colour or used in isolation. Always start with our core colours and tonal sets before introducing tints. To ensure legibility, always check there is enough contrast between background tints and text colours.

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

Sass variable	Hex code	Role
`$scss_variable_tbc`	`#1B1F22`	Primary text
`$scss_variable_tbc`	`#363D44`	Secondary text
`$scss_variable_tbc`	`#525C66`	Tertiary text

Links

Sass variable	Hex code	Role
`$scss_variable_tbc`	`#15487A`	Link
`$scss_variable_tbc`	`#1F6BB7`	Link hover
`$scss_variable_tbc`	`#15487A`	Link visited

State

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

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