What it is
Creates professional color systems for your brand or product with full tonal scales, semantic colors (success, warning, error), and accessibility-compliant contrast ratios. Perfect for teams building design systems, pitch decks, or brand guidelines without needing design software expertise. Gets you from brand colors to a complete, usable palette in minutes.
What it does
- Generates full tonal scales (light to dark) for your brand colors
- Creates semantic color sets for success, warning, error, and info states
- Tests all color combinations for accessibility compliance (WCAG AA/AAA)
- Builds matching dark mode and light mode palettes
- Provides usage guidance for each color in your system
Use it when
- You're building a brand identity and need a complete color palette
- You need to ensure your design meets accessibility standards
- You're creating a pitch deck or marketing site and want professional color choices
- You need dark mode colors that match your existing brand
Add this skill to your AI
Copy the source URL and ask your AI to add it. Most coding agents — Claude Code, Cursor, Codex, Gemini CLI, OpenCode, Windsurf — will fetch and install it for you.
Try this prompt:
Add this skill to my project: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/color-system