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.
