Aero UI

Spacing

Having consistent spatial rules allow for clear relationships between objects on a page and allow users to visually navigate their workflows.

xxs

2px is used for small amounts of spacing between sibling objects like a label and accompanying icon.

2px
xxs example

xs

4px is used for small amounts of spacing between sibling objects like a label and accompanying icon.

4px
xs example

s

8px is used for padded spacing between sibling elements of an object like the label of an input and the text input itself.

8px
s example

m

12px is used for padding around self-contained objects like a form element containing a label, support text, and the input.

12px
m example

l

16px is used for padding around self-contained objects like a form element containing a label, support text, and the input.

16px
l example

xl

24px is used for padding around self-contained objects like a form element containing a label, support text, and the input.

24px
xl example

xxl

32px is used for padding around self-contained objects like a form element containing a label, support text, and the input.

32px
xxl example

xxxl

48px is used for padding around self-contained objects like a form element containing a label, support text, and the input.

48px
xxxl example