design-system-generator

Define design tokens for colors, typography, spacing, shadows, and radii as TypeScript files, then extend the Tailwind theme from those tokens in tailwind.config.js. Add CSS variables in globals.css for theming and build base components that consume the tokens.

Use class-variance-authority to define variant and size options with Tailwind classes, then merge them with the cn utility. The Button reference includes primary, secondary, outline, ghost, destructive, and link variants plus sm, md, lg, and icon sizes.

Yes, dark mode works through a .dark CSS class that overrides the :root custom properties for background, foreground, muted, and border colors. The Tailwind config sets darkMode to 'class' to match this strategy.

The cn function combines clsx for conditional class names with tailwind-merge to resolve conflicting Tailwind classes. It lets components accept a className prop that safely overrides default styles without duplicate utilities.

Yes, the token files are reference values meant to be replaced with your project brand palette before shipping. Update the primary color scale, semantic colors, fonts, and spacing values, and the Tailwind config picks them up automatically.