Frontend Design System

Purpose

Build a three-tier design token system with CVA-based component variants and theme-aware architecture. Every visual value is a token. No hardcoded colors, spacing, or typography. Components support dark mode, responsive variants, and accessibility out of the box.

Agent Protocol

Trigger

Exact user phrases: "design system", "design tokens", "component library", "theme", "colors", "typography system", "spacing system", "component API design", "variant system", "create a design system".

Input Context

Before activating, verify:

• The framework is known (React, Vue, Angular) or ask.
• The styling approach is known (CSS modules, Tailwind, styled-components, etc.).

Output Artifact

No file output. Produces token definitions and component APIs as text.