What is the color-system skill?
The color-system skill lives in the ui-design plugin of Owl-Listener's designer-skills pack. It makes your agent design a palette in layers, brand, neutral, semantic and extended, then check each foreground and background pair against stated WCAG contrast ratios before any colour is used.
Color-system is a skill in the ui-design plugin of Owl-Listener's designer-skills. Its SKILL.md casts the agent as an expert in building systematic, accessible color palettes, covering brand, semantic and accessible colour for interfaces.
The description hands off neighbouring work. Dark mode goes to dark-mode-design, charts go to data-visualization, and brand mapping across themes goes to theming-system, which keeps this skill about the palette itself.
Palette layers
- Brand palette: primary, secondary and accent, each as a tonal scale from 50 to 950.
- Neutral palette: greys used for text, borders and backgrounds.
- Semantic colors: success green, warning amber, error red and info blue, each with background, foreground, border and icon variants.
- Extended palette: data visualisation, illustration and gradient colours.
Contrast and accessibility targets
- Text needs 4.5 to 1 for AA, or 7 to 1 for AAA.
- Large text needs 3 to 1.
- UI components need 3 to 1.
- Colour must never be the only signal.
The skill also lists colour relationships to work from: tint and shade, complementary, analogous, and neutral pairings, which gives the agent named options rather than a single palette guess.
Who the color-system skill is for
Best for
- Starting a palette from a brand colour and getting full tonal scales.
- Checking every foreground and background pair against contrast rules.
- Writing usage guidance for each colour so designers pick consistently.
Not for
- Adapting an existing palette to dark surfaces. The description points to dark-mode-design.
- Choosing a ready made theme, since the skill builds a palette from layers rather than supplying one.
Use it with UiChemy
A palette is something to apply in your design and build. UiChemy Figma to WordPress turns a Figma design into a WordPress site, so colours defined first carry into the output. Click Get Started on uichemy.com. Related pages: design token, impeccable-colorize and impeccable-audit.
How to install Color System Skill: Tonal Scales and Contrast
/plugin marketplace add Owl-Listener/designer-skillsRegister the marketplace
Paste the command above into the agent. It only records the source repository and installs nothing yet.
Install ui-design
Run
/plugin install ui-design@designer-skills, or tick the plugin on the Discover tab of /plugin. color-system is included.Gemini CLI
Per the README, copy the repository's .gemini/extensions contents into a .gemini/extensions folder in your project.
Make the request
Describe the brand and ask for a colour system. Name any anchor colour you already have.
Check that it loaded
Ask for a palette from one brand colour. The reply should give 50 to 950 scales, semantic roles with four variants each, and contrast ratios for the main pairs.
Key features
- Brand tonal scalesPrimary, secondary and accent colours are each expanded into a 50 to 950 scale.
- Neutral paletteA grey set is defined for text, borders and backgrounds.
- Semantic rolesSuccess, warning, error and info colours each come with background, foreground, border and icon variants.
- Extended paletteData visualisation, illustration and gradient colours are planned as their own layer.
- Text contrastBody text targets 4.5 to 1 for AA or 7 to 1 for AAA.
- Non-text contrastLarge text and UI components both target 3 to 1, and colour is never the only signal.
- Colour relationshipsTint and shade, complementary, analogous and neutral pairing give the agent named starting points.
- Pair testingEvery foreground and background pair is tested, not only the main ones.
- Colour blindness checksThe skill recommends simulators, and dark mode mappings planned from the start.
Frequently asked questions
What does the color-system skill do?
It directs an AI agent to build a layered palette: brand scales, neutrals, semantic colours and an extended set, with WCAG contrast targets checked on each pair. It is part of the ui-design plugin in Owl-Listener's designer-skills pack.
How do I install color-system?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install ui-design@designer-skills. Gemini CLI users copy the repository's .gemini/extensions contents into their project, as the README describes. Color-system arrives with the ui-design plugin, so no separate step is needed.
Which contrast ratios does it use?
Normal text targets 4.5 to 1 for AA or 7 to 1 for AAA. Large text and interface components target 3 to 1. The skill also says colour should not be the only way information is conveyed, so icons or text labels back it up.
What are semantic colours here?
They are role-based colours: success green, warning amber, error red and info blue. Each gets background, foreground, border and icon variants, so an alert or form message has every part defined and accessible from a single role.
Does it handle dark mode?
Only as a hand-off. The description sends dark mode work to dark-mode-design, and the best practices say to plan dark mode mappings from the start. The skill itself concentrates on the base palette and its contrast rules.
Which agents does the pack support?
The README names Claude Code and Gemini CLI as target agents. It does not mention others. The skill is plain instruction text, so other tools that read skill folders may load it, but the repository does not promise that.
Can it generate a palette for charts?
The extended palette layer includes data visualisation colours, and the description says chart palettes belong to the data-visualization skill. The ui-design plugin's color-palette command also lists chart colours among the steps of its full colour workflow.
What license applies to the skill?
GitHub lists the designer-skills repository as MIT licensed. That covers reading and reusing the skill text. Check the repository itself for the full license terms before you bundle files into a product you sell.