What is a design token?

Definition

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. Artificial intelligence generation can reference the same named decisions instead of improvising slightly different values throughout an interface.

Acronyms and aliases

design variable synonym

Frequently asked questions

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.

Videos explaining design token