How tokens are layered
There are three tiers. In your DESIGN.md you author brand primitives — your actual colors, type and spacing. Those feed a fixed set of semantic role tokens: the same names for every brand, so a component written against color.primary works in any brand and every theme. Core component tokens sit on top, mapping each component's parts to those roles.
This page is the role and component vocabulary you author and consume against. The values behind each name differ per brand and per theme (light, dark, color-blind) and aren't shown here — this is the shape, not the palette. (Live values and swatches are a planned addition.)
Semantic / role tokens
Every brand defines exactly these 75 roles in its DESIGN.md — identical names and types, only the values differ. Reference them from your components and they stay correct across brands and themes.
| Group | Token | Type |
|---|---|---|
| color | color.primary | color |
| color | color.on-primary | color |
| color | color.primary-hover | color |
| color | color.primary-pressed | color |
| color | color.secondary | color |
| color | color.on-secondary | color |
| color | color.surface | color |
| color | color.surface-container | color |
| color | color.on-surface | color |
| color | color.on-surface-variant | color |
| color | color.outline | color |
| color | color.background | color |
| color | color.on-background | color |
| color | color.disabled | color |
| color | color.on-disabled | color |
| color | color.error | color |
| color | color.on-error | color |
| color | color.success | color |
| color | color.on-success | color |
| color | color.success-container | color |
| color | color.on-success-container | color |
| color | color.warning | color |
| color | color.on-warning | color |
| color | color.warning-container | color |
| color | color.on-warning-container | color |
| color | color.error-container | color |
| color | color.on-error-container | color |
| typography | typography.display-lg | typography |
| typography | typography.heading-md | typography |
| typography | typography.body-md | typography |
| typography | typography.label-md | typography |
| rounded | rounded.sm | dimension |
| rounded | rounded.md | dimension |
| rounded | rounded.lg | dimension |
| rounded | rounded.full | dimension |
| spacing | spacing.xs | dimension |
| spacing | spacing.sm | dimension |
| spacing | spacing.md | dimension |
| spacing | spacing.lg | dimension |
| spacing | spacing.xl | dimension |
| elevation | elevation.level0 | dimension |
| elevation | elevation.level1 | dimension |
| elevation | elevation.level2 | dimension |
| elevation | elevation.level3 | dimension |
| shadow | shadow.sm | shadow |
| shadow | shadow.md | shadow |
| shadow | shadow.lg | shadow |
| motion | motion.duration-fast | duration |
| motion | motion.duration-base | duration |
| motion | motion.duration-slow | duration |
| motion | motion.easing-standard | cubicBezier |
| motion | motion.easing-emphasized | cubicBezier |
| zIndex | zIndex.base | number |
| zIndex | zIndex.raised | number |
| layer | layer.dropdown | number |
| layer | layer.sticky | number |
| layer | layer.overlay | number |
| layer | layer.modal | number |
| layer | layer.toast | number |
| focusRing | focusRing.width | dimension |
| focusRing | focusRing.offset | dimension |
| focusRing | focusRing.color | color |
| opacity | opacity.disabled | number |
| opacity | opacity.muted | number |
| opacity | opacity.subtle | number |
| blur | blur.sm | dimension |
| blur | blur.md | dimension |
| blur | blur.lg | dimension |
| breakpoint | breakpoint.sm | dimension |
| breakpoint | breakpoint.md | dimension |
| breakpoint | breakpoint.lg | dimension |
| breakpoint | breakpoint.xl | dimension |
| density | density.compact | number |
| density | density.comfortable | number |
| scale | scale.ratio | number |
Core component tokens
These 0 tokens are shared across all brands and added by the system. Each maps a component's part — like button.primary.background — to a semantic role above, so you never redefine them per brand.
| Component | Token | Type |
|---|