design-system-claudelisted

# Design System for CLAUDE.md ## Purpose Encode a complete design system in CLAUDE.md so Claude generates on-brand, polished code on every attempt. Use semantic token names, explicit constraint rules, and progressive disclosure to keep the file under 300 lines while governing all visual decisions. ## When to Use - Setting up a new project and defining visual standards - Claude is generating inconsistent colors, spacing, or typography - Encoding brand identity into a machine-readable format - Defining dark mode rules, animation defaults, or interaction patterns - Creating a shared design language across multiple components ## Examples **Example 1: New project setup** ``` User: "Set up a design system for my Next.js dashboard" Claude: [Uses design-system-claude-md] Creates CLAUDE.md with semantic color tokens, 4px spacing scale, typography scale, shadow depth system, animation defaults, and interaction patterns. Adds CSS variable definitions in globals.css. ``` **Example 2: Fixing inconsistent output** ``` User: "Claude keeps using random colors and spacing" Claude: [Uses design-system-claude-md] Adds strict token rules to CLAUDE.md: "NEVER hardcode hex values. Use semantic tokens only." Defines complete color, spacing, and radius token sets with usage context. ``` ## CLAUDE.md Design System Template Place this in your project root. Customize tokens to your brand. ```markdown # CLAUDE.md - Design System Governance ## Visual Language and Tokens IMPORTANT: Do not use h