Feedback what the system says back · in five registers
Say less.
Five registers, in order of intrusiveness: banner (page-level), alert (in-flow), badge (label on a thing), empty (the thing isn't there yet), loading (the thing is on its way). Pick the gentlest one that does the job.
§A · Banner · the whole page is affected
● liveW&B leaderboard updated · 26.04 · subconscious holds 1st across 6 of 7 categories.tied with anthropic on retention.
Banners are reserved for things that affect every session, not the current page. Ink ground for product news, red ground for incidents. One banner at a time; if a second wants to land, the first must dismiss first.
§B · Alert · in-flow · four channels
Heads up
Your audience definition matched 2,047 agents — slightly below the 2,500 floor for our standard accuracy claim.
Alerts say what · why · what to do, in that order. The "what to do" is one or two ink-link verbs at the bottom — no buttons, never. An alert is a sentence the page is reading aloud, not a control panel.
§C · Empty states · three flavors
§C.1 · zero
∅
No simulations yet.
Your library will fill up here. Start by describing a decision in plain English — population, horizon, outcome.
Three flavors: zero (you've never had any), no-results (your filter found nothing), error (we have it, we can't show it). Each names what this is, why it's empty, and offers one CTA. Never "No data."
§D · Loading · skeleton · spinner · progress
§D.1 · skeleton
Skeleton (0–4s)
§D.2 · spinner
Spinner (local action)
Saving spec250ms typical
Verifying audience2–3s
§D.3 · progress
Determinate (>4s)
Run · 3862% · 1m 24s left
0%50%100%
Run · 39stalled
Run · 40failed at 25%
Three loading registers, by duration: under 1s say nothing, 1–4s spinner with verb-noun label, over 4s determinate progress with ETA. Skeletons replace the actual content shape — not a generic "Loading…" overlay.
§E · Badges · status · category · count
§E.1 · status badges
DRAFTDraftunfinished
RUNNINGLivepulsing
DONEComplete
FAILEDFailed · agent 412
§E.2 · chips · counts
FILTERPro tier ✕U.S. only ✕past 30d ✕
COUNTInbox12red square, never a circle
TAGPricingRetentionTrial
Badges are labels on a thing, never a way to say "look at me." Square corners, mono caps, ink stroke. The only animated badge is Live, and it pulses because it's lying about being a status — it's actually a count of one. Banned: coloured pill badges with white text on a saturated background.
§ Picking the right register
BANNERThe whole product is affected. Use it for incidents and major releases.
ALERTThe current page or section is affected. Used in-flow, never floating.
TOASTThe user's last action got a receipt. (see Overlays page)
BADGEA noun has a state. Stays attached to the noun.
EMPTYThe list / page / dashboard has zero rows. Tell them what would be here.
LOADINGIt's coming. Be honest about how long.
§ Banned
A confetti animation when a run completes
A spinner with no label
"Loading…" as the only loading state
Empty states with cartoon illustrations of empty boxes
Pill badges in saturated red/yellow/green
Notification bells in the masthead
Two banners stacked at the top of the page
Toasts that announce a successful click
One banner at a time across the whole product ·
Alert format what · why · what to do ·
Empty state name the absence · offer one CTA ·
Loading <1s silent · 1–4s spinner · >4s determinate ·
Badges square · stroke-only · mono caps ·
Reduced motion skeleton fades to static · spinner slows · live dot stops pulsing