Tokens

The foundation layer. Design tokens define colors, typography, spacing, elevation, and animation — every component inherits from these primitives.

Tokens

Foundation

  • Colors — OKLCH palette, grayscale, accent, status, semantic mapping
  • Typography — Font stacks, scale, weights, line heights
  • Spacing — 4px base grid, spacing tokens

Systems

  • Elevation — Shadow system, multi-layer composites
  • 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)