Key insights
- The golden ratio (1.618) turns up in seashells, galaxies and classic art — layouts built on it read as naturally balanced instead of arbitrary.
- Build a spacing scale by multiplying a base unit by 1.618: 8 → 13 → 21 → 34 → 55. Every gap relates to the next, so the UI feels deliberate.
- Split the screen at the golden ratio — roughly 62% / 38%. Give primary content the larger panel and secondary actions the smaller one.
- Step your type scale by the same factor: 16px body, 26px subheading, 42px heading, 68px display. One rhythm ties the whole hierarchy together.
- It isn't just theory — teams like Stripe, Linear and Airbnb lean on the same proportional system to look polished.
Do / Don't
- Do: Multiply one base unit by 1.618 to derive both spacing and type scales, so everything shares a rhythm.
- Do: Split layouts at 62% / 38%, handing the larger share to primary content.
- Do: Round the results to clean pixel values your grid can actually use.
- Don't: Pick gaps and font sizes arbitrarily — inconsistent proportions are what read as cheap.
- Don't: Apply the ratio so rigidly it fights real content or your existing 8px grid.
