Color System Designer

Color System Designer Skill

Instructions

1. Analyze color requirements from task
2. Check for existing color system or brand colors
3. Create color palette (primary, secondary, neutrals, semantic)
4. Define color variations (light, dark, shades, tints)
5. Ensure accessibility compliance (contrast ratios)
6. Provide usage guidelines
7. Return structured color system specifications with:
   • Color palette (hex/rgb values)
   • Color variations and shades
   • Usage guidelines
   • Accessibility compliance
   • Design tokens format

Examples

Input: "Create color system for application" Output:

### Color System

**Primary Colors:**
- Primary: #007bff (blue)
- Primary Dark: #0056b3
- Primary Light: #66b3ff
- Primary Lighter: #cce6ff

**Secondary Colors:**
- Secondary: #6c757d (gray)
- Secondary Dark: #545b62
- Secondary Light: #adb5bd

**Neutral Colors:**
- White: #ffffff
- Gray 100: #f8f9fa
- Gray 200: #e9ecef
- Gray 300: #dee2e6
- Gray 400: #ced4da
- Gray 500: #adb5bd
- Gray 600: #6c757d
- Gray 700: #495057
- Gray 800: #343a40
- Gray 900: #212529
- Black: #000000

**Semantic Colors:**
- Success: #28a745 (green)
- Error: #dc3545 (red)
- Warning: #ffc107 (yellow)
- Info: #17a2b8 (cyan)

**Accessibility:**
- All text colors meet WCAG AA (4.5:1 contrast)
- Primary on white: 4.5:1 ✓
- White on primary: 4.5:1 ✓
- Error text on white: 4.5:1 ✓

**Usage Guidelines:**
- Primary: Main actions, links, important elements
- Secondary: Secondary actions, less important elements
- Success: Success messages, positive feedback
- Error: Error messages, destructive actions
- Warning: Warning messages, caution
- Info: Informational messages