One of the most important rules of modern UI design is to maintain a clear visual hierarchy. To achieve this, spacing units must follow a consistent pattern, typically by scaling the base unit with a fixed proportion.
The 4-point grid hits the sweet spot: it's not too small to go unnoticed, nor is it too large. For example, 2-point increments might feel too fine, while 6-point or 8-point increments can feel like too large a change.
Different devices have varying screen resolutions and pixel densities. A high-density display packs more pixels than a low-density display. To keep UI elements at a consistent physical size, devices scale the interface based on pixel density.
A pixel is the smallest unit on the screen, and all elements must have sizes that are whole numbers. The same applies to the spacing and distance between elements.
Collection
[
|
...
]