The screen when there's nothing to show yet. Friendly illustration, warm message, clear primary CTA. Five common variants below.
An empty state is the screen you see when a list, inbox, or workspace has nothing in it — either because you're new, you've completed everything, or you applied a filter that returned no results. It's the single most undervalued screen in product design. A good empty state turns "huh, nothing here" into "oh, here's what to do next" — with a friendly illustration, a one-line orientation, and a clear primary action.
Centered card with three vertical layers: (1) a hand-drawn or geometric illustration / icon at the top (~120px tall) that suggests the absent content; (2) a short serif headline that names the situation in plain words ("No projects yet" / "Your inbox is calm"); (3) one sentence of orientation + one primary action button + optional secondary link. Common variants: first-time (welcome + create), zero-results (after filter — clear filter), inbox-zero (positive celebration), error (something broke + retry), permission (you don't have access).
Switch between the 5 empty-state variants.
Projects organize everything — tasks, docs, files, conversations. Make one now to see it all come together.
Try a shorter query, check spelling, or clear the active filter to see everything.
You're caught up. Nothing to reply to, nothing pending. Go for a walk.
We couldn't load this page. It's probably temporary — we're already looking at it.
Ask the owner for an invite, or switch to a workspace you belong to.
Build 5 empty-state variants in a centered card with switchable tabs. Card: padding 80px 32px, centered text, max-width 600px. Common structure: a 120×120 inline SVG illustration (use stroke=currentColor with accent-tinted fills for visual personality, NOT raster icons), then a display-serif h4 with italic accent on a key word, a muted paragraph (max 40ch), and one or two CTA buttons (primary filled accent + optional ghost outline). Variants: (1) FIRST-TIME — "Start with your first project" + + New project button + ghost Templates + kbd hint "⌘N", illustration of a card/window with a + plus icon; (2) ZERO RESULTS — "No results for 'banana'" + Clear search button, illustration of a magnifying glass with an × inside the lens; (3) INBOX ZERO — celebration "Inbox zero. Quietly done." + ghost Archive view button, illustration of an envelope with a ✓ above; (4) ERROR — red-tinted "Something broke" + Try again + Report issue, exclamation circle illustration; (5) PERMISSION — locked-out "You don't have access" + Request access + Switch workspace, padlock icon illustration. Only one state visible at a time, swap with .on class via JS tab buttons.