layout slop

A section gets a tiny "01" marker above its heading when nothing on the page depends on reading order. The rule: a number is a claim that order matters; it must be load-bearing or absent. The cost: the reader searches for the sequence (do I need section 1 first?), fails to find one, and learns the page decorates instead of structures.

A horizontal scroller lets its first card sit exactly on the container edge, corner radius and all. The rule: content aligns with the layout's gutter even while it scrolls, and the next card peeks to promise more. The cost: the flush card looks broken against the rounded frame, and with no peek the reader cannot tell the row scrolls at all.

A gradient or dimming layer is stacked on top of live text to make a background work. The rule: an overlay dims the image, never the words; text sits on a solid fill or outside the overlay entirely. The cost: contrast now depends on what the image happens to put behind each word, which the author does not control and the reader cannot fix.

Content is split into equal columns without checking what each column holds, so one runs long and the other leaves a hole. The rule: column width follows column weight; a grid gives more track to the heavier side. The cost: the short column reads as missing content, and the long one wraps into a ribbon no one wants to read.

A heading sits as far from its own content as from the section above it, so the eye binds it to the wrong block. The rule: a heading is closer to what it names than to what precedes it; space above a section must exceed the heading-to-content gap. The cost: the reader reaches a heading, guesses which block it owns, and guesses wrong.

A display-size number ("10×", "99.99%") is set as the loudest thing on the page, stripped of its baseline and unit. The rule: a number is content, so it carries what it is measured against; emphasis never substitutes for that context. The cost: the reader either supplies a flattering baseline of their own or discounts the claim entirely, and both outcomes are failures.

Every item in a grid gets the same card, size and weight, so the entry the reader should look at first is nowhere to be found. The rule: a grid communicates ranking; the primary item earns more track or a stronger fill, and the rest recede. The cost: the reader scans three equal boxes, absorbs none of the priority the author had in mind, and picks at random.

Every pair of blocks gets the same gap, so related and unrelated content sit at equal distances. The rule: spacing groups; the gap inside a group must be visibly smaller than the gap between groups. The cost: proximity stops meaning anything, and the reader parses one undifferentiated column instead of named clusters.

A card holds another card, which holds another, each with its own border and fill. The rule: depth is one fill step per level, not a border per level; a bordered box means a section boundary. The cost: the reader counts frames instead of reading, and every level of box-within-box spends attention on structure nobody meant.

Prose runs the full content width, past ninety characters per line. The rule: comfortable reading ends around 45 to 75 characters; past that the eye loses the return path to the next line. The cost: rereads, skipped lines, and a page that reads twice as long as its word count.

A wide element pushes past the viewport and takes the whole page with it into sideways scrolling. The rule: the page never scrolls sideways; a wide child scrolls inside the nearest panel that owns it. The cost: the reader's scroll wheel now scrolls the wrong axis, the header drifts off screen, and on touch devices the whole page rubber-bands.

A popover renders inside an ancestor with overflow-hidden or a transform, and the ancestor's frame cuts it. The rule: a floating layer must be able to leave every clipping ancestor, which is what portals are for. The cost: the menu works in the demo, breaks in the first container that clips, and the fix is a one-line style hunt through six ancestors.

Text and controls sit two or four pixels from their container's edge, and controls touch each other. The rule: a container insets its content on the 4px grid, and interactive siblings keep a gap of at least 8px; comfort is measured at finger size, not at design size. The cost: the reader reads crowding as low quality, and on touch screens the mis-taps are literal.

Content runs to the viewport edge with no gutter, so lines begin and end against raw screen. The rule: the layout owns side gutters (24px here) and every page keeps them at every width; edge to edge is for full-bleed fills, never for text. The cost: on notched phones and curved panels the first and last characters are physically hard to see, and at every size the page reads as unframed.