Grids

Grids provide the foundation for organising visual elements and typography. Using a grid is an essential part of our design process to ensure precision, order, and clarity within and across platforms.

How it works

Grids are sets of vertical and/or horizontal lines used strategically to define rules for how design elements like image size, placement and even white space will be structured in a layout. Whether it's for print packaging, business cards, websites, or apps, a grid defines the rhythm of a person's experience with our design. Having a common approach to grids ensures we're creating a consistent visual identity across every Volvo Cars platform.

Dividing the grid

When constructing a grid for a new design, we use divisions as a guide. Establish the proper layout size, then start a grid by dividing it into two even columns. Then, divide each column by two, and repeat as needed. This method can be applied to most designs.

Grid flexibility

Create a grid that meets your design requirements. Your format and design elements will determine the structure, complexity, and density of your grid.

A grid without margins or gutters.
A grid with margins.
A grid with margins and gutters.

Margins

Margins control the space between the edges of the grid and content. Use the divisional method as a guide to define margin widths whenever applicable. When creating margins, be mindful of the impact of different predetermined production methods, as well as accounting for formats where the divisional method cannot be used. Ensure margin widths and related ratios work for all platforms and display devices.

Example of layout using the divisional method to create the margin width.
The margin will vary depending on the format and design. Use the best suited margin.
Margins created with the divisional method. In connection with the logo always take into account the logo clear space.
In some cases it is not possible to use the divisional method. In these cases, the best suited margin is used.

Columns

Column grids are the most common. You can use the divisional method as a guide when creating columns. Place design elements within these columns. Keep your choice of column grid throughout your design to maintain consistency.

Example of layout divided into 4 columns.
Column grid with margins.

Modules

A modular grid is used to introduce additional layout control horizontally on the screen or page you're designing. A modular grid is basically a column grid with rows added. These vertical and horizontal lines create blocks or "modules." You can also use the divisional method as a guide when creating a modular grid.

Example of rows added to create modules.
Example of modular grid including margins.
A modular grid is used to arrange more elements in an organised way.

Gutters

Gutters are an important feature of any grid. These spaces clearly separate text blocks. You can continue to use the divisional method as a guide to create gutters. The gutter width should be consistent across your designs. Always align text to the gutters.

In this example the gutters are half the margin width.
Vertical and horizontal gutters.
The amount of gutters needed will vary depending on the format and context.
The gutters should always be equal between columns and rows, in order to maintain a visual balance.
Gutters preserve whitespace to create breathing room in a layout.

Spacers

Spacers determine the amount of white space preserved throughout the design. Space improves readability and legibility, enhances visual aesthetics, and builds a consistent design. You can use the divisional method as a guide to defining your ideal spacers.

Use the divisional method to determine the size of spacers.
Divide the shape of any format to identify the ideal spacers.
Using spacers will help you control space and layout to boost consistency throughout your designs and into development.
Always consider the format and its elements when choosing spacers. Remain consistent across the composition.

Grids/How it works