TokensColors
Color System
Our color system is built in two layers: Primitives (raw color values) and Semantic tokens (role-based colors). Use semantic tokens in your designs for consistent theming and easier maintenance.
28
Semantic Tokens
9
Color Roles
22
Primitive Families
245
Total Primitives
Two-Layer Architecture
Raw values flow through primitives to semantic tokens
#34d399
Emerald.400
Color.Brand.Default
Primitive Color Palettes
22 color families with 11 shades each (50-950) · 245 total colors
Semantic Color Tokens
28 tokens across 9 color roles
Usage Example
/* Use semantic tokens for consistent theming */
.button-primary {
background-color: var(--color-brand);
color: var(--color-text-on-brand);
}
.button-primary:hover {
background-color: var(--color-brand-hover);
}
.card {
background-color: var(--color-card);
border: 1px solid var(--color-card-border);
}