Grid and layout
Introduction
As a brand, we want consistency. We want cohesiveness. And the grid is our secret weapon in achieving this across a huge range of applications. The grid, ultimately, is there for structure. It means graphic elements can be organized easily and rationally. But don’t panic. It’s also super flexible so you can make the best use of any content.
Margins
The basic module on which the entire grid system is built is 4mm (print) or 12px (digital).
To provide an incredible flexibility, the margins of the various items are multiples of the basic module
Grid
A4 (210x297 mm)
A basic grid has been defined in terms of columns, rows, and proportions between the elements.
A standard A4 format basic grid is made up of five columns and eight rows.
US Letter (215.9x279.4 mm)
A basic grid has been defined in terms of columns, rows and proportions between the elements.
A standard US letter format basic grid is made up of five columns and eight rows.
Business card (85x55 mm)
A basic grid has been defined in terms of columns, rows and proportions between the elements.
A standard 1:1 format basic grid is made up of six columns and six rows
US Business card (88.9x50.8 mm)
A basic grid has been defined in terms of columns, rows and proportions between the elements.
A standard US business card format basic grid is made up of two columns and two rows.
16:9 (1920x1080 px)
A basic grid has been defined in terms of columns, rows and proportions between the elements.
A standard 16:9 format basic grid is made up of ten columns and six rows.
Square (1000x1000 px)
A basic grid has been defined in terms of columns, rows and proportions between the elements.
A standard 1:1 format basic grid is made up of six columns and six rows.
Logo alignment
The dsm-firmenich logo must always be applied on the right side of each communication, both on the top-right corner or the bottom-right corner.
Please note that for UX reasons there might be some exceptions (e.g., website).
When needed, and only on specific and limited applications (e.g., social media posts), a secondary logo alignment is provided.
Three Dots alignment
When using the Three Dots, they can be positioned freely in the layout (horizontally or vertically), provided that at least 3 dots are visible in the scene
Image crop
Key visuals
When using images as key visual, we recommend using them bleeding off. The crop should support and elevate the message that needs to be communicated.
Literature
When using images on more complex layouts (literature system etc.), you can also use images with smaller dimensions.
The crop should be defined by the chosen grid.
Application examples
Examples of the grid system across different formats. Format A4, US Letter, Format 1:1, and Format 16:9.
Previous
Next
Pause
Play