Skip to main content

create-a-color-palette

Create a role-based color palette with accessible contrast, state coverage, theme behavior, and reproducible tokens. Use when a visual system needs more than a collection of attractive swatches.

Source facts

Repository
protosphinx/sphinxstack
Last source activity
July 29, 2026 at 13:55
Detected SKILL.md language
English
Stars
3
Forks
0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer
2 files

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
create-a-color-palette
category
design
description
Create a role-based color palette with accessible contrast, state coverage, theme behavior, and reproducible tokens. Use when a visual system needs more than a collection of attractive swatches.
# create-a-color-palette Name colors by purpose before naming them by appearance. ## When to use - Use for product, brand, data, light and dark theme, or status-color work. - Do not communicate status or meaning by color alone. ## Procedure 1. Inventory surfaces, text, borders, focus, links, actions, selection, disabled, status, charts, overlays, and themes. 2. Define neutral and accent families with enough steps for real role pairs. 3. Assign semantic tokens such as text, surface, border, action, danger, warning, success, and focus. 4. Calculate and visually test required foreground-background contrast for text and meaningful graphics. 5. Check hover, active, selected, disabled, visited, focus, and high-contrast behavior. 6. Test color-vision differences, grayscale, dark mode, transparency, images, and printed output where relevant. 7. Document token values, role pairings, prohibited pairings, and ownership. ## Done - A palette file lists source values, semantic tokens, supported role pairings, states, themes, and restrictions - Contrast checks and visual tests verify text, controls, focus, status, charts, and non-color cues
View on GitHub