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.

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

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

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

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

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

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

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