Frontend Color Audit

AESOP STUDIO · HARDCODED COLOR INVENTORY · ALL FILES IN /frontend/app AND /frontend/components

118

Need Fixing

~170

Intentional (keep)

Pattern Types to Fix

Files Affected

Remaining Tailwind Arbitrary Hex Classes Fix

Color / Class	Count	Location / Context	Action	Replacement
`dark:hover:text-[#ede5ff]`	59	hover text on links, buttons, summaries throughout app cave/[id], investigate/[id], evaluate, guides, about, nerve/layout	Fix	`dark:hover:text-[var(--color-text-primary)]`
`dark:hover:bg-[#2e254a]`	36	hover background on buttons, tags, toolbars cave/[id], investigate/[id], evaluate/[id]/report, evaluate/page	Fix	`dark:hover:bg-[var(--color-bg-elevated)]`
`text-[#a89ec0]` bare — no dark: prefix	14	placeholder text in eval step inputs StepCapabilities, StepGovernance, StepMaterials, StepEndpoint	Fix	`placeholder:text-[var(--color-text-secondary)]/50`
`bg-[#faf5ff]` bare — no dark: prefix	13	page background in layout wrappers app/(app)/layout.tsx, app/nerve/layout.tsx, layout-work.tsx (×2)	Fix	`bg-[var(--color-bg-page)]`
`dark:placeholder:text-[#a89ec0]/50`	~8	input placeholder text in evaluation wizard StepMaterials, StepGovernance, StepCapabilities, StepEndpoint (×2 each)	Fix	`dark:placeholder:text-[var(--color-text-secondary)]/50`
`dark:hover:bg-[#352d52]`	1	hover state on disabled CapabilityCard toggle evaluate/_components/CapabilityCard.tsx:70	Fix	`dark:hover:bg-[var(--color-bg-elevated)]`
`dark:hover:text-[#a89ec0]`	1	small text hover in evaluate/page.tsx evaluate/page.tsx:376	Fix	`dark:hover:text-[var(--color-text-secondary)]`

Inline Style Props — Intentional (keep) Keep

Colors	Count	File / Context	Action	Reason
Stage accent colors	6	Home page pipeline stage cards app/(app)/page.tsx — stage.accent, stage.bg in JSX inline styles	Keep	Fixed stage identity colors. Each stage has a distinct permanent color unrelated to the UI theme.
Various per-series colors Chart.js dataset configs	~120	Analytics and admin chart datasets dashboard/analytics/page.tsx, admin/page.tsx	Keep	Chart.js requires resolved color values, not CSS variable references. Semantic data series colors (correct, errors, etc.) are not theme-dependent.
SVG fill/stroke colors Radar chart series	~20	NERVE radar visualization components/nerve/RadarChart.tsx	Keep	SVG chart colors specific to NERVE dimension visualization. Not UI chrome.
`#1f2937` / `#f9fafb`	2	Toast notification background and text color components/Providers.tsx — Toaster toastOptions.style	Consider	Could use `style={{ background: 'var(--color-bg-elevated)', color: 'var(--color-text-primary)' }}` — but Toaster style is a JS object, CSS vars in inline style props work fine.

Report HTML / dangerouslySetInnerHTML Inline CSS Keep

Pattern	Count	Files	Action	Reason
CSS strings in `dangerouslySetInnerHTML`	~50	cave, investigate, evaluate — agent-generated report rendering cave/[id]/page.tsx, investigate/[id]/page.tsx, evaluate/[id]/page.tsx	Keep	Embedded CSS for rendered HTML content that lives inside the React DOM as raw HTML. Already overridden by `.report-content` rules in globals.css for dark mode.

Summary: 118 instances across 7 class patterns can be fixed with sed replacements (all mechanical, no logic changes). The 59 hover-text and 36 hover-bg are the highest priority — they're the most visible mismatches when a non-purple theme is active. The 13 bare bg-[#faf5ff] in layouts are the second priority — they break the page background when a theme with a different bg is applied. After fixing, the only remaining hardcoded colors will be intentional: stage identity colors, chart data series, and rendered report HTML.