Design Token

ELI5 — The Vibe Check

Design tokens are the atoms of your design system — the tiny named values like colors, spacing, and font sizes that everything else is built from. Instead of hardcoding '#7c3aed' everywhere, you use 'color-primary.' Instead of 'padding: 16px,' you use 'space-4.' Change the token once, and it updates everywhere. Designers and developers finally speak the same language.

Real Talk

Design tokens are platform-agnostic key-value pairs that represent design decisions — colors, typography, spacing, shadows, breakpoints, and more. They serve as the single source of truth between design tools (Figma) and code (CSS, React, iOS, Android). Tokens can be transformed into any format (CSS custom properties, SCSS variables, Swift constants) using tools like Style Dictionary or Tokens Studio. They're foundational to scalable design systems.

Show Me The Code

/* tokens.css */
:root {
  --color-primary: #7c3aed;
  --color-surface: #1a1a2e;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --radius-md: 8px;
  --font-body: 'Inter', sans-serif;
}

/* Usage */
.card {
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

When You'll Hear This

"Don't hardcode colors — use design tokens." / "Our design tokens sync from Figma to CSS custom properties automatically."