colorize

Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Add color to the UI at the target the user described. Load the ui-craft skill.

The rule (from SKILL.md): 90%+ neutral, one accent, 3-5 placements per viewport. Reinforce this before adding anything. More color is not more design.

Before you touch anything — ask about brand. If a brand color exists, use it. If not, offer 2-3 options in OKLCH — include one warm (e.g., oklch(0.67 0.19 45)) and one cool (e.g., oklch(0.60 0.18 250)). Never default to blue.

Where color EARNS its place:

• Primary CTA background.
• One key metric tint — accent at ~8% opacity as a subtle background, accent at full strength on the number itself.
• Active state of the current nav item (underline, dot, or subtle tint — pick one).
• Status dots (success / warning / danger), 6-8px, no pills.
• Focus ring (:focus-visible).

Where color does NOT go (anti-slop territory):