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:

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.

When in doubt, cut the colour — neutral grey communicates status without semantic weight, and neutral is better than a misused semantic colour.

Orange Is Always a Warning

Orange (amber) carries a specific signal: pay attention, something may go wrong. Do not use it for:

• Neutral states (use grey)
• Progress or pending (use blue or a spinner)
• Informational content (use blue)
• Branding or decorative purposes inside status indicators

If orange appears in the UI, the user should immediately know it requires their attention.

Errors Should Be Recoverable

The worst error is one the user cannot recover from. Design every error state with a path forward.

Error message anatomy

Every error should answer three questions:

1. What went wrong? — plain language, no error codes
2. Why did it happen? — if useful and known
3. What should the user do next? — specific, actionable

❌ "Error 500"
❌ "Something went wrong"
✓  "We couldn't save your changes. Check your connection and try again."
✓  "This email is already in use. Sign in instead, or use a different email."

Recovery actions

• Always provide a retry button for transient failures (network errors, timeouts)
• For validation errors, point directly to the problematic field
• For destructive actions that failed, reassure the user nothing was lost
• For session expiry, redirect to login and return the user to where they were

Prevent Large Errors Before They Happen

The most damaging errors — data loss, irreversible actions, broken state — should be prevented at the design level, not handled after the fact.

• Confirm before irreversible actions: "Delete this project and all 47 tasks? This cannot be undone."
• Disable unavailable actions rather than letting users trigger them and hit an error
• Autosave where possible so a browser crash or accidental close does not destroy work
• Optimistic UI with rollback: show the success state immediately, silently retry on failure, surface an error only if the retry also fails

Levels of Severity — Use Sparingly

Not every problem is equal. Match the visual weight of the feedback to the severity.

Avoid showing multiple simultaneous error types at once — one clear message is more useful than three overlapping alerts.

Review Checklist

• Does the product use four or fewer semantic status colours?
• Does each colour mean exactly one thing, used consistently everywhere?
• Is orange/amber reserved exclusively for warnings?
• Does every error message state what went wrong and what to do next?
• Do all transient errors (network, timeout) have a retry action?
• Are irreversible destructive actions protected by a confirmation step?
• Is autosave or draft recovery available for long-form or complex inputs?
• Are multiple simultaneous error states avoided?

Common Anti-Patterns