Dark States Kit

The screens every app needs and nobody designs: empty states, skeleton loaders, error and offline states, and the banners in between. Pure CSS — no JavaScript, no dependencies — and the motion stops for anyone who asks it to.

Empty states

No projects yet

Projects hold your forecasts and the people who can see them. Make the first one and you can invite the rest of the team.

No results for “nightshift”

Nothing matched that search. Try a shorter term, or clear the filters — three are active.

Couldn't load your data

The request failed after three attempts. This is usually temporary — if it keeps happening, the status page will say so.

You're offline

Changes you make now are saved locally and will sync as soon as the connection returns.

Inbox zero

Everything is handled. New items land here as they arrive.

You don't have access

This workspace is private. Ask an admin for an invite — they'll see your request straight away.

Skeleton loaders

Shapes only — never a spinner where the layout is already known.

Loading results

Banners

Scheduled maintenance

Sunday 02:00–04:00 UTC. Reports will be read-only during the window.

Import finished

1,482 rows added. 3 were skipped as duplicates.

Trial ends in 3 days

Add a payment method to keep your forecasts running.

Two connectors are failing

NetSuite and Shopify need re-authorising. Data is stale since 14:20.

Progress

Determinate — 68%
Indeterminate
Syncing…

Using it

<link rel="stylesheet" href="states.css">

<div class="st-empty is-first">
  <div class="st-art"><svg>…</svg></div>
  <h3>No projects yet</h3>
  <p>Say what this is for, and what happens next.</p>
  <div class="st-actions"><a class="st-btn primary">New project</a></div>
</div>

Put .st on a wrapper (or <body>) so the tokens resolve. Flavours: is-first, is-error, is-warn, is-good.