Design Tokens at Scale: How Prim Turns Two Colors Into a Full System

Most design systems start with a spreadsheet of hex codes and a prayer. You pick colors that look nice next to each other, then spend weeks discovering they don't work on dark backgrounds, fail contrast checks, or produce muddy mid-tones. Prim takes a different approach.

You give Prim two anchor colors — a primary and an accent — and it generates complete 11-step scales (50 through 950) for both, plus an independent secondary neutral scale with low chroma. Every shade is computed in OKLCH, so lightness values are perceptually uniform across the entire palette.

// Prim generates scales from a single OKLCH anchor
const primary500 = "oklch(0.55 0.25 260)";

// The scale algorithm varies L and C systematically:
// 50:  L=0.97, C=anchor.C * 0.15  (very light tint)
// 100: L=0.93, C=anchor.C * 0.25
// 500: L=anchor.L, C=anchor.C     (your chosen color)
// 900: L=0.27, C=anchor.C * 0.55  (deep shade)

// Surface tokens adapt to mode:
const surface = {
  light: { background: "oklch(0.97 0.01 260)" },
  dark:  { background: "oklch(0.18 0.02 260)" },
};

The surface system is equally systematic. Light mode surfaces use L values between 0.94 and 0.99 with minimal chroma. Dark mode surfaces sit between 0.15 and 0.25. The background gradient, card surfaces, and overlay colors are all derived from your secondary hue, ensuring visual coherence without manual tuning.

Semantic tokens form the bridge between raw scales and components. --prim-color-primary-500 is a scale token. --prim-bg-surface is a semantic token that resolves to different scale values in light vs dark mode. Components only reference semantic tokens, which is why theme switching works without touching component code.