Theme
The color palette is a key element in the design system. It is used to create a visual hierarchy, guide the user's attention, and reinforce the brand identity.
Theme vs. Mode
It is important to understand the difference between the theme and mode.
Theme
The theme is the color palette that is used to style the design system. It is divided into six categories: page, action, info, success, warning, and danger. Each category has a set of tokens that define the color palette.
Mode
The mode is the color scheme that is used to style the design system. It is divided into two categories: light and dark.
Understanding the Color Palette
Cerberus uses a semantic token design to define a theme divided into seven palette categories:
| Palette | Description |
|---|---|
Page | Used for anything on a page that is not an action. |
Action | Used for primary actions on a page. |
Secondary Action | Used for secondary actions on a page. |
Info | Used for informative elements on a page. |
Success | Used for success messages and positive feedback. |
Warning | Used for warning messages and alerts. |
Danger | Used for error messages and negative feedback. |
Understanding the Tokens
Each category has a set of tokens that define the color palette. The tokens create a scalable syntax that scales across the design system.
The tokens use the following naming convention: [palette?]-[usage]-[prominence?]-[interaction?]
| Name | Description |
|---|---|
| Palette | The category/context of where the color is used. |
| Usage | How the color is used within the context. |
| Prominence | The hierarchy of the color used within the page context. |
| Interaction | The element interaction type the color should be applied to. |
Using the Tokens
With the design mentioned above, we can put this into practice by using the tokens to style the components. Let's take a button as an example.
Because a button is an action (an element a user triggers an action with), we would use the Action palette.
| Purpose | Token |
|---|---|
| Background | action.bg.initial |
| Text | action.text.initial |
| Hover BG | action.bg.hover |
| Border | action.border.initial |