Color Systemby Owl-Listener

Color System Skill.

Turn a brand color into a usable set of interface roles and foreground-background combinations.

Color Design
Design Guidance

Source Review · Color SystemSKILL.md

Task UX Produces • Brand and neutral tonal scales • Semantic foreground, background, border, and icon roles • A contrast and usage matrix Before You Start Provide brand colors, interface roles and accessibility targets. Use actual component states and a contrast-checking tool to evaluate the proposed color combinations.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Color System: Build Semantic Product Color

Product palette layers, tonal scales, semantic color mapping, and contrast-oriented usage guidance.

Source-based workflowNot an execution benchmark

The Working Approach

Color System is for building or rebuilding a product palette. It separates brand scales, neutrals, semantic status colors, and extended uses. The result is more than a handful of attractive swatches: each color needs a role and usable relationships with neighboring surfaces.

The source combines tonal scales with contrast checks and warns against color-only communication. It also asks for dark-mode mappings early. A generated palette is a design proposal until its actual text, components, and state combinations have been checked.

Expected Deliverables

Brand and neutral tonal scales
Semantic foreground, background, border, and icon roles
A contrast and usage matrix

See the Example Brief

From Brief to Review

01
Define the Palette Layers
Start from brand direction and derive the neutrals and status roles the product actually uses.
02
Map Real Pairings
Assign colors to text, surfaces, borders, and states rather than leaving them as unlabelled swatches.
03
Check Accessibility
Test intended combinations and add non-color signals where status must be understood.

02 When to Use It

When to Use It

Provide brand colors, interface roles and accessibility targets. Use actual component states and a contrast-checking tool to evaluate the proposed color combinations.

A Good Fit

A New Product PaletteBuild a foundation when role-based colors do not yet exist.
Inconsistent Status ColorsResolve competing success, warning, and error treatments across components.

Limits to Check

Not Dark-Mode Adaptation AloneAn existing light palette's dark translation is the separate dark-mode task.
No Automatic ComplianceActual component and text combinations still require measurement and review.

Bring These Inputs

Brand DirectionSupply existing brand colors and restrictions.
Interface RolesList surfaces, text levels, actions, and statuses.
Accessibility TargetState relevant contrast and non-color communication requirements.

03 Decisions That Matter

Decisions That Matter

Roles Over Swatches
Semantic mapping makes the palette usable across components.
Pairs Are the Test Unit
A color has no meaningful text-contrast result without its background and use.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load this task's SKILL.md from the designer-skills repository in your agent's supported skill location. No universal installer command is established by the entry file.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md

Provide brand colors, interface roles and accessibility targets. Use actual component states and a contrast-checking tool to evaluate the proposed color combinations.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use color-system to create a palette for this scheduling product from the supplied brand blue. Define tonal and neutral scales, semantic success/warning/error roles, and a matrix of actual text-on-surface combinations. Flag unverified contrast values rather than claiming compliance.

Inspect the Result

Check the actual output against these observable criteria.

Every proposed role has usage guidance.
Important pairings have measured contrast.
Status is not conveyed by hue alone.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: ui-design/skills/color-system/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

Product palette layers, tonal scales, semantic color mapping, and contrast-oriented usage guidance.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is this only a brand palette?

No. It includes neutrals, semantic states, and usage relationships.

Should dark mode be considered now?

The source recommends planning mappings early, with detailed adaptation handled separately.

Does a colorblind-safe palette solve everything?

No. The source also calls for labels, shapes, or other cues where meaning matters.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills