Page width and margin, plus the module, heading, banner, and gap spacing scales across desktop, tablet, and mobile.

Layout & spacing settings

👤 Ops · 🛠 Dev

Two groups control the overall canvas and the vertical rhythm between modules.

Layout

Setting	ID	Options / range	Default
Page width	`max_page_width`	Narrow (`90rem`) · Wide (`110rem`)	`90rem` (Narrow)
Page margin	`min_page_margin`	10–100px	20px

max_page_width caps the content container; min_page_margin is the minimum gutter between content and the viewport edge on smaller screens.

Every spacing scale has a Desktop, Tablet, and Mobile value (three settings), exposed as CSS variables. All use an 8px step.

Scale	ID prefix	CSS variable prefix	Desktop	Tablet	Mobile	Range
Module spacing	`spacing_modules_*`	`--spacing-modules-*`	56px	48px	32px	24–72
Heading spacing	`spacing_headings_*`	`--spacing-headings-*`	40px	32px	24px	24–72
Module with container padding	`spacing_module_with_container_padding_*`	`--spacing-module-with-container-padding-*`	72px	64px	48px	24–72
Slim banner spacing	`spacing_slim_banner_*`	`--spacing-slim-banner-*`	32px	24px	24px	24–72
Gap spacing	`spacing_gap_*`	`--spacing-gap-*`	24px	16px	16px	16–72

The * in each ID/variable is one of desktop, tablet, or mobile - e.g. spacing_modules_desktop → --spacing-modules-desktop.