design tokens
Design tokens name reusable visual decisions such as spacing and colors.
Use this when The same visual role has many slightly different hardcoded values.
without the term
“We have like 14 slightly different grays and random padding values all over the CSS. Can you make a consistent set and use it everywhere?”
with the term · How do you ask a model for design tokens?
Consolidate these repeated visual values into design tokens. Verify one token change updates the intended components without altering unrelated roles.
What is design tokens?
Named values for colors, spacing, type, and radii, such as color-surface or space-4, that components use instead of raw hex codes and pixel values.
Why does design tokens matter when vibe coding?
An agent can add a second palette rather than reuse existing design decisions.
How do you do design tokens?
Define a small semantic set and replace the values for the targeted components.
What goes wrong with design tokens?
Creating tokens but continuing to use raw values at the call sites.