The 60-30-10 spacing rule for cleaner UI layouts

Published on:

https://preview.redd.it/1812tbi2oohg1.png?width=2090&format=png&auto=webp&s=381b8842eea15f9300fd23c14ccd2423b554ec37

A simple way to improve visual balance in UI is the 60-30-10 spacing approach:

  1. 60% primary space Main content breathing room, margins, section padding
  2. 30% secondary space Between related components like cards, inputs, buttons
  3. 10% micro spacing Icon gaps, label spacing, fine alignment tweaks

Too little spacing = clutter.
Too much = disconnected UI.

Example:

  • Large padding around sections (primary)
  • Medium gaps between cards (secondary)
  • Small spacing between icon + text (micro)

This keeps layouts structured without feeling cramped or empty.

Curious how others approach spacing consistency. Any rules you follow?

submitted by /u/Unlikely_Gap_5065
[comments]

Source link

Related