The 4px Grid and Why It Matters

# The 4px Grid and Why It Matters

A consistent spacing system improves design quality and developer velocity.

## What Is the 4px Grid?

All spacing uses multiples of 4px:

- 4px (0.25rem)
- 8px (0.5rem)
- 12px (0.75rem)
- 16px (1rem)
- 24px (1.5rem)

## Why 4px?

1. **Sub-pixel rendering** — aligns with pixel boundaries
2. **Eye comfort** — natural rhythm
3. **Math simplicity** — easy calculations

## Implementation

```css
/* Tailwind style */
.space-1 { margin: 4px; }
.space-2 { margin: 8px; }
.space-3 { margin: 12px; }
.space-4 { margin: 16px; }
```

## Benefits

- **Consistency** across all UI
- **Faster decisions** — no arbitrary values
- **Better collaboration** — designers and devs align

## Conclusion

The 4px grid is simple but transformative. Start today.