Getting Started with Design Tokens
Learn how design tokens create a single source of truth for your entire UI. Change one variable, and your whole app updates.
Design tokens are the atomic building blocks of a design system. They represent the smallest design decisions — colors, spacing, typography, shadows — as named variables.
Why Design Tokens?
Instead of hardcoding `#1a1a2e` across 47 files, you define `--primary` once in your CSS. When the brand color changes, you update one line.
This starter kit uses oklch color space for perceptual uniformity. That means a `lightness: 0.5` blue and a `lightness: 0.5` red actually look equally bright to the human eye.
How It Works Here
All tokens live in `globals.css` under `:root` (light mode) and `.dark` (dark mode). The `@theme inline` block in Tailwind v4 registers them as utilities.
:root {
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
}Every component references these tokens via Tailwind classes like `bg-primary` and `text-primary-foreground`. Zero hardcoded values.