Grid

Introduction

Our layout grid ensures consistency, alignment, and visual rhythm across all digital touchpoints. It provides a solid foundation for responsive design, clear spacing, and predictable layouts.

Main content area

• Max width: 1440px
• Margins: Adjust based on viewport size to maintain readability and balance 

Spacing system

All spacing follows 8px increments to maintain consistent visual rhythm.

• Recommended increments: 8px / 16px / 24px / 32px / 40px / 48px / 56px …
• Applies to padding, margins, and spacing between elements.
• Mobile exception: If an 8px increment is too large, half increments (4px) can be used to maintain proportional spacing.

Guidelines / dos & don’ts

• Do: Align all elements to the 12-column grid.
• Do: Use consistent 8px increments for padding and margins.
• Don’t: Use spacing outside 8px increments.
• Don’t: Ignore margin rules across breakpoints.