Colorize

Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.

MANDATORY PREPARATION

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors.

---

Assess Color Opportunity

Analyze the current state and identify opportunities:

1. Understand current state:

   • Color absence: Pure grayscale? Limited neutrals? One timid accent?
   • Missed opportunities: Where could color add meaning, hierarchy, or delight?
   • Context: What's appropriate for this domain and audience?
   • Brand: Are there existing brand colors we should use?

2. Identify where color adds value:

   • Semantic meaning: Success (green), error (red), warning (yellow/orange), info (blue)
   • Hierarchy: Drawing attention to important elements
   • Categorization: Different sections, types, or states
   • Emotional tone: Warmth, energy, trust, creativity
   • Wayfinding: Helping users navigate and understand structure
   • Delight: Moments of visual interest and personality

If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.

CRITICAL: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.

Plan Color Strategy

Create a purposeful color introduction plan:

• Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
• Dominant color: Which color owns 60% of colored elements?
• Accent colors: Which colors provide contrast and highlights? (30% and 10%)
• Application strategy: Where does each color appear and why?

IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.

Introduce Color Strategically

Add color systematically across these dimensions:

Semantic Color

• State indicators:

  • Success: Green tones (emerald, forest, mint)
  • Error: Red/pink tones (rose, crimson, coral)
  • Warning: Orange/amber tones
  • Info: Blue tones (sky, ocean, indigo)
  • Neutral: Gray/slate for inactive states

• Status badges: Colored backgrounds or borders for states (active, pending, completed, etc.)

• Progress indicators: Colored bars, rings, or charts showing completion or health

Accent Color Application

• Primary actions: Color the most important buttons/CTAs
• Links: Add color to clickable text (maintain accessibility)
• Icons: Colorize key icons for recognition and personality
• Headers/titles: Add color to section headers or key labels
• Hover states: Introduce color on interaction

Background & Surfaces

• Tinted backgrounds: Replace pure gray (#f5f5f5) with warm neutrals (oklch(97% 0.01 60)) or cool tints (oklch(97% 0.01 250))
• Colored sections: Use subtle background colors to separate areas
• Gradient backgrounds: Add depth with subtle, intentional gradients (not generic purple-blue)
• Cards & surfaces: Tint cards or surfaces slightly for warmth

Use OKLCH for color: It's perceptually uniform, meaning equal steps in lightness look equal. Great for generating harmonious scales.

Data Visualization

• Charts & graphs: Use color to encode categories or values
• Heatmaps: Color intensity shows density or importance
• Comparison: Color coding for different datasets or timeframes

Borders & Accents

• Accent borders: Add colored left/top borders to cards or sections
• Underlines: Color underlines for emphasis or active states
• Dividers: Subtle colored dividers instead of gray lines
• Focus rings: Colored focus indicators matching brand