Next Motion

Spacing & layout

Grid Scale Container Breakpoints

Section utilities + content container

The two layout primitives every page sits on: .u-section-base for vertical rhythm, --content-max for horizontal cap.

  • .u-section-base: 96px / 120px (md+) top + bottom padding.
  • --content-max: 1280px, centred via mx-auto.
  • Adjacent matching surfaces collapse padding (avoids doubled rhythm).

The 8-point spacing scale, rendered

Every gap, padding, and margin in the system snaps to a multiple of 8. Bars below show each step at its real pixel width.

4 (0.5x)
8 (1x)
12 (1.5x)
16 (2x)
24 (3x)
32 (4x)
48 (6x)
64 (8x)
96 (12x · section)
120 (15x · section md+)

Content cap — 1280 px, centred

Every section's text + interactive content stays inside this cap. Decorative bleed (the hero monotile, CTA band) sits OUTSIDE it on purpose so the cap only governs what users read + click.

Max width 1280px, side gutters via px-6 lg:px-8. Anything wider is full-bleed by intent (hero monotile, CTA band).

1280 max · centred

Responsive breakpoints + what they unlock

The five breakpoints the system reaches for, in Tailwind units, with the layout shift each one triggers.

  • sm: 640px
  • md: 768px (section padding lifts to 120px)
  • lg: 1024px (hero heading hits its two-line target)
  • xl: 1280px (content cap)
  • 2xl: 1536px (gutters widen, content stays capped)