Color Tokens for white label design system
2023 • My role: UI design, implementation support and handoff
In this project, our aim was to develop colour tokens for a new design system developed after a recent merger. Our goal was to build a shared design foundation that would unify the design systems from both companies, supporting two separate product ecosystems and meeting each of their specific needs.
One specific requirement from our side was for the colour token system to be compatible with the Theme Editor, a tool that enables users to quickly generate themes using a few key colours. We needed to create a flexible and scalable solution that worked well with this existing feature.
The user defines the key colours in the theme editor. Based on these key colours colour scales are generated.
The first level tokens represent every step on the generated colour scale, and not all of them are used on the second level.
The second level tokens are grouped in semantic groups, and reference tokens from the first level. Overlaps can be between groups as you can see in the example: the group Selected and the group Primary are referencing the first level tokens generated from the same key colour.
Third-level tokens are component-specific and reference second-level tokens.
The Token system is designed to accommodate different levels of customisation. Customers without specific customisation needs can quickly set their branding up using the Theme Editor.
For smaller, isolated changes, entire colour groups can be assigned to a new key colour, and colour scale generated from that key colour. This allows for consistent updates across the group without adjusting each token individually, preserving the relationships between values in the group.
For customers requiring maximum control, component specific tokens can be directly adjusted to make sure the UI matches exactly their brand guidelines.
The colour token system was built with accessibility in mind. For instance, in the case of a primary button, the label colour is automatically chosen based on the key colour to ensure high contrast against its background.
