The Mathematical Foundation of the 8-Point Grid

Why do companies like Google, Apple, Uber, and Shopify base their design systems on multiples of 8 (8px, 16px, 24px, 32px, 48px, 64px)?

The reasons are mathematical and physical:

1. Clean Division: 8 divides cleanly by 2 and 4, allowing easy half-steps (4px and 2px) without generating messy sub-pixel decimals (e.g., 1.5px or 3.333px).
2. Screen Resolution Scaling: Modern displays use pixel densities of 1x, 2x (Retina), 3x (OLED phones), and 1.5x/2.5x (Android). An 8px value scales cleanly into whole integers across every device multiplier:
   • $8 \times 1 = 8$
   • $8 \times 1.5 = 12$
   • $8 \times 2 = 16$
   • $8 \times 3 = 24$ If you used an odd base like 5px or 7px, multiplying by 1.5x produces blurry sub-pixel distortion (7.5px or 10.5px).