color-system-design
CommunityDesign accessible, perceptual color systems.
Design & Creative#theming#accessibility#color palette#semantic tokens#oklch#wcag contrast#color scales
Authorjacob-balslev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents inconsistent, non-accessible color palettes by guiding the construction of perceptually uniform scales and semantic tokens that keep working across light and dark themes.
Core Features & Use Cases
- Perceptually uniform palette construction: Generates color scales using OKLCH/LCH so equal step indices map to more equal perceived lightness changes.
- Semantic token mapping for components: Defines tokens by intent (e.g., background-surface, text-primary, danger-emphasis) and resolves them per theme rather than hard-coding appearances.
- Accessibility verification for real pairs: Ensures token pairings meet WCAG 2.1 contrast minima (and can incorporate APCA-aware checks) across both light and dark surfaces.
Quick Start
Use this skill to audit an existing palette for WCAG contrast failures and propose minimal, semantically consistent OKLCH-based adjustments for both light and dark themes.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: color-system-design Download link: https://github.com/jacob-balslev/skill-graph/archive/main.zip#color-system-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.