Design Tokens

What is Design Tokens?

Design tokens are the smallest building blocks of a design system: named values such as color-primary-500, font-size-body or space-16. Instead of hard-coding a hex value or pixel size, designers and developers both reference the token, so a change in one place updates everywhere.

Why it matters

Tokens make large products consistent and themeable. They make dark mode, rebrands and multi-brand products much easier, and they give AI tools and code generators a clear vocabulary to follow instead of guessing values.

How it works

Tokens are usually organised in layers: primitive tokens (the raw palette and scale), semantic tokens (what a value means, such as text-muted or surface-raised) and sometimes component tokens. They are stored in Figma variables and exported to code formats such as CSS variables or JSON.

Common mistakes

• Naming tokens after their value (blue-button) instead of their purpose.
• Creating so many tokens that nobody can find the right one.
• Keeping Figma variables and code tokens in separate, drifting lists.
• Skipping semantic tokens, which makes theming painful later.

How Design Monks approaches it

Design Monks defines tokens as part of every design system we build, using Figma variables with clear primitive and semantic layers, and documents them so developers can map them straight into code.

FAQs

Are design tokens only for big companies?

No. Even a small product benefits from a few named colours, sizes and spacing values used consistently.

Do design tokens help with dark mode?

Yes. Semantic tokens let you swap the underlying values for a dark theme without redesigning every screen.

Related terms

• Design System
• Design Handoff
• Responsive Design

Need help with this? See our AI Design System service.