Skip to content
Protocore Design Systemv1.6.9
Patterns / Zero state

Zero state

The first screen a new operator sees — a centered empty state, onboarding steps, and one unmistakable primary action.

ZERO-STATE
Live · @protocore/pds
No transfers yet
Clear your first transfer

Your ledger is live but empty. Connect a rail and move test value through it — the console lights up the moment the first transaction settles.

  1. [ 01 ]
    Connect a rail
    Link SEPA, card, or a test rail to route value through.
  2. [ 02 ]
    Clear a transfer
    POST a transfer intent, or fire one from the sandbox.
  3. [ 03 ]
    Reconcile
    Watch it post to the sealed ledger and export a statement.
Need a hand?
Every rail ships with a copy-paste sandbox snippet. Read the five-minute quickstart or ping us in the developer channel — we answer in minutes during business hours.
You can leave · we'll keep your place

When to use

A zero state is the first thing a new operator sees, and it sets whether they succeed or bounce. Treat emptiness as an opportunity, not an error: name the one action that unblocks them, show the path they are on, and offer help without demanding it. There is exactly one primary action — everything else is orientation. Try the button above; the steps and the empty state advance together.

Use it for any first-run screen, a freshly created workspace, or a filtered view that legitimately has no results. When the emptiness is a failure rather than a beginning, use an ErrorState instead.

Structure

01
Empty state
A centered EmptyState with a drawn icon, a mono eyebrow, a sentence-case headline, orienting copy, and the single primary Button.
02
Onboarding steps
A vertical Steps list makes the whole path visible so the first action never feels like a dead end.
03
Help callout
An info-tone Callout offers documentation and a human, kept quiet so it never competes with the primary action.
04
Reassurance
A closing Eyebrow promises the work is saved — lowering the cost of leaving raises the odds of returning.

Key components

Open any component to read its full API and live examples.