CSS Variables & Design Tokens: Build a Scalable Design System

CSS custom properties (called 'CSS variables') let you define reusable values in CSS with the `--name: value` syntax. Unlike Sass variables, they are live — you can change them at runtime with JavaScript or cascade them through the DOM.

:root {
  --color-brand: #B8FB3C;
  --color-bg: #0a0a0f;
  --color-text: rgba(255,255,255,0.85);
  --radius-md: 12px;
  --space-4: 1rem;
}

Anything defined on `:root` is globally accessible.

Good design token systems have three tiers:

1. Primitive tokens — raw values: `--blue-500: #3b82f6` 2. Semantic tokens — purpose-based: `--color-action: var(--blue-500)` 3. Component tokens — scoped: `--btn-bg: var(--color-action)`

/* Primitives */
:root { --green-400: #B8FB3C; --gray-950: #0a0a0f; }

/* Semantic */
:root { --color-accent: var(--green-400); --color-surface: var(--gray-950); }

/* Component */
.btn-primary { background: var(--color-accent); color: var(--color-surface); }

CSS variables are the simplest way to implement dark/light mode:

:root { --bg: #fff; --text: #111; }
[data-theme='dark'] { --bg: #0a0a0f; --text: rgba(255,255,255,0.85); }

body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }

Toggle mode with: `document.documentElement.dataset.theme = 'dark'`

Combine variables with `clamp()` for fluid responsive values:

:root {
  --font-sm: clamp(0.875rem, 1vw, 1rem);
  --font-xl: clamp(1.5rem, 3vw, 2.5rem);
  --space-section: clamp(3rem, 8vw, 8rem);
}

This eliminates media query breakpoints for typography and spacing entirely.