Introduction
Our color system is designed to create a clear interface, support the proper hierarchy of information on the page and bring attention to the most important elements. Each color comes with a set of tones (lighter tints and darker shades) with values adjusted for light and dark modes.
Semantic colors
The semantic colors have been carefully chosen to fulfill digital products' needs of guiding users' attention to important actions and communicating the system's feedback. The usage of those colors is strictly connected to the meaning they convey. We have 5 semantic color palettes: indigo, green, blue, orange, and red, with each consisting of 13 tones, with variations for light an dark mode.
Semantic colors' meaning
Indigo is used for primary and secondary actions and for strong accent elements with no semantic meaning. Thanks to its high contrast and saturation it strongly attracts user's attention so it is used sparingly to keep the maximum impact.
Green is used to communicate favourable outcome like successful task completion, approved status, confirmed payement.
Blue is used to communicate informative and supportive feedback or task in progress, that doe snot require any action from the user.
Orange is used to raise user's caution to prevent a mistake or error from occurring, also used for statuses that require user's action.
Red is used to communicate errors, overdue tasks, convey information that might cause serious problems for the user or their business, and destructive actions that result in irreversible data and/or system changes.
Those roles are embedded in our color tokens naming structure, to further guide you when applying them in the deisgn or code.
Neutral
The Brand Night color palette has been expanded to include black and white, resulting in a neutral range of colors. While these colors do not carry specific semantic meanings, they are utilized for less prominent actions and to indicate disabled states of components. Additionally, they play a crucial role in establishing a visual hierarchy within the system, as they are applied to backgrounds, text, and shapes across various elements. The night palette encompasses a total of 13 tones, offering variations for both light and dark modes.
Categorical colors
These colors don't have any specific meaning tied to them. They are purely used to create separate categories of data. There should be no impact on the user's experience if one categorical color was to be replaced by another. They are mainly used for data visualization purposes. We have 6 categorical color palettes: denim, lavender, lime, mustard, tangerine, and ruby, with each consisting of 10 tones. Categorical colors' light and dark mode variations are using the same values, in reversed order.
Accessibility in color
We comply with WCAG AA standard contrast ratios:
- 3:1 for any elements essential to understanding the experience and text 24px or larger (WCAG 1.4.11)
- 4.5:1 for text smaller than 24px (WCAG 1.4.3)
Applying color with design tokens
Colors should only be applied through our design tokens. This changes the way we think about using colors: instead of choosing a specific value from the palettes, you need to think about the role of the component and choose a matching design token. Each token's name should guide you in this decision, and for more information, you can also check the tokens' description.
Colors in code
All colors in this palette are available through design tokens and follow the naming pattern of color-{common_name}-{primary}-{number}. For example:
- JavaScript $color-indigo-500
- CSS var(--color-indigo-500)
Using colors that are not available through our sematic design token or components directly is considered an anti-pattern, and should be avoided whenever possible.