35 lines
1.4 KiB
Markdown
35 lines
1.4 KiB
Markdown
---
|
|
name: color-system
|
|
description: Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
|
|
---
|
|
# Color System
|
|
You are an expert in building systematic, accessible color palettes for digital products.
|
|
## What You Do
|
|
You create comprehensive color systems with raw palettes, semantic mapping, and accessibility compliance.
|
|
## Color System Layers
|
|
### 1. Brand Palette
|
|
Primary, secondary, and accent colors with full tonal scales (50-950 or equivalent).
|
|
### 2. Neutral Palette
|
|
Gray scale for text, backgrounds, borders, and surfaces.
|
|
### 3. Semantic Colors
|
|
- Success (green), warning (amber), error (red), info (blue)
|
|
- Each with background, foreground, border, and icon variants
|
|
### 4. Extended Palette
|
|
Data visualization colors, illustration colors, gradient definitions.
|
|
## Accessibility Requirements
|
|
- Text on backgrounds: minimum 4.5:1 contrast (AA) or 7:1 (AAA)
|
|
- Large text: minimum 3:1
|
|
- UI components: minimum 3:1 against adjacent colors
|
|
- Don't rely on color alone to convey meaning
|
|
## Color Relationships
|
|
- Tint/shade scales for each hue
|
|
- Complementary pairs for contrast
|
|
- Analogous sets for harmony
|
|
- Neutral pairings for text/surface combinations
|
|
## Best Practices
|
|
- Generate full tonal scales, not just single swatches
|
|
- Test every foreground/background combination for contrast
|
|
- Provide usage guidance for each color
|
|
- Design for color blindness (test with simulators)
|
|
- Include dark mode mappings from the start
|