Brand Design Manual
Spacing System
Consistent spacing creates visual harmony and improves readability.
Spacing Scale
Based on an 8px grid system
2xs
4px
0.25rem
xs
8px
0.5rem
sm
12px
0.75rem
md
16px
1rem
lg
24px
1.5rem
xl
32px
2rem
2xl
48px
3rem
3xl
64px
4rem
Usage Guidelines
Component Spacing
Use md (16px) for internal component padding
Section Spacing
Use 2xl-3xl (48-64px) between major sections
Element Spacing
Use xs-sm (8-12px) between related elements
Layout Margins
Use lg-xl (24-32px) for page margins
Visual Examples
Component Padding (sm, md, lg)
sm (12px)
Card Content
md (16px)
Card Content
lg (24px)
Card Content
Element Spacing (2xs, xs, sm, md)
2xs (4px) - Tight grouping
Item 1
Item 2
Item 3
xs (8px) - Related items
Item 1
Item 2
Item 3
sm (12px) - Standard spacing
Item 1
Item 2
Item 3
md (16px) - Comfortable spacing
Item 1
Item 2
Item 3
Section Spacing (xl, 2xl, 3xl)
Section 1
xl (32px)
Section 2
2xl (48px)
Section 3
3xl (64px)
Section 4
Layout Margins (lg, xl)
lg (24px) - Compact layout
Content with lg margins
xl (32px) - Spacious layout
Content with xl margins