App · Spacing

Spacing

Spacing follows a 4 px baseline. Stick to the scale; consistency in spacing is what makes a design feel calm and considered.

4 px Scale

tb-1

4 px

tb-2

8 px

tb-3

12 px

tb-4

16 px

tb-5

20 px

tb-6

24 px

tb-8

32 px

tb-10

40 px

tb-12

48 px

tb-16

64 px

tb-20

80 px

tb-24

96 px

Stack

Use 16 / 24 / 40 px gaps for related, grouped, and section-level content respectively.

Inline

8 px between buttons in a row; 12 px between metadata items.

Page

64 px top padding on page headers; 48 – 56 px between top-level sections.