Overlays are where a design system usually goes soft. Four things get built that look alike, nobody can say which is which, and within a year there is a fifth. So this lab settles the boundary first and the appearance second.
All four share the principle already running through the platform. The command bar echoes its parse. The form counts its outstanding conditions. The gate states its headroom. An overlay does the same: it shows the consequence of the decision while the decision is still reversible. A dialog shows what will change, a confirm shows what will be lost, a toast shows what happened and offers the way back.
Drawn fresh from the Untitled kit and the system’s ruled tokens, not restyled from the originals.
Already happened. The way back, where one exists.
Irreversible. What will be lost, in money.
One decision, blocking, consequence computed live.
Editing a section while reading the rest. Never dimmed.
Typing the reference is reserved for exactly four actions on the whole platform.
Recording a payment is the most common money action on the platform, and until now the person doing it had to know the gate arithmetic in their head. The consequence band recomputes live as the amount changes, so the decision is made looking at its own result.
436 pixels, from the right, at the panel duration of 180ms. It never dims the page, because dimming would defeat the reason it is a sheet. It edits one section and it says which section in its title, so a sheet is never a second form page in disguise.
A confirm is not a dialog with a scary colour. It is the surface for something that cannot be undone, and its job is to replace the word "sure?" with an arithmetic. Cancelling this booking costs a real number, and the person clicking should see that number rather than be asked to be brave.
Bottom left, above the pager, clear of the primary action which lives top right and clear of the right rail. Five seconds, one line, and an Undo whenever an undo genuinely exists. When it does not, the toast says what to do instead rather than offering a button that lies.
A dialog blocks because it asks a question with consequences, and answering it while scrolling something else is how a wrong number gets entered. A sheet does not block because the record behind it is the reference material: somebody editing a billing address is reading the rest of the profile while they do it. If a surface would be better if you could still see what is behind it, it is a sheet. If it would be worse, it is a dialog.
Popovers, from Lab 05: the filter, views and columns menus. They are anchored to their trigger, dismiss on any outside click, and never carry a decision with money in it. Nothing new here, but naming them stops somebody reaching for a dialog to hold a tick list.
The hatched green segment is the payment being added, drawn on the same meter the booking page shows, so it is the same picture in both places. The struck-through $1,600.00 is the value that is about to stop being true, which is the cheapest possible way to say "this is a change and here is what it was". And the sentence about the next item is the only one a person actually needs, because "can I issue the flight now" is the reason they are recording the payment at all.
The field is dashed and dimmed with its reason underneath, using the disabled treatment from Lab 08 rather than a new one. A sheet is where a person discovers what they may not change, and the discovery has to happen in the sheet rather than after pressing save, because a save that fails on a rule nobody mentioned is the most annoying event in software.
Cancel a booking, archive a customer with live trips, revoke a credit release, and delete a tenant. Four actions. Everywhere else a confirm is one button, because typing a reference for something recoverable trains people to type references without reading, which destroys the protection on the four that need it.
Every other primary action is solid ink. Red is spent here and on the exposure tick and on a margin below its floor, and nowhere else, so the three times it appears it still means something.