Foundation
Grid & Spacing
Our grid and spacing system provides a consistent foundation for layouts, ensuring visual harmony and proper alignment across all components and pages.
Grid System
Flexible 12-column grid system with responsive breakpoints
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
Common Layout Patterns
Two Equal Columns (6-6)
Column 1
Column 2
Three Equal Columns (4-4-4)
Column 1
Column 2
Column 3
Sidebar Layout (4-8)
Sidebar
Main Content
Asymmetric Layout (3-6-3)
Left
Center
Right
Spacing Scale
Consistent spacing tokens based on a 4px base unit
0
0px
p-0
1
4px
p-1
2
8px
p-2
3
12px
p-3
4
16px
p-4
5
20px
p-5
6
24px
p-6
8
32px
p-8
10
40px
p-10
12
48px
p-12
16
64px
p-16
20
80px
p-20
24
96px
p-24
Responsive Breakpoints
Mobile-first responsive design breakpoints for adaptive layouts
xs
< 640px
Extra small devices (phones)
sm
≥ 640px
Small devices (large phones)
md
≥ 768px
Medium devices (tablets)
lg
≥ 1024px
Large devices (desktops)
xl
≥ 1280px
Extra large devices
2xl
≥ 1536px
2X large devices
Usage Guidelines
Best practices for implementing grid and spacing
Grid Usage
- •Use the 12-column grid as the foundation for all page layouts
- •Combine columns to create flexible layouts that adapt to content needs
- •Apply responsive classes to adjust layouts across different screen sizes
Spacing Consistency
- •Use spacing tokens (4, 8, 16, 24, etc.) instead of arbitrary values
- •Maintain consistent spacing between related elements
- •Increase spacing to separate unrelated content sections
Responsive Design
- •Start with mobile layouts and progressively enhance for larger screens
- •Test layouts at all breakpoints to ensure proper content flow
- •Adjust spacing and grid columns based on available screen space