Spacing & Layout

Three section-spacing roles. Three container widths.

Phase 3 replaced a scattered mix of py-8/py-10/py-12/py-16/py-20/py-32 and five different max-w-* widths with two small, named systems — three .section-* classes for vertical rhythm and three .container-* classes for content width — both shipped in src/index.css (@layer components).

Section spacing roles

.section-compact

48px mobile → 64px desktop. Dense/secondary sections — FAQ, trust strips, a page's closing sub-sections.

.section-standard

64px mobile → 96px desktop. The default — page heroes, body sections, most section-to-section rhythm sitewide.

.section-large

96px mobile → 128px desktop. Reserved for a page's single largest moment — the homepage "What We Offer" section.

Container widths

.container-prose

max-w-3xl (768px). Narrow reading measure — hero descriptions, FAQ, case-study body text, article content, centered CTAs.

.container-standard

max-w-5xl (1024px). The default content width — every service-detail-page section, case-study galleries.

.container-wide

max-w-7xl (1280px). Grids and wide compositions — portfolio, homepage sections, footer, About's major sections.

Rule

Each class controls only padding or only width+centering+horizontal padding — never both — so a section combines exactly one of each: e.g. class="section-standard container-wide".
Don't nest a second px-6/max-w-* inside a container-wrapped section — the container already owns horizontal padding.
Reach for a fourth role only if a real layout genuinely can't be served by these three — don't add one-off py-* values back in.

Base unit is 8px. Content max-width ≈ 1180px, centered, with a consistent 12-column grid underneath for multi-column sections.