# Same Padding Everywhere Is Monotony **SHOULD** · **ID:** `layout-impeccable-monotonous-spacing` · **Category:** layout **Source:** [impeccable](https://impeccable.style/) **Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-impeccable-monotonous-spacing > SHOULD: Vary spacing to encode grouping: ~8-12px BETWEEN siblings, ~48-96px BETWEEN sections. Uniform padding everywhere does not just look boring, it does not parse — when a label sits as far from its input as from the next section, nothing groups and every element floats at equal weight. The detector rounds every padding/margin/gap to 4px and, given >=10 samples, fires when ONE value exceeds 60% of them AND there are <=3 unique values. The opposite ditch is `design-rams-inconsistent-spacing` (arbitrary, unrepeatable values); the target is a small scale, applied to mean something. Vary spacing for rhythm — tight inside a group, generous between sections, because spacing is what encodes grouping The detector is precise about what "everywhere" means: it collects every padding, margin, and gap value on the page, rounds each to the nearest 4px, and — once it has at least 10 of them — flags the page when ONE value accounts for more than 60% of the total AND there are 3 or fewer unique values. A page where every gap is 16px scores 100% dominance across a single unique value. The failure is not that it looks boring, it is that it does not parse. Spacing is the primary encoder of grouping: when a label sits as far from its own input as it does from the next section, nothing groups, and every element floats at equal weight. impeccable gives the rhythm as ranges — tight groupings of 8-12px BETWEEN siblings, generous separations of 48-96px BETWEEN distinct sections — so that proximity alone makes the structure legible, without a single border or divider doing the work. Note that `design-rams-inconsistent-spacing` is the opposite ditch: that one fires when spacing is arbitrary and unrepeatable, this one when it is uniform and meaningless. The target is neither — a small scale, applied to mean something. ## Bad — do not do this `layout-impeccable-monotonous-spacing-bad` ```tsx /** * Bad: every gap on the page is 16px. * * The detector collects every padding / margin / gap value, rounds each to the * nearest 4px, and — once it has at least 10 — flags the page when one value * accounts for more than 60% of them and there are 3 or fewer unique values. * Here there is exactly one value, so it is 100% of ~14 collected values. * * The cost is not ugliness, it is illegibility: a label sits as far from its own * input as it does from the next section, so nothing groups. Everything floats * at equal weight and the reader has to parse the structure from the words. */ export function ImpeccableMonotonousSpacingBad() { return (
{/* Every gap below is 16px: section, group, and sibling all identical */}

Billing

Notifications

One spacing value, used for everything: 100% dominance across 3 unique values or fewer, so the detector flags it. “Billing” is no closer to its own fields than it is to “Notifications” — the two sections read as one flat list.

); } ``` ## Good — do this `layout-impeccable-monotonous-spacing-good` ```tsx /** * Good: spacing carries the grouping. * * - 8px between siblings inside a group (label ↔ its own input) * - 24px between groups inside a section * - 64px between sections * * Three distinct values, none dominant, and the structure is legible without a * single border or divider — proximity is doing the work that chrome would * otherwise have to fake. */ export function ImpeccableMonotonousSpacingGood() { return (
{/* Section 1 */}

Billing

{/* Section 2 — 64px away, so it reads as a different thing */}

Notifications

8px inside a group, 24px between groups, 64px between sections. Each label is now visibly bound to its own field, and the two sections are visibly separate — no borders, no dividers, no headings needed to tell them apart.

); } ``` ## References - [impeccable.style](https://impeccable.style/) - [pbakaus/impeccable](https://github.com/pbakaus/impeccable)