docs: add mandatory rule - all color changes via frontend/colors.mjs only

Enforce single source of truth for all future color work:
- All DESIGN.md color changes → frontend/colors.mjs exclusively
- No direct edits to tailwind.config.ts or globals.css
- Build script auto-syncs all systems
- Added mandatory rule sections to:
  - CLAUDE.md (entry point for all AI agents)
  - DESIGN_COLOR_RULES.md (enforcement details)

Prevents:
- Color duplication across files
- Sync inconsistencies
- Manual CSS variable maintenance

References COLOR_SYSTEM_ARCHITECTURE.md for implementation.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

DESIGN_COLOR_RULES.md

@@ -187,6 +187,57 @@ const statusColor = `var(--${isError ? 'error' : 'tertiary'})`
 **During code review:**
 - ❌ Flag any hardcoded Tailwind colors (green-*, red-*, blue-*, etc.)
 - ✅ Require fixes before merge
+
+---
+
+## 🔒 MANDATORY: All Color Definition Changes → `frontend/colors.mjs` ONLY
+
+**SINGLE SOURCE OF TRUTH RULE (Updated 2026-04-25):**
+
+When adding, updating, or modifying ANY color from DESIGN.md:
+
+### ✅ CORRECT WORKFLOW:
+1. Edit ONLY: `frontend/colors.mjs` (the authoritative color source)
+2. Update the color definition in the `colors` export object
+3. Run: `npm run build` or `npm run dev`
+4. Build script AUTOMATICALLY:
+   - Generates CSS variables in `globals.css` `:root`
+   - Syncs with `tailwind.config.ts` (which imports from colors.mjs)
+   - Zero manual sync required
+
+### ❌ INCORRECT WORKFLOWS (DO NOT DO):
+- ❌ Editing `tailwind.config.ts` color definitions directly
+- ❌ Manually adding CSS variables to `globals.css`
+- ❌ Updating colors in multiple files
+- ❌ Assuming changes in one file will propagate to another
+
+### Why This Matters:
+| Before | After (colors.mjs SSOT) |
+|--------|------------------------|
+| 2 files to edit | 1 file (colors.mjs) |
+| High sync risk | Zero sync risk |
+| Manual duplication | Auto-generated |
+| Easy to break | Build validates |
+
+### Example: Adding a New Color Variant
+```javascript
+// ✅ CORRECT: Edit frontend/colors.mjs ONLY
+export const colors = {
+  primary: {
+    DEFAULT: "#ffb781",
+    // ← Add new variant here
+    "subtle": "#f5c5a3",  // ← NEW
+  },
+};
+
+// Then: npm run build
+// Result: Automatic sync to all systems
+```
+
+### Reference Documentation:
+- **CLAUDE.md** — Mandatory rule entry point
+- **COLOR_SYSTEM_ARCHITECTURE.md** — Technical implementation details
+- **colors.mjs** — The authoritative source (keep comments updated)
 - ✅ Reference DESIGN_COLOR_RULES.md in comments
 
 **For TypeScript/Linting:**