The 4-Point Micro-Grid for Fine Detailing

While 8px is the macro baseline, sometimes 8px is too coarse for micro-interactions and compact UI elements.

For example, inside a compact badge or table row, an 8px padding might make the element feel bloated, while 0px is cramped. This is where the 4-point micro-grid comes in:

• Permissible 4px half-steps: Spacing tokens include space-4 (half of 8) and occasionally space-12 (1.5x) for fine-grained typographic alignment, icon padding, and border offsets.
• Rules of Engagement: 4px spacing should be reserved for tight internal component padding, small icon-to-label gaps, and borders. Structural page layout and card margins should remain strictly 8px or higher.