General concept
- All color categories use visual hierarchy due to general rules
- Colors use design tokens divided into two levels
Color Scales (First level)
On the first level are expressed colors and their values. Every product has its own color palette derived from brand guidelines.
Every color placed in the design system belongs to some scale. All scales have their own names and numbers linked with levels of darkness. For example, the color scale called Golden Sand has 4 steps.
Semantic Colors (Second level)
The semantic Colors are the tokens that are universal for all Spirit design systems. It uses functional naming that points to the connection between token and the object.
All components and objects are colorized thanks to the color tokens with semantics colors (Second level). This "branding" is driven by a system of tokens and uses tokens from the color scales (first level).
Main token categories
- Action (Buttons, links and main actions)
- Background (Components, backdrop and others)
- Border (Components and others)
- Brand (Homepage covers)
- Emotion (Informative, Success, Warning and Danger informations)
- Focus (Focused states)
- Text (Titles, body text and captions)