Grid and layout
With help from our grid and layout system we can create simple, clear and balanced layouts in our communications.
Grid system
Our layouts are built on a 12x12 grid, which allows us to create digital and print layouts in a varied but consistent way.
Margins and Gutters
Our margins are defined by taking the smallest side of a document and dividing by 18. Our gutters are 50% of our margin size.
Margins
Gutters
Small scale grid
For smaller applications the grid can reduce down to 4x4 or 3x3. This is to accommodate a small footprint with multiple elements in play.
4x4
Half banner 234 x 60 px
3x3
Medium rectangle 360 x 250 pxSmall scale margins and gutters
When using a smaller grid we can create optical margins and gutters, which are more appropriate to the size and medium of communication.
Logo and grid
As a general guide, portrait orientation uses a four-column logo and landscape uses a three-column logo, though overall page size may affect your choice.
Portrait
Landscape
Using our grid
Our grid allows us place brand elements on consistent hang heights, producing a consistent and considered feel to layouts.
Using our grid
We have two approaches to our layout system: holding shape and cropped holding shape. These two approaches allow our communications to be simple and informative, expressing our brand in varied but recognizable way.
Holding shape
We can combine both text and imagery with the holding shape.
Text container
Image container
Holding shape size
We can combine both text and imagery with the holding shape.
Landscape
Portrait
Holding shape construction
When constructing the holding shape, we use consistent radius measurement and positioning.
Radius amount
The radius of the large, curved corner is calculated by taking 1/3 of width of the shape. The remaining 3 corners are 1/16 of the width of the shape.
Positioning
The radius can be applied to any corner of the shape.
Holding shape margins
Our holding shape margins help us position typography and create compositions with ease.
Internal margin
When we use the holding shape as a text container, we recommend creating an internal margin 60% of the page margin.
Anchored to page margins
The holding shape works best anchored to a page margin.
Texture versions
We can use three different variations of the textures, which allows for flexibility for the content we create and gives us the ability to tell our story in multiple ways.
Fill color
Fill color at 70% opacity
Only used over photography in either Core Purple or Core White.
Keyline
Keyline usage
When recreating the keyline container shape across different scales, aim to match general the stroke width seen below.
Multiple holding shapes
We can combine the holding shapes in compositions to create depth and variety.
Layering text container + image container
Layering text container keyline + image container
Holding shape improper use
Follow the examples below for what to avoid when recreating holding shapes. Do NOT;
Alter radius rules
Crop holding shape
Extreme stroke width
Add keyline to fill color style
Cropped holding shape
The cropped holding shape is solely used as an image container.
Cropped holding shape size
The width and height of the cropped holding shape are flexible depending on the communication.
Landscape
Portrait
Cropped holding shape construction
When constructing the cropped holding shape, we use consistent radius measurement and positioning.
Radius amount
The radius of the large curved corner is calculated by taking 1/3 of width of the shape.
Radius positioning
The radius is applied to one corner of the shape.Example overview
