inventory of hardcoded colors · frontend/app · frontend/components

Frontend Color Audit

Every color in the AESOP frontend that is hardcoded instead of drawn from the theme — what must move to a variable, and what is intentionally left alone.

118

instances need fixing

≈170

intentional — keep

class patterns to fix

pages carry the worst of it

01Remaining Tailwind arbitrary hex classesFix — replace with theme variables

Color / class	Count	Location / context	Action	Replacement
`dark:hover:text-[#ede5ff]`	59	hover text on links, buttons, summaries throughout the appcave/[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, toolbarscave/[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 inputsStepCapabilities, StepGovernance, StepMaterials, StepEndpoint	Fix	`placeholder:text-[var(--color-text-secondary)]/50`
`bg-[#faf5ff]`bare — no dark: prefix	13	page background in layout wrappersapp/(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 in evaluation wizardStepMaterials, StepGovernance, StepCapabilities, StepEndpoint (×2 each)	Fix	`dark:placeholder:text-[var(--color-text-secondary)]/50`
`dark:hover:bg-[#352d52]`	1	hover on a disabled CapabilityCard toggleevaluate/_components/CapabilityCard.tsx:70	Fix	`dark:hover:bg-[var(--color-bg-elevated)]`
`dark:hover:text-[#a89ec0]`	1	small text hover in evaluateevaluate/page.tsx:376	Fix	`dark:hover:text-[var(--color-text-secondary)]`

02Inline style propsKeep — intentional

Colors	Count	File / context	Action	Reason
stage accent colors	6	Home page pipeline stage cardsapp/(app)/page.tsx — stage.accent, stage.bg inline styles	Keep	Fixed stage identity. Each stage has a distinct permanent color unrelated to the UI theme.
Various per-series colorsChart.js dataset configs	≈120	Analytics and admin chart datasetsdashboard/analytics/page.tsx, admin/page.tsx	Keep	Chart.js needs resolved values, not CSS variables. Semantic data-series colors are not theme-dependent.
SVG fill / stroke colorsradar chart series	≈20	NERVE radar visualizationcomponents/nerve/RadarChart.tsx	Keep	SVG chart colors specific to the NERVE dimension view — not UI chrome.
`#1f2937` / `#f9fafb`	2	Toast notification background + textcomponents/Providers.tsx — Toaster toastOptions.style	Consider	Could use `style={{ background: 'var(--color-bg-elevated)', color: 'var(--color-text-primary)' }}` — CSS variables work fine in an inline JS style object.

03Report HTML — dangerouslySetInnerHTML inline CSSKeep — intentional

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

Summary. 118 instances across 7 class patterns are mechanical sed replacements, no logic changes. The 59 hover-text and 36 hover-bg are the highest priority — the most visible mismatches under a non-purple theme. The 13 bare bg-[#faf5ff] layout values are second — they break the page background when the theme’s background changes. Afterward, the only hardcoded colors left are intentional: stage identity, chart data series, and rendered report HTML.