Constraints
Constraints & Rules
Guardrails for working with the token system.
Core Rules
| Rule | Rationale |
|---|---|
| Never invent token names — use existing tokens | Maintains traceability to the design system source |
| Never hardcode color/spacing values | Breaks theming and consistency |
| Use semantic tokens in components, not primitives | Primitives bypass theme switching |
| Primitives only when defining new semantics | Semantics reference primitives via var() |
| Import primitives before semantics in CSS | Semantics depend on primitive var() declarations |
| Never edit auto-generated token files | Overwritten on next build; use extension files for manual tokens |
Component Development
- All values from CSS custom properties — no hardcoded values
- Token resolution via a resolver service for dimensional variation
- Semantic tokens only in component styles
Composition Rules
See Composition Checklist for the full decision framework.
Key guardrails:
- Sentiment is content-driven — confirm intent before assigning
- Emphasis reflects criticality — not aesthetics
- Only declared sentiments are valid
- State is never set manually
- Sentiment flows down; emphasis does not
- Never set emphasis on a container