Layout

Columns

Layouts use a 12-column grid. Smaller formats, and extra-wide or tall canvases, drop to 6, 4, 3 or 2 columns to keep the grid simple and clear.

Margins

Set the margins first, from the shortest side of the format: 4%, rounded to a number divisible by 4. The plates compute it from their own size, so every format here shows its true margin.

Gutter

The gutter is double the margin. Centring rules in the gutter keeps the padding equal on both sides for type and imagery. Cards and grids nested inside a column take half a gutter.

Lines-informed

Type-led, for lots of written content. An exposed line grid structures the page.

Cards-informed

Cards organise and protect mixed content, text and imagery, shown as several blocks in a row. Cards take the half gutter.

Lines with hero imagery

For big headlines with imagery. The image sits on the same margins as the lines. Don't box it inside lines unless you are sectioning.

Lines with full-bleed imagery

Hero imagery and renders run to the edge as space. Don't close them off in containers.

Section divisions

Divide a layout into equal blocks: 1/1, 1/2, 1/3, 1/4 or 1/6. Every column in a row is a whole number of one division. Not every division needs content; an empty one is a deliberate break. Small and medium formats use 1/1 or 1/2 only.

HALVES

Spans 12 · 6

THIRDS

Spans 12 · 8 · 4

QUARTERS

Spans 12 · 9 · 6 · 3

SIXTHS

Any even span

Spacers

Spacers set consistent space between text, images and sections. There are fifteen, and nothing else.

Spacer pairs

Each pair of roles has one space. These are the desktop values; fluid tokens shrink them on mobile. Paragraph to paragraph is 16, and section to section runs 64 to 120.