A comprehensive guide to the design system, including typography, components, form elements, and patterns used throughout the site.
All vertical spacing between block-level elements snaps to multiples of 8px. Horizontal and component-internal spacing may use 4px granularity.
Elements that form a single content group — a title and its lead paragraph, a label and its value — use 4px spacing to communicate visual association. This is distinct from the 8px grid which governs gaps between groups.
The paragraph sits close to its heading, reading as one unit. This uses gap-1 (4px).
The paragraph feels more separated — appropriate between groups, not within one.
Horizontal padding within components, icon-to-text gaps in inline elements, and sub-component internal spacing may also use 4px granularity where visual balance requires it.