Grid
Our visual expression is built around a grid to create coherence and consistency across materials. The grid guides you on how to place images, texts, and the fifth element, ensuring our materials are always on brand.
Look at the examples here and read the description of our grid definition below.
Layouts with grid
Building the grid
Our brand grid consists of two different grids overlaid on each other – the text grid and the fifth element grid. The fifth element grid always relates to the calculation of the text grid, so the text grid is defined first. Read on for a detailed explanation.
Text grid (red)
Start by defining the margin and gutter of your text grid. The text grid can be made in either 6, 12, or 24 columns depending on the format.
We use 12 columns as a starting point – 6 for small and very narrow formats and 24 for large and extra wide formats.
This way, we achieve more flexibility in the size of the fifth element, which must always follow the fifth element grid.
The fifth element grid (blue)
Next, define your fifth element grid.
The gutter value from your text grid is divided by two and added to the outside of your margin on the text grid. This gives you the margin for the fifth element grid.
Other guides in the fifth element grid are placed in the middle of the gutter of your text grid.
Combined grid
Here you see the two grids combined, which you should use to place text, the fifth element, and images. If you use an image in conjunction with a fifth element, it is always placed according to the fifth element grid.
However, if you place two images side by side with text underneath and need space (gutter) between your columns, the images are placed according to the text grid.
The logo always relates to the text grid, but there can be exceptions to the rule if it makes more sense in the individual case.
Examples
We have predefined a few grids in different formats, so you can use them as a starting point when designing new materials. Below you can see specifications for A4 landscape format, A4 portrait format, social media formats, and web. Additionally, you can find further grids in working files for specific materials that have already been produced.
A4 portrait format
Format: 210 x 297 mm
Text grid (red)
Margin
Top: 10 mm
Bottom: 10 mm
Left: 12,5 mm
Right: 12,5 mm
Columns
Number: 12
Gutter: 5 mm
Column width: 10,833 mm
Fifth element grid (blue)
Margin
Top: 10 mm
Bottom: 10 mm
Left: 10 mm
Right: 10 mm
Columns
Number: 12
Gutter: 0 mm
Column width: 15,833 mm
A4 landscape format
Format: 297 x 210 mm
Text grid (red)
Margin
Top: 10 mm
Bottom: 10 mm
Left: 12,5 mm
Right: 12,5 mm
Columns
Number: 12
Gutter: 5 mm
Column width: 18,083 mm
Fifth element grid (blue)
Margin
Top: 10 mm
Bottom: 10 mm
Left: 10 mm
Right: 10 mm
Columns
Number: 12
Gutter: 0 mm
Column width: 23,083 mm
SoMe square
Format: 1080 x 1080 px
Text grid (red)
Margin
Top: 69 px
Bottom: 69 px
Left: 97,5 px
Right: 97,5 px
Columns
Number: 6
Gutter: 57 px
Column width: 100 px
Fifth element grid (blue)
Margin
Top: 69 px
Bottom: 69 px
Left: 69 px
Right: 69 px
Columns
Number: 6
Gutter: 0 px
Column width: 157,5 px
SoMe story
Format: 1080 x 1920 px
Safe area: grey area (that shouldn’t hold important text or graphics)
Text grid (red)
Margin
Top: 250 px
Bottom: 250 px
Left: 97,5 px
Right: 97,5 px
Columns
Number: 6
Gutter: 57 px
Column width: 100 px
Fifth element grid (blue)
Margin
Top: 250 px
Bottom: 250 px
Left: 69 px
Right: 69 px
Columns
Number: 6
Gutter: 0 px
Column width: 157,5 px
SoMe landscape
Format: 1200 x 628 px
Text grid (red)
Margin
Top: 24 px
Bottom: 24 px
Left: 37 px
Right: 37 px
Columns
Number: 12
Gutter: 26 px
Column width: 70 px
Fifth element grid (blue)
Margin
Top: 24 px
Bottom: 24 px
Left: 24 px
Right: 24 px
Columns
Number: 12
Gutter: 0 px
Column width: 96 px
Website
Format: 1536 px bred
Text grid (red)
Margin
Left: 48 px
Right: 48 px
Columns
Number:12
Gutter: 24 px
Column width: 98 px
Fifth element grid (blue)
Margin
Left: 24 px
Right: 24 px
Columns
Number: 12
Gutter: 0 px
Column width: 122 px