Design reviews happen with flattering fake data—full grids, perfect avatars, plausible charts. Then a real user signs up and meets the truth: zero projects, zero messages, zero anything. The empty state is your actual first impression, and treating it as an edge case means shipping a blank room as your welcome mat.

Dead end vs. starting line

A bare “No projects yet” is a dead end—it describes absence and offers nothing. A working empty state answers three questions in one glance: what belongs here, why it is worth having, and the single action that changes it.

<p>No reports found.</p>


<div class="empty-state">
  <h3>Your reports live here</h3>
  <p>Track performance and share results with your team.</p>
  <button>Create your first report</button>
</div>

Note the button copy: “Create your first report” beats “New report”—it acknowledges the moment and frames the action as a beginning, not an operation.

“Empty is a state you designed or a state you neglected. The user cannot tell the difference between neglect and abandonment.”

Emptiness is plural

First-use emptiness wants onboarding energy. Cleared-inbox emptiness wants celebration—that zero is an achievement. Filtered-search emptiness wants an exit: “Nothing matches—clear filters?” Error emptiness wants honesty and a retry. One illustration recycled across all four reads as indifference. Design the vocabulary once—icon, headline, body, action—then write each variant deliberately. Rooms feel different when someone expected you.