Claude Skills · UI Design
Colour palette
Generate an accessible colour palette with scales, semantic colours and contrast results. Use for brand colour, UI colour or dark mode palette questions.
Install this skill
curl -fsSL https://uxmate.co.in/skill-files/install.sh | bash -s -- uxm-color-paletteOr unzip into ~/.claude/skills/. Then ask Claude Code to do the task, or call /uxm-color-palette.
What is inside
---
name: uxm-color-palette
description: Generate an accessible colour palette with scales, semantic colours and contrast results. Use for brand colour, UI colour or dark mode palette questions.
---
# Colour palette
1. Take a brand colour or mood. Ask the use case (web app, marketing, data viz).
2. Build a 10-step scale (50-900) for primary and one accent, a neutral scale with a slight brand tint, and semantic colours: success, warning, error, info.
3. Provide HEX values and usage rules (backgrounds, text, borders, buttons, hover/active).
4. Report WCAG contrast ratios for key pairings (text on background, button text on button). Fix any below 4.5:1 for body text and 3:1 for large text/UI.
5. Provide a dark-mode mapping (not a simple inversion).
Output tables and a CSS variables block. Explain choices briefly.More UI Design skills
- Design tokens · Define design tokens (colour, type, spacing, radius, shadow, motion) and output them as JSON and CSS variables.
- Type scale · Create a typographic scale with font pairing, sizes, line heights and responsive rules.
- Component spec · Write a complete UI component specification with anatomy, variants, states, behaviour and accessibility.
- Dark mode · Plan and review a dark mode theme: surfaces, elevation, colour mapping, contrast and images.