Golden Ratio
A mathematical ratio (approximately 1:1.618) historically used in art and architecture to create harmonious proportions.
Plain English
The golden ratio (~1.618) appears throughout nature and has been used in art and architecture for thousands of years to create proportions that feel inherently balanced and beautiful. In UI design, it appears in type scales (the major third ratio 1.25 and perfect fourth 1.333 approximate it), layout proportions (a 2/3 main content, 1/3 sidebar split is close to golden), and spacing scales. You do not need to apply it mechanically — understanding it helps develop an intuition for why certain proportions feel right.
Technical
The golden ratio φ = (1 + √5) / 2 ≈ 1.618. In typography: a 1.618 type scale multiplier produces 10, 16, 26, 42, 68px. In layout: a 1:1.618 split of a 1200px container gives 454px + 746px (close to a sidebar + main). In spacing: a Fibonacci-based scale (1, 1, 2, 3, 5, 8, 13, 21, 34) maps well to an 8pt grid (8, 8, 16, 24, 40, 64, 104px). The 8pt grid itself approximates golden proportions at adjacent stops.
Live Demo
Golden Ratio (1 : 1.618)
Rectangle divided at the golden ratio
Hero section — image vs text
Typographic scale — each ×1.618
The golden ratio (1:1.618) appears in nature and creates instinctively pleasing proportions.
Usage
✓ Good usage
Use a 1.25 type scale ratio — each heading level is 1.25× the size of the level below, creating a harmonious typographic hierarchy.
✗ Bad usage
Attempting to apply the golden ratio to every dimension in the UI mechanically — it becomes a constraint that produces awkward sizes rather than a guiding principle.
Recommended values
- Type scale: use 1.25 (major third) or 1.333 (perfect fourth) ratios
- Layout split: approximately 62/38 (golden) for main/sidebar
- Spacing scale: Fibonacci-based values scaled to 8pt grid
- Image proportions: 1:1.618 width-to-height for a classic golden rectangle
- Apply as intuition, not mechanical rule
Common mistakes
- Applying it rigidly to pixel values — round to the nearest spacing system value instead.
- Treating it as a magic rule rather than a proportional intuition guide.
- Confusing the golden ratio with the rule of thirds (different but related concepts).
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a Major Third (1.25) type scale. Approximate golden ratio proportions for main/sidebar layouts (roughly 60/40 split). Base spacing on a Fibonacci-adjacent 8pt scale: 4, 8, 12, 20, 32, 52px.