Build a consistent spacing scale using the industry-standard 4px / 8pt grid. Choose your device and see ready-to-use values, layouts, and live examples.
The base unit is the foundation of your entire spacing system. Every value in your design - padding, margin, gap, container - is a multiple of this number.
The 8pt grid is the global standard used by Apple, Google, Microsoft, Airbnb, and almost every major design system. Spacing values stay in multiples of 8 (8, 16, 24, 32...) with a half-step of 4 for fine control.
Why it matters: Multiples of 4/8 divide cleanly across all common screen sizes. Your design stays sharp on retina displays, scales predictably across breakpoints, and feels visually consistent across every component you build.
Recommended grid for desktop screens (1280px+).
Pre-configured spacing combinations for common UI sections. Click any preset to see exact values.
Every spacing value has a purpose. Use this guide to pick the right size for the right element.
See exactly how each spacing value looks in real UI components. All examples below use values from the scale above.