Space or density, not both

Commit to generous space or tight density, never the middle.

From frontend-design, Spatial Composition: space OR density.

The undecided middle

Drag toward dense and watch the middle band fail.

Density

Show space

Generous spaceCommitted

12 objects · Sort: price

padding – gap – columns – in view – empty –

.shop[data-density="generous"] { --pad: clamp(24px, 11vw, 160px); --gap: 64px; }
.shop[data-density="dense"]    { --pad: 12px; --gap: 8px; }

Swap spacing, then scroll both previews.

Brand Filter

Luxury · generousGood

Maison Aurel Collection

Tote No. 3$1,480

Pouch, Stone$620

Card Case$340

Weekender$2,900

empty –

Ops · denseGood

Open$84.2k

Overdue$12.9k

DSO38d

Paid 30d$61.0k

Invoice	Client	Due	Amount

rows in view –

.brand-page { --pad: clamp(24px, 9vw, 96px); --gap: 56px; }
.dashboard  { --pad: 10px; --gap: 6px; --row: 26px; }

Sort by amount, then turn on the row guides.

Show row guides Unsorted

Cramped: no systemBad

padding: 3px 5px / 7px 2px / 5px 9px

Controlled: on a gridGood

height: 28px; padding: 0 8px

.table td { height: 28px; padding: 0 8px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

The middle is too loose to compare and too tight to feel considered.