Empty State Archetype

An empty state archetype defines one of the five critical blank screens that every digital product ships whether the team plans for it or not. The archetypes are zero data first run, zero results from a filter, zero permission, zero connection, and zero AI output. Each appears at a unique point in the user journey and each demands tailored copy, visual hierarchy, primary action, and brand voice. The empty state is not an afterthought assigned to the intern. It is the product in its purest form. The screen the user sees before they have created any data is the screen that decides if they will ever create any data. Linear treats their empty issues list as a composition exercise complete with one highlighted keyboard shortcut and zero unnecessary illustrations. Notion drops the user into a blank page with immediate keyboard focus and a faint hint at the slash menu. These choices turn potential abandonment into immediate activation.

What it is. The empty state archetype is the complete design system for a specific kind of blank screen. It combines context that explains the emptiness, one primary action the user can take right now, brand consistent voice that avoids apology, clear visual hierarchy that guides the eye in under two seconds, and subtle motion that signals the screen is ready and waiting. Every strong archetype shares five non negotiable elements. Context that names the screen and the reason it is empty. Action limited to one primary next move triggered by a single keystroke. Voice that matches the brand instead of shifting to sterile error tone. Hierarchy that limits the screen to a title one line explanation primary button and optional secondary link. Motion that cues the user the screen is alive whether a pulsing button or blinking cursor. Skip any of these and the screen falls back into apology mode and leaks users. The first archetype zero data first run carries the highest stakes. This is the new user experience before any projects or documents exist. Cursor nails it by opening directly into an editor with a sample prompt already in place. No welcome modals. No product tour. The user feels they have already started the work. Figma does the same with its new file canvas where the toolbar sits ready and the infinite space invites immediate drawing or pasting. The second archetype zero results from a filter hits when the user has set parameters that return nothing. Here the screen must acknowledge the query validate that it ran correctly and provide an escape hatch. The third archetype zero permission appears when a user tries to access something they lack rights to see. Slack turns this into an opportunity by naming the private channel explaining the access rules and offering a one click request access button. The fourth archetype zero connection covers the state before any integrations or data sources link up. Vercel presents deploy options templates and import tools all in one view so the first action feels obvious. The fifth archetype zero AI output is the newest and the one most teams currently botch. When a prompt returns nothing the screen must explain the exact reason be it timeout bad input or safety filter and then offer a modified prompt or retry button.

What it isn't. An empty state archetype is not a single reusable React component that you pass a title and description into. That lazy pattern is why so many products feel soulless at their most important moments. It is not a stock illustration of a detective with a magnifying glass or an astronaut floating in space. Those images signal that the team ran out of ideas and resorted to decoration instead of solving the actual design problem. Six patterns destroy more empty states than bad code ever could. Hand wavy illustrations that replace real copy. Dead end states with no next action. Lectures that fill the screen with tutorial text. The inbox zero trap that celebrates before the user has done the work. The nothing here yet cop out that shows the designer gave up. And the cardinal sin of using one generic component for all five archetypes. Each archetype carries different stakes. A first run screen must sell the product. A no results screen must preserve the users intent. Using the same card for both flattens both. It is not an apology. Sentences that begin with Sorry or Unfortunately train the user to see your product as unreliable. It is not a lecture. If your empty state contains three paragraphs explaining what the feature does then the feature itself is too complicated. It is not the inbox zero party thrown on day one. Superhuman can celebrate because users have spent months training the AI and clearing real email. Your first run state celebrating an empty list feels like patronizing nonsense. It is not a dead end with no next action. Every empty state must offer one obvious move preferably triggered by a single keystroke. It is not generic copy like No results found. The user already sees that nothing showed up. Your job is to tell them why and what to do about it.

Concrete example. Take the complete set of archetypes working together inside one product. In 2024 Linear shipped an update that refined all five states simultaneously. Their first run issues page now opens with a crisp empty board one highlighted command to create the first issue and a short line that reads This cycle is empty. Add the first issue with C. The screen feels alive and users create their first issue 40 percent faster than before the redesign. For zero results they show the exact JQL or filter string the user applied explain that nothing matched and provide both a Clear all button and a suggested broadening of the query. Dropbox in its early years presented a clear drop zone with helpful tips that disappeared after first upload turning a blank folder into an invitation instead of a void. For zero permission Slack turns the private channel wall into an invitation. The empty state names the channel explains who can add you and offers a request access button that notifies the right people. For zero connection Vercel shows a prominent Deploy button import from Git option and several starter templates all on the same screen. Stripe Atlas shows what the payments dashboard will look like with sample data and direct links to the API key you need next. ChatGPT handles first run AI by populating the empty chat with five concrete prompt examples that actually work instead of a generic placeholder. Claude offers one of the better zero AI output states. When a prompt violates usage policy it explains the exact policy line that triggered the block and gives three alternative prompt templates that achieve similar goals without violation. Loom handles recording failures by preserving the file and offering an immediate retry button with troubleshooting steps. These concrete implementations prove that the best teams treat empty states as first class product surfaces not polish items assigned at the end of the sprint. Figma in 2023 refreshed their new file experience to remove all the previous cruft. The empty canvas now loads with the pencil tool preselected and a small set of starter shapes visible but not intrusive. The result is instant creation instead of decision paralysis.

When to use when not to. Deploy the correct empty state archetype the moment you create any screen that depends on data. Run the empty state audit before you ship any new feature. Ask if the screen names where the user is and why it is empty. Confirm there is exactly one primary action. Verify the voice matches the rest of the product when read aloud next to a populated screen. Make sure the next step requires at most one click or one keystroke. Add life to the screen with a blinking cursor or subtle pulse. Confirm the treatment is specific to this archetype rather than a generic component. Finally ask if this screen alone would sell the product to a new user. Use these archetypes when your activation rate is below thirty percent. Use them when user testing shows people staring at the first screen without knowing what to do next. Use them when you add search filters or permission systems or AI features. Use them the day you start designing not the day before launch. Do not use a single generic empty state component across all five archetypes. That approach fails because the first run state needs to sell the product while the no results state needs to preserve context from the users query. Do not use hand wavy illustrations that replace actual copy and action. Skip the floating astronaut the person with the magnifying glass and the sad robot. Those illustrations tell the user your team did not care enough to write the right words. Do not use empty states that lecture the user with long paragraphs. The user wants to do work not read a manual. Avoid the inbox zero trap where you celebrate completion before the user has done anything meaningful. Never ship a dead end empty state that leaves the user with nowhere to go. If your retention is breaking it is breaking in the empty state not the dashboard.

Ship the empty state first or watch your product die quietly on the first screen.