title: "Design tokens" slug: "design-tokens" sortOrder: 40

Design tokens

This kit uses an OKLCH colour system with a single accent hue driving the whole palette, plus a dark/light theme toggle. The token source of truth is src/app/globals.css, where the accent and text custom properties (e.g. --brand-accent, --text-primary) are defined and read by every component. src/lib/tokens.ts mirrors a few values for contexts that can't read CSS variables (WebGL/Canvas, SSR) and must be kept in sync.

Changing the accent

Re-hue the kit by editing the accent variables in src/app/globals.css (the display font is set in src/app/layout.tsx) — see CUSTOMIZATION.md for the full token map. Because every component reads the shared custom properties, re-hueing them re-themes the entire kit.

Typography

Fonts are loaded through the framework's font pipeline for zero layout-shift loading — see src/app/layout.tsx.