Colour tokens
How to use colour to design consistent, purposeful, and accessible products.
Colour palettes
There are 2 colour palettes: light and dark. Each colour palette is divided into foreground, background, border, and system colours which all have a specific purpose.
Light vs dark palette
Toggle the dark palette colour tokens for the whole page via the switch below. Learn more about palettes.
Foreground colours
Designed to sit on top of background colours to ensure contrast ratios meet WCAG 2.1 level AA accessibility requirements.
| Name | Value | Description |
|---|---|---|
text | #313131 | Used for primary text like body text, headings, and labels to ensure they’re prominent and legible. |
muted | #626262 | Used for secondary text to make it less prominent. |
action | #00558b | Used to indicate interactive components like links and buttons. Don’t use the action colour for non-interactive components as it could confuse users. Also make sure you don’t rely on colour alone to indicate that a component is interactive, use additional visual cues. |
Background colours
Designed to sit under foreground colours to ensure contrast ratios meet WCAG 2.1 level AA accessibility requirements. Each colour palette has 2 main background colours to choose from, the default background (body) and a darker alternative (body-alt). Shades can be used to help differentiate or highlight content against the body background colours.
| Name | Value | Description |
|---|---|---|
body | #FFFFFF | Used for the main background. |
bodyAlt | #ebebeb | Used as an alternative background. |
shade | #f5f5f5 | Used to help differentiate or highlight interface components that sit on `body` background. For example, hover states for interactive components, callouts, and Zebra stripes on tables. |
shadeAlt | #e0e0e0 | Used to help differentiate or highlight interface components that sit on `bodyAlt` background. For example, hover states for interactive components, callouts, and Zebra stripes on tables. |
Border colours
Each colour palette has 2 border colours.
| Name | Value | Description |
|---|---|---|
border | #808080 | Used for borders of non-decorative interface components that require a 3:1 colour contrast ratio. For example, form input field borders are considered non-decorative because if they were removed, form input fields wouldn’t be recognisable. |
borderMuted | #D3D3D3 | Used for decorative interface components that don’t require a 3:1 colour contrast ratio. |
System colours
System colours are used to indicate status. They’re very prominent colours aimed at grabbing the user’s attention. Each system colour has a muted version to be used as a background colour.
| Name | Value | Description |
|---|---|---|
systemSuccess | #00754E | Used to indicate that a task was completed as expected. |
systemSuccessMuted | #E5FFF6 | Used as a background for a Component with a `success` tone. |
systemError | #D10000 | Used to indicate that something is wrong, or a task has failed and needs urgent attention. For example, a form validation error. |
systemErrorMuted | #FFF0F0 | Used as a background for a Component with an `error` tone. |
systemInfo | #008BD1 | Used to provide addition information. |
systemInfoMuted | #E5F6FF | Used as a background for a Component with an `info` tone. |
systemWarning | #D16900 | Used to indicate that taking an action could be risky and that a user should be cautious. |
systemWarningMuted | #FFF2E5 | Used as a background for a Component with a `warning` tone. |
Miscellaneous colours
Miscellaneous colours which do not form part of the above groups.
| Name | Value | Description |
|---|---|---|
selected | #00558b | Used to indicate if an item is selected or active. For example, selected navigation items and tabs. |
selectedMuted | #EBF4FA | Used as a background to communicate the selected state of input components. It is not intended to be used to convey the active item in navigational components. |
overlay | rgba(0, 0, 0, 0.8) | Used as an overlay for modals and other components that sit on top of the main background. The main content area beneath is considered disabled and not interactive. |
overlayMuted | rgba(0, 0, 0, 0.3) | Used as an overlay for drawers that sit on top of the main background, where maintaining some visibility of the main content area beneath may be beneficial. The main content area beneath is considered disabled and not interactive. |
focus | #9263de | Used to highlight interactive components for those navigating via keyboard. |
accent | #F36C52 | Used to add a highlight of branding colours to navigation elements |
Usage guidelines
Use palettes to divide sections
An interface can be divided into rows or sections that span the full width of a screen. A section can use either the light or dark colour palette.
For example, the website header and footer might use the dark palette to make them more prominent, while the content area in between uses the light palette.
Components that sit inside light sections of an interface use the light colour palette. Similarly, components that sit inside dark sections of an interface use the dark colour palette.
See the theming guide for more on how this works in code.
Don’t rely on colour alone to convey meaning
To ensure the colourblind can use our interface, we shouldn’t rely on colour alone to differentiate interface components or convey meaning. Use other visual cues to differentiate interface components. For example, we underline links as well as using the action colour to help differentiate them from other text and clearly indicate they’re interactive.
More tips
- Do pair foreground and background colours.
- Don’t mix light and dark variables.
- Don’t pair foreground with foreground or background with background.