What are design tokens?

Design tokens are the smallest, named pieces of your design system — a color, a spacing value, a font size, a border radius. Each one is stored once, under a clear name, and referenced everywhere else.

Think of them as variables for design. Instead of writing #FF8A3D in forty different places, you define it once as color.brand.primary and use that name everywhere. Change it in one place, and it updates everywhere it appears.

Tokens are not the same as styles

A style — like "Primary Button" — is a combination of many tokens. A token is a single, atomic value. Styles are built from tokens; tokens are the atoms.

Why tokens beat raw values

Three concrete reasons:

  • Consistency — one source of truth means no more "which orange did we actually use?".
  • Speed — a rebrand that used to take weeks becomes a change in a single file.
  • Scale — tokens bridge design and code, so Figma and your CSS always agree.
If your hex codes are duplicated across twenty files, you don't have a design system — you have a memory problem.

The anatomy of a token

A good token has three parts: a name, a value, and (usually) a type. Here's a minimal set for a brand:

/* color tokens */
--color-brand-primary: #FF8A3D;
--color-brand-accent:  #FF4D6D;
--color-surface:       #0B0908;
--color-text:          #F5EFE8;

/* spacing tokens */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;

Here are those same brand colors, side by side:

#FFB454
#FF8A3D
#FF4D6D
#0B0908
#F5EFE8

The value is the easy part. The name is where most teams get stuck.

Naming tokens so they scale

The biggest mistake is naming a token by its value (--orange) or by a single use (--button-background). Values change and uses multiply.

Name tokens by their role and category instead:

  • color.brand.primary — not color.orange
  • space.4 — not space.button-padding
  • font.size.heading — not font.size.24px

Why value names fail

If you name a token --color-orange and later switch to a blue brand, you're stuck with a blue that's named orange. Role-based names survive change.

From Figma to CSS variables

Tokens work best when they flow from your design tool into code. Design tools export tokens as JSON, and a converter turns that JSON into whatever your stack needs:

{"color": {"primary": "#FF8A3D"}}
→ 
--color-primary: #FF8A3D;

This is exactly what Offset Studio's Token Converter does — paste your JSON, pick the target format, and export clean, ready-to-use code.

Getting started today

You don't need a full system to begin. Here's a 30-minute path:

  1. Audit one screen — list every color and spacing value you used.
  2. Collapse duplicates — merge "six shades of grey" into a single token.
  3. Name by role — brand, surface, text, space.
  4. Store them in one file and reference it everywhere.

Start small, stay consistent, and let the tokens grow with your product.