Grid & layout

Three canvases — the web container, the phone, the 1920 slide — and the one product shell: a rail that floats, equal gutters, cards that start 24 under the top bar.

Breakpoints and containers

Token	Value	What it is for
breakpoint/tablet	768px	below it the canvas is web-mobile
breakpoint/desktop	1024px	at and above it the canvas is web-desktop
container/web	1320px	the site’s content width
container/slide	1792px	the deck’s content width — 1920 minus two 64 margins
canvas/slide-width	1920px	the slide
insight/max-width	1344px	the insight ceiling — three quarters of 1792

The slide canvas — 1920 × 1080 at a quarter

Margins 64 sides and bottom, 42 top → content 1792 × 974; the heading pair (152) then 64 to the content; sections 32 apart; the insight ceiling 1344.

Drawn on the Figma page: Slide canvas (¼).

The product shell — 1200 × 760 at a half

Rail 240 floating with 24 above and below; gutters 32 to the content and 32 on the right; the top bar level with the inset; cards 24 under it, three across at 24 gaps in the 896 column; 24 at the bottom.

Drawn on the Figma page: Product shell (½).

The web page — its section steps

Token	Value	What it is for
layout/page-section-gap	128px	80 on a tablet, 40 on a phone — between a web page’s sections; the frame’s canvas mode sets the number
layout/page-section-gap-tight	64px	48 on a tablet, 32 on a phone — the block right under a common page’s header, which sits closer

One variable per step, and the frame’s canvas mode sets the number: a page states the step once — var(--pui-layout-page-section-gap) in CSS, the variable in Figma — and gets 128 on a desktop, 80 on a tablet, 40 on a phone. The block right under a common page’s header takes the tight step, 64 · 48 · 32: by eye the full step reads too wide there. Both are defaults, not locks — a block the design places otherwise takes a plain space token.

Drawn on the Figma page: One variable, three canvases.

On the Figma page

The bars are bound to the layout variables (1px = 1px); the slide canvas is drawn at a quarter and the shell at a half, their numbers written beside them — the drawings are diagrams, the variables are the truth. Layout tokens have no Figma modes of their own — except a web page’s two section steps, which sit in the Typography collection so the frame’s canvas mode sets them: a frame’s size is a design choice; what the tokens fix are the widths a page may not exceed and the gaps a page may not change.

The same page in the Figma library: Grid & layout.