More space between groups

Equal gaps erase grouping; keep inner gaps tighter than outer ones.

From refactoring-ui, section 2, Spacing & Layout.

Whose label is this?

Make the two gaps equal and watch labels drift.

Equal spacingAmbiguous
12px / 12px
Your spacingClear
6px / 24px · 4×
.form  { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }

Start generous, then remove

Remove steps until the sections blur together.

Landing pageGenerous

Close the month in days, not weeks

Reconciliations, accruals and schedules in one place, tied to your ledger.

Bank feedsEvery account, categorized daily.
SchedulesPrepaids and accruals that post themselves.
Close boardWho owes what, and when.

"We closed August on the 4th. It used to be the 20th."

Controller, Series B SaaS
64px / 16px
.page    { display: flex; flex-direction: column; gap: 64px; }
.feature { display: flex; flex-direction: column; gap: 4px; }

Dividers vs spacing

Toggle the lines; spacing already does the grouping.

12px everywhereBad
INV-1042Overdue
Client
Acme Co
Amount
$4,200.00
Due
Sep 15
Send reminderView
gap: 12px
24 between, 8 withinGood
INV-1042Overdue
Client
Acme Co
Amount
$4,200.00
Due
Sep 15
Send reminderView
gap: 24px / 8px

Why it matters, pros and cons

Why it matters

The eye groups what is close. Equal gaps leave no groups, so readers guess which label fits which input.

Pros

  • Grouping without borders or dividers.
  • Forms scan faster.
  • Two scale values cover most components.

Cons

  • Costs height; dense tools shrink both numbers.
  • Uniform lists like logs need only one gap.
  • Dense grids may still need a divider or tint.