Empty States

Types

1. First-use: User hasn't created anything yet. This is onboarding.
2. No results: Search or filter returned nothing. Help them adjust.
3. Cleared: User deleted everything. Celebrate or guide next action.
4. Error: Data failed to load. Explain and offer retry.

Structure

[Optional illustration]
Headline: What belongs here (not "Nothing here")
Body: Why it's valuable to add something (one sentence)
CTA: Single clear action to fix the empty state

Examples

Bad

"No projects yet."

Good

"Create your first project. Projects help you organize your work into focused spaces." [Create Project] button

Rules

• Every empty state needs a CTA
• The CTA should be the primary action for that area
• Empty states should feel inviting, not broken
• Don't use sad face illustrations (it's not the user's fault)
• Empty states are temporary, design them to be replaced by content