A strong grid, often invisible.
Every surface is composed, not templated. Margin = 1/20 of the width and 12 columns are always used; frames, info blocks and title blocks are optional tools chosen by the composition mode — never a fixed template.
Guideline
From guidelines/04-grid.md · 05-spacing.md
04 · Layout and grid
Every surface is composed, not templated.
Margin = 1/20 of the width and 12 columns always; usually invisible. Frames, title blocks and info blocks are optional tools chosen by the composition mode. Video uses its own 9:16 grid (14).
Every format.
—
- Align to the grid even when it is not drawn
- Choose the mode before placing devices
- A visible frame on every surface
- An info block on every surface
ExampleSee board Layout (05), composition modes (06).
05 · Spacing
Space is measured.
Use space-1…space-10 (4–128 px). Social spacing scales with canvas width.
UI, web and documents.
Artwork measured in canvas percentages (use the canvas rules).
- Use larger steps between groups than within
- Keep 44 px touch targets
- Arbitrary values
- Tight text against the frame
ExampleSee board Tokens (20).
The board
Formats, margins, 12 columns, safe areas, optional frame and info block, signature levels, spacing, radius, borders
The official board from the package, rendered live. Use “Open full size” for 1:1 detail on small screens.