Tokens

Foundation 3 pages

Colors

OKLCH palette, grayscale, accent, status, semantic mapping

Typography

Font stacks, modular scale, weights, line heights

Spacing

4px base grid, 8 spacing tokens

Systems 3 pages

Elevation

Shadow system, multi-layer composites, focus rings

Export

Copy all tokens as CSS, JSON, or SCSS

Playground

Interactive OKLCH explorer, contrast checker, scale generator

Quick Reference

Category	Token Pattern	Example
Colors	`--fg`, `--bg`, `--accent`, `--ok`, `--warn`, `--err`	`color: var(--fg-2)`
Spacing	`--space-1` through `--space-12`	`padding: var(--space-4)`
Typography	`--ff-b`, `--ff-d`, `--ff-m`, `--fs-*`	`font-size: var(--fs-xl)`
Radii	`--r-s`, `--r-m`, `--r-l`, `--r-xl`, `--r-f`	`border-radius: var(--r-m)`
Shadows	`--sh-s`, `--sh-m`, `--sh-l`, `--sh-xl`	`box-shadow: var(--sh-m)`
Animation	`--ease`, `--dur-f`, `--dur-n`, `--dur-s`	`transition: color var(--dur-n)`