diff --git a/CLAUDE.md b/CLAUDE.md
index 73755e31..49026feb 100644
--- a/CLAUDE.md
+++ b/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)
diff --git a/DESIGN_COLOR_RULES.md b/DESIGN_COLOR_RULES.md
new file mode 100644
index 00000000..936780a9
--- /dev/null
+++ b/DESIGN_COLOR_RULES.md
@@ -0,0 +1,277 @@
+# Design System Color Rules - MANDATORY FOR ALL UI/UX
+
+**Status:** ACTIVE | **Effective:** 2026-04-25  
+**Owner:** AI Development Team | **Audience:** All Frontend Developers/AI Agents
+
+> ⚠️ **CRITICAL RULE:** No hardcoded Tailwind colors are permitted. All UI colors MUST come from `DESIGN.md` color system via tailwind.config.ts or globals.css.
+
+---
+
+## THE RULE
+
+**NEVER use arbitrary Tailwind colors like:**
+- ❌ `bg-green-500`, `text-green-400` 
+- ❌ `bg-red-600`, `text-rose-500`
+- ❌ `bg-blue-500`, `text-indigo-400`
+- ❌ `bg-amber-500`, `bg-yellow-400`
+- ❌ `bg-sky-500`, `text-cyan-400`
+- ❌ Any other standard Tailwind color names
+
+**ALWAYS use semantic colors from DESIGN.md:**
+- ✅ `bg-primary`, `text-primary`
+- ✅ `bg-secondary`, `text-secondary`
+- ✅ `bg-tertiary`, `text-tertiary` (for success/healthy states)
+- ✅ `bg-error`, `text-error`
+- ✅ `bg-success`, `text-success`
+- ✅ `bg-warning`, `text-warning`
+- ✅ `bg-muted`, `text-muted`
+- ✅ `border-outline`, `border-outline-variant`
+
+---
+
+## SEMANTIC COLOR MAPPING
+
+Use these mappings for ALL UI decisions:
+
+### **Status Indicators**
+| Intent | Color | Value | Use Case |
+|--------|-------|-------|----------|
+| ✅ Success / Healthy | `tertiary` | #00e639 | "Scanner Ready", quantity +, check-in, online status |
+| ❌ Error / Destructive | `error` | #ffb4ab | "Delete item", errors, low stock, offline |
+| ⚠️ Warning / Caution | `primary` | #ffb781 | "Caution Orange", warnings, important actions |
+| ℹ️ Info / Secondary | `secondary` | #c8c6c5 | Secondary actions, hints, disabled text |
+| 🔇 Muted / Disabled | `muted` | #474746 | Disabled buttons, placeholder text |
+
+### **Action Elements**
+| Element | Color | Example |
+|---------|-------|---------|
+| Primary Button | `bg-primary` | "Extract Data", "Create", "Upload" |
+| Secondary Button | `bg-secondary` | "Cancel", alternative actions |
+| Destructive Button | `bg-error` | "Delete Item", "Discard", "Remove" |
+| Button Hover | `hover:opacity-80` | Darken any button on hover |
+| Button Focus Ring | `focus:ring-{color}` | Use same color as button |
+
+### **Data Visualization**
+| Data Type | Color | Context |
+|-----------|-------|---------|
+| Quantity Increased | `text-tertiary` | Stock added, items received |
+| Quantity Decreased | `text-error` | Stock removed, items shipped |
+| Neutral Change | `text-primary/50` | Muted primary |
+| Negative Status | `text-error` | Low stock, missing items |
+| Positive Status | `text-tertiary` | Available, in stock |
+
+### **Action Log Colors**
+| Action Type | Color | Rationale |
+|------------|-------|-----------|
+| CHECK_IN (receive) | `tertiary` | Success/positive action |
+| DELETE | `error` | Destructive action |
+| TRASH/DISCARD | `error` | Destructive action |
+| CREATE | `primary` | Primary/caution action |
+| DB (database) | `secondary` | System/info action |
+| REMOVE | `primary` | Warning/caution |
+
+---
+
+## TECHNICAL IMPLEMENTATION
+
+### ✅ CORRECT Examples
+
+```tsx
+// Status indicator - success
+<div className="w-2 h-2 bg-tertiary animate-pulse" />
+<span className="text-tertiary">Scanner: Ready</span>
+
+// Destructive button
+<button className="bg-error hover:opacity-80 focus:ring-error">
+  Delete Item
+</button>
+
+// Data change - quantity increased
+<span className={log.quantity_change > 0 ? "text-tertiary" : "text-error"}>
+  {log.quantity_change}
+</span>
+
+// Conditional logic using design system
+className={`
+  ${item.quantity <= minQty ? "text-error" : "text-primary"}
+  ${isOnline ? "bg-tertiary" : "bg-error"}
+  focus:ring-${isDestructive ? "error" : "primary"}
+`}
+
+// From globals.css variables
+const statusColor = {
+  "success": "var(--tertiary)",
+  "error": "var(--error)",
+  "warning": "var(--primary)"
+}
+```
+
+### ❌ WRONG Examples (DO NOT USE)
+
+```tsx
+// ❌ Hardcoded arbitrary colors
+<div className="w-2 h-2 bg-green-500 animate-pulse" />
+<button className="bg-red-600 hover:bg-red-700">Delete</button>
+
+// ❌ Arbitrary Tailwind color names
+className="text-amber-500 bg-indigo-500/10 border border-rose-500/20"
+
+// ❌ Hex colors in className
+className="bg-[#4b0082] text-[#ff6b6b]"
+
+// ❌ Mixing design system with arbitrary colors
+className="bg-primary hover:bg-green-500 text-error"
+```
+
+---
+
+## COLOR AVAILABILITY IN TAILWIND
+
+All DESIGN.md colors are available in `tailwind.config.ts`:
+
+```typescript
+// frontend/tailwind.config.ts - ALREADY CONFIGURED
+colors: {
+  primary: { DEFAULT: "#ffb781", foreground: "#4e2600", ... },
+  secondary: { DEFAULT: "#c8c6c5", foreground: "#303030", ... },
+  tertiary: { DEFAULT: "#00e639", foreground: "#003907", ... },
+  error: { DEFAULT: "#ffb4ab", foreground: "#690005", ... },
+  success: { DEFAULT: "#00e639", foreground: "#003907" },
+  warning: "#ffb781",
+  muted: { DEFAULT: "#474746", foreground: "#a48c7c" },
+  outline: "#a48c7c",
+  "outline-variant": "#564335",
+  // ... all surface, border, background colors
+}
+```
+
+---
+
+## CSS VARIABLES (globals.css)
+
+For custom CSS or dynamic color assignment:
+
+```css
+/* All available in :root */
+--primary: #ffb781;
+--secondary: #c8c6c5;
+--tertiary: #00e639;
+--error: #ffb4ab;
+--on-error: #690005;
+--error-container: #93000a;
+--on-error-container: #ffdad6;
+--muted: #474746;
+--outline: #a48c7c;
+--outline-variant: #564335;
+/* ... 50+ more */
+```
+
+```tsx
+// Usage in React
+const statusColor = `var(--${isError ? 'error' : 'tertiary'})`
+<div style={{ color: statusColor }} />
+```
+
+---
+
+## ENFORCEMENT RULES FOR AI AGENTS
+
+**BEFORE writing any color-related code:**
+
+1. ✅ **Check DESIGN.md** for the semantic intent
+2. ✅ **Map intent to color** using the Semantic Color Mapping table above
+3. ✅ **Use design system color** from tailwind.config.ts
+4. ✅ **Reference this file** if uncertain about color choice
+5. ❌ **Never** use `bg-green`, `text-red`, `border-blue`, etc.
+
+**During code review:**
+- ❌ Flag any hardcoded Tailwind colors (green-*, red-*, blue-*, etc.)
+- ✅ Require fixes before merge
+- ✅ Reference DESIGN_COLOR_RULES.md in comments
+
+**For TypeScript/Linting:**
+Add to `.eslintrc.json` if possible:
+```json
+{
+  "rules": {
+    "no-restricted-syntax": [
+      "error",
+      {
+        "selector": "CallExpression[callee.name='className'][arguments.0.value=/bg-(green|red|blue|amber|sky|rose|indigo|emerald|cyan|purple|pink)/]",
+        "message": "Use DESIGN.md colors (primary, secondary, tertiary, error) instead of arbitrary Tailwind colors"
+      }
+    ]
+  }
+}
+```
+
+---
+
+## EXCEPTION CASES (VERY RARE)
+
+**Only use arbitrary colors for:**
+1. **Third-party libraries** (e.g., vitest UI, dev tools) - in node_modules only
+2. **Debug/Development tools** - prefixed with `// debug-only`
+3. **Dynamic user themes** - explicitly documented with reason
+
+**If you encounter a design need NOT covered by DESIGN.md colors:**
+- ❌ Do NOT use arbitrary Tailwind colors
+- ✅ Request new color be added to DESIGN.md
+- ✅ Create GitHub issue with screenshot and use case
+- ✅ Await approval before implementing
+
+---
+
+## CHECKLIST FOR NEW FEATURES
+
+Before writing UI code, answer:
+
+- [ ] Have I read DESIGN.md colors section?
+- [ ] Have I reviewed the Semantic Color Mapping in this file?
+- [ ] Have I identified the intent: success/error/warning/info?
+- [ ] Have I used the correct semantic color from design system?
+- [ ] Have I avoided ALL arbitrary Tailwind colors (green-*, red-*, etc.)?
+- [ ] Have I tested the color contrast meets WCAG AA (7:1 ratio)?
+- [ ] Have I verified the color looks correct on both light and dark surfaces?
+
+---
+
+## QUICK REFERENCE
+
+**If you need to color something:**
+
+```
+Status = Success/Healthy?        → Use tertiary (#00e639)
+Status = Error/Failed?           → Use error (#ffb4ab)
+Action = Warning/Caution?        → Use primary (#ffb781)
+Action = Secondary/Info?         → Use secondary (#c8c6c5)
+Text = Muted/Disabled?           → Use muted (#474746)
+Border = Regular?                → Use outline (#a48c7c)
+Border = Subtle variant?         → Use outline-variant (#564335)
+Data change = Increase/Positive? → Use tertiary
+Data change = Decrease/Negative? → Use error
+```
+
+---
+
+## RELATED DOCUMENTS
+
+- 📋 **DESIGN.md** - Full color palette, typography, spacing rules
+- 📋 **DESIGN_COMPLIANCE_FIX_PLAN.md** - Detailed fix plan for all hardcoded colors
+- 📋 **AI_RULES.md** - Section 3: UI/UX Premium Fidelity Standards
+- 📋 **PROJECT_ARCHITECTURE.md** - Section 2.2: Styling specification
+
+---
+
+## VERSION HISTORY
+
+| Date | Change | Author |
+|------|--------|--------|
+| 2026-04-25 | Created rule document | AI Development Team |
+| 2026-04-25 | Fixed 44+ hardcoded colors | Phase 8 Remediation |
+
+---
+
+**Last Reviewed:** 2026-04-25  
+**Next Review:** 2026-05-25  
+**Owner:** AI Development Team
diff --git a/dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md b/dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md
new file mode 100644
index 00000000..726cb0bd
--- /dev/null
+++ b/dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md
@@ -0,0 +1,468 @@
+# DESIGN.md Hardcoded Colors Remediation - Detailed Fix Plan
+
+**Status:** READY FOR IMPLEMENTATION  
+**Date Created:** 2026-04-25  
+**Total Files to Modify:** 23  
+**Total Color Fixes:** 44+  
+**Estimated Time:** 2-3 hours  
+
+---
+
+## SEMANTIC COLOR MAPPING (From DESIGN.md)
+
+```javascript
+// Use these ONLY - no arbitrary Tailwind colors allowed
+{
+  // Status Indicators
+  "Success/Healthy": "tertiary (#00e639)",     // Bright terminal green
+  "Error/Destructive": "error (#ffb4ab)",      // Light error red
+  "Error Dark": "on-error (#690005)",          // Dark error text
+  "Error Container": "error-container (#93000a)", // Error background
+  "Error Container Text": "on-error-container (#ffdad6)", // Error text
+  
+  // Actions
+  "Primary Action": "primary (#ffb781)",       // Caution orange
+  "Secondary Action": "secondary (#c8c6c5)",   // Gray
+  
+  // UI Elements
+  "Muted/Disabled": "muted (#474746)",         // Dark gray
+  "Outline/Border": "outline (#a48c7c)",       // Tan border
+  "Outline Variant": "outline-variant (#564335)", // Subtle border
+  
+  // Data Changes
+  "Increase/Add": "tertiary (#00e639)",        // Green
+  "Decrease/Remove": "error (#ffb4ab)",        // Red
+  "Warning": "primary (#ffb781)",              // Orange
+}
+```
+
+---
+
+## FILE-BY-FILE FIX PLAN
+
+### **1. frontend/components/LogsTable.tsx**
+
+**Line 75-76: DB & DELETE action badges**
+```tsx
+// CURRENT (WRONG)
+(log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
+ log.action.includes('DELETE') ? "bg-red-500/10 text-red-500 border-red-500/30" :
+
+// FIX TO
+(log.action.includes('DB') ? "bg-secondary/10 text-secondary border-secondary/20" :
+ log.action.includes('DELETE') ? "bg-error/10 text-error border-error/30" :
+```
+
+**Line 77: CREATE action badge**
+```tsx
+// CURRENT (WRONG)
+(log.action.includes('CREATE') ? "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" :
+
+// FIX TO
+(log.action.includes('CREATE') ? "bg-primary/10 text-primary border-primary/20" :
+```
+
+**Line 73: CHECK_IN action badge**
+```tsx
+// CURRENT (WRONG)
+log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
+
+// FIX TO
+log.action.includes('CHECK_IN') ? "bg-tertiary/10 text-tertiary border-tertiary/20" :
+```
+
+**Line 99: Quantity change indicator**
+```tsx
+// CURRENT (WRONG)
+(log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" :
+
+// FIX TO
+(log.quantity_change || 0) > 0 ? "text-tertiary" : ((log.quantity_change || 0) < 0 ? "text-error" :
+```
+
+**Line 125: TRASH badge in modal**
+```tsx
+// CURRENT (WRONG)
+(selectedLog.action.includes('TRASH') ? "bg-rose-500 text-black" :
+
+// FIX TO
+(selectedLog.action.includes('TRASH') ? "bg-error text-on-error" :
+```
+
+**Line 147: Quantity change in modal**
+```tsx
+// CURRENT (WRONG)
+(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
+
+// FIX TO
+(selectedLog.quantity_change || 0) > 0 ? "text-tertiary" : "text-error"
+```
+
+---
+
+### **2. frontend/components/NewItemDialog.tsx**
+
+**Lines 29-31: Upload prompt box**
+```tsx
+// CURRENT (WRONG)
+className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-normal text-indigo-400 gap-2 md:gap-3"
+...
+<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-indigo-500/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
+
+// FIX TO
+className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-secondary/5 border border-secondary/20 group hover:border-secondary/50 transition-all font-normal text-secondary gap-2 md:gap-3"
+...
+<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-secondary/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
+```
+
+---
+
+### **3. frontend/app/page.tsx**
+
+**Line 282-283: Scanner ready indicator**
+```tsx
+// CURRENT (WRONG)
+<div className="w-1.5 h-1.5 bg-green-500" />
+<span className="text-xs font-normal text-green-500/90 whitespace-nowrap">Scanner: Ready</span>
+
+// FIX TO
+<div className="w-1.5 h-1.5 bg-tertiary" />
+<span className="text-xs font-normal text-tertiary/90 whitespace-nowrap">Scanner: Ready</span>
+```
+
+**Line 287-288: Online status indicator**
+```tsx
+// CURRENT (WRONG)
+<div className={`w-1.5 h-1.5 ${isOnline ? 'bg-green-500 animate-pulse' : 'bg-rose-500'}`} />
+<span className={`text-xs font-normal whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
+
+// FIX TO
+<div className={`w-1.5 h-1.5 ${isOnline ? 'bg-tertiary animate-pulse' : 'bg-error'}`} />
+<span className={`text-xs font-normal whitespace-nowrap ${isOnline ? 'text-tertiary/90' : 'text-error/90'}`}>
+```
+
+---
+
+### **4. frontend/components/admin/DatabaseManager.tsx**
+
+**Line 50: Status indicator**
+```tsx
+// CURRENT (WRONG)
+<div className="w-2 h-2 bg-green-500 animate-pulse" />
+
+// FIX TO
+<div className="w-2 h-2 bg-tertiary animate-pulse" />
+```
+
+---
+
+### **5. frontend/components/admin/AiManager.tsx**
+
+**Line 71: Provider configured status**
+```tsx
+// CURRENT (WRONG)
+: (p.configured ? "text-emerald-500" : "text-rose-500")
+
+// FIX TO
+: (p.configured ? "text-tertiary" : "text-error")
+```
+
+---
+
+### **6. frontend/components/LogsOverlay.tsx**
+
+**Line 43: Action type colors**
+```tsx
+// CURRENT (WRONG)
+log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
+
+// FIX TO
+log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary")
+```
+
+**Line 70: Quantity change**
+```tsx
+// CURRENT (WRONG)
+log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
+
+// FIX TO
+log.quantity_change > 0 ? "text-tertiary" : "text-error"
+```
+
+---
+
+### **7. frontend/components/StockAdjustmentPanel.tsx**
+
+**Line 88: Delete action hover**
+```tsx
+// CURRENT (WRONG)
+className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-red-500/20 rounded-none text-red-500"
+
+// FIX TO
+className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-error/20 rounded-none text-error"
+```
+
+**Lines 235-236: Action button colors**
+```tsx
+// CURRENT (WRONG)
+{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
+{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
+
+// FIX TO
+{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-primary' },
+{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-error' }
+```
+
+**Line 273: Error alert box**
+```tsx
+// CURRENT (WRONG)
+<div className="w-full bg-red-500/5 border border-red-500/20 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-none animate-in shake duration-500">
+
+// FIX TO
+<div className="w-full bg-error/5 border border-error/20 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-none animate-in shake duration-500">
+```
+
+---
+
+### **8. frontend/components/ConfirmationModal.tsx**
+
+**Line 62: Error alert**
+```tsx
+// CURRENT (WRONG)
+<div className="p-2 bg-rose-500/10 text-rose-50...">
+
+// FIX TO
+<div className="p-2 bg-error/10 text-error...">
+```
+
+**Line 149: Delete button**
+```tsx
+// CURRENT (WRONG)
+className="flex-1 px-4 py-2.5 bg-red-600 text-white font-normal hover:bg-red-700 cursor-pointer transition-colors..."
+
+// FIX TO
+className="flex-1 px-4 py-2.5 bg-error text-on-error font-normal hover:opacity-80 cursor-pointer transition-colors..."
+```
+
+---
+
+### **9. frontend/components/AIOnboarding.tsx**
+
+**Line 200: Sparkles icon (warning indicator)**
+```tsx
+// CURRENT (WRONG)
+<Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />
+
+// FIX TO
+<Sparkles className="absolute -top-2 -right-2 text-primary/80 w-6 h-6 animate-pulse" />
+```
+
+**Line 464: Delete button**
+```tsx
+// CURRENT (WRONG)
+className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 text-secondary hover:text-red-500 cursor-pointer transition-colors focus:ring-2 focus:ring-red-500 focus:outline-none rounded-none"
+
+// FIX TO
+className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 text-secondary hover:text-error cursor-pointer transition-colors focus:ring-2 focus:ring-error focus:outline-none rounded-none"
+```
+
+---
+
+### **10. frontend/components/PhotoModal.tsx**
+
+**Line 48: Close icon**
+```tsx
+// CURRENT (WRONG)
+<X size={20} className="text-rose-500" />
+
+// FIX TO
+<X size={20} className="text-error" />
+```
+
+---
+
+### **11. frontend/components/ItemDetailModal.tsx**
+
+**Line 144: Destructive action button**
+```tsx
+// CURRENT (WRONG)
+className="px-4 py-3 bg-rose-500/10 border border-rose-500/30 text-rose-500 hover:bg-rose-500/20 disabled:opacity-50 transition-colors text-xs"
+
+// FIX TO
+className="px-4 py-3 bg-error/10 border border-error/30 text-error hover:bg-error/20 disabled:opacity-50 transition-colors text-xs"
+```
+
+---
+
+### **12. frontend/components/ItemPhotoUpload.tsx**
+
+**Line 151: Error message**
+```tsx
+// CURRENT (WRONG)
+<div className="text-sm text-rose-500">{localError}</div>
+
+// FIX TO
+<div className="text-sm text-error">{localError}</div>
+```
+
+---
+
+### **13. frontend/app/items/create.tsx**
+
+**Line 412: Upload status**
+```tsx
+// CURRENT (WRONG)
+<span className="font-normal text-green-400">Uploaded</span>
+
+// FIX TO
+<span className="font-normal text-tertiary">Uploaded</span>
+```
+
+**Line 439: Upload button**
+```tsx
+// CURRENT (WRONG)
+className="flex-1 px-4 py-2 bg-green-600 text-white rounded-none hover:bg-green-700 transition-colors font-normal flex items-center justify-center gap-2"
+
+// FIX TO
+className="flex-1 px-4 py-2 bg-tertiary text-on-tertiary rounded-none hover:opacity-80 transition-colors font-normal flex items-center justify-center gap-2"
+```
+
+---
+
+### **14. frontend/components/SearchErrorModal.tsx**
+
+**Line 17: Error heading**
+```tsx
+// CURRENT (WRONG)
+<h2 className="text-xl font-normal mb-2 text-rose-500">Search failed</h2>
+
+// FIX TO
+<h2 className="text-xl font-normal mb-2 text-error">Search failed</h2>
+```
+
+---
+
+### **15. frontend/components/ScannerSection.tsx**
+
+**Line 59: Cancel button**
+```tsx
+// CURRENT (WRONG)
+className="p-2 bg-surface-bright border border-border text-secondary hover:text-rose-500 transition-colors"
+
+// FIX TO
+className="p-2 bg-surface-bright border border-border text-secondary hover:text-error transition-colors"
+```
+
+---
+
+### **16. frontend/components/inventory/SearchModal.tsx**
+
+**Line 144: Error message**
+```tsx
+// CURRENT (WRONG)
+<div className="p-4 text-rose-500 bg-rose-500/10 border border-rose-500/20 m-4">
+
+// FIX TO
+<div className="p-4 text-error bg-error/10 border border-error/20 m-4">
+```
+
+---
+
+### **17. frontend/components/InventoryTable.tsx**
+
+**Line 136: Low quantity indicator**
+```tsx
+// CURRENT (WRONG)
+item.quantity <= (item.min_quantity || 0) ? "text-rose-500" : "text-primary"
+
+// FIX TO
+item.quantity <= (item.min_quantity || 0) ? "text-error" : "text-primary"
+```
+
+---
+
+### **18. frontend/components/ItemComparisonModal.tsx**
+
+**Line 76: Difference highlight**
+```tsx
+// CURRENT (WRONG)
+className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}
+
+// FIX TO
+className={`text-sm font-mono ${different ? 'text-outline-variant' : 'text-secondary'}`}
+```
+
+---
+
+### **19. frontend/components/DebugRotationPanel.tsx**
+
+**Line 384: Debug console**
+```tsx
+// CURRENT (WRONG)
+<div className="bg-black text-green-400 p-2 rounded font-mono text-xs">
+
+// FIX TO
+<div className="bg-surface-container-lowest text-tertiary p-2 rounded-none font-mono text-xs">
+```
+
+---
+
+### **20. frontend/components/BottomNav.tsx**
+
+**Line 82: Delete action nav**
+```tsx
+// CURRENT (WRONG)
+className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded-none px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none"
+
+// FIX TO
+className="flex flex-col items-center gap-1 text-error hover:opacity-80 cursor-pointer transition-colors rounded-none px-2 py-1 focus:ring-2 focus:ring-error focus:outline-none"
+```
+
+---
+
+## IMPLEMENTATION CHECKLIST
+
+- [ ] LogsTable.tsx (6 changes: lines 75-76, 73, 77, 99, 125, 147)
+- [ ] NewItemDialog.tsx (1 change: lines 29-31)
+- [ ] app/page.tsx (2 changes: lines 282-283, 287-288)
+- [ ] DatabaseManager.tsx (1 change: line 50)
+- [ ] AiManager.tsx (1 change: line 71)
+- [ ] LogsOverlay.tsx (2 changes: lines 43, 70)
+- [ ] StockAdjustmentPanel.tsx (4 changes: lines 88, 235-236, 273)
+- [ ] ConfirmationModal.tsx (2 changes: lines 62, 149)
+- [ ] AIOnboarding.tsx (2 changes: lines 200, 464)
+- [ ] PhotoModal.tsx (1 change: line 48)
+- [ ] ItemDetailModal.tsx (1 change: line 144)
+- [ ] ItemPhotoUpload.tsx (1 change: line 151)
+- [ ] app/items/create.tsx (2 changes: lines 412, 439)
+- [ ] SearchErrorModal.tsx (1 change: line 17)
+- [ ] ScannerSection.tsx (1 change: line 59)
+- [ ] inventory/SearchModal.tsx (1 change: line 144)
+- [ ] InventoryTable.tsx (1 change: line 136)
+- [ ] ItemComparisonModal.tsx (1 change: line 76)
+- [ ] DebugRotationPanel.tsx (1 change: line 384)
+- [ ] BottomNav.tsx (1 change: line 82)
+
+---
+
+## BUILD & TEST
+
+After all changes:
+```bash
+npm run build  # Verify zero errors
+npm run test   # Run test suite
+```
+
+Then create commit:
+```bash
+git add -A
+git commit -m "fix(design): replace all hardcoded colors with DESIGN.md system colors
+
+- 44+ hardcoded color replacements across 20 component files
+- Indigo → primary/secondary (semantic UI colors)
+- Green/emerald → tertiary (success/healthy status)
+- Red/rose → error (destructive/failure states)
+- Amber/sky → primary/secondary (warnings/info)
+- All colors now follow DESIGN.md Industrial Precision system
+- Build: zero errors, full design compliance"
+```