The token model
Tokens are named decisions consumed by every compatible component. They keep related controls consistent and allow global changes without editing every node.
- Colors cover surfaces, text, borders, brand actions and semantic states.
- Typography covers reviewed font families, weights, line height, tracking and locale overrides.
- Layout tokens cover spacing, width, radius, border and shadow scales.
Set up the brand
- Choose a self-hosted reviewed font pairing and verify every enabled locale.
- Set surface and text colors before accent colors.
- Tune the spacing and radius scale with package cards, forms and navigation visible.
- Save the result as a project preset only after contrast diagnostics pass.
Use overrides sparingly
A component override is appropriate for a deliberate exception. Repeated overrides usually mean the shared token or reusable definition should change instead.
Always review hover, focus, disabled, loading, empty and error simulations; the default state alone is not acceptance evidence.