Spacing & Layout
A 4px base grid, responsive breakpoints, and consistent container patterns for every Workshopr app.
Spacing Scale
Based on a 4px base unit. Every spacing value is a multiple of 4.
--space-0-5
2px
Hairline adjustments
--space-1
4px
Icon-to-text gaps
--space-1-5
6px
Tight inline spacing
--space-2
8px
Tight component padding, inline gaps
--space-2-5
10px
Badge/chip internal padding
--space-3
12px
Default gap between related items
--space-3-5
14px
Comfortable small gaps
--space-4
16px
Card internal padding, form field gaps
--space-4-5
18px
Between-group spacing
--space-5
20px
Comfortable component padding
--space-6
24px
Card padding, container padding, grid gaps
--space-8
32px
Section margins, major separation
--space-10
40px
Large section padding
--space-12
48px
Section gaps on desktop
--space-16
64px
Hero section vertical padding
Container
Content is centered with a max-width and horizontal padding.
max-width: 1120px;
padding: 0 24px;
@media (max-width: 768px) {
padding: 0 20px;
}
Breakpoints
sm
480px
Mobile
md
640px
Mobile landscape
lg
768px
Tablet
xl
960px
Tablet landscape
2xl
1120px
Small desktop
3xl
1280px
Desktop
Grid Patterns
Content Cards: 3 → 2 → 1
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
@media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { grid-template-columns: 1fr; }
Collection Cards: 2 → 1
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
@media (max-width: 768px) { grid-template-columns: 1fr; }
Visual Preview
Desktop (3 cols)
Tablet (2 cols)
Mobile (1 col)