What Are Design Tokens and Why Should You Care

A Recipe Book for Your App's Look

Imagine you have a magic notebook that holds all the colors, sizes, and styles for your app. When you want to use the brand blue, you don't search through 50 different files hoping to find the right shade. You just open the notebook, find "primary blue," and use it.

That's what design tokens are. They're named values — like labels on jars — that hold design choices in one place. A token might be a color, a font size, a spacing value, or a shadow. Each one has a name (like "color-primary" or "spacing-large") and a value (like "#3B82F6" or "24 pixels").

You use the name in your code, and the value gets applied automatically. Want to change the brand color? Change it once in the token file, and every button, link, and header updates at the same time.

Think of it like this: without tokens, every developer on your team might pick their own shade of blue. With tokens, everyone agrees: "the brand blue is color-primary, period."

Stop the Color Chaos

Without design tokens, big apps become a mess. One developer uses #3B82F6 for the brand blue. Another uses #2563EB. A third uses the Slack blue they liked. Within months, the app has 12 different blues, and nobody can figure out which is the "real" one.

Design tokens fix this by making the design choices visible and shared. The marketing team, the developers, and the design tools all look at the same source of truth.

For vibe coders, design tokens are even more important. When you tell an AI to "make a blue button," the AI might pick any blue. But if you set up a token system first and tell the AI "use the color-primary token," the AI uses your brand color — every time. This is how vibe-coded apps actually look professional.

Design tokens also work across platforms. The same token can drive your website, your iPhone app, and your Android app. Change the value once, and all three update.

Name It Once, Use It Everywhere

Design tokens follow a simple pattern. You name a design choice, give it a value, and use the name wherever you need it. The value can be a color, a number, a string, or even a whole bundle of related settings.

The simplest form is a CSS variable. You put your tokens at the top of a stylesheet, then use the names below. Here's the flow:

This pattern works in plain CSS, in design tools like Figma, and in modern frameworks like Tailwind and Styled Components. The "name" and the "value" might look different in each system, but the idea is always the same: separate what your design IS from how it LOOKS in any one place.

A Real Token File You Can Use

Here's a simple token file in CSS. It defines four tokens: a primary color, a secondary color, a small spacing, and a large spacing. The values are inside the :root selector, which means they apply to the whole page.

/* Design tokens — defined once, used everywhere */
:root {
  /* Colors */
  --color-primary: #3B82F6;
  --color-secondary: #8B5CF6;

  /* Spacing */
  --spacing-small: 8px;
  --spacing-large: 24px;
}

/* Use the tokens in your styles */
.button-primary {
  background: var(--color-primary);
  padding: var(--spacing-small)
             var(--spacing-large);
}

.button-secondary {
  background: var(--color-secondary);
  padding: var(--spacing-small)
             var(--spacing-large);
}

Now every button in the app uses these exact values. Want to change the brand color from blue to green? Just update --color-primary in the tokens file. Every primary button on every page changes at once — without you hunting through 200 files.

Knowledge Check

Test what you learned with this quick quiz.