Color
Interaction
This list defines interaction color tokens for primary, secondary, and critical actions across different states, ensuring consistency and accessibility in the design system.
| Value | Description | Token Name |
|---|---|---|
| Primary interaction color (default) | ||
| Primary interaction color (hover) | ||
| Primary interaction color (disabled) | ||
| Primary interaction color (pressed) | ||
| Secondary interaction color (default) | ||
| Secondary interaction color (hover) | ||
| Secondary interaction color (disabled) | ||
| Secondary interaction color (dark) | ||
| Critical interaction color (default) | ||
| Critical interaction color (hover) | ||
| Critical interaction color (disabled) | ||
| Critical interaction color (pressed) |
Elevation
This list defines elevation surface tokens for different UI layers, ensuring depth, hierarchy, and visual clarity across the design system.
| Value | Description | Token Name |
|---|---|---|
| Elevation surface (sunken) | ||
| Elevation surface (default) | ||
| Elevation surface (selected) | ||
| Elevation surface (hover) | ||
| Elevation surface (raised) | ||
| Elevation surface (overlay) | ||
| Elevation surface (frame) | ||
| Elevation surface (backdrop) | ||
| Elevation surface (floating) | ||
| Elevation shadow (default) |
Background
Define consistent background colors for different UI elements, enhancing visual harmony and accessibility.
| Value | Description | Token Name |
|---|---|---|
| Background color (primary - default) | ||
| Background color (primary - disabled) | ||
| Background color (brand - default) | ||
| Background color (critical - default) | ||
| Background color (critical - dark) | ||
| Background color (attention - default) | ||
| Background color (positive - default) | ||
| Background color (accent - default) |
Icon
Standardize icon colors to maintain consistency, visibility, and accessibility across different themes and states.
| Value | Description | Token Name |
|---|---|---|
| Icon color (primary - default) | ||
| Icon color (primary - disabled) | ||
| Icon color (brand - default) | ||
| Icon color (brand - hover) | ||
| Icon color (brand - disabled) | ||
| Icon color (critical - default) | ||
| Icon color (critical - hover) | ||
| Icon color (critical - disabled) | ||
| Icon color (attention - default) | ||
| Icon color (positive - default) | ||
| Icon color (accent - default) | ||
| Icon color (static - default) | ||
| Icon color (static - dark) | ||
| Icon color (inverse - default) |
Border
Establish uniform border colors to create clear separations, enhance structure, and improve usability.
| Value | Description | Token Name |
|---|---|---|
| Border color (primary - default) | ||
| Border color (brand - selected) | ||
| Border color (brand - default) | ||
| Border color (brand - disabled) | ||
| Border color (critical - default) | ||
| Border color (critical - hover) | ||
| Border color (critical - disabled) | ||
| Border color (attention - default) | ||
| Border color (positive - default) | ||
| Border color (accent - default) |
Text
Ensure legible and accessible typography by defining consistent text colors for various contexts and contrast levels.
| Value | Description | Token Name |
|---|---|---|
| Text color (primary - default) | ||
| Text color (primary - disabled) | ||
| Text color (secondary - default) | ||
| Text color (secondary - disabled) | ||
| Text color (tertiary - default) | ||
| Text color (brand - default) | ||
| Text color (brand - hover) | ||
| Text color (brand - disabled) | ||
| Text color (critical - default) | ||
| Text color (critical - hover) | ||
| Text color (critical - disabled) | ||
| Text color (critical - dark) | ||
| Text color (attention - default) | ||
| Text color (positive - default) | ||
| Text color (accent - default) | ||
| Text color (static - default) | ||
| Text color (static - dark) | ||
| Text color (inverse - default) |
