Spacing

Thirteen pixels here. Seven there. You nudged until it looked close. Tomorrow it looks off again, because nothing is on a scale.

Spacing is a ladder, not a slider. You pick a step: 4, 8, 12, 16, 24, 32, 48. Padding and gaps come from the same list. Off-scale values are the reason the page never sits still.

Off the ladder on the left. On it on the right. Rhythm versus noise.

InvoiceDue Friday

padding13px

gap7px

inset11px

InvoiceDue Friday

paddingspace-16

gapspace-16

insetspace-16

13px and 16px look almost the same in isolation. Next to each other they fight. The scale is how you stop fighting.

css example

:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
}

.card {
  padding: var(--space-16);
  gap: var(--space-16);
}

:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
}

.card {
  padding: var(--space-16);
  gap: var(--space-16);
}