Spacing

A compact 4px spacing rhythm and the website rail layout.

Spacing follows Tailwind’s 4px scale. Use 4–8px for tight relationships, 12–16px inside controls and groups, and 24–32px between sections of product UI.

gap-14px · Tight pair

gap-28px · Related controls

gap-312px · Compact inset

gap-416px · Default inset

gap-624px · Section group

gap-832px · Major break

The website uses Rail for every section: a full-width hairline row around a max-w-7xl content column with continuous vertical rules. Content uses px-6 md:px-10, and larger compositions split on a 12-column grid.

Keep related labels, help, and errors close. Create larger gaps between separate tasks. Prefer gap-* and container padding over margins on individual children.

<div className="grid gap-4 md:grid-cols-12">
  <div className="md:col-span-7">Primary content</div>
  <aside className="md:col-span-5">Supporting content</aside>
</div>