Empty States
Types
- First-use: User hasn't created anything yet. This is onboarding.
- No results: Search or filter returned nothing. Help them adjust.
- Cleared: User deleted everything. Celebrate or guide next action.
- 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