Brand Alignment
The suite of colours comes from the Standard Life colour palette. The colours selected are used to meet AA standards and best practices for user interface (UI) design.
Design Tokens
Colour values are assigned to design tokens, which are aligned with Figma design files and platform codebases. This maintains alignment between design and development.
Below is an overview of how the colours are assigned through design tokens.
Primitives
Each colour has a spectrum that goes from light to dark across twelve values.
Each primitive colour token is named from 000 (lightest) through to 110 (darkest) to create unique namespacing, for example, green-000 or green-110.
Primitive colours are used as values for semantic tokens; these are set as aliases.
Primitive tokens exist to provide a palette for the semantic and component tokens.
Semantic
Use semantic colours/tokens for interface design. The naming convention is based on intent, which guides and assists in directing the correct usage of tokens.
Component
Semantic tokens have the benefit of being reusable, which in turn reduces the number of tokens needed. However, specific components that are used frequently, such as Cards, use component-specific tokens.
This makes it easier to manage a high volume of components from a small, dedicated set of tokens.
Colour contrast
When using any text or icons on a surface, it's essential for accessibility that there is a suitable colour contrast. This can be tested using a range of Figma plugins or online tools.