← Back to Skills

Color System Designer

Creates systematic color palettes for digital products including primary/secondary/accent scales, semantic color tokens, dark mode mappings, accessibility contrast ratios, and brand-aligned color systems.

Gold
v1.0.00 activationsDesign & UXContent Creationexpert

SupaScore

84.25
Research Quality (15%)
8.5
Prompt Engineering (25%)
8.5
Practical Utility (15%)
8.5
Completeness (10%)
8.5
User Satisfaction (20%)
8.5
Decision Usefulness (15%)
8

Best for

  • Creating comprehensive design token systems for multi-brand applications with light/dark mode support
  • Generating WCAG AA compliant color scales from brand colors using OKLCH color space
  • Designing semantic color tokens for UI states (success, error, warning, info) with consistent contrast ratios
  • Building accessible color systems for fintech apps requiring high contrast and regulatory compliance
  • Establishing color naming conventions and governance for design system adoption across teams

What you'll get

  • OKLCH-based 10-step color scales (50-950) with perceptual uniformity and gamut validation
  • Semantic color token definitions with contrast ratio verification against all background colors
  • Dark mode color mappings with automatic chroma adjustments and accessibility compliance documentation
Not designed for ↓
  • ×Creating illustrations, logos, or graphic design elements beyond color systems
  • ×Brand strategy or marketing color psychology without technical implementation
  • ×Print color systems using CMYK or Pantone color spaces
  • ×Color correction for photography or video content
Expects

Brand colors (hex/RGB/HSL), design requirements (platform, themes, accessibility level), and functional color needs (semantic states, component variations).

Returns

Complete color system with OKLCH-based scales, semantic tokens, dark mode mappings, contrast ratio validation, and implementation-ready design tokens.

Evidence Policy

Standard: no explicit evidence policy.

color-systemdesign-tokenscolor-palettedark-modeaccessibilitywcagcontrast-ratiooklchsemantic-colorsbrand-colorsdesign-systemcolor-sciencelight-modecolor-scales

Research Foundation: 14 sources (2 books, 5 official docs, 4 industry frameworks, 2 academic, 1 paper)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.

Version History

v1.0.02/15/2026

Initial release

Works well with

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Common Workflows

Complete Design System Creation

End-to-end design system creation from brand foundation to implementation-ready tokens

Activate this skill in Claude Code

Sign up for free to access the full system prompt via REST API or MCP.

Start Free to Activate This Skill

© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice