When all of your measurements follow the same rules, you automatically get a more consistent UI.

Baseline Grid

The grid is based on a 4px square. This value controls the proportion, balance, and vertical alignment of every component. All elements – including icons – are aligned to this unit.

For Android, use the very similar Material Baseline Grid.

4px grid applied to the Firefox chrome

Firefox for desktop chrome with the grid exposed


When you design a component, elements are spaced following the grid. The same principle applies when you stack multiple elements within and between a component. 4px grid applied to components and elements