skills.rest
core-wrk
core-wrkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/core-wrk/employee-number-two --skill color-system-builder
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
hathbangerhathbanger

brand-architect

Generate SVG logos, color palettes, and typography from a brand brief.

Community
Intermediate
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate
guideopsguideops

bento

Generate Bento design system documentation with modular grid, typography, color tokens, and spacing scale.

Community
Advanced
ChoreShoreChoreShore

color-contrast

Validate WCAG 2.1 color contrast ratios and suggest compliant alternatives.

Official
Intermediate