Colour palettes

We create a palette of colours for each brand based around values specified in the brand guidelines.

Each colour has a spectrum that goes from light to dark across twelve values.

Each colour is named from 0 (lightest) through to 110 (darkest) to create unique name spacing (for example, green 0 or green 110).

Colour contrast

When using text or icons on a coloured background, it's important for accessibility that there's suitable colour contrast. This can be tested using a range of Figma plugins or online tools.

Tokens and aliases

Each colour is assigned a token value and is available in Figma under 'Tokens'. But to improve speed and consistency, we also assign the values to aliases under the 'Interface' heading.

The purpose of using tokens and aliases is to build towards a design token standard that will evenutally align with the W3C standard.