status-colors-and-errors
Installation
SKILL.md
Status Colours and Error Design
Keep the Colour Set Small
Every status colour added to a system is a cognitive burden on the user. They must learn what each colour means, remember it, and interpret it correctly under stress — which is exactly when errors occur.
The minimal set that covers almost everything:
| Colour | Semantic meaning | Always means |
|---|---|---|
| Red | Error / failure / destructive | Something went wrong, or this action cannot be undone |
| Orange / Amber | Warning | Something needs attention before proceeding |
| Green | Success / positive | Action completed, state is healthy |
| Blue | Info / neutral status | Informational, no action required |
Rule: each colour maps to exactly one meaning across the entire product. If orange means "warning" in one component and "pending" in another, the system breaks down.
Every status tone must be visibly distinct from the others. If two tokens render alike, keep one. A second name for the same visible colour is not a second status: authors pick either, users read one state, and the name becomes a lie. Draft and pending states take neutral, not the warning tone.