Sendlane logo

Grid System

To create a proper systemic approach, we created a scalable grid system. This will allow us to maintain the structure and visual identity across multiple use cases. Grid sizes vary depending on the device, screen size, and resolution. We’ll focus on the most used environment which is the 1200px to 1920px viewport.

Laptops — 1200px

12 Column, 1170px grid with outside gutter, 70px column, 30px gutter.

Vertical Spacers

We use “Vertical Spacers” to define the vertical spacing between elements and sections. From desktop to mobile we strive to use the same spacers to achieve greater visual balance. By using pre-defined spacing across the whole environment we preserve our systemic design methodology.

5px Spacing System

We are using a 5px spacing system when defining both the vertical and horizontal spacing between elements. The 5px system allows us to minimize the variety of “spacers” while upholding our systemic design methodology.

The 5px spacing system means that all and every margin, padding, spacing, whitespace, and the divider is divisible by 5. This results in a very precise and easy to follow guidelines where the majority of spacings use rounded numbers.

Mathematical balance

12 column grid with 70px column, and 30px gutter results in grid spacings and sizes with rounded numbers such as:

— 1/2 column - 570px
— 1/3 column - 370px
— 1/4 column - 270px
— 2/3 column - 770px
— 3/4 column - 870px

It is all divisible by 5, and mathematically balanced for ease of use.