color-system

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: color-system
description: Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
---
# 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