Layout & Spacing
Use shared margins, columns and spacing to organize the message. Adapt the grid to the format.
Space gives ideas structure.
6 / 72 / 32A repeatable editorial rhythm
The brandbook's wide frames use six columns, 72px margins and 32px gutters. Adapt those relationships for the web with responsive margins and columns.
In practice
FKRA / 01Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Use broad margins to separate the message from the artwork, with a 32px gap between them.
FKRA / 01Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Thank you for making space for a new idea. Keep the message clear, and give the next step room.
- Notice
- Connect
- Apply
A comfortable measure and 24px grouping give reading priority. Keep related paragraphs together.
FKRA / 01Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Next: shape the lesson
One clear ideaUse a 16px rhythm to group related actions. Leave enough room to read their labels.
See the rhythm
FKRA / 01Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Use fewer columns on smaller screens. Keep all spacing on the 4px scale.
Rules and source
A four-pixel foundation
Use 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80 and 96px. Avoid one-off gaps; adapt the number of columns to the surface.
A shared editorial grid
The 1600px brandbook uses six columns, 72px margins, 32px gutters and a 32px baseline rhythm. Web layouts reflow those relationships rather than shrink the page.
Do
Align headings, examples, captions and body copy to shared columns.
Don’t
Do not cram content into a fixed-height frame or visually reorder keyboard navigation.
Open editable Figma sourceSource pages 12, 13