Brand
Brand identity elements
Atoms
Atoms
Molecules
Molecules
Organism
Organism

Grid

One of the easiest ways to achieve an organised design is to apply a grid system. In the AXA Design System, we have chosen to follow two grid principles - Bootstrap standards and a 8px grid.

Grid

How do we use Grid and Spacing ?

We use Grids to help us designing flexible elements - elements that will adapt to the environment they are put in.

For flexible elements, we use a Bootstrap standards grid https://getbootstrap.com/

For the elements that are fixed (do not change with the environnement), we use the spacing units base on the 8px Grid.

Use of Grids - an example

The elements (yellow and green) adapt themselves to the width of the page - this means that the same element will have multiple sizes, depending on the environment on the environment ( width: 120px for desktop and width: 76px for tablet).

Desktop Grid

Tablet Grid

Use of Spacing —an example

In some cases, we need design elements that remain fixed (i.e. do not adapt to the environment). For this purpose we use spacing units, which are made from a space scale, that defines the hierarchy between them. In order to achieve a coherent behaviour of the design element, we use “units” in order to restrict the number of spacing available.

Spacing
spacing-3 (24px) on desktop, stays the same on tablet, we define fixed spacing that limits the content.

Grid vocabulary

AXA Grids

Scale of size

Small

Screen Width
under 600px
Columns
4
Columns
20%
Gutters
4%

Help & Contact

Any question?