Color System

Produce a contrast-verified color token file for this codebase — ramps, semantic layer, dark mode — with the math shown, not a color-theory lecture. Governing principle: color is a system, not a list: every hue ships as a full lightness ramp, components consume only semantic tokens, and no text/background pair ships without a computed contrast ratio.

When to use / handoffs

• Use for palettes, ramps, dark mode, contrast fixes, status/interactive colors, theming.
• No token infrastructure exists → run skills/frontend-design/design-foundation first, or create the color slice as its start.
• "Everything is grey and flat / can't tell what's important" is usually hierarchy, not palette → skills/frontend-design/visual-hierarchy-refactoring.
• Full WCAG audit beyond color → skills/frontend-design/accessibility-excellence.

Step 1 — Inspect the codebase

1. Harvest the palette. Grep for #[0-9a-fA-F]{3,8}\b, rgba?\(, hsla?\(, oklch\( across source + config. Deduplicate, count frequencies. Cluster near-identical values (ΔL < ~5) — each cluster is one intended color that drifted.
2. Read existing tokens. Tailwind theme.colors / @theme variables / CSS custom properties. Determine whether ramps exist or just single hexes.
3. Identify the de facto brand color — the most-used saturated hue.
4. Check dark mode state: dark: classes, prefers-color-scheme, a .dark block.
5. Spot-check contrast on the 3–5 most common text/background pairs found in code — compute the WCAG ratios; failures go straight into your rationale.