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>
