/ev-designsystem

Configure the visual foundation of your project: colors, typography, spacing, and component conventions. Everything you build with /ev-design and /ev-wireframe uses these tokens.

When to use this

• You're starting a new project and want to set your brand colors
• You want to change the font or adjust the spacing scale
• You want to audit your codebase for design inconsistencies

Four modes

Setup

Run the full design system configuration:

/ev-designsystem

Claude walks you through choosing colors, typography, spacing, and radius. It generates all the CSS variables in globals.css for both light and dark mode, using the oklch color space with WCAG AA contrast ratios.

Update

Modify a specific part of the system:

/ev-designsystem colors

/ev-designsystem typography

Changes only the aspect you specify without re-running the full setup.

Audit

Scan your codebase for violations:

/ev-designsystem audit

Claude checks for hardcoded colors, inconsistent spacing, typography outside the scale, and components not using cn(). It reports what it finds and offers to fix each issue.

Export

Generate a summary of your current design system:

/ev-designsystem export

Exports your tokens and renders a live visual reference at /ev/design-system with color swatches, type scale, spacing, and component samples.

What to do next

With your design system set, run /ev-wireframe to prototype or /ev-design to build polished components.