Open almost any design system documentation and find the empty state component. It will have a spot illustration, a headline, a short body copy, and maybe a call-to-action button. One component. One pattern. This is the problem.
Empty states aren’t one thing. They’re at least five distinct situations with different user emotional states, different cognitive needs, and different design jobs to do. Treating them as one component produces the most common empty state failure: the wrong message delivered with the right visual polish.
Here’s how to actually think about them.
The user has just arrived. There’s no content because they haven’t created any. Their emotional state is anticipatory, possibly uncertain. The design job is orientation and activation: explain what this space is for, show what it will look like when populated, and give a clear path to the first meaningful action.
This is the empty state with the highest business stakes. Get it right and you accelerate activation. Get it wrong and you create the blank-page paralysis that kills onboarding. A well-designed empty state is very crucial at this stage - it can make or break your product’s key metrics. The content here should answer three questions fast: what is this, why does it matter, and what do I do first?
No projects yet
Projects keep your work organised. Create one to get started — you can invite your team once it's set up.
Create your first projectThe user has completed a task and the result is intentionally empty: inbox zero, all tasks done, no pending items. Their emotional state is accomplishment. The design job is celebration and forward momentum - not more instructions.
This is the empty state most designers confuse with first use. They apply the same “here’s how to get started” template to a surface the user has been using for months. That’s not helpful - it’s patronising. Celebratory empty states mark success with positive reinforcement. The design registers the accomplishment, then gets out of the way.
All caught up
Nothing left to review. Check back later or take a well-earned break.
The user searched or filtered and the system returned nothing. Their emotional state is mild frustration, possibly confusion about whether they did something wrong. The design job is disambiguation and recovery: confirm you understood their query, explain why there are no results if possible, and give them a productive next step.
The key distinction from first use: this user knows how to use the product. They don’t need onboarding copy. They need help getting unstuck.
No suppliers match these filters
Try removing one or more filters to broaden your search.
Clear all filtersThe screen is empty not because there’s no content but because the system failed to retrieve it. Connection timeout, server error, permissions issue. Their emotional state ranges from mildly annoyed to concerned. The design job is transparency and recovery: be honest about what happened, don’t blame the user, and tell them what to do.
This is the empty state most often designed as an afterthought and the one users most remember when it goes wrong. Blank screens with no guidance lead to confusion, uncertainty, and higher abandonment rates. “Something went wrong”with no context is not a message. It’s a shrug.
Couldn't load your reports
There was a problem connecting to the server. Your data is safe — try refreshing or check back in a few minutes.
Try againThe content exists, but the user doesn’t have access to it. Their emotional state is confusion or mild frustration depending on whether they expected to have access. The design job is explanation without condescension: clarify what’s missing, who has access, and how they can get it.
This state appears constantly in enterprise products and almost never gets designed deliberately. It ends up looking identical to an error state or a first-use state, which causes entirely avoidable support tickets.
Finance reports are restricted
Access is limited to Finance team members. Contact your admin or request access below.
Request accessMost design systems document empty states as one component with optional variants. The better approach is to document them as five distinct patterns with distinct copy guidelines, emotional registers, and calls-to-action.
At minimum, any empty state in your system should answer three questions before it ships: what caused this empty state, what is the user’s emotional state when they see it, and what is the single most useful next action from here? A useful empty state will let the user know what’s happening, why it’s happening, and what to do about it. If your empty state can only answer one of those three, it needs more work.
One practical note on illustration: empty state spot art is decorative and should be treated as such. It sets tone, but it doesn’t do the communication work - the copy does. Prioritise the copy. The illustration follows.
References