Layout

Spacing system

• Base unit: 4px.
• Tokens: 1 → 4px · 2 → 8px · 3 → 12px · 4 → 16px · 5 → 24px · 6 → 32px · 7 → 40px · 8 → 48px · 9 → 64px · 10 → 80px · 11 → 96px · 12 → 128px. See the spacing token page for the generated values.
• Section padding: 64–128px vertical; 96px is the default. Hero and closing bands go to 128px.
• Card internal padding: 32px standard, 24px for compact and storefront-density cards.
• Stack rhythm inside a band: eyebrow → 12px → head → 16px → lead → 32px → content.

Grid & container

• Max content width: 1240px, centered, with a fluid gutter of 20 → 64px.
• Readable measure: 720px for article and documentation body copy.
• Hero: 6/6 or 7/5 split — headline + lead + button row left, photography right (or full-bleed photo with navy scrim).
• Card grids: 3-up desktop / 2-up tablet / 1-up mobile. Stat rows 4-up desktop / 2-up mobile.
• Storefront product grids: 4-up or 5-up desktop — higher density than corporate surfaces, and the one place density beats whitespace.

Whitespace philosophy

White space is part of the brand. Generous, uncramped, never dense on corporate and marketing surfaces — the calm is the message. Product and storefront surfaces are permitted to tighten (they carry catalogs and tables), but corporate pages, decks, and documentation stay roomy.

See Responsive behavior for how this grid collapses across breakpoints.