Structure

Grid System

Grid system is a set of measurements a graphic designer can use to align and size elements on a website. In most cases we use the 8-point grid system.

8-point system

Upon starting your design process, set up your Sketch artboards with an 8-pixel grid system. It should look similar to the following:

Buttons

Inputs

Vertical flow

Use multiples of 8 to define dimensions, padding and margin of your elements. The only exception is text, where the 4-point grid can be applied in tandem. In cases of centred elements like input texts, non-compliance with the grid system is admissible.

Layout

In our layouts, we use gutters that match the 8-point grid system.

Related: Grid System

12 column layout

Use gutters matching the 8-point grid system: 8pt, 16pt, 24pt, 32pt or 40pt. Use container width as needed. Below is an example of a 24pt gutter in 12 column layout. Please be aware of the use of the colour from your selected theme.

Related: Themes Colours