📖 Notes
LESSON 5 OF 26
Spacing, Grids & 8px Systems
Why Professional Designs Feel "Aligned"
The 8px grid system, consistent spacing, column grids, and why math-based spacing makes designs better.
Spacing Systems
The 8px Grid
🔢
8px Base Unit
Every spacing value (margin, padding, gaps) is a multiple of 8: 8, 16, 24, 32px.
📐
Column Grids
Content is placed into a fixed number of vertical columns (often 12) with consistent gutters.
🧮
Why Math-Based Spacing
A shared unit system means every designer/developer on a team uses the same spacing values — no guessing "is that 14px or 15px?"
📱
Consistency Across Screens
The same 8px system scales predictably from mobile to desktop layouts.
Why 8, Specifically
- 8 divides evenly by 2 and 4, giving flexible smaller increments (4px) when needed.
- Most screen densities (1x, 2x, 3x) scale cleanly from a base-8 unit, avoiding blurry sub-pixel rendering.
- An 8px system is the most widely adopted spacing convention in major design systems, including Google's Material Design.
✅
Quick check
If your spacing values are 8, 16, 24, or 32px, you're on the grid. If you find yourself using 13px or 22px "because it looked right," snap it to the nearest 8px multiple.