Design Tokens 101: From Theory to Production

Design tokens are the atomic building blocks of every design system that actually scales. Not the ones that look good in a Notion doc and fragment in production — the ones that enforce consistency across platforms, teams, and years. This guide covers everything from theory to implementation.

What Are Design Tokens?

A design token is a named value that stores a design decision. Instead of hardcoding #C9A227 in twelve places, you define it once as "accent" and reference that name everywhere. When the value changes, it changes everywhere. When a new team member joins, they reference "accent" — not a hex code they found in a screenshot.

• Color tokens: background, surface, accent, text, border, diagnostic states
• Typography tokens: font families, sizes (clamp values for fluid type), weights, line heights
• Spacing tokens: section padding, component gaps, container max-widths
• Motion tokens: easing curves, duration presets, animation variants
• Radius tokens: from 6px button corners to 9999px pill shapes
• Breakpoint tokens: responsive thresholds that every component shares

Why Tokens Matter More Than Components

Components get the attention. Tokens do the work. A button component without tokens is a button that works in one context. A button component built on tokens adapts to every context — dark mode, light mode, Edition themes, responsive breakpoints — because its values are inherited, not hardcoded.

At ALO, our token file (styles/tokens.ts) defines the entire visual language in 69 lines. Every component in the system imports from this single file. When we built four distinct Edition palettes — RED, CONCRETE, VELVET, VOID — they did not require four separate design systems. They required four token sets that extend the same base architecture.

Token Architecture: Three Tiers

• Global tokens — Raw values. "#C9A227" is a global token. These are the atoms.
• Alias tokens — Semantic names. "accent" points to "#C9A227". These carry meaning.
• Component tokens — Scoped references. "button.background" points to "accent". These connect to the UI.

Most teams stop at global tokens and call it a day. The power is in the alias layer — where values become decisions, and decisions become a system.

Implementing Tokens in Framer with Tokens Studio

Tokens Studio is the bridge between your token definitions and Framer's design environment. It reads W3C Design Token format (DTCG) JSON files and applies them as Framer styles. Here is the workflow we use:

• Define tokens in alo-tokens.json using W3C DTCG format ($value, $type, $description)
• Import into Tokens Studio — it reads the JSON and creates synced style sets
• Create token sets for each Edition theme (RED, CONCRETE, VELVET, VOID)
• Apply sets contextually — one button component, four Edition appearances
• Push to Figma or Framer — tokens propagate across all linked components

The W3C Design Tokens Format

The W3C Design Tokens Community Group (DTCG) format is the emerging standard. It uses JSON with $value for the token value, $type for the token type (color, dimension, fontFamily, etc.), and $description for documentation. We publish our complete token file at /alo-tokens.json — 120+ tokens across 7 groups. Download it. Study the structure. Use it as a template for your own system.

A design system without tokens is a suggestion. A design system with tokens is a contract. Build the contract first.