03 — Foundations
Grid & Spacing
A 12-column grid with 24px gutters scales across 5 breakpoints. All spacing is an 8px base unit — no arbitrary values. Border radii follow a consistent 4-step scale.
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
Breakpoints
| Name | Width | Columns | Gutter | Margin | Use Case |
|---|---|---|---|---|---|
| Mobile | 375px | 4 | 16px | 16px | Default phone portrait |
| Phablet | 640px | 8 | 20px | 20px | Large phones, small tablets |
| Tablet | 768px | 8 | 24px | 24px | iPad portrait |
| Laptop | 1024px | 12 | 24px | 32px | Laptop screen |
| Desktop | 1440px | 12 | 24px | 64px | Wide desktop default |
Spacing Scale (8px base)
--space-14px0.5×
--space-28px1× base
--space-312px1.5×
--space-416px2×
--space-624px3×
--space-832px4×
--space-1248px6×
--space-1664px8×
Border Radius Scale
sm
6px
--radius-sm
md
10px
--radius-md
lg
16px
--radius-lg
pill
100px
--radius-pill
CSS Grid Implementation
css
/* 12-col grid container */
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-6); /* 24px gutters */
padding: 0 var(--space-16); /* 64px margins */
max-width: 1440px;
margin: 0 auto;
}
/* Responsive example */
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(4, 1fr);
padding: 0 var(--space-4);
gap: var(--space-4);
}
}