Overview
Empty states are the most neglected screens in a product. They are designed last, approved quickly, and shipped as an afterthought — usually a centered illustration with "No data yet" and a button that may or may not work. The result is a first-time user experience that communicates nothing about what the product does or why they should do it.
The Empty State Design System Prompt builds a systematic approach to empty states — distinguishing between the five types of empty states, defining the content hierarchy that guides users to the next action, and specifying the visual treatment that makes empty states feel intentional rather than incomplete.
What you get: - Empty state taxonomy: the five types and what each one requires - Content hierarchy model: the headline, body, and CTA structure for each type - Visual treatment system: when to use illustration, icon, or no visual element - First-use empty state: the onboarding-integrated approach that converts empty into opportunity - Error vs. empty distinction: the design rules that prevent users from confusing the two - Contextual empty states: how empty states change based on the user's filter or search context
Built for: product designers designing the zero-data and first-use states for web and mobile applications.