Fundamental units for visual design, such as colors, typography, spacing, and more.
How to name colors in design systems
Common token categories
- colors: foreground, border, background, utility
- typography: font-family, font-size, font-weight, line-height
- spacing: margin, padding, gap
- sizing: width, height
- stroke: border radii, stroke width
- effects: shadow, blur, gradient, etc.
Core color tokens categories
Background colors
- surface colors
- semantic backgrounds
- neutral backgrounds
- brand backgrounds
Foreground colors
- neutral
- semantic
On Colors
- on glass
- on semantic
- on contrast
Border colors
- neutral borders
- semantic borders
- brand borders
Utility colors
- overlay
- shadow
- focus ring
- global
Naming strategy
Primitive tokens
- format: color-{colorName}-{shade}
- examples: color-blue-100, color-red-500
Alias/semantic tokens
- format: color-{intent}-{shade}
- examples: color-action-400, color-warning-400, color-brand-400
Context tokens
- format: {category}-{subcategory}-{modifier}
- examples: background-surface-base, background-surface-elevation, border-brand-primary, background-action, background-action-hover
Incorporating modifiers
State-based modifiers
- background-action
- background-action-hover
- background-action-active
Theme-based modifiers
- color-background-light
- color-background-dark