Documentation

Layout

Spacing, structure, and page composition patterns.

Spacing Scale

We use Tailwind's default spacing scale. Common values:

14pxTight gaps, icon alignment
28pxComponent internal padding
312pxForm field gaps
416pxSection content gaps
624pxCard padding, list gaps
832pxSection spacing
1248pxMajor section breaks
2080pxPage section padding
2496pxHero/footer padding

Section Rhythm

Consistent vertical rhythm creates scannable pages.

Page sections

Major sections on marketing pages

py-20 (80px)

Content blocks

Between content sections within a page

space-y-8 (32px)

Related items

Between related content items

space-y-4 (16px)

Tight groups

Heading + paragraph, label + input

space-y-2 (8px)

Content Width

Standard max-widths for different content types:

max-w-2xl672pxCTA sections, focused content
max-w-3xl768pxDocumentation articles, long-form
max-w-4xl896pxComponent galleries, wider tables
max-w-5xl1024pxMarketing sections with grids
max-w-7xl1280pxFull-width marketing layouts

Page Templates

Standard page structures for different contexts:

Marketing Page

  • • Header (fixed)
  • • Hero section (py-24)
  • • Content sections (py-20 each)
  • • CTA section (py-20)
  • • Footer

Full-width, stacked sections. Guest layout.

Documentation Page

  • • Sidebar (fixed)
  • • Header (sticky)
  • • Article (max-w-3xl, mx-auto)
  • • Section spacing (space-y-8)

Constrained width for readability. Docs layout.

App Dashboard

  • • Sidebar (fixed or collapsible)
  • • Header with breadcrumbs
  • • Page header + actions
  • • Content area (flexible)

Functional layout. App layout.

App Detail Page

  • • Page header with back link
  • • Main content (constrained)
  • • Actions (sticky footer or header)

Focus on single item. App layout.

Content Density

Adjust density based on context and stage:

POC / Demo

  • • Generous whitespace
  • • Clear visual hierarchy
  • • Focus on key interactions
  • • Fewer items per view

Production App

  • • Efficient space use
  • • More items visible
  • • Compact controls
  • • Dense data tables

Start sparse for POC. Increase density as users need efficiency.

Common Layout Patterns

Centered content

mx-auto max-w-3xl px-4

Articles, forms, focused content

Section container

px-4 py-20

Marketing page sections

Card grid

grid gap-4 sm:grid-cols-2 lg:grid-cols-3

Feature cards, options

Sidebar + content

flex (sidebar w-64, content flex-1)

App and docs layouts

Layout Components

See Components → Layout for Shell, Sidebar, Header, and other layout components.