Layout

Using a well defined system of multiples creates consistency and rhythm between design elements and typography.

4-point implicit grid 

We use a 4pt implicit grid for all the size and space measurements associated with spacing and typography.

To work with a 4pt implicit grid, simply ensure every measurement of size and space is divisible by 4. This includes font sizes, line heights, margins, and paddings. Using this basic unit makes the math easy and scalable across design elements.

UI examples 

With the 4pt grid visible for this example, we can see how the height and padding of components and the margin between components is caculated using multiples of 4. The same is true for font size and line heights.