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, STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer.
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 `$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.
155