color-system — Claude Code skill: build a product colour system
This skill walks an agent through building a product palette: tonal scales, semantic roles and WCAG contrast checks. Useful when colours are defined from scratch.
npx skills add Owl-Listener/designer-skills --skill color-system -a claude-codeWhat color-system does
The skill works through four layers. First the brand palette with full tonal scales from 50 to 950, then a neutral grey scale for text, backgrounds, borders and surfaces. Next come semantic colours — success, warning, error, info — each with background, foreground, border and icon variants. The last layer covers data visualisation, illustration colours and gradients.
Contrast is checked against WCAG: text on backgrounds at 4.5:1 for AA or 7:1 for AAA, large text from 3:1, UI components from 3:1 against adjacent colours. The skill also flags that meaning should not rest on colour alone and suggests testing with colour blindness simulators. Dark mode mappings are part of the build, though adapting an existing interface to dark mode is the job of dark-mode-design.
Everything lives in a single SKILL.md file — no scripts, no extra dependencies. Chart palettes belong to data-visualization, and multi-brand token architecture to theming-system from the design-systems set. If you need one colour rather than a system, this skill is overkill.
What it helps with
- generate 50–950 tonal scales for brand colours
- map success, warning, error and info to background and text roles
- check text/background contrast before writing CSS
- pick a neutral grey scale for borders and surfaces
- separate chart and illustration colours from UI colours
Example prompts for the agent
- Build a colour system for a new product: brand scales, neutrals and semantic colours
- Check contrast for every text/background pair in the current palette and list what falls below 4.5:1
- Add chart colours to the palette and describe where each one applies
How to install color-system
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a claude-code2Manually: put the files in place
~/.claude/skills/color-system/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/color-system/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a codex2Manually: put the files in place
.agents/skills/color-system/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a cursor2Manually: put the files in place
.cursor/skills/color-system/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills color-system2Manually: put the files in place
.github/skills/color-system/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/color-systemManually: put the files in place
.devin/skills/color-system/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about color-system
How do I install color-system in Claude?
Run npx skills add Owl-Listener/designer-skills --skill color-system -a claude-code. The skill lands at ~/.claude/skills/color-system/SKILL.md.
What does color-system do?
It builds a product palette in layers: brand tonal scales, neutrals, semantic roles and an extended set for charts. It also checks contrast against WCAG requirements.
How is color-system different from dark-mode-design?
color-system defines colours from scratch and includes dark mode mappings, while dark-mode-design handles adapting an interface to dark mode. For chart palettes use data-visualization.
Source text
SKILL.md · MIT
--- 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
© Owl-Listener · MIT · Owl-Listener/designer-skills
