1> **Additional context needed**: existing brand colors.
  2
  3Replace timid grayscale or single-accent designs with a strategic palette: pick a color strategy, choose a hue family that fits the brand, then apply color with intent. More color ≠ better. Strategic color beats rainbow vomit.
  4
  5---
  6
  7## Register
  8
  9Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
 10
 11Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
 12
 13---
 14
 15## Assess Color Opportunity
 16
 17Analyze the current state and identify opportunities:
 18
 191. **Understand current state**:
 20   - **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
 21   - **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
 22   - **Context**: What's appropriate for this domain and audience?
 23   - **Brand**: Are there existing brand colors we should use?
 24
 252. **Identify where color adds value**:
 26   - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
 27   - **Hierarchy**: Drawing attention to important elements
 28   - **Categorization**: Different sections, types, or states
 29   - **Emotional tone**: Warmth, energy, trust, creativity
 30   - **Wayfinding**: Helping users navigate and understand structure
 31   - **Delight**: Moments of visual interest and personality
 32
 33If any of these are unclear from the codebase, {{ask_instruction}}
 34
 35**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
 36
 37## Plan Color Strategy
 38
 39Create a purposeful color introduction plan:
 40
 41- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
 42- **Dominant color**: Which color owns 60% of colored elements?
 43- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
 44- **Application strategy**: Where does each color appear and why?
 45
 46**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
 47
 48## Introduce Color Strategically
 49
 50Add color systematically across these dimensions:
 51
 52### Semantic Color
 53- **State indicators**:
 54  - Success: Green tones (emerald, forest, mint)
 55  - Error: Red/pink tones (rose, crimson, coral)
 56  - Warning: Orange/amber tones
 57  - Info: Blue tones (sky, ocean, indigo)
 58  - Neutral: Gray/slate for inactive states
 59
 60- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
 61- **Progress indicators**: Colored bars, rings, or charts showing completion or health
 62
 63### Accent Color Application
 64- **Primary actions**: Color the most important buttons/CTAs
 65- **Links**: Add color to clickable text (maintain accessibility)
 66- **Icons**: Colorize key icons for recognition and personality
 67- **Headers/titles**: Add color to section headers or key labels
 68- **Hover states**: Introduce color on interaction
 69
 70### Background & Surfaces
 71- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
 72- **Colored sections**: Use subtle background colors to separate areas
 73- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
 74- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
 75
 76**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
 77
 78### Data Visualization
 79- **Charts & graphs**: Use color to encode categories or values
 80- **Heatmaps**: Color intensity shows density or importance
 81- **Comparison**: Color coding for different datasets or timeframes
 82
 83### Borders & Accents
 84- **Hairline borders**: 1px colored borders on full perimeter (not side-stripes; see the absolute ban on `border-left/right > 1px`)
 85- **Underlines**: Color underlines for emphasis or active states
 86- **Dividers**: Subtle colored dividers instead of gray lines
 87- **Focus rings**: Colored focus indicators matching brand
 88- **Surface tints**: A 4-8% background wash of the accent color instead of a stripe
 89
 90**NEVER**: `border-left` or `border-right` greater than 1px as a colored accent stripe. This is one of the three absolute bans in the parent skill. If you want to mark a card as "active" or "warning", use a full hairline border, a background tint, a leading glyph, or a numbered prefix. Not a side stripe.
 91
 92### Typography Color
 93- **Colored headings**: Use brand colors for section headings (maintain contrast)
 94- **Highlight text**: Color for emphasis or categories
 95- **Labels & tags**: Small colored labels for metadata or categories
 96
 97### Decorative Elements
 98- **Illustrations**: Add colored illustrations or icons
 99- **Shapes**: Geometric shapes in brand colors as background elements
100- **Gradients**: Colorful gradient overlays or mesh backgrounds
101- **Blobs/organic shapes**: Soft colored shapes for visual interest
102
103## Balance & Refinement
104
105Ensure color addition improves rather than overwhelms:
106
107### Maintain Hierarchy
108- **Dominant color** (60%): Primary brand color or most used accent
109- **Secondary color** (30%): Supporting color for variety
110- **Accent color** (10%): High contrast for key moments
111- **Neutrals** (remaining): Gray/black/white for structure
112
113### Accessibility
114- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
115- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
116- **Test for color blindness**: Verify red/green combinations work for all users
117
118### Cohesion
119- **Consistent palette**: Use colors from defined palette, not arbitrary choices
120- **Systematic application**: Same color meanings throughout (green always = success)
121- **Temperature consistency**: Warm palette stays warm, cool stays cool
122
123**NEVER**:
124- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
125- Apply color randomly without semantic meaning
126- Put gray text on colored backgrounds. It looks washed out; use a darker shade of the background color or transparency instead
127- Use pure gray for neutrals. Add subtle color tint (warm or cool) for depth
128- Use pure black (`#000`) or pure white (`#fff`) for large areas
129- Violate WCAG contrast requirements
130- Use color as the only indicator (accessibility issue)
131- Make everything colorful (defeats the purpose)
132- Default to purple-blue gradients (AI slop aesthetic)
133
134## Verify Color Addition
135
136Test that colorization improves the experience:
137
138- **Better hierarchy**: Does color guide attention appropriately?
139- **Clearer meaning**: Does color help users understand states/categories?
140- **More engaging**: Does the interface feel warmer and more inviting?
141- **Still accessible**: Do all color combinations meet WCAG standards?
142- **Not overwhelming**: Is color balanced and purposeful?
143
144When the palette earns its place, hand off to `{{command_prefix}}impeccable polish` for the final pass.
145
146## Live-mode signature params
147
148When invoked from live mode, each variant MUST declare a `color-amount` param so the user can dial between a restrained accent and a drenched surface without regeneration. Author the variant's CSS against `var(--p-color-amount, 0.5)`, typically as the alpha multiplier on backgrounds, or as a scaling factor on the chroma axis in an OKLCH expression. 0 = neutral/monochrome, 1 = full saturation / dominant coverage.
149
150```json
151{"id":"color-amount","kind":"range","min":0,"max":1,"step":0.05,"default":0.5,"label":"Color amount"}
152```
153
154Layer 1-2 variant-specific params on top: palette selection (`steps` with named options), temperature warmth, or tint vs. true color. See `reference/live.md` for the full params contract.