Spacing

8px scale

When it comes to spacing we follow an 8px scale to ensure components and pages are accessible to consume across every device.

Extra Small

Our extra small padding is 8px. This is the base padding on components and is especially used across buttons, form inputs and list items.
8px top
8px right
8px bottom
8px left
8px all

Small

Our small padding is 16px. This is the most commonly used horizontally within form inputs and also across page containers.
16px top
16px right
16px bottom
16px left
16px all

Medium

Our medium padding is 24px. Medium padding is common in global navigation and is used in cards and mobile page containers.
24px top
24px right
24px bottom
24px left
24px all

Large

Our large padding is 32px. Large padding is typically used across desktop and on modals.
32px top
32px right
32px bottom
32px left
32px all

Extra Small

Our extra small margin is 8px. This is the base padding on components and is especially used text.
8px top
8px right
8px bottom
8px left
8px all

Small

Our small margin is 16px. This is the most commonly used flex components for aligned spacing.
16px top
16px right
16px bottom
16px left
16px all

Medium

Our medium margin is 24px. Medium margin is. used across larger components like side and top navigation bars.
24px top
24px right
24px bottom
24px left
24px all

Large

Our large margin is 32px. Large margin is used to break up page sections.
32px top
32px right
32px bottom
32px left
32px all
Return to

Grid