Spacing & Layout
The app is built from a floating-card shell where everything aligns to ONE left edge. Spacing snaps to an 8pt scale; page insets are a fixed standard — 12px (px-3) horizontal everywhere, and py-3 (12px) for both the content and the header strip (Linear density). This page is the source of truth for those values.
The one rule
Everything aligns to a single 12px (px-3) left edge: the page title, the tabs / filters sub-rows, the content, and grid cards all start at the same x. Vertical padding is py-3 (12px) for both the content and the header strip — Linear density.
Scale
The 8pt spacing scale
Every pad, gap and inset snaps to one of these steps — no arbitrary p-[Npx]. The number on the token is the px value at our 100% (16px) base; spacing is rem-based, so it scales with the base. The app lives mostly on p-2 through p-6.
p-14px
p-28px
p-312px
p-416px
p-520px
p-624px
p-832px
p-1248px
Standard
Page padding standard
The locked-in inset for every app surface. Read down the Horizontal column: the floating card insets 8px from the viewport, then everything inside it — header, sub-rows, content, grid cards — shares the same px-3 (12px) edge.
| Surface | Horizontal | Vertical | Notes |
|---|---|---|---|
| Floating card inset (app shell) | 8px (p-2) | 8px | The card's gap from the viewport edge. |
| Page header strip (PageHeader) | 12px (px-3) | 12px (py-3) | Compact toolbar; the title aligns to the content edge. |
| Header sub-rows (tabs / filters) | 12px (px-3) | 12px (py-3) | Tabs and filter rows below the title — same x as everything else. |
| Page content (PageContainer) | 12px (px-3) | 12px (py-3) | The SAME on every page — both the normal and fill layouts. |
| Content card (settings etc.) | 24px (p-6) | 24px | rounded-2xl, hairline border, shadow-sm. |
| Grids / lists | align to content edge (0 extra) | gap-4 between items | NEVER a plain p-4 wrapper — it would indent the cards off the shared edge. Use py-1 only for vertical shadow breathing room. |
Demo
One aligned edge, seen
A faux page: a header strip (px-3 py-3) with a title, then a content area (px-3 py-3) holding a section heading and a grid of cards (gap-4, no p-3 wrapper). The dashed blue guide marks the shared 12px left edge — the title, the heading and the first card column all touch it.
Top creatives
By spend this month
Summer Sale 2026
Updated 2 minutes ago
Back to School
Updated 2 minutes ago
Evergreen — UGC
Updated 2 minutes ago
Holiday Teaser
Updated 2 minutes ago
Spring Launch
Updated 2 minutes ago
Always-On
Updated 2 minutes ago
Rules
Do & don't
- Do
- Inset page content with
px-3 py-3— the same on every page, normal and fill. - Keep header sub-rows (tabs, filters) on the
px-3edge so they align with the title and content. - Snap every pad and gap to the 8pt scale (
p-2…p-6); separate grid items withgap-4. - Give content cards
p-6(24px),rounded-2xl, a hairline border andshadow-sm.
- Don't
- Wrap a grid or list in a plain
p-3container — it indents the cards off the shared left edge. - Use arbitrary
p-[Npx]/gap-[Npx]— pick the nearest 8pt step. - Give one page a different horizontal inset than another — the edge is
px-3everywhere. - Re-pad at the page level — content and the header strip are both
py-3(12px); fix the primitive, never the page.