Spacing

Our spacing is based on a 4-pixel grid, please use only these sizes:

Size Name	Value	Example of use
XXS	4px or 0.25rem	Great for really small spaces like connecting an error message to form, eg.
XS	8 or 0.5rem	Great when you need to connect related components, like a header and a description.
S	12 or 0.75rem	-
M	16 or 1rem	16 Great for inner padding, left & right padding of the screen when placing content on mobile.
L	24 or 1.5rem	Default for spacing, for left & right inner padding in sections.
XL	32 or 2rem	-
XXL	48 or 3rem	-
XXXL	80 or 5rem	Great for space between illustration and header.

Shadows

box-shadow-sm

box-shadow-md

box-shadow-lg

box-shadow-inset

1

2

1

2

3

1

2

3

4

1

2

3

4

5

6

1

2

3

4

5

6

7

8

9

10

11

12