Full Width websites

Viewport-first composition: The website must visually utilise the full browser viewport width rather than appearing as a narrow centred website floating between large empty margins. Section backgrounds, visual compositions, imagery, gradients, motion and decorative elements may extend across or beyond the full viewport width.

Use constrained inner widths only where necessary for readability, particularly body copy and interface controls. Do not wrap the entire website in a single global max-width container. Different sections may use different grids, alignments and content widths.

On large and ultra-wide desktop displays, deliberately use the additional horizontal space as part of the visual composition rather than simply increasing empty left and right margins.

Avoid the conventional AI/SaaS pattern where every section consists of a centred max-w-7xl mx-auto container. The site should feel spatially composed for the browser canvas rather than assembled inside a template container.

Viewport
├── full-bleed visual layers
├── typography grid
├── responsive gutters
├── intentionally asymmetric compositions where appropriate
├── artwork allowed to extend beyond the content grid
├── intentional clipping and overflow behaviour
├── breakpoint-specific composition
└── ultra-wide monitor behaviour

Browser / visual canvas          100vw
Section backgrounds              100vw
Primary layout grid              typically ~1400-1800px
Hero text                        ~550-700px
Long-form body copy              ~650-800px
Visual elements                  allowed to escape the content grid
Decorative / atmospheric layers  allowed to span the viewport

Viewport
│
├── Full-width section
│   ├── Full-width background
│   ├── Full-width decorative layer
│   ├── Wide visual composition
│   │
│   └── Content grid
│       ├── Readable text
│       └── Controls
│
├── Full-width showcase
│
├── Content-constrained editorial section
│
└── Full-width CTA