AI-consumed reference. This skill produces tokens; rules/agent/theme-consistency.md enforces their use. Generator vs enforcer — do not restate OKLCH logic in the rule or token-usage rules here.

Design Tokens (OKLCH, single-source)

One hue drives the whole system. OKLCH keeps perceptual lightness constant across hues, so derived shades stay legible and dark mode is a lightness flip, not a re-pick.

Derivation (single source: --brand-hue)

• primary oklch(0.55 0.18 H) · primary-hover oklch(0.48 0.18 H)
• secondary oklch(0.55 0.07 H) (same hue, low chroma)
• muted oklch(0.55 0.02 H) · border oklch(0.90 0.01 H)
• background/foreground: light = oklch(0.99 0.005 H) / oklch(0.20 0.02 H); dark = flip → oklch(0.16 0.02 H) / oklch(0.95 0.01 H).

Keep chroma restrained (house style: one dominant hue + sharp accent, no rainbow).

Detect Tailwind v4 vs v3, emit accordingly

• v4 (@import "tailwindcss" / @theme in CSS, no tailwind.config.js colors) → emit an @theme block.
• v3 (tailwind.config.{js,ts} present) → emit CSS variables + reference them in theme.extend.colors.