What is a Design Token?

TL;DR

• Design tokens store reusable design decisions as named values.
• Tokens can represent color, spacing, typography, radius, shadows, or motion.
• Semantic tokens describe purpose instead of raw appearance.
• Tokens help keep design and code aligned.
• A token system makes large-scale changes safer and more consistent.

What does a design token look like?

Instead of hard-coding #E5484D everywhere, a system might use color.text.danger.

The semantic name explains the purpose. The underlying value can change without rewriting every usage manually.

Types of tokens

• color
• spacing
• typography
• radius
• border
• shadow
• motion
• breakpoints

Raw vs. semantic tokens

A raw token may be red.500. A semantic token may be text.danger.

Semantic naming makes the relationship to product meaning clearer and supports themes or platform changes more easily.

Design token vs. CSS variable

A CSS variable is one implementation mechanism. A design token is the cross-platform design decision itself and may compile into CSS, iOS, Android, or other formats.

How do teams use tokens?

1. Identify repeated visual decisions.
2. Define a consistent naming model.
3. Separate primitives from semantic meaning where useful.
4. Connect components to tokens.
5. Sync or transform tokens into implementation formats.
6. Govern changes centrally.

Common mistakes

Naming tokens by arbitrary appearance

Purpose-based names scale better than “blueButtonColor.”

Creating tokens for values that never repeat

Not every number needs abstraction.

Letting designers and developers maintain separate token sets

Then drift returns under a different name.

The bottom line

A design token asks: which design decision should have one reusable name so it can stay consistent everywhere it appears?

Related terms

Design system · Component · Component library · Responsive design

Relevant Figr resource

Read How to Use Design Tokens.