07
Layout
Proportions for fixed formats, tokens for screens.
The brand uses two layout systems, depending on whether the format has a fixed size. Fixed formats take every measure from the canvas itself; screens use a fixed 8 px scale.
07.1
Two systems
Proportional system
Every size comes from the format: the margin from its longest side, the type from the content box.
Use it for
Social posts, stories, covers, posters, decks, banners and print.
8 px scale and type tokens
Fixed steps that hold at any width, rounded from the same proportions.
Use it for
The website, this brand hub, emails and product UI.
07.2 · Proportional system
Try it on a format
Pick a format. The margin, content box, type sizes and logo all update with it.
1080 × 1350 px
07.3
The rules
Longest side ÷ 24
Take the longest side of the format and divide it by 24. That is the margin on all four sides.
Up to 2× for air
When the text needs more negative space, top and bottom can double. Side margins stay at 1×.
10% of the content box
Measure the width inside the margins. The headline is 10% of it; subheadline H ÷ 2, body H ÷ 4.
As tall as the margin
The logo is 1× the margin tall, even when top and bottom are doubled.
The opposite corner
Usually opposite the headline, sitting on the margins. Pick the corner that leaves the most air.
The centered S
With no headline, the S symbol can sit centered over a photo or gradient. Its clearspace still applies.
07.4
Each panel is its own layout
When a piece splits into panels, each one takes its margin from its own longest side and its headline from its own content box. Nothing comes from the whole sheet.
The panel's longest side ÷ 24, inside the panel.
10% of the panel's content box. Panels of the same size share margins and type sizes.
The outer margin only applies to elements that belong to the whole piece, like a logo over the full image.
07.5
Web tokens
Spacing uses multiples of 8, type keeps the proportional relationships rounded to the scale, and layouts sit on a column grid.
12 columns
24 px gutters
8 columns
24 px gutters
4 columns
16 px gutters
Text, images and cards start and end on column edges. Images and gradients can still bleed past the margins. On desktop this hub gives the side index 3 columns and the content the other 9.
Directly above what it introduces
The eyebrow sits right over the headline, or over the subheadline when there is no headline, on the same left edge.