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 square format divided into four columns.

A grid without margins or gutters.

A square format with four columns inside the margins. Margins are top, bottom, left and right.

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.

A business card with blue lines to indicate the margin size used for this layout.

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.

A 4 column grid inside margins. One of the columns is coloured in blue to highlight what a column is. Margins run top, bottom, left, and right edges of the format.

Column grid with margins.

A Volvo Cars web page design on a laptop. This visual also shows the 24-column layout grid which is used by designers for this particular platform.

A Volvo Cars mobile design with an 8-column layout grid visible. This grid is used by designers for this particular platform/viewport size.

A squared format with body text in a single column grid.

A Volvo Cars visitor ID card, with a 4-column grid used to inform its design.

A Volvo Cars staff ID card, with a 2-column grid informing the layout.

A mobile card component formed using an 8-column layout grid.

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.

A square format with 4 columns and 4 rows. One of the squares is coloured in blue to highlight what a module is.

Example of rows added to create modules.

A square format with 4 columns and 4 rows inside a margin. One of the squares is coloured in blue to highlight what a module is.

Example of modular grid including margins.

A desktop view using a modular layout showing four descriptive images of cars, each in a module within a single horizontal row. The text that goes with each image sits within a module on top of the images.

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.

Website showing a top banner image of an XC40 and a 2-column text layout. The gutter space in the middle is coloured blue to highlight the gutter size.

The amount of gutters needed will vary depending on the format and context.

Web page with a 6-module grid. The top 2 modules have text on the left and an image on the right. The modules in the middle have an image on the left and text on the right. The modules at the bottom are not visible in the picture, due to cropping.

The gutters should always be equal between columns and rows, in order to maintain a visual balance.

Magazine double-page spread: On the left page there is one image and on the right page there are four images, two on the top and two on the bottom. These images are well separated by the presence of gutters as set by the designer.

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.

A square format with four smaller squares inside that are each divided by two. The smaller squares are blue and laid on top of each other. They create a darker blue colour as they become smaller. There are yellow coloured lines to indicate the different sizes of the squares.

Use the divisional method to determine the size of spacers.

A rectangle format with four smaller squares inside that are each divided by two. The smaller squares are blue and laid on top of each other. They create a darker blue colour as they become smaller. There are yellow coloured lines to indicate the different sizes of the squares.

Divide the shape of any format to identify the ideal spacers.

A vertical web layout with a headline, a blue square to indicate space, an image, a smaller blue box that indicates space and body copy.

Using spacers will help you control space and layout to boost consistency throughout your designs and into development.

A horizontal web layout with an image to the left and to right there is a headline, a blue box that indicates space, body copy, a bigger blue box that indicates space and a standalone button link (blue uppercase with chevron arrow).

Always consider the format and its elements when choosing spacers. Remain consistent across the composition.