Level 2. A mark, a title, a sentence and a way out: what a screen shows when there is nothing to show, or when something failed. 38 blocks on 38 painted screens, which is more than a third of the product. Measured 2026-08-08 in a browser, at 390 and 1280.
The system pages carry a link list this page did not show. 9 elements against 14.
The link list IS the specimen here, so all 12 of its hrefs are the screens'
own, re-rooted to ../ui-visual/. They pointed at nothing until 2026-08-12. A
block whose whole job is to give a stuck reader somewhere to go cannot demonstrate that with
href="#".
The level and its reason stay on the molecules page. What needs the room here is the number in the hero: a state is a page in both screen trees, so empty and error are not a corner case in this product, they are 38 of its 106 screens, and this one component carries all of them.
No active bets yet
You haven't placed any bets. Find an event you have an opinion on and put a real stake on the outcome.
No active bets yet
You haven't placed any bets. Find an event you have an opinion on and put a real stake on the outcome.
| skin | where | what changes | measured |
|---|---|---|---|
| the card | inside a panel or a list | a surface with a hairline at a 16 corner, 28/16 of padding | the specimen above |
| flat | in the feed's main column | no ground, no edge, no corner, and 40 of padding instead of 28 | 293x227 to 293x307 at 390, 911x227 at 1280 |
| stacked | in the resolved panel of an event | no ground either, and the actions become a full-width column | 309x223 at 390, 280x223 at 1280 |
Two of the three skins are the component taking its box away, and that is the right answer rather than a special case: a bordered card inside a bordered panel is two boxes saying the same thing, and a feed with nothing in it should read as an empty page rather than as a card that happens to be about emptiness.
The message is capped at 380px even where the block is 911 wide. A sentence a person reads once at a moment of confusion is not improved by running the full width of a desktop.
Measured: 38 blocks, 38 action rows. There is no placement of this component in the product that tells a person something is wrong and stops there. That is not enforced by anything, and it is the single most important thing about the component, so it is written here where it can be checked rather than assumed.
The buttons come from button. What this file owns is that they CENTRE, that they wrap, and that in the resolved panel they become a full-width column, because that panel is the width of a sidebar and two buttons side by side in 280px are two buttons nobody can read.
404 and 500 add a list of links out, six of them on one screen, plus a note. These links are the one control in this file, and they are the way out of a screen a person reaches on a phone as readily as on a desktop, where the hover never fires.
The link is already brass at rest, so colour cannot carry the press, and the ground cannot carry it alone: the pressed ground measures 1.04:1 against the block on graphite and 1.05:1 on chalk, which reads across a chip and disappears behind one line of 14px text. So the press carries the underline that the hover brightens, and a thumb gets the pointer's answer plus the ground. Written at equal specificity to the hover, so it has to sit after it.
Measured, these links render 40x22 to 86x22 and stay 22 tall with a finger. They are text links, which WCAG 2.5.8 exempts, and they are among the eight remaining sub-24 targets in the product. Every one of the eight is text.
This file declares .sys-note and the page had never drawn
it. Two placements, both on system screens, and it is the one thing in this component that is
not a block: no ground, no mark, no actions. A sentence that stands under a block and says
what happens next.
Re-entry: a Cookie preferences link in the footer reopens this banner, so the choice can be changed at any time.
Re-entry: a Cookie preferences link in the footer reopens this banner, so the choice can be changed at any time.
A state block always offers a way out. A mark and a sentence with no action is a dead end with good typography.
The box comes off when the host already has one. The component is the mark, the title, the sentence and the actions; the plate around them belongs to whatever holds it.
Where the ground cannot carry a state, something else has to. Measured at 1.04:1, the pressed ground is invisible under one line of text, so the underline does the work.
Never ship this without an action. 38 of 38 carry one, and the first one that does not is the day the empty state becomes a wall.
Never put a card inside a card. Two of the three skins exist only to take the box away again.
Never trust a ground to say "pressed" without measuring it. 1.04:1 is a state that exists in the stylesheet and nowhere else.
The level and its reason: the molecules
page. The stylesheet: components/state-block.css. The buttons in the action row:
button. The sentences, which are most of this component:
voice/docs/microcopy.md. The 38 screens themselves: ui-visual/ and
their grey twins in wireframes/.