Design System

Empty experience

A first-run screen with one primary action at the centre of a quiet page and alternatives listed underneath.

What it demonstrates

  • Page identity retained even with no content — the screen is not a blank slate
  • Exactly one primary action, given room rather than surrounded by competing buttons
  • Alternative starting points as a quiet divided list below a rule
  • Copy that explains what the object is for, not just that nothing exists

How to adapt it

  • One primary action. Everything else is a list item, not a button.
  • Write the description as if the reader has never seen the product.
  • Reserve the largest button size for a genuine first-run moment like this one.
Preview at

Annotates each part with the design-system component it uses.

Open full screen

Composed from

Nothing on this screen is new. Every part is an existing component, layout or pattern.

PageHeaderEmptyStateListListItemButtonDivider