Enhance — not Replace
Same pattern as typeset. Your existing color-strategy has structure Impeccable's source doesn't (5-phase audit, 12-role color taxonomy, kit integration). Impeccable has substance you don't (tinted neutrals, OKLCH chroma reduction at extreme lightness, dark-mode-as-different-mode, anti-reflex hue selection). Net-new TBK additions on top: state-color matrix, brand-vs-semantic collision handling, color-in-data-viz vs UI distinction, focus-ring contrast, text-on-image overlay handling. Result is a v2 that goes well past either source.
Your color-strategy skill is what Claude consults whenever it's about to make color choices in a design — picking a brand accent, building out the semantic palette (success/warning/error/info), assigning text and background colors, building dark mode, checking contrast against accessibility standards.
It's already a strong skill at ★★★★☆ (8/10). Where it falls short is on a few specific areas Impeccable handles well: tinted neutrals (pure gray feels lifeless next to a colored brand — add 0.005–0.015 chroma toward the brand hue), OKLCH at extreme lightness (reduce chroma as you approach white or black), dark mode as fundamentally different (depth comes from surface lightness, not shadow; reduce body text font-weight for light-on-dark), and anti-reflex hue selection (don't reach for blue 250 or warm orange 60 just because they're the AI defaults).
Beyond Impeccable, there are real gaps in BOTH sources that I'll fill on the way through: state color matrix (hover/active/focus/disabled), brand-vs-semantic collision handling (what to do when brand color IS red), focus ring contrast specifics, text-on-image overlay handling, separate palettes for data viz vs UI, and color drift detection (catching devs who use raw hex values instead of tokens).
Your color-strategy today
- 5-phase audit structure (audit existing → establish system → OKLCH → accent application → WCAG)
- 12-role color taxonomy (background, surface, border, text-primary/secondary/muted, brand, semantic ×4, info)
- 60/30/10 rule with explicit pixel-area framing
- Concrete OKLCH code examples (brand scale + semantic colors)
- Where accent goes / doesn't go (yes/no list)
- WCAG contrast tables (3:1 / 4.5:1 / 7:1)
- Banned: purple-blue gradients, gray-on-colored, semantic overloading, opacity for variants
- CHAIN: integration with kit
- No tinted neutrals — your dark-mode tokens use chroma=0 (pure gray)
- No OKLCH chroma reduction at extreme lightness (high chroma + extreme lightness = garish)
- No anti-reflex hue selection — Claude defaults to blue 250 / warm orange 60
- No "dark mode is not inverted light mode" reframe + depth-via-lightness rule
- No font-weight reduction for light-on-dark (350 instead of 400)
- No token hierarchy split (primitive layer vs semantic layer)
- No "alpha is a design smell" principle + when alpha IS appropriate
- No state color matrix (hover/active/focus/disabled colors)
- No brand-vs-semantic collision handling (when brand color IS red/green)
- No data-viz palette guidance (sequential/diverging/categorical, distinct from UI)
- No focus ring contrast specifics (3:1 minimum, often missed)
- No text-on-image overlay rules (gradient + blur + dark scrim)
- No color drift detection / token enforcement pattern
Your color-strategy enhanced
- Everything above — kept verbatim
- + Tinted neutrals — add 0.005–0.015 chroma to all neutrals, hued toward THIS project's brand
- + Anti-reflex hue selection — explicit ban on reaching for blue 250 / warm orange 60
- + OKLCH chroma reduction at extreme lightness (light blue at 85% wants 0.08 chroma, not 0.15)
- + Dark mode as fundamentally different mode (depth from lightness, not shadow)
- + Dark mode 3-step surface scale at 15%/20%/25% lightness
- + Body text font-weight reduction in dark mode (350 instead of 400)
- + Token hierarchy: primitive tokens (--blue-500) + semantic tokens (--color-primary)
- + "Alpha is a design smell" + when transparency IS appropriate (focus rings, interactive states)
- + Dangerous color combinations list (red/green colorblindness, yellow on white, blue on red vibration)
- + State color matrix (hover/active/focus/disabled with explicit lightness/chroma shifts)
- + Brand-vs-semantic collision handling (when brand IS red/green)
- + Color in data viz — sequential/diverging/categorical palettes (separate from UI accents)
- + Focus ring contrast specifics (3:1 minimum, must show on every interactive)
- + Text-on-image overlay handling (gradient scrim + blur + tinted overlay)
- + Non-color information signals (icon + color, never color alone for status)
- + Color drift detection — catch raw hex values bypassing tokens
- + Apache 2.0 attribution to Bakaus / Impeccable / Anthropic frontend-design
- + Frontmatter version: 2.0; v1 archives to _archive/color-strategy-v1/
Tinted neutrals IMP
Add 0.005–0.015 chroma to every neutral, hued toward the project's brand color. Pure gray feels lifeless next to a colored brand.
Anti-reflex hue selection IMP
Don't reach for blue (hue 250) or warm orange (hue 60) by reflex — those are the dominant AI-design defaults.
OKLCH chroma at extreme lightness IMP
Reduce chroma as you approach white or black. A light blue at 85% lightness wants ~0.08 chroma, not the 0.15 of your base color.
Dark mode as fundamentally different IMP
Not "invert the colors." Depth comes from surface lightness, not shadow. Build a 3-step surface scale at 15%/20%/25% lightness.
Body font-weight in dark mode IMP
Reduce body text weight slightly (350 instead of 400) because light text on dark reads as heavier than dark text on light.
Token hierarchy: primitive + semantic IMP
Two layers. Primitive tokens (--blue-500) are the raw colors. Semantic tokens (--color-primary) reference primitives. Dark mode only redefines the semantic layer.
"Alpha is a design smell" IMP
Heavy use of transparency usually means an incomplete palette. Define explicit overlay colors instead. Exception: focus rings and interactive states.
Dangerous color combinations IMP
Explicit list: red on green (8% colorblindness), yellow on white (always fails), blue on red (vibrates), thin light text on images (unpredictable).
State color matrix TBK
Explicit lightness/chroma shifts for hover, active, focus, disabled, danger states. Hover = -3% lightness. Active = -8% lightness. Disabled = 50% chroma reduction.
Brand-vs-semantic collision TBK
What to do when brand color IS red (Coca-Cola, Target, Netflix) or green (Whole Foods, Spotify). Brand stays brand; semantic error/success uses a different hue or pattern + color.
Color in data viz vs UI TBK
Different palettes. Sequential (single-hue gradient for ordered data), diverging (two-hue for centered data), categorical (max 8 distinguishable hues). Never reuse UI accent colors as chart colors.
Focus ring contrast TBK
3:1 minimum against the background, must be visible on every interactive element. Never rely on browser default — it fails in design systems with custom backgrounds.
Text-on-image overlays TBK
Gradient scrim (linear-gradient from transparent to dark) + optional blur backdrop + tinted overlay. Don't pray contrast works on the image — guarantee it.
Non-color information signals TBK
Status communicated by icon + color, never color alone. "Red dot" + warning icon. "Green check" + success icon. WCAG SC 1.4.1 requires it; pure-color status fails for colorblind users.
Color drift detection TBK
Grep the codebase for raw hex values (#xxxxxx) that should be tokens. Surface every drift instance. CI check pattern that fails the build on new raw hex.
Skip secondary/tertiary unless needed IMP
Most apps work fine with one accent. Adding more creates decision fatigue and visual noise.
60-30-10 as visual weight IMP
Reframe: not pixel count. About visual weight. Accents work BECAUSE they're rare. Overuse kills their power.
Dark mode never pure white text TBK
Light text on dark backgrounds maxes at ~96% lightness, not pure white. Pure white on dark glares — same reason pure black on light vibrates.
Existing location: design/color-strategy/. Same Gnesis violations as typeset (no design domain in v1.0; "color-strategy" is a noun-noun without a proper suffix). Same grandfathering rule applies — existing folders migrate in batches, not retroactively.
Stay put
Keep folder name and location. Bump version, archive v1 to _archive/color-strategy-v1/.
Rename, same domain
Rename to noun + suffix per Rule 3, keep in design/.
color-strategy references in other skills break.Full migration
Move to product/, rename to noun + suffix.
_archive/color-strategy-v1/ per Rule 9._attribution.md.