Foundations / Grid & Layout

Surface layout is shared at the token level, not by one-off wrappers.

The current system separates marketing and app layout through layer variables. That means the overall rhythm can differ by surface while still using one shared layout contract.

Current layout tokens

Shared page max width

80rem

Defined by `--page-max-width` in both app and marketing layers.

Marketing section gap

var(--space-16)

Broader rhythm for acquisition and persuasion.

App section gap

var(--space-8)

Tighter rhythm for task-focused product surfaces.

Shared section padding inline

var(--space-4)

Shared edge padding for both current layers.

Surface previews

Marketing layout rhythm

App layout rhythm