Nuxt Design Tokens

Token-driven design with Tailwind 4 @theme static + Nuxt UI semantic classes. The point: brand and dark-mode behaviour live in CSS variables, not Tailwind utility classes. Templates stay semantic; the variables do the work.

When to use this skill

• Registering custom type scales (display sizes, fluid sizes)
• Adding motion curves, brand palettes, or font stacks as tokens
• Building dark-mode-correct surfaces without raw palette classes
• Adding contextual CSS overrides (e.g. an elevated tone within a section)
• Wiring View Transitions for theme toggles
• Configuring component-wide defaults via app.config.ts

Core rules