Color System Builder

Translate brand voice and audience into accessible color palettes with WCAG AA compliance.

Updated Apr 6, 2026

Search Tags:#design #accessibility #wcag #color-palette #color-system #brand-identity

Ready to run

npx skills add https://github.com/core-wrk/employee-number-two --skill color-system-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Color System Builder
Source: https://github.com/core-wrk/employee-number-two/tree/main/projects/03-brand-identity/.claude/skills/color-system-builder
Command: npx skills add https://github.com/core-wrk/employee-number-two --skill color-system-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Color System Builder helps founders translate brand voice and audience insights into a complete, accessible color palette, ensuring consistency across identity and product applications.

Core Features & Use Cases

One-question-at-a-time, designer-guided color exploration that grounds decisions in brand voice and audience.
Utilizes internal references and live accessibility checks to ensure accessible text-on-background pairs.
Use Case: When defining a brand identity, quickly establish a primary color, supporting accents, neutrals, and semantic colors that align with the brand and meet WCAG standards.

Quick Start

Describe your brand voice and audience, and I will propose 2–3 color directions to start the palette.

Frequently Asked Questions about Color System Builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a brand color palette that meets WCAG accessibility standards?▼

A complete color system requires 1 primary color, 1 secondary or accent color, at least 4 neutrals, and 4 semantic colors, all verified for accessibility through WCAG AA contrast compliance checks across media.

What's the best way to translate brand voice into a cohesive color direction?▼

You start the process by describing your brand voice and audience, which prompts the generation of 2 to 3 proposed color directions to ground your palette decisions before applying them across media.

Can I generate semantic colors for UI states while ensuring contrast compliance?▼

Yes, generating semantic colors for UI states is supported, applying them across media with live accessibility checks to guarantee every text-on-background pair satisfies WCAG AA contrast compliance.

Does this color system approach work for both brand identity and product applications?▼

Yes, this approach ensures consistency across both brand identity and product applications by translating audience insights into a unified palette applied across all media with accessibility checks.

Why do my brand colors fail accessibility checks on dark backgrounds?▼

Brand colors fail accessibility checks on dark backgrounds when contrast ratios fall below WCAG AA standards, requiring palette adjustments to neutrals and accents using live text-on-background verification.