Grid and Spacing
Last updated
Every margin, padding, and spacing value must be a multiple of 4px. Do not use arbitrary values like 10px or 15px.
Name
Value (px)
Value (rem)
Common Usage
space-1
4px
0.25rem
Tiny adjustments, spacing inside small components.
space-2
8px
0.5rem
Spacing between an icon and text, or inside a button.
space-3
12px
0.75rem
Padding inside small cards or alerts.
space-4
16px
1rem
Standard margin between paragraphs or form fields.
space-6
24px
1.5rem
Padding inside standard content cards.
space-8
32px
2rem
Spacing between distinct sections within a container.
space-12
48px
3rem
Margin between major page components.
space-16
64px
4rem
Padding between major page sections (e.g., above a footer).
Our layout grid adapts to the screen size while maintaining a 12-column structure.
Above 1400px
32px
48px
1440px
1024 - 1399px
24px
32px
1399px
768 - 1023px
16px
24px
1023px
Below 768px
16px
12px
768px
Last updated