The screens nobody designs, designed properly. First run, no results, no permission, offline, error, and the six others that get a shrug emoji.
Empty states are the last thing built and the first thing a new user sees. Most are either a cartoon and an apology, or nothing at all — a blank region that reads as broken.
This set treats each one as a moment where the product has to explain itself without the usual crutch of content being present.
Every state answers three questions in a fixed order: what happened, whether it's a problem, and what to do next. Where there is nothing useful to do next, it says so plainly instead of inventing a button.
Reference landscape
- Basecamp — Right about tone, light on variety
- Stripe — Right about restraint, no first-run state at all
“An empty state is a sentence, not a picture.”
Illustration is the most expensive and least durable part of an empty state — it dates, it doesn't translate, and it rarely says anything. Once the words carry the meaning, the whole set can be built from three components and stays consistent across a product for years.
Stage by stage
01
Gap analysis
Audited 30 products for their empty states. Nineteen had none for at least one critical surface; seven used the same illustration for opposite meanings.
02
Wireframes
One layout, eleven contents. Fixing the layout first is what makes the set feel like a set rather than eleven decisions.
03
Design system
Three components — frame, message, action — with a documented rule for when the action is omitted.
What was difficult
The difference between 'no results' and 'nothing here yet' is invisible to most teams, and getting it wrong makes a product feel broken.
The set names each state by the user's situation rather than the system's, so picking the right one requires no judgement call at implementation time.
Exactly what you get
- Figma source
- 11 states
- Light + dark
- React + Tailwind
- Version
- 1.0.0
- Formats
- Figma, React, Tailwind
- Screens
- 11
- Components
- 3
- Dark mode
- Yes
- Prototype
- No
- Accessibility
- AA
Dependencies
- Inter — SIL Open Font Licence — included
Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.
Eleven states that a team can drop in during a sprint rather than defer to the one that never comes.
