init-brand-tokens

# /init-brand-tokens — Design System Token Generation

<context>
**Git Root**: !`git rev-parse --show-toplevel 2>/dev/null || echo "."`

**Existing Tokens**: !`test -f design/systems/tokens.json && echo "exists" || echo "missing"`

**Tailwind Config**: !`test -f tailwind.config.js && echo "found (js)" || test -f tailwind.config.ts && echo "found (ts)" || echo "missing"`

**Node Version**: !`node --version 2>/dev/null || echo "not installed"`

**Project Mode**: !`test -d app -o -d src -o -d components && echo "brownfield (UI exists)" || echo "greenfield (new project)"`

**Reference Documentation**: @.claude/skills/design-tokens/SKILL.md
</context>

<objective>
Initialize design system tokens in `design/systems/tokens.json` and `tokens.css` using OKLCH color space with WCAG 2.1 AA contrast validation. Optionally generates shadcn/ui-compatible `components.json` and CSS variable aliases.

**Modes**:
- **Brownfield**: Scan existing code (UI, emails, PDFs, CLI, charts, docs) for color/type/spacing patterns, consolidate duplicates
- **Greenfield**: Ask 8 customization questions, generate new OKLCH palette with semantic tokens + shadcn integration
- **From Prototype** (--from-prototype): Extract and formalize colors from discovery prototype's theme.yaml
- **shadcn Integration** (--shadcn): Generate shadcn/ui-compatible configuration alongside OKLCH tokens

**When to use**:
- During `/init-project`, before first `/design`
- After `/prototype discover` to formalize quick-picked palette
- When migrating ad-hoc styles to systematic tokens
- When setting up shadcn/ui components with custom theming

**Surfaces covered**: UI components, MJML/HTML emails, PDF styling, CLI colors, data viz, docs, discovery prototypes, shadcn/ui components
</objective>

## Anti-Hallucination Rules

1. **Never run script without checking dependencies**
   - Verify Node.js installed with `node --version`
   - Check colorjs.io, picocolors, fs-extra in package.json
   - If missing, install with: `pnpm add -D colorjs.io picocolors fs-extra`

2. **Always read generated artifacts before confirming**
   - Read design/systems/tokens.json after generation
   - Read design/systems/tokens.css after generation
   - Quote actual token values when presenting results

3. **Verify Tailwind wiring validation results**
   - Don't claim success without reading validation output
   - Report actual errors/warnings from script
   - Quote file paths for any wiring issues found

4. **Check for existing tokens before regenerating**
   - If tokens.json exists, ask user: update, regenerate, or keep existing
   - Never overwrite without confirmation

---

## shadcn/ui Customization Questions (8 Total)

When in greenfield mode or when `--shadcn` flag is provided, ask these 8 questions to generate a complete design system:

### Question 1: Style Preset
```json
{
  "question": "Visual style preset?",
  "header": "Style",
  "multiSelect": false,
  "options": [
    {"label": "Default (Recommended)", "description": "Clean, balanced - shadcn 'default' style, comfortable density"},
    {"label": "New York", "description": "Refined, sophisticated - shadcn 'new-york' style"},
    {"label": "Minimal", "description": "Ultra-clean, lots of whitespace - spacious density"},
    {"label": "Bold", "description": "Strong visual presence - compact density"}
  ]
}
```

### Question 2: Base Color (Primary Brand Hue)
```json
{
  "question": "Primary brand color?",
  "header": "Base Color",
  "multiSelect": false,
  "options": [
    {"label": "Blue (Recommended)", "description": "Trust, tech, professional - OKLCH hue 250"},
    {"label": "Purple", "description": "Creative, premium - OKLCH hue 285"},
    {"label": "Green", "description": "Growth, eco, finance - OKLCH hue 150"},
    {"label": "Orange", "description": "Energy, friendly - OKLCH hue 50"},
    {"label": "Red", "description": "Bold, urgent - OKLCH hue 25"},
    {"label": "Custom", "description": "Enter custom OKLCH hue value (0-360)"}
  ]
}
```

### Question 3: Theme Mode
```json
{
  "question": "Theme mode support?",
  "header": "Theme",
  "multiSelect": false,
  "options": [
    {"label": "System preference (Recommended)", "description": "Follow OS light/dark setting"},
    {"label": "Light only", "description": "Light background, dark text only"},
    {"label": "Dark only", "description": "Dark background, light text only"},
    {"label": "User toggleable", "description": "Both modes with manual toggle"}
  ]
}
```

### Question 4: Icon Library
```json
{
  "question": "Icon library?",
  "header": "Icons",
  "multiSelect": false,
  "options": [
    {"label": "Lucide (Recommended)", "description": "Clean line icons, shadcn default - lucide-react"},
    {"label": "Heroicons", "description": "Solid + outline variants - @heroicons/react"},
    {"label": "Phosphor", "description": "6 weight variants - @phosphor-icons/react"}
  ]
}
```

### Question 5: Font Family
```json
{
  "question": "Primary font family?",
  "header": "Font",
  "multiSelect": false,
  "options": [
    {"label": "Inter (Recommended)", "description": "Modern sans-serif, excellent readability"},
    {"label": "Geist", "description": "Vercel's modern font family"},
    {"label": "Plus Jakarta Sans", "description": "Geometric, friendly character"},
    {"label": "System default", "description": "Use OS system font stack"}
  ]
}
```

### Question 6: Border Radius
```json
{
  "question": "Border radius style?",
  "header": "Radius",
  "multiSelect": false,
  "options": [
    {"label": "Medium (Recommended)", "description": "Modern, balanced - 8px/0.5rem"},
    {"label": "None", "description": "Brutalist, stark - 0"},
    {"label": "Small", "description": "Minimal, technical - 4px/0.25rem"},
    {"label": "Large", "description": "Friendly, soft - 12px/0.75rem"},
    {"label": "Full", "description": "Playful, pill-shaped - 9999px"}
  ]
}
```

### Question 7: Menu Color
```json
{
  "question": "Menu background style?",
  "header": "Menu Color",
  "multiSe