Files

Daniel Bedeleanu f0a9d28abb 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>

2026-04-25 17:13:56 +03:00

1.8 KiB

Raw Blame History

CLAUDE ENTRY POINT

You are Claude, operating on the TFM aInventory project.

IMMEDIATE MANDATORY ACTION: Before taking any action or writing code, you MUST read the following Single Source of Truth files:

AI_RULES.md (Contains your operational constraints, Git rules, and UI fidelity laws).
PROJECT_ARCHITECTURE.md (Contains the tech stack, data models, and system logic).
dev_docs/SESSION_STATE.md (Contains the current handover status from the previous AI).
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.

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)

1.8 KiB Raw Blame History Unescape Escape

CLAUDE ENTRY POINT

🎨 CRITICAL COLOR RULE FOR ALL UI/UX WORK

Project-Specific Guidelines

1.8 KiB

Raw Blame History