Empty states
Empty states populate when a container, list, or page has no content to display — communicating to the user that nothing exists yet and what they could expect to exist. A good empty state sets expectations, offers reassurance, and, when useful, points the user to their next action.
What an empty state is made of
Four parts. One is optional.
Every empty state in Cloaked follows the same skeleton so the pattern is immediately recognisable across Tasks, Spam, Messages, Identities, and any future surface.
- 01 Illustration Paired light + dark PNG from the Cloaked illustration set, directly tied to the subject.
- 02 Headline Clearly names what will populate here. SF Pro Bold 20 / 25.
- 03 Body One sentence. Describes what the user should expect, or offers reassurance. SF Pro Regular 14 / 20.
- 04 ActionOPTIONAL Only when there's a single, obvious next step for the user. Primary pill button.
Hooray, No Recent Spam!
Messages marked by Cloaked as spam will display here.
Writing a good empty state
Three rules, used in combination, keep empty states from feeling empty.
Name what goes here
Titles clearly indicate what the user should expect to populate if the page is not empty — "No Recent Calls", not "Nothing here".
Bring calm, not alarm
Communicate a sense of peace and hope for pages like Spam or critical tasks. An empty inbox is a success, not a void.
Guide when there's somewhere to go
If an obvious next step exists — like creating the user's first identity — add a single primary action. Otherwise, leave it off.
Every top-level empty state
The six canonical empty states shipped in the Cloaked app, rendered on light surfaces. Illustrations pulled directly from the Figma library — don't redraw.
You're All Caught Up!
Everything's running smoothly. Tasks will appear here when available.
No Recent Messages
Messages for your Cloaked phone number will display here.
No Recent Calls
Calls for you will display here when you receive them.
Hooray, No Recent Spam!
Messages marked by Cloaked as spam will display here.
No Recent Emails
Find recent emails here when you receive them.
Create Your First Identity
Cloaked generates and manages identities to protect your real one.
Generate IdentityPaired dark illustrations
Every empty state ships with a dark-mode illustration twin. Always swap both illustration and typography tokens together — never use the light illustration on a dark surface.
You're All Caught Up!
Everything's running smoothly. Tasks will appear here when available.
No Recent Messages
Messages for your Cloaked phone number will display here.
No Recent Calls
Calls for you will display here when you receive them.
Hooray, No Recent Spam!
Messages marked by Cloaked as spam will display here.
No Recent Emails
Find recent emails here when you receive them.
Create Your First Identity
Cloaked generates and manages identities to protect your real one.
Generate IdentityLight + dark pairs
Every illustration exists as a matched pair. Drop them straight from the Figma library — don't recolor, don't rescale disproportionately, don't mix and match.
Pick the right pattern
Not every empty container needs the full primary treatment. Match the pattern to how much attention the state deserves.
| Pattern | When to use | Has action? |
|---|---|---|
| Primary — illustrated | Top-level pages and tabs the user lands on. Tasks, Messages, Calls, Spam, Emails, Identities. | Only on first-run |
| Secondary — icon | Deeper containers and modal flows — search with no results, filtered inbox, empty folder. | Rarely |
| Inline — text only | Small lists inside a larger surface. "No items yet" under a section header. | Never |
The things we keep tripping on
Pair the illustration to the subject
The spam state uses the spam illustration. Never reuse the tasks illustration for an empty messages list.
Swap both light and dark
Dark-mode screens use the dark illustration. Don't paint a light illustration onto a dark background — the outline breaks.
Add a button "just in case"
If there isn't a single obvious next step, leave the action off. Two buttons means no button.