color-strategylisted

# Color Strategy A portable color framework for UI work. Covers distribution (60/30/10), generation (OKLCH), semantics, and accessibility. Use it to make color decisions intentional rather than instinctive. ## When to invoke - New UI, page, or component where color choices haven't been made yet - A design that feels flat, gray, or generic - Choosing or extending a color palette - Adding a new theme or brand variant - Any task that uses the words: _color, palette, theme, brand, accent, tint, gradient, dark mode_ ## When NOT to invoke - The project has a strict monotone or token-driven design system that already governs color (check for a `design-system` skill or `DESIGN_SYSTEM.md` first — defer to it) - You're only making structural/layout changes with no color decisions - Color is explicitly out of scope for the task --- ## Step 1: Gather context first (mandatory) Color without context produces generic AI slop. Before choosing a single hex value: **Collect from the codebase or ask the user:** | Context | Where to find it | Why it matters | |---|---|---| | Brand colors | `tailwind.config`, `globals.css`, `@theme`, design docs | Non-negotiable starting point | | Target audience | README, product docs, existing copy tone | Age/culture/trust signals shape palette | | Domain/industry | App type (finance, health, creative, B2B SaaS) | Finance = trust blues; health = greens; creative = latitude | | Existing components | Current CSS, screenshots, component library | Can't c