The baseline

An 8px baseline, applied to type, to row heights and to vertical space. It is the constraint the rest of this system is derived from, and the only one that cannot be relaxed for a particular case.

The rule

Every text style declares a line height that is a whole multiple of 8px. Every component declares a height that is a whole multiple of 8px. Every vertical gap is a whole multiple of 8px. There are no exceptions, including for optical adjustment.

What this rules out

Line heights of 1.5 at 15px, which is a very common default and produces 22.5px. Buttons of 44px, which is a common accessibility minimum and is not a multiple of eight — use 48px. Table rows of 36px, which almost every data grid ships by default.

Checking

The overlay is not a design tool, it is a test. Any layout in this system is expected to pass it, and a layout that only passes at one viewport width has not passed.

.thing { line-height: 24px }  /* 3 baselines  */
.thing { height: 48px }       /* 6 baselines  */
.thing { margin-block: 16px } /* 2 baselines  */