Empty States

webmobiledesktopadmin

Empty states are the only screens every user sees. They are where onboarding actually happens. Not in a tour. Show one clear action and one optional escape.

Variation 01
Friendly Empty
aka Calm Empty · Conversational Empty
linear.app
Centered illustration or icon, one warm sentence, one primary action. Quiet, never frantic.
When to use
For inboxes, lists, search results. Moments that are temporarily empty but expected to fill up.
Anatomy
Centered icon, 40–56px, muted
Headline - 18px medium
One short paragraph - 14px muted
Primary action button
Optional secondary link
How the industry does it
3 examples · credited
Linear
Single icon, one sentence, one primary action. Nothing extra.
via linear.app
Height
Warm illustration with subtle motion on idle.
via height.app
Things 3
A whole empty Inbox feels like a reward, not a void.
via culturedcode.com
Prompt
```
Build a friendly empty state. Vertically centered within its container, max width 360px. A 48px line icon at top in the muted fg color. Then a 18px medium headline ('Nothing here yet'), then a 14px subdued paragraph in 1–2 sentences. Below the copy, a primary pill button labeled with the action, and an optional muted text link beneath it as escape. Honour reduced motion; if motion is allowed, fade the icon in with a subtle slide-up on mount.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 02
Empty with Checklist
aka Setup Empty · Getting Started Empty
stripe.com
An empty state that doubles as a setup checklist - 3–5 onboarding steps the user can knock off in any order.
When to use
First time the user lands in a feature with prerequisites. Each step should be completable in under a minute.
Anatomy
Title + 'Get started in N steps'
List of 3–5 tasks with status (todo / done)
Each task: icon, label, time estimate, action
Progress bar across the top
Dismiss link (with confirm)
How the industry does it
3 examples · credited
Stripe
Activate-your-account checklist that lives at the top of the dashboard.
via stripe.com
Vercel
Setup tasks with check-on-complete, optional dismiss-forever.
via vercel.com
Linear
Welcome checklist with mini-illustrations per step.
via linear.app
Prompt
```
Build an empty-state setup checklist. A surface card with a title and a 'Get started in 4 steps' subtitle, a thin progress bar showing completion percentage. Below the title, a list of 4 task rows. Each row: leading icon, task label, '~30s' time estimate in mono, trailing 'Start' button. Completed rows render with a strikethrough title and a check icon. Subtle stagger animation on initial mount. A 'Hide for now' link under the card requires a small confirm.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 03
Error / 404 Empty
aka Not Found · Off The Map
github.com
The lost-page empty. Big quiet type, a sentence that acknowledges the mistake, and a way back home.
When to use
For 404s, broken filter results, and pages users land on from stale links.
Anatomy
Mono '404' in display size
One-line acknowledgement headline
Search input or recent pages
Primary 'Back home' action
Optional 'Report this' link
How the industry does it
3 examples · credited
GitHub
Restrained, no joke illustrations. Just clear navigation back.
via github.com
Vercel
Mono 404, small headline, instant search to recover.
via vercel.com
Linear
Calm copy; 'try the homepage' as the primary action.
via linear.app
Prompt
```
Build a 404 / not-found empty state. Centered layout. A mono '404' or 'Off the map' label in 12px uppercase tracking-wide, then a 40px serif headline acknowledging the missing page in one sentence. A 14px muted paragraph below. Then either a search input (if the site has search) or two pill buttons: 'Back to home' (primary) and 'View status →' (link). No cartoon illustrations. Optional small 'Report this URL' link in the footer for stale-link feedback.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 04
Search Empty
aka No Search Results · Zero-Result State
linear.app
Acknowledges the search failed, suggests refinements, and offers an escape route.
When to use
Any search surface. Global cmd-k, table filters, marketplace queries.
Anatomy
Reflect the query: 'No results for "foo"'
2–3 refinement suggestions
Recent searches as quick re-runs
Optional 'Contact support' fallback
How the industry does it
2 examples · credited
Linear
Search empty surfaces with refinement suggestions and recent searches.
via linear.app
Notion
No-result state with 'Try a different query' chips.
via notion.so
Prompt
```
Build a no-search-results empty state. Centered within the results container. Headline 'No results for "{query}"' in 18px medium. Below: a 14px muted hint paragraph ('Try fewer words or check your filters'). Then a row of refinement chips that drop filters or shorten the query when clicked. Below that, a 'Recent searches' list (last 5) the user can re-run. Bottom: 'Still stuck? Contact support →' link.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 05
Filtered Empty
aka No Matches · Filter Empty
linear.app
Empty state for a list that has data but the active filters exclude all of it. Emphasizes clear-filters.
When to use
Any table or list with filter chips. Always offer a one-click 'Clear filters'.
Anatomy
Show active filters as chips
Primary 'Clear all filters' button
Optional per-filter clear actions
Subtle icon
How the industry does it
2 examples · credited
Linear
Filter-empty state with prominent 'Clear all' button.
via linear.app
Vercel
Deployment list with active-filter pill in the empty state.
via vercel.com
Prompt
```
Build a filtered-empty state. Centered in the list area. Headline 'No issues match your filters' in 18px medium. Below: a row of the currently-applied filter chips, each removable via an 'x'. Below the chips: a primary 'Clear all filters' button. Subtle filter icon at the top. Stays consistent with the surrounding table's visual language.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 06
Permission Denied Empty
aka Access Denied · Insufficient Privileges
notion.so
Soft, calm denial. Explains who can grant access and provides a single 'Request access' action.
When to use
When a user lands on a resource they can't see. Be specific about the action. Vague denials feel hostile.
Anatomy
Lock icon
Plain-language headline ('You don't have access')
Names admins who can grant access
Primary 'Request access' button
Optional 'Switch account' link
How the industry does it
2 examples · credited
Notion
Permission-denied state with admin-list and request button.
via notion.so
Linear
Insufficient-permissions state with role explanation.
via linear.app
Prompt
```
Build a permission-denied empty state. Centered card. Top: a 48px outline lock icon. Headline 'You don't have access to this issue' at 20px medium. Subtext (14px muted): 'Ask the workspace admins to grant access.' Show 2–3 avatar chips of the admins. Primary button: 'Request access' which sends an email to the admins. Below: a tertiary 'Switch account' link for users in multiple workspaces.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 07
Coming Soon Empty
aka Not Yet Available · Waitlist Empty
linear.app
A feature/page that isn't built yet but is roadmapped. Offers waitlist signup or release ETA.
When to use
Soft-launch flows, beta-gated features, marketing for unreleased products.
Anatomy
Marquee icon (sparkles or hourglass)
Headline + 1-line ETA
Email input for waitlist
'Notify me' button
How the industry does it
2 examples · credited
Linear
Beta feature gates with waitlist signup.
via linear.app
Anthropic
Coming-soon waitlist pages with calm copy.
via anthropic.com
Prompt
```
Build a coming-soon empty state. Centered layout, max-width 480px. Top: sparkle icon. Headline 'Coming soon' at 24px medium, subtitle '14 day average wait · launching Q3 2026'. Single email input + 'Notify me' primary button. Below: muted line 'You'll get one email. When it ships. No marketing.' Optional 3-step roadmap pills (Build / Test / Launch) showing the current phase.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 08
First-Run Empty
aka Brand-New User Empty · Welcome Empty
linear.app
The empty state users see the very first time. Pairs a primary action with a sample-data option.
When to use
First time the user lands in a feature. Don't waste this screen on a generic illustration - it's onboarding.
Anatomy
Warm headline + 1-line context
Primary action ('Create your first…')
Secondary 'Use sample data' link
Optional 1-min video tour
How the industry does it
2 examples · credited
Linear
Welcoming first-run empty with 'Create your first issue' CTA.
via linear.app
Notion
First-run state offering sample data or starter templates.
via notion.so
Prompt
```
Build a first-run empty state. Centered layout. Headline 'Welcome - let's get you started' at 24px. Subtext 'Create your first issue or load some sample data to explore.' Two stacked actions: a primary pill button 'Create your first issue' and a ghost button 'Use sample data' beneath it. Below: a small 'Watch a 60s tour' link that opens a video modal. Once dismissed, the empty state changes permanently to the standard empty for that surface.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 09
Loading Skeleton
aka Skeleton Screen · Placeholder Loader
linear.app
Gray placeholder bars matching the eventual layout, animated subtly, used while content loads.
When to use
Always. Prefer a skeleton to a spinner whenever the eventual layout is known.
Anatomy
Match the eventual layout dimensions
Use subtle shimmer or pulse
Static text for screen readers ('Loading')
Replace inline when content arrives. No flash
How the industry does it
2 examples · credited
Linear
Skeletons that exactly match real row layouts before data hydrates.
via linear.app
GitHub
Skeleton blocks on dashboard while feeds load.
via github.com
Prompt
```
Build a loading skeleton component. Render gray rounded-md bars in place of real content. Each bar has a subtle 'shimmer' animation: a linear-gradient that slides left-to-right over 1.5s infinite. Or use a simpler pulse: opacity 0.6 → 1 → 0.6 over 1.2s. For tables, render N skeleton rows matching the real row height. Include a visually hidden 'Loading…' for screen readers. Use Suspense or a loading state hook to swap skeletons for real content as it arrives.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 10
Error / Retry Empty
aka Failed-To-Load · Retry State
dashboard.stripe.com
When a fetch failed. Show what went wrong, why, and a single Retry action.
When to use
Any data view that depends on a fetch. Spinners that stay forever are worse than this state.
Anatomy
Warning icon (yellow, not red)
Plain headline + technical detail collapsed
Retry primary action
Optional 'Check status' link
How the industry does it
2 examples · credited
Stripe Dashboard
Calm error states with retry + status link.
via dashboard.stripe.com
Linear
Failed-to-load states with one-click retry.
via linear.app
Prompt
```
Build an error/retry empty state. Centered layout. Top: a 40px outline triangle-warning icon in the muted color (no red. This is a recoverable state). Headline 'Couldn't load issues' at 18px medium. Subtext (14px muted): 'We're having trouble reaching the server.' Primary button: 'Try again' which re-runs the failed query. Secondary link: 'Check system status →' to the public status page. Below, a collapsed 'Technical details' disclosure for the error message with a 'Copy' icon.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro

Empty States

Friendly Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Empty with Checklist

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Error / 404 Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Search Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Filtered Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Permission Denied Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Coming Soon Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

First-Run Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Loading Skeleton

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Error / Retry Empty

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion