Desktop · ≥ lg (1024px+)
<brand / logo>
<global nav links>
hidden on mobile · sm:flex
<global actions>
h-14 · sticky top-0 · z-10 · full width
← gutter (viewport edge to column) · symmetric · grows as viewport widens past max-w-4xl
max-w-4xl (56rem) · mx-auto · px-6 · py-12
<page title> — h1
<page subtitle / lede> — optional · max-w-[60ch] · text-muted-foreground
one <h1> per page · lives here and nowhere else
<tabs for different sections> — optional · omit when page has no sections
role="tablist" · active tab: border-b-2 border-primary · underline only, never background fill
<primary content> — tab panel or direct body · role="tabpanel"
pt-6 sm:pt-8 · expands to content height · page scrolls as a whole
↓ page scrolls as a whole · html and body scroll freely · no h-screen or overflow-hidden on body
Breakpoints
< sm · < 640px
Nav links hidden. Hamburger replaces them. Column fills viewport with px-4.
sm – lg · 640 – 1024px
px-6 · centering visible as viewport widens
Nav links visible in header. px-6. Max-width starts centering the column.
≥ lg · 1024px+
Column fully centred with symmetric gutters. Site header still full width.
Variant — no tabs (direct content body)
When the page has a single section, omit the tab bar entirely.
max-w-4xl · mx-auto · no tab bar
<page title> — h1
<page subtitle / lede> — optional
<primary content> — directly in <main>, no tab panel wrapper
Variant — no site header (self-contained page)
Omit the site header entirely for stand-alone pages with no persistent navigation.
The centred column starts at the top of the page.
no sticky header · page content starts immediately · max-w-4xl · mx-auto
<page title> — h1
<page subtitle / lede>