Spacing Grid
4px grid For iconography, typography, and some elements within components.
8px grid For all components on mobile, tablet, and desktop.
Responsive Layout Grid
Max
1664px • 12 Columns
Columns 104px
Gutters 32px
Margins 32px
This is the biggest our content will ever get before only the margins expand.
🔸Max Sketch Setup
Navigate to View > Canvas > Layout Settings...
Total Width 1632px
Offset 16px
Number of Columns 12
Gutter on Outside ✅
Gutter Width 32px
Column Width 104px
Desktop
1088px • 12 Columns
Columns 56px
Gutters 32px
Margins 32px
🔸Desktop Sketch Setup
Navigate to View > Canvas > Layout Settings...
Total Width 1056px
Offset 16px
Number of Columns 12
Gutter on Outside ✅
Gutter Width 32px
Column Width 56px
Tablet
672px • 4 Columns
Columns 128px
Gutters 32px
Margins 32px
🔸Tablet Sketch Setup
Mobile
320px • 2 Columns
Columns 128px
Gutters 32px
Margins 16px
🔸Mobile Sketch Setup
Navigate to View > Canvas > Layout Settings...
Total Width 320px
Offset 0px
Number of Columns 2
Gutter on Outside ✅
Gutter Width 32px
Column Width 128px