| name | ui-tokens |
| description | Use when setting up a project's visual primitives — colors, spacing, radii, type scale — as variables, so the agent never hard-codes hex values or invents inconsistent spacing across pages. |
ui-tokens
Overview
The visual primitives, defined once as variables. Pull them from the design and the agent uses these exact values everywhere — no hard-coded hex, no off-scale spacing, no per-page inconsistency.
Lives at context/ui-tokens.md, mirrored into your real CSS variables (e.g. globals.css) before any component is built.
When to use
- Project setup, BEFORE the agent builds a single component.
- When colors/spacing are drifting because values are hard-coded.
What goes in it
- Color — every color as a named variable (semantic where possible:
--bg, --fg, --accent, not --blue-500).
- Spacing — the scale (e.g. 4/8/12/16/24/32).
- Border radius — the radius scale.
- Typography — font families, sizes, weights, line-heights.
- Anything else primitive — shadows, z-index, breakpoints.
How to set up
Define them here, then put the same values in your stylesheet as CSS variables first thing. Every later page references the variables.
How to maintain
Add a token when a new primitive appears; never let a raw hex value live in a component.
Common mistakes
- Hard-coded hex in components → the #1 source of drift. All values reference tokens.
- Skipping the globals.css step → the agent guesses and you correct it forever. Tokens first.
