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

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: 60% primary space Main content breathing room, margins, section padding 30% secondary space Between related components like cards, inputs, buttons 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 [link] [comments]

Source: https://www.reddit.com/r/userexperience/comments/1qwmahs/the_603010_spacing_rule_for_cleaner_ui_layouts/