Layout and hierarchy

Use when you design or review any screen, block or card, and above all when the content is generated text (results, summaries, notes, reports). Pair it with ui-review-checklist and component-states.

People read a screen in seconds, between other work. A screen succeeds when they know in one glance what is done, what needs them and what they press first. A wall of text fails even when every word in it is true.

The six rules

1. One headline per block. Every block opens with one line that says its outcome in plain words ("Import finished. 3 rows need your review", "2 invoices overdue"). Everything under it supports that line. A block without a headline, or with two lines competing for it, is a defect.
2. Lists and cards over prose. When content has items (links, files, criteria, steps, decisions), each item is a row or a card, never a sentence in a paragraph. Prose is fine for one or two sentences of explanation, never for something the user opens, checks or acts on.
3. One-line titles, state on the right. A row is: kind (icon or label) · title cut to one line with an ellipsis (full text in a tooltip and in the detail view) · state on the right edge, short and always in the same place, coloured only when it needs the user (warning) or is good news (success). The same state uses the same word everywhere ("shipped", not "Shipped" here, "sent" there, "dispatched" elsewhere).
4. Scannable density. Rows of one height, aligned columns, groups with a small muted label above. No dead space: a mostly empty column or block gives its width back; a block with nothing in it is hidden or shows a one-line empty state. No crowding either: a row carries a title, one meta and one state, not five chips.
5. Empty states say why and what next. An empty list is a line or a small card: what would be here, why it is empty, the first action. A blank area, a lone heading or "—" in every cell is a defect.
6. What the user does first is first. Order blocks by what it costs to miss them: needs you → failed or stuck → what changed → reference. The primary action is one button named for its result; others are quieter.

Before and after

An import result. Before: "The import completed with 1,204 rows processed, of which 3 had invalid postcodes (rows 18, 77 and 940) and 12 were duplicates that were skipped; you can download the log here." After: the headline "Import finished · 3 rows need your review"; under it three rows (row number, customer name, "invalid postcode", Fix), then a quiet line "12 duplicates skipped · Download log". Same facts, read in two seconds.

An orders dashboard. Before: a 12-column table where most cells are "—" and every row has the same "Paid" badge. After: "Needs action" on top (failed payments, refund requests) as one-line rows with the action on the right; below, recent orders with four columns; quiet days folded into one line ("4 days with no orders").

How to design a block (in this order)

1. Write the headline first: what is true and what the user must do, in one line.
2. List the items the content holds; give each a row or card with title · meta · state; fix the state word set.
3. Group them under small labels; order groups by rule 6; fold reference material (old versions, quiet items, details) behind a disclosure with a count ("Show 8 earlier versions").
4. Write the empty state of every group and of the whole block.
5. Draw it at desktop and phone width, light and dark; on the phone the state moves under the title rather than squeezing it.
6. Read your own screenshot for five seconds as the user. If you cannot say what needs them, start again.

Review: structure defects to look for

Name the exact element by its visible text ("the row 'Order #1042'", "the Recent orders label"), not the class of problem in general. A screen with no defect is a valid finding: say it is clean, do not pad.

Done when

Every block has a headline; every actionable thing is a row or card; states use one word set on the right; nothing is clipped without an ellipsis; no block is mostly empty; every list has its empty state; light, dark, desktop and phone width checked from screenshots.