Every overlay we put on the page is a tax on the user's attention. If the page can carry it, the page should carry it. Modals are for irreversible actions. Drawers are for inspectable detail. Toasts are for receipts. Nothing else qualifies.
§A · MODAL
stop the world
irreversible · destructive · contractual
§B · DRAWER
side panel
inspect · refine · without leaving the page
§C · TOAST
receipt
async outcome · auto-dismiss · 4–7s
§A.1 · Modal · standard (md, 540px)
Library / Simulations / Pricing · Pro $29 → $49
Confirm we'll lock these inputs and start the run
Run on 2,047 agents?
The simulation will consume one credit and finish in roughly four minutes. We'll email you when it's ready and post a toast here.
This is reversible. You can stop the run from the Audit tab.
540px wide. Ink top rule, ivory ground. The label uses the standard red dot · mono caps · grey aside filing format. Primary action on the right; secondary is ghost-text, never a competing button.
§A.2 · Modal · destructive (irreversible · noun on the verb)
Library / Simulations / Pricing · Pro $29 → $49
Destructive cannot be undone
Delete this run and 2,047 agent traces?
The result, the cohort breakouts, and every agent's reasoning trace will be removed permanently. The intake spec will stay in your library so you can re-run it.
Top rule flips to red. The verb carries the noun: "Delete run · 38", never just "Delete." A destructive modal has two and only two actions, and they go on the right. Never a third "Don't show this again" line — every destructive modal earns its interruption.
§B · Drawer · right · inspector
Simulations · 38 of 38
Slides in from the right, 380px. The page underneath stays interactive — this is the difference between a drawer and a modal. Use it for inspect-and-edit, never for a primary commit. Esc closes; clicking the page closes. Never a left-side drawer for nav (that's a sidebar, not a drawer).
Top-right rail. Success ink, info grey, warn red, error red. Copy and persistence distinguish severity; color only says this needs attention. Each carries a noun · verb kicker, one sentence, optional remediation link. Auto-dismiss at 4s for success, 7s for info, persist until acknowledged for warn and error.
§D · Registry · the command palette (a fourth, un-modal register)
Modals stop the world. Drawers inspect. Toasts receipt. The fourth move — keyboard-first, no scrim, dismiss on blur — is the command palette, and the canonical kit doesn't ship one. The registry does, as command-button. Click the button to see the palette open.
A registry component, mounted live by the islands runtime. Color tracks the contract; the affordance is the ⌘K kicker — keyboard before mouse. Use it for the operator-grade I-know-where-I'm-going case; never as a substitute for the masthead nav (that's on the nav page).
§ Write it like this
TITLERun on 2,047 agents?
BODYTwo short sentences. The first names the cost; the second names the timeline.
PRIMARYRun simulation ↗
SECONDARYCancel (ghost-text, not a button)
§ Banned
Are you sure you want to do this?
Click here to learn more.
Yes / No
"Don't show this again" checkbox on a destructive modal
Bottom-center toasts (they cover the form)
A drawer with its own modal inside it
"Oops! Something went wrong."
Modal sizes sm 420 · md 540 · lg 720 — anything bigger is a page ·
Drawer width 380px right · 480px when forms live inside ·
Toast timing 4s success · 7s info · sticky for warn/error ·
Backdrop ivory-2 with 8% ink hatch · never blurred glass ·
Keyboard Esc closes · Tab cycles inside · Enter triggers primary ·
Focus trapped inside modal · returns to trigger on close