# Color Migration v5→v6 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Migrate all color values in the frontend from design system v5 (ember orange accent, shallow surfaces, yellow warning) to v6 (electric blue accent, deeper charcoal surfaces, amber warning, cyan info).

**Architecture:** Layer 1 updates CSS custom properties in `index.css` (cascades to ~80% of usage). Layer 2 does find-and-replace on hardcoded `rgba(249,115,22,...)` focus border patterns across ~40 component files. Layer 3 replaces `orange-*` Tailwind classes. Layer 4 updates hardcoded hex values in specific files (BrandLogo, EmptyStateIllustrations, landing page, etc.). Each layer commits independently.

**Tech Stack:** React 19, Tailwind CSS v4, CSS custom properties

**Spec:** `docs/superpowers/specs/2026-03-29-color-migration-v6-design.md`

---

### Task 1: Update CSS Custom Properties in `index.css`

This is the highest-impact change — updating the `@theme` block cascades to every component using Tailwind utility classes.

**Files:**
- Modify: `frontend/src/index.css`

- [ ] **Step 1: Update surface colors in the @theme block**

In `frontend/src/index.css`, replace lines 11-18 (the surface color block) with:

```css
  /* ── Surface colors (Deep Charcoal — sidebar darkest) ─ */
  --color-bg-page: #16181f;
  --color-bg-sidebar: #0e1016;
  --color-bg-card: #1e2028;
  --color-bg-card-hover: #252830;
  --color-bg-input: #252830;
  --color-bg-code: #12141a;
  --color-bg-elevated: #2a2d38;
  --color-bg-raised: #303442;
```

- [ ] **Step 2: Update border colors**

Replace lines 28-29 (border colors) with:

```css
  --color-border-default: #2a2e3a;
  --color-border-hover: #3d4252;
```

- [ ] **Step 3: Update accent colors**

Replace lines 31-35 (accent block) with:

```css
  /* ── Accent (electric blue) ───────────────────────── */
  --color-accent: #60a5fa;
  --color-accent-hover: #3b82f6;
  --color-accent-dim: rgba(96,165,250,0.10);
  --color-accent-text: #93c5fd;
```

- [ ] **Step 4: Update semantic colors (warning + add info)**

Replace lines 37-43 (semantic block) with:

```css
  /* ── Semantic colors ───────────────────────────── */
  --color-success: #34d399;
  --color-success-dim: rgba(52,211,153,0.10);
  --color-warning: #fbbf24;
  --color-warning-dim: rgba(251,191,36,0.10);
  --color-danger: #f87171;
  --color-danger-dim: rgba(248,113,113,0.10);
  --color-info: #67e8f9;
  --color-info-dim: rgba(103,232,249,0.10);
```

- [ ] **Step 5: Update Tailwind semantic mappings**

Replace lines 46-64 (Tailwind mappings) with:

```css
  /* ── Tailwind semantic mappings ─────────────────── */
  --color-background: #16181f;
  --color-foreground: #e2e5eb;
  --color-card: #1e2028;
  --color-card-foreground: #e2e5eb;
  --color-popover: #1e2028;
  --color-popover-foreground: #e2e5eb;
  --color-primary: #60a5fa;
  --color-primary-foreground: #ffffff;
  --color-secondary: #2a2d38;
  --color-secondary-foreground: #e2e5eb;
  --color-muted: #2a2d38;
  --color-muted-foreground: #848b9b;
  --color-accent-tw: #2a2d38;
  --color-accent-foreground: #e2e5eb;
  --color-destructive: #f87171;
  --color-destructive-foreground: #ffffff;
  --color-border: #2a2e3a;
  --color-input: #252830;
  --color-ring: #60a5fa;
```

- [ ] **Step 6: Update orange rgba in utility classes**

Replace the `btn-primary-v4` hover/active box-shadow values (lines 194-200):

```css
  &:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.2);
    transform: translateY(-1px);
  }
  &:active {
    box-shadow: 0 0 4px rgba(96, 165, 250, 0.1);
    transform: translateY(0);
  }
```

Replace `tab-active-shadow` (line 229):

```css
  box-shadow: 0 1px 4px rgba(96, 165, 250, 0.08);
```

Replace `card-lift` hover box-shadow (line 237):

```css
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.06);
```

- [ ] **Step 7: Verify it compiles**

Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`

Expected: No errors.

- [ ] **Step 8: Commit**

```bash
git add frontend/src/index.css
git commit -m "feat: migrate index.css to design system v6 color tokens

Accent: orange (#f97316) → blue (#60a5fa)
Surfaces: deeper charcoal range (#16181f page, #1e2028 card)
Warning: yellow (#eab308) → amber (#fbbf24)
Info: new cyan (#67e8f9) token added
All Tailwind semantic mappings updated to match.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

### Task 2: Replace hardcoded `rgba(249,115,22,...)` focus borders across all components

~40 files use `focus:border-[rgba(249,115,22,0.3)]` or similar patterns for input focus states. This is a mechanical find-and-replace.

**Files:** All files listed in the grep output for `rgba(249,115,22` — approximately 40 component and page files.

- [ ] **Step 1: Replace all `rgba(249,115,22,` with `rgba(96,165,250,` across the codebase**

Run this command to do the replacement:

```bash
cd /home/coder/resolutionflow/frontend/src
grep -rl 'rgba(249,115,22' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
  sed -i 's/rgba(249,115,22/rgba(96,165,250/g' "$f"
done
```

This replaces ALL instances: `rgba(249,115,22,0.3)` → `rgba(96,165,250,0.3)`, `rgba(249,115,22,0.10)` → `rgba(96,165,250,0.10)`, etc. The opacity values stay the same.

Note: `index.css` was already updated in Task 1 so this is a no-op for that file's `--color-accent-dim` line.

- [ ] **Step 2: Also replace `rgba(249, 115, 22` (with spaces)**

Some files may use spaced format:

```bash
grep -rl 'rgba(249, 115, 22' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
  sed -i 's/rgba(249, 115, 22/rgba(96, 165, 250/g' "$f"
done
```

- [ ] **Step 3: Verify it compiles**

Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`

Expected: No errors.

- [ ] **Step 4: Commit**

```bash
cd /home/coder/resolutionflow
git add -A frontend/src/
git commit -m "feat: replace all hardcoded orange rgba with blue rgba

Mechanical find-and-replace: rgba(249,115,22,...) → rgba(96,165,250,...)
across ~40 component and page files. Focus borders, hover glows, and
dim backgrounds all now use the blue accent color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

### Task 3: Replace `orange-*` Tailwind classes

~21 files use `orange-400`, `orange-500`, `orange-600` Tailwind color classes. Replace with blue equivalents.

**Files:** All files with `orange-[3456]00` class references.

- [ ] **Step 1: Replace orange Tailwind classes with blue equivalents**

The mapping:
- `orange-300` → `blue-300`
- `orange-400` → `blue-400`
- `orange-500` → `blue-500`
- `orange-600` → `blue-600`

Run:

```bash
cd /home/coder/resolutionflow/frontend/src
grep -rl 'orange-' --include='*.tsx' --include='*.ts' | while read f; do
  sed -i 's/orange-300/blue-300/g; s/orange-400/blue-400/g; s/orange-500/blue-500/g; s/orange-600/blue-600/g' "$f"
done
```

- [ ] **Step 2: Verify it compiles**

Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`

Expected: No errors.

- [ ] **Step 3: Commit**

```bash
cd /home/coder/resolutionflow
git add -A frontend/src/
git commit -m "feat: replace orange-* Tailwind classes with blue-* equivalents

orange-400→blue-400, orange-500→blue-500, orange-600→blue-600
across ~21 component files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

### Task 4: Update hardcoded hex values in specific files

Several files have hardcoded `#f97316`, `#ea580c`, `#fdba74` hex values that don't go through CSS variables.

**Files:**
- Modify: `frontend/src/components/common/BrandLogo.tsx`
- Modify: `frontend/src/components/common/EmptyStateIllustrations.tsx`
- Modify: `frontend/src/constants/categoryColors.ts`
- Modify: `frontend/src/styles/landing.css`
- Modify: `frontend/src/pages/LandingPage.tsx`
- Modify: `frontend/src/assets/brand/icon.svg`
- Modify: `frontend/src/assets/brand/logo-horizontal.svg`
- Modify: `frontend/src/assets/brand/logo-with-tagline.svg`
- Modify: Any remaining files from the grep output for `#f97316|#ea580c|#fdba74`

- [ ] **Step 1: Update BrandLogo.tsx gradient**

In `frontend/src/components/common/BrandLogo.tsx`, replace the gradient on line 22:

```tsx
        background: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
```

Also update the JSDoc comment on line 9:

```tsx
 * Brand logo mark: gradient blue square with rounded corners
```

- [ ] **Step 2: Replace all hardcoded orange hex values across the codebase**

Run:

```bash
cd /home/coder/resolutionflow/frontend/src
# #f97316 → #60a5fa (accent)
grep -rl '#f97316' --include='*.tsx' --include='*.ts' --include='*.css' --include='*.svg' | while read f; do
  sed -i 's/#f97316/#60a5fa/g' "$f"
done

# #ea580c → #3b82f6 (accent-hover)
grep -rl '#ea580c' --include='*.tsx' --include='*.ts' --include='*.css' --include='*.svg' | while read f; do
  sed -i 's/#ea580c/#3b82f6/g' "$f"
done

# #fdba74 → #93c5fd (accent-text)
grep -rl '#fdba74' --include='*.tsx' --include='*.ts' --include='*.css' --include='*.svg' | while read f; do
  sed -i 's/#fdba74/#93c5fd/g' "$f"
done
```

- [ ] **Step 3: Update warning yellow to amber**

```bash
cd /home/coder/resolutionflow/frontend/src
# #eab308 → #fbbf24
grep -rl '#eab308' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
  sed -i 's/#eab308/#fbbf24/g' "$f"
done

# rgba(234,179,8 → rgba(251,191,36
grep -rl 'rgba(234,179,8' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
  sed -i 's/rgba(234,179,8/rgba(251,191,36/g' "$f"
done
```

- [ ] **Step 4: Fix categoryColors.ts duplicates**

After the sed replacements, `frontend/src/constants/categoryColors.ts` will have `#3b82f6` (from `#ea580c`) and `#60a5fa` (from `#f97316`) — but the array already had `#3b82f6` at position 0. Fix the file to have 10 unique colors:

```typescript
export const CATEGORY_COLORS = [
  '#3b82f6', // blue
  '#22c55e', // green
  '#f59e0b', // amber
  '#ef4444', // red
  '#8b5cf6', // violet
  '#0891b2', // cyan
  '#ec4899', // pink
  '#60a5fa', // sky blue
  '#14b8a6', // teal
  '#6366f1', // indigo
] as const
```

This replaces the old `#ea580c` (deep orange) slot with `#0891b2` (cyan) and keeps `#60a5fa` (sky blue) in the old `#f97316` slot.

- [ ] **Step 5: Verify it compiles**

Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`

Expected: No errors.

- [ ] **Step 6: Commit**

```bash
cd /home/coder/resolutionflow
git add -A frontend/src/
git commit -m "feat: replace hardcoded orange hex values with blue equivalents

BrandLogo gradient, EmptyStateIllustrations SVGs, categoryColors,
landing page, brand SVG assets, and all remaining files with
hardcoded #f97316/#ea580c/#fdba74 values.
Also migrates warning #eab308 → #fbbf24 (amber).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

### Task 5: Update landing.css and LandingPage.tsx

The landing page has its own CSS file and inline styles with orange references.

**Files:**
- Modify: `frontend/src/styles/landing.css`
- Modify: `frontend/src/pages/LandingPage.tsx`

- [ ] **Step 1: Read landing.css and fix any remaining orange references**

Read `frontend/src/styles/landing.css` and replace any remaining:
- `#f97316` → `#60a5fa`
- `#ea580c` → `#3b82f6`
- `rgba(249,115,22,...)` → `rgba(96,165,250,...)`
- Any old surface colors (`#1a1c23` → `#16181f`, `#22252e` → `#1e2028`, etc.)

These should already be handled by Task 2 and Task 4's sed commands, but verify and fix any that were missed (e.g., spaced hex values, different formatting).

- [ ] **Step 2: Read LandingPage.tsx and fix any remaining orange references**

Read `frontend/src/pages/LandingPage.tsx` and verify all orange references were replaced by the sed commands in Tasks 2 and 4. Fix any remaining manually.

- [ ] **Step 3: Verify it compiles**

Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`

Expected: No errors.

- [ ] **Step 4: Commit (if changes were needed)**

```bash
cd /home/coder/resolutionflow
git add frontend/src/styles/landing.css frontend/src/pages/LandingPage.tsx
git commit -m "fix: clean up remaining orange references in landing page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

### Task 6: Update index.html and configuration files

**Files:**
- Modify: `frontend/index.html`

- [ ] **Step 1: Update meta theme-color**

In `frontend/index.html`, line 17, replace:

```html
    <meta name="theme-color" content="#10121a" />
```

with:

```html
    <meta name="theme-color" content="#0e1016" />
```

- [ ] **Step 2: Commit**

```bash
cd /home/coder/resolutionflow
git add frontend/index.html
git commit -m "fix: update meta theme-color to new sidebar color (#0e1016)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

### Task 7: Full build verification and sweep for stragglers

**Files:** None (verification only)

- [ ] **Step 1: Run full frontend build**

Run: `cd /home/coder/resolutionflow/frontend && NODE_OPTIONS="--max-old-space-size=4096" npm run build 2>&1 | tail -20`

Expected: Build succeeds with no errors.

- [ ] **Step 2: Search for any remaining orange references**

Run:

```bash
cd /home/coder/resolutionflow/frontend/src
echo "=== Remaining #f97316 ===" && grep -r '#f97316' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
echo "=== Remaining #ea580c ===" && grep -r '#ea580c' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
echo "=== Remaining #fdba74 ===" && grep -r '#fdba74' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
echo "=== Remaining rgba(249,115,22 ===" && grep -r 'rgba(249,115,22' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
echo "=== Remaining orange- classes ===" && grep -r 'orange-[3456]00' --include='*.tsx' --include='*.ts' || echo "NONE"
echo "=== Remaining #eab308 ===" && grep -r '#eab308' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
```

Expected: All say "NONE". If any remain, fix them and commit.

- [ ] **Step 3: Verify git status is clean**

Run: `git status`

Expected: Working tree clean (all changes committed).