Introduction
Clear communication
Our flexible layout structure helps present content clearly and precisely. We developed the system with simplicity and effectiveness in mind.
Layout considerations
Hierarchy of information
Establish a clear hierarchy to guide viewers through content. Use size, weight and style to distinguish headings, subheadings and body text. Highlight key messages with larger, bolder elements. Support details with smaller, lighter text. Apply these principles to ensure readability and reinforce the brand.
Composition flow
Direct the viewer’s attention to foster interest and engagement. Begin with a clear focal point to capture attention. Then incorporate secondary elements to guide the viewer’s gaze across the composition. Use white space to provide balance and separation between components. Plan the visual flow to ensure the design delivers the intended impact.
Working with grids
We have developed a set of layout grids for our most common formats, which are available on our Figma system. They allow for a consistent look throughout executions, while providing enough flexibility to accommodate different content and visual variety. When working within these formats, always use the established grid system.
For special applications where no grid has been defined, aim to maintain a consistent visual language. To set up the grid, start with the margins. We favor thin margins in order to maximize the space available for content, giving a contemporary look to the canvas. Next, define your grid using a logical structure of columns and rows. You can choose between 1, 2, 4, 6, 8, 12 and 16 divisions. Choose a configuration that provides both flexibility and clarity, allowing for a range of content and composition types.
Creating layouts
Once the foundational structure of the page is in place, content should be arranged with clarity and purpose. Every execution should prioritize focused communication—form always follows function, and unnecessary visual elements should be avoided.
That said, clarity doesn’t mean dullness. We use the grid with intention, embracing contrast, asymmetry, and the interplay of positive and negative space to create layouts that are bold, dynamic, and visually engaging.
Placing the logo
Our preferred logo positions are the top-left and bottom-right corners of the layout, reflecting balance and consistency across applications. Alternative corners may be used when specific formats or content require greater flexibility. In all cases, ensure the logo’s clear space and the layout’s margin guidelines are strictly observed to maintain visual integrity.
Go big when possible
The message is the hero of our compositions. Whenever is possible, use big, extra-bold typography to create visual impact. The contrast with smaller elements within the layout will produce dynamic and aesthetically pleasing compositions even with a small number of elements.
Playing with the margins
While typographic elements and logos should always remain within the defined margins, there is flexibility when adding other visual elements such as photography. Extending these elements into the margin space can help to enhance the sense of dynamism of the composition, keeping the layouts modern and interesting. Exploration is encouraged, but every layout must maintain a clear visual hierarchy and ensure legibility is never compromised.
Special layouts
We favur left aligned copy and a smart, playful use of the grid. Exceptions to this principle may be made in specific cases—such as quotations or prominent headlines accompanied by minimal body copy—where centered alignment can be used to create emphasis and visual distinction.