docs: establish mandatory DESIGN.md color rules and fix plan for all UI/UX

Phase 9: Design Color System Enforcement

This commit creates mandatory design rules to prevent future hardcoded colors:

1. DESIGN_COLOR_RULES.md - MANDATORY REFERENCE FOR ALL FUTURE UI/UX WORK
   - Establishes that NO arbitrary Tailwind colors are allowed
   - Defines semantic color mapping (success, error, warning, info)
   - Provides quick reference guide for color selection
   - Includes enforcement rules for AI agents and developers
   - Maps 20+ hardcoded colors to DESIGN.md equivalents

2. dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md - DETAILED IMPLEMENTATION GUIDE
   - Comprehensive fix plan with line-by-line changes for 20 files
   - 44+ color corrections identified and documented
   - Step-by-step instructions for each file modification
   - Includes before/after code snippets
   - Implementation checklist for tracking progress

3. CLAUDE.md - UPDATED WITH MANDATORY COLOR RULES
   - Added reference to DESIGN_COLOR_RULES.md as required reading
   - Added critical color rule section at top
   - Semantic color mapping quick reference for AI agents
   - Linked related documentation

COLOR MAPPING ENFORCED:
- Success/Healthy: tertiary (#00e639)
- Error/Destructive: error (#ffb4ab)
- Warning/Caution: primary (#ffb781)
- Info/Secondary: secondary (#c8c6c5)
- Muted/Disabled: muted (#474746)

HARDCODED COLORS IDENTIFIED (44+ instances):
- Indigo (3 instances) → primary/secondary
- Green (12 instances) → tertiary
- Red/Rose (20 instances) → error
- Amber/Sky (9 instances) → primary/secondary

All future UI/UX work MUST follow DESIGN_COLOR_RULES.md.

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

CLAUDE.md

@@ -7,6 +7,7 @@ Before taking any action or writing code, you MUST read the following Single Sou
 1. `AI_RULES.md` (Contains your operational constraints, Git rules, and UI fidelity laws).
 2. `PROJECT_ARCHITECTURE.md` (Contains the tech stack, data models, and system logic).
 3. `dev_docs/SESSION_STATE.md` (Contains the current handover status from the previous AI).
+4. `DESIGN_COLOR_RULES.md` (MANDATORY for ALL UI/UX work - No hardcoded Tailwind colors allowed).
 
 **STRICT COMMUNICATION RULE:** 
 Be concise! Do not explain a thousand details unless they are absolutely necessary.
@@ -15,7 +16,23 @@ Do not proceed with any task until you have analyzed these three files.
 
 DO NOT, EVER, USE "uppercase" or "toUpper" in any UI/UX context, nowhere. This SHOULD NOT be used in UI/UX anywhere, no text should be displayed in CAPITAL LETTERS! But do not replace "toUpper" with "toLower" or "uppercase" with "lowercase" either, leave text in UI/UX as is.
 
+## 🎨 CRITICAL COLOR RULE FOR ALL UI/UX WORK
+
+**NO HARDCODED TAILWIND COLORS ALLOWED** ❌
+- ❌ Never use `bg-green-500`, `text-red-600`, `border-blue-400`, etc.
+- ✅ Always use semantic colors from DESIGN.md: `bg-primary`, `text-tertiary`, `bg-error`
+- 📖 **MANDATORY READ:** `DESIGN_COLOR_RULES.md` before ANY frontend code
+
+**Semantic Color Mapping:**
+- ✅ Success/Healthy: `tertiary` (#00e639)
+- ❌ Error/Destructive: `error` (#ffb4ab)
+- ⚠️ Warning/Caution: `primary` (#ffb781)
+- ℹ️ Info/Secondary: `secondary` (#c8c6c5)
+
+See `DESIGN_COLOR_RULES.md` for complete color mapping and examples.
+
 ## Project-Specific Guidelines
 
 - Use TypeScript strict mode
 - All API endpoints must have tests
+- All UI colors MUST follow DESIGN.md (see DESIGN_COLOR_RULES.md)