Design Tokens

In Figma, when you define a color style called brand/primary and apply it to thirty elements, you can change that color once and all thirty elements update. That is the power of a single source of truth. CSS custom properties — also called design tokens or CSS variables — give you the exact same superpower in code.

Figma variables → CSS custom properties

Figma concept	CSS equivalent
Color Style brand/primary	--color-primary: #7C3AED;
Color Style text/muted	--color-text-muted: #6B7280;
Spacing variable space/4	--space-4: 1rem;
Radius variable radius/card	--radius-card: 12px;

You define all tokens once at the top of your CSS, on the special :root selector. :root means “the entire document” — so these values are available everywhere.

:root {
  --color-primary: #7C3AED;
  --color-text: #111827;
  --color-text-muted: #6B7280;
  --color-surface: #FFFFFF;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --radius-card: 12px;
}

To use a token, write var(--token-name) wherever you would normally write the value:

.card {
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-card);
}

Why this matters

When your brand color changes from purple to teal, you change one line — --color-primary — and every button, link, and highlight on every page updates automatically. Without tokens, you would need to find and replace every hardcoded #7C3AED in every CSS file.

This is exactly why design systems exist: define decisions once, enforce them everywhere.

Tokens in action

The card below is built entirely from tokens. Try changing --color-primary in the CSS panel — notice how the button and the tag both update at once.

HTMLCSS

<div class="card"> <span class="tag">Product Design</span> <h3 class="card-title">Design Systems</h3> <p class="card-body">Building a single source of truth for color, spacing, and type.</p> <a class="btn-primary" href="#">Read more</a> </div>

💡 If you use a color more than once, it should be a token

Hardcoded values like #7C3AED scattered across your CSS are design debt. Every time the brand color changes, you will miss one. Tokens are not overhead — they are how you maintain a design system in code without breaking things.

Common mistakes designers run into

• Hardcoding color/spacing separately in each component instead of referencing a shared token
• Changing the brand color in Figma without realizing developers have to update it in several places in the code if there’s no token for it

The developer’s perspective

👨‍💻 What developers actually see

Designers see “a color variable in Figma,” but developers see a single CSS variable/design token used across the whole system — change it in one place, and everything referencing it updates.

💡 Real-world example

The W3C Design Tokens Community Group format is an attempt to give tools like Figma and code the same underlying token file, so a color or spacing value has exactly one source of truth instead of two that can drift apart.

Where do you typically define CSS custom properties (tokens)?

Inside a button rule On the :root selector In the HTML head Inside a media query

How do you use a CSS custom property named --color-brand?

color: --color-brand color: var(--color-brand) color: token(--color-brand) color: $color-brand

What is the main benefit of using design tokens?

They make the page load faster They let you change a value in one place and update everywhere They add animations automatically They replace HTML

Submit

Mark as complete