PAGE TEMPLATES

Standard page structures for web. These are patterns — adapt to content needs while maintaining structural rhythm.

LANDING PAGE

HERO
SOCIAL PROOF
FEAT
FEAT
FEAT
IMG
TEXT
TEXT
IMG
CTA
FOOTER

Hero

Headline + sub + CTA + visual

96px padding-y

Social Proof

Logo bar or testimonials, muted

48px padding-y

Features

3-4 blocks, icon + heading + desc

96px padding-y

Detail

Alternating text + image

64px between rows

CTA

Centered heading + button

96px padding-y

Footer

Logo, nav links, legal

—

DOCS / ARTICLE PAGE

HEADER + BREADCRUMB
H2
BODY
CODE
BODY
TOC
PREV / NEXT

Content max width: 768px

Sidebar TOC: sticky on desktop, only for 4+ sections

Headings follow hierarchy — never skip levels

DASHBOARD / APP PAGE

TOP BAR · 64px
NAV
PAGE HEADING
CARD
CARD
CARD
CARD

CONSTRAINTS

  • ✕ Never more than one hero section per page
  • ✕ Never more than 2 CTAs in a single section
  • ✕ Never skip heading levels in content (h2 → h4)
  • ✕ Never use sidebar nav on mobile — convert to hamburger
  • ✕ Always include a clear primary action on every page
  • ✕ Always have a footer with: logo, copyright, key links