Brand Alignment
The colour palette is derived from the Standard Life brand guidelines. 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 mapped to Figma design assets 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 the correct use of tokens.
Component
Semantic tokens are reusable, which 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.