A design token separates a semantic design decision from one hard-coded value. Tokens can represent an accent color, body spacing, heading scale, panel radius, animation timing, or other recurring property.
Tokens make design systems easier to apply consistently across components and technologies. AI generation can reference the same named decisions instead of improvising slightly different values throughout an interface.
ELI5
A design token is a named value for a repeated design decision such as a color, spacing size, corner radius or animation duration. Components use the name instead of copying a raw value everywhere.
For example, buttons and links can use a token called accent color rather than each storing the same blue code. Changing that one token updates the shared design consistently and gives AI-generated components a clear rule to follow.
What are examples of design tokens?
Examples include color.accent, spacing.medium, typography.heading.large, radius.card, shadow.overlay, and motion.duration.fast.
Why are design tokens useful for generated code?
They give the model stable reusable values, reduce visual drift, and make the resulting interface easier to update and theme.
