Layout

Metaphorically, our brand symbol represents the starting point that initiates the following sequence of events or experiences. A sequence can be visualized through a range of contents including graphic containers, iconography, hero icons and photography.

Our layout system is divided into three categories that cater to different needs:

1. Helpful - Useful tools and guides
2. Emotional - A system for telling stories
3. Impactful - Focusing on the experience

At the smallest level, the graphic system is used when creating helpful captions and labels. This is useful when we are focused on function and clarity in our communications.

We can create clarity and guide our customers by activating and emphasizing certain words.

The helpful captions are either center aligned, or aligned to the top or bottom of the margins.

When laying out typography, we make sure to keep things simple and aligned, and to utilize all space.

Create a clear hierarchy by pairing small captions with large headlines and large captions with body copy.

Avoid using more than three type sizes within a composition, and make sure that there is enough contrast in size between headline and body copy.

At the emotional level, our layout system
is used to tell more engaging stories utilizing typography, photography, iconography and hero icons. This is useful when we focus on editorial, and narrative based content.

A horizontal sequence can either be center aligned or more dynamic / playful. In both cases, we make sure to keep things simple 
and aligned.

Sequences can be stacked in different ways. This is very useful in portrait layouts. A sequence can fill an entire space or coexist with other components.

Avoid using more than three container sizes within a composition and make sure there’s enough contrast in size.

Sequences are either center aligned, or aligned to the top or bottom of the margins.

When laying out typography, we make sure to keep things simple, aligned and utilize all space.

Create a clear hierarchy by pairing small sequences with large headlines and large sequences with body copy.

Avoid using more than three type sizes within
a composition, and make sure that there is enough contrast in size between headline and
body copy.

This is our most expressive level, where we zoom in and focus on one specific experience, using the basic geometric shapes inherent in our brand symbol. This is useful when we want to create maximum impact.

We zoom in on one or both shapes to accommodate a variety of layouts. We can
use our symbol as part of the sequence to increase brand recognition. The symbol can
be placed in the beginning, the middle or at the end of the sequence.

How we adapt impactful layouts to 
different formats.

We can divide the space and add text containers to our layouts as an extra layer
if needed.

At the basis of all layouts is a simple grid to determine the placement of graphics, content 
and body copy.

A modular grid that is easy to apply.

We can use this grid for banners, comms
and SoMe with simple messaging and a
few key components.

Note:
Margins are fluid and should be adjusted with your application in mind. However, 95% of the width can be a guideline.

1.Fit width (height for landscape format)
2.Adjust height (or width)
3.Check that margins are equal
4.Align content

The editorial grid is built for applications
with heavy content and multiple components.

Note:
Margins and column space are fluid and 
should be adjusted with your application 
in mind.