Level 1. A message, a lift, and a place for ONE control. 4 placements on 1 painted screen, which is the smallest inventory of any component in this product, and the page still has more to say than the shelf can hold. Measured 2026-08-08 in a browser, at 390 and 1280.
A toast group with its marks and its dismisses. 14 elements against 22.
The kit used to hold a counted threshold: a component earned a page of its own by being one of the largest families in the product. This component is the case that ended that rule. Four placements, and three of the things worth knowing about it cannot be shown on a shelf: where its boundary with its own dismiss runs, why the error face is not red, and the fact that most of this component is a behaviour that a static page cannot draw at all.
The level and the reason for it stay on the atoms page.
| face | worn | at 390 | at 1280 | what it changes |
|---|---|---|---|---|
| plain | 3 | 293x50 | 911x50 | the quiet card ground, a hairline, an 18px brass mark |
| error | 1 | 293x68 | 911x50 | the notice edge, the control ground, a 22px mark in the strong ink, a semibold message |
The 68 is the message wrapping, not a taller face. It is the same component at both widths, and the only thing the window changes is how many lines the sentence takes.
Green and red are outcome semantics, YES and NO. A deposit that failed
is not a NO, so an error toast is drawn as a NOTICE: --border-notice on the control
ground, with the mark and the message going up in size and weight rather than in colour.
That decision is DESIGN.md's and it is what makes an outcome
readable anywhere in the product: if a failed payment were red, then red would mean two things,
and the one place a person cannot afford ambiguity is a screen about money.
The whole error signal is therefore weight, size and edge: 18px to 22px, muted brass to the strong ink, medium to semibold, and a hairline to the notice line. Four changes, no new colour.
It left on 2026-08-06. It is
class="icon-btn icon-btn-small toast-close" on the element, its face is the icon
button's fifth, and everything that had been written here about the pill, the two drawn bars, the
transparent ground and the 24 that clears one criterion and not the other moved WITH the
rules rather than staying behind as a second copy that could drift.
Exactly one declaration stayed, and it is the whole line the migration is
drawn on: .app-case .toast-close{flex:0 0 auto}. That says the message takes the
slack and the dismiss does not, which is a fact about a two-item flex row and not about what
an icon button looks like. It is why .toast-close is still a name a stylesheet
reads.
One thing changed on the way and it was decided rather than carried. This control used to brighten its own edge on hover, where the 388 outlined circles in the product tint their ground and take an action edge. Four against 388, so the four were the divergence.
The four dismisses are one of the named exclusions from the system's touch
floor: they clear 24x24 and not 44x44, and that is one question about small controls in general
rather than a toast question. docs/backlog.md 39.
A toast arrives, waits, and leaves. This page shows one standing still,
and the two specimens above are the only part of it a stylesheet owns. There is no animation rule
in components/toast.css, no timer, and no rule for how a group stacks when a second
one arrives while the first is still up.
What IS decided, and it is decided in the markup rather than here: the
catalogue screen wraps confirmations in
role="status" aria-live="polite" and errors in
role="alert" aria-live="assertive", so a screen reader announces them and an error
interrupts. voice/ owns the sentences; this file owns the box they stand in; and the
live region belongs to whoever writes the screen. Three owners, one control, which is
worth knowing before anybody goes looking for the announcement in this stylesheet.
A critical error is never shown only in a toast. It leaves, and a person who looked away has no way to get it back.
toasts.html is a state as a page, which is how both screen trees
show anything that cannot be reached by clicking. It stands the toasts on a stand-in for the page
underneath, and that stand-in used to live in this file: one screen, one margin, and
having it here is why the toast read as CONTAINING the cookie banner in the level arithmetic. It
is .tc-page in components/base.css now.
This component was filed as a molecule and is not one. It holds
nothing: a mark, a sentence and somebody else's button. It moved up into the atom group of
components/index.css on 2026-08-07 with navitem and
yesno, and the inventory row that first said so is
ui-kit/docs/inventory.md.
A toast is a message and a place for one control, and it does not draw the control. What it keeps is how that control sits in its row, which is a fact about the row.
Severity is weight, size and edge, never a new colour. The colours in this product are spoken for.
Never redraw the dismiss here. It was drawn here once, with
its own pill, its own two bars and its own hover, and the hover was the one place four controls
disagreed with 388. And this page broke its own anti-rule until 2026-08-10: the four theme
figures below put an svg.ic-sm cross INSIDE the dismiss, which the product never
does, so the button drew the mark twice, a brass 9.5px path over a grey 7.1px pair of bars. A
specimen that adds a mark is a specimen teaching a mark.
Never make the error red. Red is NO. A screen about money cannot afford a colour that means two things.
Never let the page underneath live in this file. One margin for one catalogue screen made an atom read as containing a banner.
The level and its reason: the atoms page.
The stylesheet: components/toast.css. The dismiss, in full:
icon button. The sentences: voice/docs/microcopy.md. The
stand-in for the page underneath: components/base.css.