9.1 Complete Collections Reference
Tier 1 — Primitive Collections
| Collection Name | Modes | What's Inside |
|---|---|---|
Primitives / Color T1 |
Default | Raw color palette: gray-50…gray-950, purple-100…purple-900, all color scale values |
Primitives / Spacing T1 |
Default | Spacing scale: spacing-1=1px … spacing-64=64px |
Primitives / Typography T1 |
Default | Font sizes, weights, line-heights, letter-spacings as individual tokens |
Primitives / Radius T1 |
Default | radius-none, radius-sm, radius-md, radius-lg, radius-xl, radius-full |
Tier 2 — Semantic Collections
| Collection Name | Modes | What's Inside |
|---|---|---|
Brand Palette T2 |
Brand-A, Brand-B, … | Brand-specific color aliases: brand-base, brand-light, info-base, neutral-dark, etc. |
Semantic / Color T2 |
Light, Dark | 42 color role tokens (7 families × 6 roles) + global surface, on-surface, border, disabled tokens |
Semantic / Typography T2 |
Default (or per-brand) | Named typography tokens: font-size, font-weight, line-height for each scale step |
Tier 3 — Component Collections
Pattern: {Component} / Size, {Component} / Structure, plus the single shared Color / Active.
| Collection Name | Modes | What's Inside |
|---|---|---|
Color / Active T3 |
neutral, brand, info, success, warning, danger, contrast | color, on-color, container, on-container, outline, focus |
Button / Size T3 |
sm, md, lg | Height, padding, font-size, icon-size, gap, radius for each size |
Button / Structure T3 |
Default | Disabled state tokens, structural (non-family) colors |
Toggle / Size T3 |
sm, md | Track dimensions, thumb size |
Toggle / Structure T3 |
Default | Thumb color (white), track-off color (gray), disabled tokens |
Checkbox / Size T3 |
sm, md, lg | Box dimensions, checkmark stroke size |
Checkbox / Structure T3 |
Default | Unchecked border, unchecked bg, checkmark color (white), disabled tokens |
Form Field / Size T3 |
sm, md, lg | Height, padding, label font-size, helper font-size |
Form Field / Structure T3 |
Default | Default border, label color, helper color, error color, disabled tokens |
Tab / Size T3 |
sm, md, lg | Tab height, font-size, indicator thickness |
Badge / Size T3 |
sm, md | Size, padding, font-size |
9.2 Component Collections Index
| Component | Size Modes | Has Structure | Uses Color/Active |
|---|---|---|---|
| Button | sm, md, lg | ✓ | ✓ |
| Icon Button | sm, md, lg | ✓ | ✓ |
| Toggle | sm, md | ✓ | ✓ |
| Checkbox | sm, md, lg | ✓ | ✓ |
| Radio | sm, md, lg | ✓ | ✓ |
| Tab | sm, md, lg | ✓ | ✓ |
| Badge | sm, md | – | ✓ |
| Icon | xs, sm, md, lg, xl | – | ✓ |
| Form Field | sm, md, lg | ✓ | ✓ |
| Divider | – | ✓ | – |
| Chip | sm, md | ✓ | ✓ |
| Accordion | md, lg | ✓ | – |
| Avatar | sm, md, lg | ✓ | – |
| Menu | sm, md | ✓ | ✓ |
| Select | sm, md, lg | ✓ | ✓ |