01 FOUNDATIONS
Tokens before literals.
Primitive → semantic → component tokens. Host projects may map legacy variable names, but reusable components consume semantic roles.
Primitives
Spacing
0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
Target size
24px minimum where applicable; 44px preferred on Web and 48dp on Android.
Breakpoints
360, 600, 840, 1200, 1440; validation also covers 320 and 1920.
Semantic roles
| Role | Purpose |
|---|---|
| surface.canvas/default/raised/muted/selected | Hierarchy without decorative effects. |
| text.primary/secondary/inverse/disabled | Readable content hierarchy. |
| action.primary/secondary/danger | Action hierarchy. |
| feedback.success/warning/danger/info | Status plus text/icon, never color alone. |
| focus.ring | Keyboard-visible focus in all themes. |