Empty States
Patterns for when interfaces have no content to display. Each state should guide users toward productive next steps.
Empty State Types
Six common scenarios requiring explicit empty state handling.
No results found
Nothing matches “dark mode tokens”. Try a different query or browse all foundations.
Upload your first file
Drag a PDF, DOCX, or image here to get started. Supports files up to 25 MB.
Pro feature
Advanced analytics are available on the Pro plan. Upgrade to unlock this section.
Connection lost
Can't reach the server. Check your connection and try again. Offline mode is available.
No bookmarks yet
Save important pages by clicking the bookmark icon. They'll appear here for quick access.
Project deleted
This project was removed. You can restore it from the trash within 30 days.
No Results
Search returns empty or no matching content exists
Suggest alternative queries, show popular topics, or offer to start fresh
No files match your query. Try 'Show me all components' or upload a file to search.First Interaction
User has not yet engaged with the product
Focus on core value proposition with clear primary action
Upload your first document to get started. Supports PDF, DOCX, and TXT files.No Access
User lacks permission to view or perform an action
Explain the limitation clearly and provide upgrade or contact paths
Upgrade to Pro to access advanced analytics. [View Plans] or [Contact Sales].Disconnected
Network or service unavailable
Show retry option with estimated time or offline capability notice
Connection lost. Retrying in 3s… Use offline mode for previously loaded content.Empty Collection
List or library has no items yet
Show creation flow or explain what belongs here
No bookmarks yet. Save important pages by clicking the bookmark icon.Deleted Content
Content was removed or belongs to deleted account
Acknowledge deletion and suggest alternatives
This project was deleted. [View other projects] or [Restore from trash].Visual Principles
Design rules ensuring empty states remain consistent and helpful.
Illustration Override
Use subtle duotone illustrations, never full color photography
--surface, --border, --accent-subtleText Hierarchy
Primary text sets context, secondary text provides next step
--text-primary, --text-secondaryAction Placement
Primary action aligned left, secondary right in button group
--accent, --surface-raised