Spacing and Layout
White space does more work than anything else on the page. How to control it deliberately — what space communicates, why generous beats cramped, and the scale that ends pixel-nudging for good.
01 Why Spacing Makes or Breaks a DesignFree preview Space is information — the distance between elements tells the eye what belongs together. 02 Start With Too Much White SpaceFree preview Flip the workflow — add space past the point of comfort, then remove until it suffers. 03 Building a Spacing Scale Ten values, chosen once — small steps close together, big steps far apart, and never a from-scratch decision again. 04 Spacing and Grouping The eye groups by distance — space within a group stays smaller than space between groups. 05 Max-Widths and Constraining Layout Wide screens are extra margin, not extra room to fill — containers, nested widths, and edge padding. 06 Grids and Columns The 12-column grid, when to obey it, and when a component's natural size wins. 07 Responsive Spacing Large gaps shrink on small screens, small gaps hold — with clamp() for the values that should glide. 08 Border Radius Radius is a personality signal and a scale like any other — with one formula that keeps nested corners concentric. 09 Building a Reusable Spacing System (+ AI Prompt) The whole module on one sheet — in code, as a checklist, and as an AI prompt you can paste anywhere.