Color and theme
Cyan Design System uses a color palette that is based on the Cyan “chroma” color scales. The color palette is designed to be accessible, and to provide a consistent and harmonious look and feel across the App(s).
The color scale is also designed to be “themeable” by changing the “chroma” with a custom set of colors with a set with same luminance and saturation values. This allows for a consistent look and feel across the app, while allowing for customization of the color palette.
Tokens
The color tokens for the Desing are defined in the src/tokens/colors directory and have a --color- prefix.
The theme tokens are all defined with values for light and dark modes, and are used to set the colors across the app.
We also provide --color-on- tokens for accessible text colors on top of a given background color.
Additionally, we provide some surface tokens with prefix --surface- that are used to define the backgrounds for the different surfaces in the app.
Base theme
Surfaces and text colors
| Color | Token | Example |
|---|---|---|
| Surface | --color-surface | |
| Surface | --color-surface-1 | |
| Surface | --color-surface-2 | |
| Surface | --color-surface-3 | |
| Surface | --color-surface-4 | |
| Key | --color-on-surface | |
| Text | --color-text | |
| High Emphasis Text | --color-text-high | |
| Low Emphasis Text | --color-text-low |
Contrast and accessibility
Elevation [0], text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation [0], text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation 1, text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation 1, text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation 2, text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation 2, text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation 3, text on surface
High emphasis text on surface
Low emphasis text on surface
Elevation 3, text on surface
High emphasis text on surface
Low emphasis text on surface