Design tokens in CSS

Two layers: raw values with boring names, and semantic names that point at them.

:root {
  /* raw scale */
  --blue-500: oklch(62% 0.19 256);
  --gray-100: oklch(97% 0.005 260);
  --gray-900: oklch(22% 0.02 260);
  --space-4: 1rem;
  --radius-md: 0.5rem;

  /* decisions */
  --surface: var(--gray-100);
  --text: var(--gray-900);
  --gap: var(--space-4);
}

.card {
  background: var(--surface);
  color: var(--text);
  padding: var(--gap);
  border-radius: var(--radius-md);
}

How it works

1. A raw token names a value; a semantic token names a decision.
2. Components only ever use the semantic layer.
3. A theme then re-points the semantic names and touches nothing else.

Keywords and builtins used here

• background
• card
• color
• oklch
• padding
• rem
• var

The run, in numbers

Lines

20

Characters to type

369

Tokens

102

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 72 seconds.

Type this snippet

Step 2 of 3 in Foundations, step 2 of 9 in Organizing CSS.

← Previous Next →