Our design uses unified spacing. Every element should be spaced from every other element by using these
values. It allows the design teams to create unified layouts across the ecosystem.
In rare cases we will allow the use of a 4px units. For example to space the title from a subtitle.
In rare cases we will allow the use of a 4px units. For example to space the title from a subtitle.
We use 8px grid system for all designs. What is the value of the 8px system?
For Designers:
Efficiency, less decisions to make while maintaining a quality rhythm between your elements.
For Teams:
An easy system of communication between designers and developers (no fussing over pixels). A developer can
easily eyeball an 8pt increment instead of having to measure each time.
For Users:
Consistent aesthetic to the brand they trust. No blurry half-pixel offsets on their preferred device.
Spacing system
Grid specification
Screen size(px)
Grid value(px)
Nr of Columns
Size (%)
Column size
Gutter
Margin
375
312
4
23.08%
72px
8px
32(31)
320 (min)
256 (min)
4
22.66%
58px
8px
32
768 (max)
704 (max)
4
24.15%
170px
8px
32
A layout is a structural template that supports consistency across applications by defining visual grids,
spacing, and sections.
