Generates comprehensive, accessible color palettes and design tokens for consistent application UI styling.
The Color System Designer skill streamlines the creation of production-ready visual systems by defining primary, secondary, neutral, and semantic colors tailored to your application's specific requirements. It automatically generates necessary shades and tints while ensuring strict WCAG accessibility compliance through contrast ratio verification. By outputting design tokens in structured formats, it bridges the gap between high-level design concepts and frontend implementation, helping developers maintain visual consistency across components and themes.
Key Features
01Standardized design token output for easy implementation in codebases
02Automated generation of primary, secondary, and neutral color scales
030 GitHub stars
04WCAG AA/AAA accessibility compliance with contrast ratio reporting
05Definition of semantic colors for success, error, warning, and info states
06Contextual usage guidelines for UI elements, text, and backgrounds
Use Cases
01Establishing a cohesive brand identity and color palette for a new web application
02Refactoring hardcoded hex values into a structured, tokenized design system
03Ensuring existing UI colors meet modern accessibility standards for inclusive design
