Stats
Actions
Tags
From design
Apply 5 professional color rules - palette systems, WCAG contrast, semantic meaning, visual hierarchy via color, surface layering. Use when designing/reviewing color usage, building a design system, or auditing accessibility. Triggers on "color palette", "improve contrast", "color system", "dark mode", "is the color choice OK", "color hierarchy", "background colors".
How this skill is triggered — by the user, by Claude, or both
Slash command
/design:colorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Five rules for systematic, accessible, on-brand color usage.
Five rules for systematic, accessible, on-brand color usage.
PRIMARY 1 brand color × 9 shades (50, 100, 200, ..., 900)
NEUTRAL gray scale × 9 shades for text and backgrounds
SEMANTIC success (green), warning (amber), error (red), info (blue)
Max 3 non-neutral hues in a design (primary + 2 accents at most).
Body text: 4.5:1 minimum (AA)
Large text (≥18px): 3:1 minimum
UI components: 3:1 minimum
Body text aspiration: 7:1 (AAA)
Use color to guide attention:
Highest priority: brand color OR highest contrast in scale
Secondary: muted / lower-saturation versions
Disabled: 40% opacity OR 3:1 contrast max
The single most-saturated color on a page = the primary CTA. If everything's saturated, nothing is.
For backgrounds and depth:
bg-base page background
bg-subtle section background
bg-raised card / panel background
bg-overlay modal / popover background
Keep surface colors within 10–15% lightness steps — too close = no depth, too far = uncanny.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub polarislt0710/claude-skills-hugo --plugin design