Spacing & Layout
PURE breathes. Generous, consistent spacing is what makes it feel like a premium tool rather than a crowded dashboard.
Spacing scale
Use multiples of 4px. The common rhythm: 6 / 8 / 12 / 14 / 18 / 22 / 24 / 34px. Card padding is 16–22px; section gaps 18–24px; page margins 22px.
Page structure
Sticky navy top bar (2px gold hairline) → max-width content column (760–1140px depending on density) centered with 22px side padding → section headings as uppercase gold-ink eyebrows → cards in responsive auto-fill grids with gap.
Grids & gap
Always lay out groups with display:grid/flex + gap — never bare margins between inline siblings. Cards use repeat(auto-fill, minmax(220px, 1fr)) so they reflow gracefully. This keeps spacing intact when items are added or reordered.
Density rules
Do
One idea per card. Let whitespace separate sections. Right-size the column to the content. Keep tap targets ≥44px on mobile.
Don’t
Don’t cram. No edge-to-edge text, no <12px type, no SEO-style link grids (that’s the ARE consumer site, not PURE).