Destructive actions coloured red at rest
- Forbidden
- A red "Delete" sitting in a list of rows
- Instead
- At rest a destructive action is tertiary — less prominent, further from the primary, or disclosed. Red makes it *more* prominent, which is backwards: the goal is friction, not attention.
What this rule looks like
Why this rule
Red belongs on the confirming button inside the confirmation step — --color-text-error and the --color-fill-error / --color-stroke-error-strong set — where the user has already chosen and needs to feel the weight of it.
But not at every confirmation. The reference grades the friction, and so should you:
| Friction | When | Treatment |
|---|---|---|
| Light | A less serious action | Ask for confirmation. The confirming button stays brand-coloured, not red |
| Moderate | Genuinely destructive, recoverable with effort | Red confirming button, red accent on the dialog |
| Heavy | Irreversible — deleting an account, purging data | Red, plus a checkbox that must be ticked before the action can fire |
Reaching for red at every confirmation spends it, and a red button on "delete this draft" leaves nothing louder for "delete your account". Whichever level you pick, prefer making the action undoable over making it frightening (04-principles.md, Tiebreaker 3) — friction protects nobody who has already clicked.
- Kind
- Rule
- Section
- Things to avoid
- Group
- States and interaction
- Bucket
- judgment
- Severity
- note
- Since
- v0.1.0