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.

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