Spacing

We use a 4px baseline grid to define the size of elements and create margins and padding. Everything within the Element is built on this 4px baseline grid.

Spacing tokens

Use 4px increments to create padding and margins.

Dimension
4px
4px
ovo-core-space-1
Collection
-
Token set
Core
8px
8px
ovo-core-space-2
Collection
-
Token set
Core
12px
12px
ovo-core-space-3
Collection
-
Token set
Core
16px
16px
ovo-core-space-4
Collection
-
Token set
Core
20px
20px
ovo-core-space-5
Collection
-
Token set
Core
24px
24px
ovo-core-space-6
Collection
-
Token set
Core
28px
28px
ovo-core-space-7
Collection
-
Token set
Core
32px
32px
ovo-core-space-8
Collection
-
Token set
Core
36px
36px
ovo-core-space-9
Collection
-
Token set
Core
40px
40px
ovo-core-space-10
Collection
-
Token set
Core
44px
44px
ovo-core-space-11
Collection
-
Token set
Core
48px
48px
ovo-core-space-12
Collection
-
Token set
Core
52px
52px
ovo-core-space-13
Collection
-
Token set
Core
56px
56px
ovo-core-space-14
Collection
-
Token set
Core
60px
60px
ovo-core-space-15
Collection
-
Token set
Core
320px
320px
Min width
Collection
Platforms
Token set
-
576px
576px
Max width
Collection
Platforms
Token set
-
360px
360px
Default width
Collection
Platforms
Token set
-
Dimension / space
0px
0px
0
Collection
Core
Token set
-
4px
4px
1
Collection
Core
Token set
-
8px
8px
2
Collection
Core
Token set
-
12px
12px
3
Collection
Core
Token set
-
16px
16px
4
Collection
Core
Token set
-
20px
20px
5
Collection
Core
Token set
-
24px
24px
6
Collection
Core
Token set
-
28px
28px
7
Collection
Core
Token set
-
32px
32px
8
Collection
Core
Token set
-
36px
36px
9
Collection
Core
Token set
-
40px
40px
10
Collection
Core
Token set
-
44px
44px
11
Collection
Core
Token set
-
48px
48px
12
Collection
Core
Token set
-
52px
52px
13
Collection
Core
Token set
-
56px
56px
14
Collection
Core
Token set
-
60px
60px
15
Collection
Core
Token set
-
Dimension / opacity
1px
1px
sollid
Collection
Core
Token set
-
0.75px
0.75px
translucent
Collection
Core
Token set
-
0.25px
0.25px
transparent
Collection
Core
Token set
-
Dimension / breakpoint
576px
576px
small
Collection
Core
Token set
-
768px
768px
medium
Collection
Core
Token set
-
1200px
1200px
large
Collection
Core
Token set
-
Dimension / font-weight
450px
450px
book
Collection
Core
Token set
-
700px
700px
bold
Collection
Core
Token set
-
900px
900px
black
Collection
Core
Token set
-
Dimension / radius
4px
4px
small
Collection
Core
Token set
-
8px
8px
medium
Collection
Core
Token set
-
12px
12px
large
Collection
Core
Token set
-
22px
22px
max
Collection
Core
Token set
-
Dimension / border-width
1px
1px
small
Collection
Core
Token set
-
2px
2px
large
Collection
Core
Token set
-
4px
4px
medium
Collection
Core
Token set
-