
Layout principles
You can download sample layouts here:
1. Connected panels
Connected panels are the primary layout option. These hero our strategic principle by connecting two panels in a strikingly simple yet ownable way. It maintains legibility and clarity of messaging.
2. Single Panel
The single panel is the secondary layout option. This is primarily used to hero our art direction with full bleed imagery.

Both layout options (Connected panels and Single panel) are made up of the following elements divided into two main layers.
Layer one: Panels
1. Block colour - Primary usage
2. Art direction - Primary usage
3. Texture - Secondary usage
These elements can be mixed and matched to form our panels but can’t be moved or resized.
Layer two: Content
4. 3D products
5. Third party content
6. Type and highlighter
All the content sits on top of the panels and is flexible in size and positioning.
When creating these layouts please note block colours and art direction are our two primary assets and should be considered as the hero representation of our layout system.

Connected Panels
Landscape
Our primary layout option visualises connection in a simple yet ownable way. Two panels come together to connect customers to what matters most.
Our panels sit in the background as the first layer of the layout. The panels allow the following combinations of elements. All the content sits on top of the panels and is flexible in size and positioning as shown in these examples:
1. Block colour + block colour
2. Block colour + texture
3. Block colour + art direction
4. Art direction + art direction
5. Texture + art direction
6. When the imagery is quite busy we introduce the highlighter behind the headline to maintain legibility.

Portrait
Our primary layout option visualises connection in a simple yet ownable way. Two panels come together to connect customers to what matters most.
Our panels sit in the background as the first layer of the layout. The panels allow the following combinations of elements. All the content sits on top of the panels and is flexible in size and positioning as shown in these examples:
1. Block colour + block colour
2. Block colour + texture
3. Block colour + art direction
4. Art direction + art direction
5. Texture + art direction
6. When the imagery is quite busy we introduce the highlighter behind the headline to maintain legibility.

Grid
In order to create the best spacing and alignment for layouts, we’ve created some guidance for landscape and portrait layouts. There should always be a margin around the composition, clear of any text or logos. This margin is sized according to the composition.
Landscape
The margin should be x/18 of the height of the composition.
The logo should be x/11 of the height of the composition.

Portrait
The margin should be x/25 of the height of the composition.
The logo should be x/16 of the height of the composition.

Single Panel
Landscape
Our secondary layout option is the single panel. The primary usage of the single panel is for full bleed imagery. Type sits on top of the panel and it’s flexible in size and positioning.
Here are some examples:
1. All the content on top of the panel is centre aligned. The headline is also horizontally centre aligned.
2. All the content on top of the panel is left aligned. The headline is also horizontally centre aligned.
3. Headline and body copy are left aligned and sit at the top and bottom of the panel. The logo sits at the opposite side of the panel.
4. The headline splits across the panel framing the content. First half of the headline sits at the top left of the panel. Second half of the headline sits at the bottom right of the panel. Body copy sits at the bottom left of the panel.

Note: we don’t use 3D products nor third party content on full bleed imagery.
Portrait
Our secondary layout option is the single panel. The primary usage of the single panel is for full bleed imagery. Type sits on top of the panel and it’s flexible in size and positioning.
Here are some examples:
1. All the content on top of the panel is centre aligned. The headline is also horizontally centre aligned.
2. All the content on top of the panel is left aligned. The headline is also horizontally centre aligned.
3. Headline and body copy are left aligned and sit at the top and bottom of the panel. The logo sits at the opposite side of the panel.
4. The headline splits across the panel framing the content. First half of the headline sits at the top left of the panel. Second half of the headline sits at the bottom right of the panel. Body copy sits at the bottom left of the panel.

Note: we don’t use 3D products nor third party content on full bleed imagery.
Exception
When we don’t hero our imagery, texture and block colour can be used to make up a single panel in instances where there isn’t enough room for our connected panels (i.e. digital apps and banners).
All the content sits on top of the panel and is flexible in size and positioning as shown in these examples.

Grid
In order to create the best spacing and alignment for layouts, we’ve created some guidance for landscape and portrait layouts.
There should always be a margin around the composition, clear of any text or logos. This margin is sized according to the composition.
Landscape
The margin should be x/18 of the height of the composition.
The logo should be x/11 of the height of the composition.

Portrait
The margin should be x/25 of the height of the composition.
The logo should be x/16 of the height of the composition.

Layout system examples

Don'ts
