design-tokens

name	design-tokens
description	Generate a cohesive color-token system from ONE OKLCH brand hue — primary/secondary/background/foreground/muted/border with semantic light + dark, emitted as a Tailwind v4 @theme block or a CSS-variables fallback. Use when starting a design system, defining brand colors, setting up theming/dark-mode, or replacing scattered hardcoded colors with a derived palette.
when_to_use	design system setup, brand color palette, OKLCH tokens, dark mode theming, generate CSS variables / Tailwind @theme, single-hue palette
user-invocable	false

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) ·