Error states
Error states appear when something prevents content or an action from completing — a dropped connection, a timed-out request, a server hiccup. A good error state tells the user what happened in plain language, reassures them nothing is lost, and always offers a way forward.
What an error state is made of
Four parts. Same skeleton as empty state.
Error states share the empty-state layout so users recognise the pattern instantly. The difference is purpose: empty states describe what will appear; error states describe what went wrong and how to recover.
- 01 Illustration Simple, friendly icon tied to the cause — a warning glyph, a disconnected signal, a broken link. Never fear-driven or punitive.
- 02 Headline One short line naming what happened in human terms. SF Pro Bold 20 / 25.
- 03 Body One sentence. Describes the situation and reassures the user — nothing is lost, this is fixable. SF Pro Regular 15 / 20.
- 04 ActionOPTIONAL A single pill button for the next step — usually "Try Again". Omit only when there is literally nothing the user can do.
Something went wrong
We couldn't load your content. Please try again.
Try AgainWriting a good error state
Five rules, applied together, keep error states calm, human, and useful.
Be clear, not technical
Avoid system language, codes, and stack traces. "Something went wrong" — not "Error 500: Bad Gateway".
Reassure, don't blame
Never imply the user broke it. Frame the problem as temporary and solvable: "Please try again", not "You did this wrong".
Always provide a next step
A retry, a refresh, a way back. Users should never hit a dead end — if there's truly no action, explain that clearly.
Treat similar scenarios the same
A generic load failure looks the same whether it's on Tasks, Messages, or Emails. Consistency teaches users the pattern.
Friendly, not fear-driven
Use warm, simple visuals — a warning icon, a disconnected signal. Avoid red, crisis, or overly critical imagery.
The two canonical error states
Most errors in Cloaked collapse to one of two cases: a generic load failure or a lost connection. Both ship in light and dark mode, rendered directly from the Figma library — don't redraw the illustrations.
Something went wrong
GENERIC · LIGHTNo internet connection
NO WIFI · LIGHTSomething went wrong
GENERIC · DARKNo internet connection
NO WIFI · DARKPick the right pattern
Not every failure needs the full-screen treatment. Match the pattern to how much the error disrupts what the user was doing.
| Pattern | When to use | Has action? |
|---|---|---|
| Full-screen — illustrated | The whole view failed to load. Generic errors and lost connection on top-level tabs (Messages, Tasks, Identities, Emails). | Always — "Try Again" |
| Inline — banner | A section or list failed inside an otherwise working page. Shows at the top of the affected container with a retry link. | Usually |
| Field-level — inline | A form input failed validation or a field-specific request failed. Appears directly under the input. | Implicit — fix and retry |
| Toast — transient | Background action failed (save, send, delete) but the current view is still usable. | Optional — "Undo" / "Retry" |
Approved copy for the common cases
Use these verbatim unless the product surface has a specific reason to diverge. Consistency is what makes the pattern feel calm.
Something went wrong
We couldn't load your content. Please try again.
Try AgainNo internet connection
Check your connection and try again.
Try AgainThat took too long
We couldn't reach Cloaked just now. Please try again.
Try AgainYou don't have access to this
Ask the account owner to share it with you.
No actionWe couldn't find that
The page may have been moved or deleted.
Go BackCloaked is taking a quick break
We'll be back shortly. Thanks for your patience.
No actionCommon pitfalls
Say what happened in one line
"Something went wrong." Four words. No jargon, no codes, no apology paragraph.
Offer a single obvious action
"Try Again" covers almost everything. One button is always better than two.
Show technical error codes
Users don't know what "500" means and it makes the product feel broken. Keep codes in logs, not UI.
Blame the user
"You entered the wrong" / "Invalid input by you" — rewrite to describe the situation, not the person.
Leave a dead end
Every error needs a way forward. If retry isn't possible, offer "Go Back" or a link to something that works.
Use red alarm imagery
Cloaked error illustrations are calm and neutral. Red fills, broken glass, and skulls aren't on brand — even when the bug is scary.