resolutionflow/docs/superpowers/plans/2026-03-29-color-migration-v6.md

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:

  /* ── 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:

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

• Step 3: Update accent colors

Replace lines 31-35 (accent block) with:

  /* ── 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:

  /* ── 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:

  /* ── 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):

  &: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):

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

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

    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

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:

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:

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

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:

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

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:

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

Also update the JSDoc comment on line 9:

 * Brand logo mark: gradient blue square with rounded corners

• Step 2: Replace all hardcoded orange hex values across the codebase

Run:

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

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:

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

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)

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:

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

with:

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

• Step 2: Commit

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:

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).