Layout & Grid

Two nested frames govern every page: a section that spans the full usable width, and a container inside it that holds the content. Both are tokens, and both change value at each breakpoint.

Section and container

A section is the outer frame — the full-bleed band that carries a background colour or image. The container sits inside it and is where content actually begins.

Each comes in an Extra and a Default width. Extra is for wide editorial layouts; Default is the standard page measure used across the catalogue.

The difference between section and container is the page gutter: 40 px at Large, 16 px at Small.

Section — 1200

Container — 1140

Fig. 1Default section and container at the Large breakpoint.

Breakpoints

The design library lays out the same components three times — Large, Medium and Small — and rebinds the frame tokens in each. The CSS mirrors that with two media queries.

Design for Small first. The 326 px container is the hardest constraint in the system.

Breakpoint	Section	Container
Large ≥ 1200	1400	1320
Large ≥ 1200	1200	1140
Medium 768–1199	992	928
Medium 768–1199	768	720
Small < 768	576	540
Small < 768	358	326

Fig. 2Frame sizes in px. Every breakpoint carries two widths — build to the container, not the section.

Spacing

Eight padding steps, every one a multiple of 2 and all but the smallest a multiple of 4. If a gap needs a value that is not on this list, the structure above it is usually the thing to fix.

Padding / None 0 px
Padding / XXXX-Small 2 px
Padding / XXX-Small 4 px
Padding / X-Small 8 px
Padding / Small 12 px
Padding / Medium 16 px
Padding / X-Large 24 px
Padding / XX-Large 32 px

Stroke, radius and icons

The system has one stroke width and one corner radius. Both are deliberately small: the geometry stays quiet so that contrast and spacing do the structuring.

Icon size is a token too, and it is one of the values that steps down at Small — from 24 px to 20 px — alongside the type.

Token	Value	Use
`Thin`	1 px	All borders, dividers and separators
`Size/Corner radious/4`	4 px	Buttons, cards, tiles, inputs, banners
`Main icon / large object`	24 px → 20 px	Header, navigation, standalone icon buttons
`Text-wrapper icon / large`	24 px → 20 px	Icons set inline with Subtitle or Body text

Fig. 3Arrows show the Large → Small transition.

Building a page

A section–container pair in CSS is four declarations. Nothing below carries a literal measurement, which is what lets the same markup serve all three breakpoints.

.section {
  width: 100%;
  padding-inline: var(--padding-medium);
  background: var(--global-background-2-rest);
}

.section__container {
  max-width: var(--frame-container-default);
  margin-inline: auto;
  padding-block: var(--padding-xx-large);
}

/* Wide editorial variant */
.section--extra .section__container {
  max-width: var(--frame-container-extra);
}