Patterns
Empty states
An empty screen is an opportunity, not a dead end. Whether it's first-run, a search with no hits, or a load that failed, the shape is the same: an icon, a one-line explanation, and a clear next action. Never leave a blank panel.
Three flavours
First-run, no-results, and error — same structure, different copy and action.
No projects yet
Create your first project to start deploying.
No results for "aurora"
Try a different spelling, or clear the filters to see everything.
Couldn't load deployments
Something went wrong on our end. Your data is safe.
Rules of thumb
- Lead with the next action. The primary button is the whole point of the screen — make it obvious.
- One muted icon at ~32px sets the tone without shouting. Don't stack illustrations or use a semantic colour where none applies.
- Distinguish empty (no data yet — encouraging), no-results (filters too tight — offer a reset), and error (something failed — reassure and offer retry).
- Keep copy to a line or two. The empty state explains the absence and points forward; it isn't documentation.
Page-level empty states are composition guidance — the spec doesn't tokenize them yet. See Known gaps.