Colour overview

Colour principles

The colour system

Each brand that uses the colour system has its own individual palettes. Each of these brand palettes consist of base colours and extended colours. The base colours refer to the distinctive brand colours, while the extended colours consist of all the useable tints and shades of those base colours.

Example of a base colour

Example of extended colours

Start your designs using the base colours first, as these are the distinctive colours that users attribute to the brand. Once you’ve used the base colours in your designs, the extended colours come in handy for creating contrast, adding subtle backgrounds, highlighting various interactive states and much more.

Brand palette

The brand palette contains the colours often most associated with a particular brand. They are split into primary, secondary, and sometimes tertiary palettes. The primary brand palette should be used first and foremost, as it is the brand's most recognisable colours. The secondary and tertiary brand palettes should be used to further accent and distinguish the brand.

Primary brand palette

The primary brand palette features the core colours of the brand. It’s important to lead with the primary brand palette, especially when you’re introducing the brand for the first time.

Secondary brand palette

The secondary brand palette features complimentary brand colours that are also associated by users with the brand. They should be used sparingly and in combination with the primary brand palette.

Monochrome palette

The monochrome palette is a shared group of colours that is best used to provide contrast and neutrality to your designs. Use the monochrome palette for text contrast, as well as icons, backgrounds, key-lines and interactive states.

Interaction palette

The following colour palettes represent the colours used in interaction states. They are taken from the brand and monochrome palettes, and are used to communicate the default, hover, pressed and disabled states within the brand's UI.

Primary interaction palette

These colours are used for interactions states of elements that use the brand colours as fills, such as primary buttons or active states.

Secondary interaction palette

The secondary interaction colours are used for interactions on elements that use the brand colours as outlines, such as secondary buttons or unselected tags.

Semantic palette

The semantic palette is a shared group of colours that help communicate key messages like errors, warnings, successes and understanding next steps. The consistent use of semantic colours keeps cognitive load low and makes for a unified and engaging user experience across our brands.

Error

Info

Success

Warning

Colour accessibility

To comply with the Web Content Accessibility Guidelines 2.1 AA standard contrast ratios, choose colours from the global palettes that have sufficient colour contrast to make text and UI controls as easy as possible to read and distinguish.

Monochrome palette accessibility

Use Monochrome Dark (#262626) or Monochrome Black (#000000) for body text.

When using Monochrome White (#FFFFFF) or Monochrome Lighter (#F2F2F2) as a background colour, only use Monochrome Dark (#262626) or Monochrome Black (#000000) for text.

When using Monochrome Dark (#262626) as a background colour, only use Monochrome White (#FFFFFF), Monochrome Lighter (#F2F2F2) or Monochrome Light (#D8D8D8) for text.

Semantic palette accessibility

When using Error Base (#D50000), Success Base (#2E7D32) or Information Base (#1976D2) as a background colour, only use Monochrome White (#FFFFFF) for text.

When using Warning Base (#FFD600) as a background colour, only use Monochrome Dark (#262626) or Monochrome Black (#000000) text.

Was this page helpful?