Blog

Golden Rectangle in Design

Apply golden rectangle proportions in web design, logos, UI modules, and photography without guessing aspect ratios.

By Golden Rectangle Calculator Team

Open the calculator
Warm grid paper with a golden rectangle diagram, phi symbol, and golden spiral for Golden Rectangle Calculator blog articles

Quick Answer

Set height a and width a + b using φ. The Golden Rectangle Calculator converts your base module to golden width and area.

Formula

  • Module height = a
  • Golden width ≈ a × φ
  • Strip b = a ÷ φ

Introduction

This guide shows how designers use the same math as the Golden Rectangle Calculator when they want calm, balanced frames.

Golden guides complement spacing systems; they do not replace accessibility or type scale rules.

Start from a real module: button row height, card image, or hero short side. Call that a.

Compute width with φ before you polish padding and gutters.

Main Content

Visual balance and hierarchy

φ sits between 1 and 2, so golden modules feel wider than square tiles but not as wide as cinematic banners.

Logos inside a golden box leave predictable margin bands for wordmarks and icons.

Photography can place subjects on internal lines, but the frame itself should come from measured a and a + b when you want true golden proportion.

Browse {{linkA}} for pixel and millimeter starting points before you lock a grid.

Layout formulas designers reuse

  • width = a × φ
  • b = a ÷ φ
  • two-column split using a and b

Hero height a with width a + b is the most direct translation of golden rectangle math into CSS max-width.

Inside the frame, you can still use 8-point spacing; golden proportion answers outer proportion, not every margin.

When stakeholders change only width, rerun the {{linkB}} instead of eyeballing 1600 px.

Composition workflow

From brief to inspectable CSS values.

  1. Pick base a Use a real element: image height, card min-height, or artboard short edge.
  2. Compute golden width Multiply by φ or use the tool for a + b.
  3. Place content Align headlines and focal points; optional rule-of-thirds overlay.
  4. Check small screens Scale both dimensions together to preserve ratio.
  5. Document tokens Store a and a + b as design tokens for handoff.

Web hero example

Content block height a = 720 px. Golden total width ≈ 1165 px. Compare with a 1280 px arbitrary width to see subtle proportion shift.

Strip b ≈ 445 px if you split the width visually into square plus strip for teaching slides.

Confirm numbers in the calculator.

Pair with responsive breakpoints so the ratio holds when the module scales down.

FAQ

Must every page be golden?
No. Use golden modules where proportion matters; prioritize readability.
Does Tailwind include φ utilities?
Use custom values or computed pixel widths from the formulas.
How does this relate to rule of thirds?
Different guides. You can combine them inside an already golden frame.
Will clients notice φ?
Many notice balance indirectly. Document why you chose the width for revisions.

Conclusion

Design golden rectangles by fixing a real module and solving width with φ.

Treat φ as a proportion tool inside broader systems, not a override for all spacing.

Use the calculator during critiques to show exact targets.

Calculate layout size