1Update brand colors, typography, and style - automatically syncs to all design system files.
2 
3<args>$ARGUMENTS</args>
4 
5## Overview
6 
7This command systematically updates:
81. `docs/brand-guidelines.md` - Human-readable brand doc
92. `assets/design-tokens.json` - Token source of truth
103. `assets/design-tokens.css` - Generated CSS variables
11 
12## Workflow
13 
14### Step 1: Gather Brand Input
15 
16Use `AskUserQuestion` to collect:
17 
18**Theme Selection:**
19- Theme name (e.g., "Ocean Professional", "Electric Creative", "Forest Calm")
20 
21**Primary Color:**
22- Color name (e.g., "Ocean Blue", "Coral", "Forest Green")
23- Hex code (e.g., #3B82F6)
24 
25**Secondary Color:**
26- Color name (e.g., "Golden Amber", "Electric Purple")
27- Hex code
28 
29**Accent Color:**
30- Color name (e.g., "Emerald", "Neon Mint")
31- Hex code
32 
33**Brand Mood (for AI image generation):**
34- Mood keywords (e.g., "professional, trustworthy, premium" or "bold, creative, energetic")
35 
36### Step 2: Update Brand Guidelines
37 
38Edit `docs/brand-guidelines.md`:
39 
401. **Quick Reference table** - Update color names and hex codes
412. **Brand Concept section** - Update theme name and description
423. **Color Palette section** - Update Primary, Secondary, Accent colors with shades
434. **AI Image Generation section** - Update base prompt, keywords, mood descriptors
44 
45### Step 3: Sync to Design Tokens
46 
47Run the sync script:
48```bash
49node .claude/skills/brand/scripts/sync-brand-to-tokens.cjs
50```
51 
52This will:
53- Update `assets/design-tokens.json` with new color names and values
54- Regenerate `assets/design-tokens.css` with correct CSS variables
55 
56### Step 4: Verify Sync
57 
58Confirm all files are updated:
59```bash
60# Check brand context extraction
61node .claude/skills/brand/scripts/inject-brand-context.cjs --json | head -30
62 
63# Check CSS variables
64grep "primary" assets/design-tokens.css | head -5
65```
66 
67### Step 5: Report
68 
69Output summary:
70- Theme: [name]
71- Primary: [name] ([hex])
72- Secondary: [name] ([hex])
73- Accent: [name] ([hex])
74- Files updated: brand-guidelines.md, design-tokens.json, design-tokens.css
75 
76## Files Modified
77 
78| File | Purpose |
79|------|---------|
80| `docs/brand-guidelines.md` | Human-readable brand documentation |
81| `assets/design-tokens.json` | Token definitions (primitive→semantic→component) |
82| `assets/design-tokens.css` | CSS variables for UI components |
83 
84## Skills Used
85 
86- `brand` - Brand context extraction and sync
87- `design-system` - Token generation
88 
89## Examples
90 
91```bash
92# Interactive mode
93/brand:update
94 
95# With theme hint
96/brand:update "Ocean Professional"
97 
98# Quick preset
99/brand:update "midnight purple"
100```
101 
102## Color Presets
103 
104If user specifies a preset name, use these defaults:
105 
106| Preset | Primary | Secondary | Accent |
107|--------|---------|-----------|--------|
108| ocean-professional | #3B82F6 Ocean Blue | #F59E0B Golden Amber | #10B981 Emerald |
109| electric-creative | #FF6B6B Coral | #9B5DE5 Electric Purple | #00F5D4 Neon Mint |
110| forest-calm | #059669 Forest Green | #92400E Warm Brown | #FBBF24 Sunlight |
111| midnight-purple | #7C3AED Violet | #EC4899 Pink | #06B6D4 Cyan |
112| sunset-warm | #F97316 Orange | #DC2626 Red | #FACC15 Yellow |
113 
114## Important
115 
116- **Always sync all three files** - Never update just brand-guidelines.md alone
117- **Verify extraction** - Run inject-brand-context.cjs after update to confirm
118- **Test image generation** - Optionally generate a test image to verify brand application
119