color-system_skill

Overview

This skill teaches systematic color design for products, covering color theory, accessibility, theming, and dark mode. It helps you create harmonious palettes, semantic tokens, and component colors that scale across web and mobile apps. The outcome is a color system that supports accessibility standards, color-blind users, and flexible theming.

How this skill works

The skill inspects your primary hue, generates harmonious palettes (monochromatic, analogous, complementary, triadic), and expands them into a full spectrum of tokens. It maps global colors to semantic roles and component tokens, produces light and dark mode variables, and checks contrast against WCAG thresholds. It also suggests color-blind friendly alternatives and practical implementation snippets for CSS variables and Tailwind config.

When to use it

• When establishing or refreshing a brand color palette
• When you need WCAG AA/AAA contrast verification for UI text and components
• When implementing light and dark themes with consistent tokens
• When designing for color-blind accessibility and visual clarity
• When preparing a color token system for Tailwind or design systems

Best practices

• Pick a primary color based on brand emotion, distinctiveness, and contrast with white/black
• Separate global colors, semantic tokens, and component colors for flexibility
• Always verify text/background pairs against WCAG contrast ratios (4.5:1 for normal text AA)
• Avoid pure black in dark mode; use dark grays and desaturate accents
• Don’t rely on color alone—use icons, labels, and patterns for status and meaning

Example use cases

• Create a full color system from a single primary color with light/dark tokens and Tailwind config
• Audit an existing palette for harmony, contrast failures, and color-blind issues
• Generate a color-blind friendly palette and provide contrast ratios for each combination
• Define semantic tokens (bg, text, border, interactive) and map them to component styles
• Implement dark mode CSS variables and test readability across components