color-system
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).
Works with
--- 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). license: MIT --- # 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
More General & Other skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
