Grid & Layout
Grid & Layout System
Grid System
A responsive 12-column grid with consistent gutters. Content is centred with a max-width to maintain readability on large screens.
1
2
3
4
5
6
7
8
9
10
11
12
12 columns · 24px gutter · fluid width
max-w-content
1280px
Maximum content width for standard pages
max-w-narrow
768px
Narrow layouts — blog posts, long-form text
max-w-wide
1440px
Wide layouts — dashboards, data-heavy pages
gutter
24px
Column gutter / standard horizontal gap
margin-page
clamp(16px, 4vw, 64px)
Responsive page margin
Breakpoints
Mobile-first responsive breakpoints. Design for the smallest screen first, then progressively enhance.
📱
Mobile
0 – 639px
sm
4 cols
📋
Tablet
640px – 1023px
md
8 cols
💻
Desktop
1024px – 1279px
lg
12 cols
🖥
Wide
1280px – 1439px
xl
12 cols
🖥
Ultra-wide
1440px – ∞
2xl
12 cols
Common Layouts
Reusable layout patterns showing column spans at desktop (lg) breakpoint.
Full Width
Hero sections, full-bleed images
12 col
Content + Sidebar
Blog posts, documentation, detail pages
8 col
4 col
Equal Halves
Comparison layouts, split features
6 col
6 col
Three Column
Service cards, feature grids
4 col
4 col
4 col
Four Column
Metrics, team members, icon grids
3 col
3 col
3 col
3 col