design-color
Skill9 starsChanged 2 months agoMITView on GitHub
Use when creating or repairing a palette, semantic color roles, OKLCH scales, dark mode, contrast pairs, gamut fallbacks, “buat palet”, “warna brand”, “dark theme”, or color that must measurably pass accessibility requirements.
1 other project uses a version of this.
Adopted by
Most recently taken up by
- shreyas-makes/agent-skillstheir own version, first seen Jul 15, 2026
Other versions1 project uses a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 1
- shreyas-makes/agent-skills★ 2same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository36 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- componentsSkill
- content-designSkill
- data-fetchingSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- engineering-vocabularySkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- motionSkill
- performanceSkill
- polishSkill
- prototypeSkill
- quality-loopSkill
- responsiveSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill
The file
Files
Design Color
Overview
Build color from product meaning and measured pairs. OKLCH is a useful working space, not proof that contrast or gamut requirements pass.
When to use
- Palette, semantic roles, theme derivation, or color migration
- OKLCH, Display P3, gamut mapping, or fallback work
- Contrast, status colors, charts, or dark-mode complaints
When to skip
- Selecting which existing token preset applies →
tokens - Accessibility audit without palette changes →
accessibility - Surface depth without color-system work →
design-surfaces
MUST
| Rule | Detail |
| Preserve source | Existing brand/project palette wins unless change is requested |
| Semantic roles | Name by purpose, not raw hue or component instance |
| Measured contrast | Test rendered foreground/background pairs; lightness heuristics are not proof |
| Gamut safety | Provide target-browser fallback for colors outside supported gamut |
| Theme derivation | Rebalance hierarchy and chroma; do not mechanically invert |
| No color-only meaning | Pair status with text, icon, shape, or pattern |
Workflow
- Inventory — brand colors, tokens, themes, semantics, targets, and failing pairs.
- Model — choose a working space and build neutral, accent, and semantic roles.
- Derive — create states and themes while preserving meaning and hierarchy.
- Measure — contrast, gamut, forced-colors, and color-vision risks.
- Integrate — hand final values to
tokens; document method and waivers.
Boundaries
- May decide: OKLCH working values and closest token mapping when no brand values exist.
- Must not: claim conformance from L alone, replace an existing palette casually, or treat APCA as WCAG conformance.
Checklist
- Project/brand source and semantic roles identified
- Light/dark states and target gamut checked
- Rendered contrast pairs measured
- Method, evidence class, and fallbacks recorded
Depth
Full guide: references/design-color.md.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.