Layout
01 / 10
The 62/38 Split
Divide a two-column layout by φ instead of in half: content at 62 percent, sidebar at 38. The asymmetry says which column leads without a heavier border or a second color.
Typography
02 / 10
Modular Type Scale
Multiply a base size by φ for each step — 16, 26, 42, 68 — and every heading relates to body text by the same proportion. Many teams soften it to 1.25 or 1.333 for tighter screens.
Composition
03 / 10
The Golden Rectangle
A rectangle with sides in the ratio φ can be cut into a square and a smaller golden rectangle, again and again. The nested squares make a ready-made grid for hero blocks and card layouts.
Images
04 / 10
Crops and Frames
Crop images to a φ rectangle, roughly 8:5, and place the subject on the line that divides the frame by φ rather than dead center. It sits close to the rule of thirds, a little tighter to the middle.
Spacing
05 / 10
Spacing Rhythm
A spacing scale built on φ grows fast: 8, 13, 21, 34. Fibonacci numbers give the same rhythm in whole pixels. Use it for gaps between sections, not for every margin inside a component.
Reality check
06 / 10
Myths and Marketing
The Parthenon, the nautilus, and the Apple logo are routinely drawn with spirals that fit only if you squint. Markowsky measured the famous examples in 1992 and found few hold. Use φ because it works on the page, not because nature demands it.
Judgment
07 / 10
When Not to Use It
Interfaces are systems of many small parts, and φ rarely survives contact with a 12-column grid, an 8-point spacing scale, or a fixed viewport. If forcing the ratio breaks alignment, alignment wins.
Perception
08 / 10
Why It Feels Balanced
Studies from Fechner in 1876 onward found only a mild preference for golden rectangles, and later replications found less. What people reliably prefer is a proportion that is clearly unequal yet related — which φ delivers, and 3:2 or 5:3 deliver nearly as well.
✦
Proportion in the Age of AI
Generated layouts can apply a ratio system everywhere at once; the risk is applying it where alignment matters more.
✦ AI Era
09 / 10
Ratio-Aware Layout Generation
A model that composes a layout can be told to prefer φ-based splits and a modular type scale, and apply them consistently across hundreds of screens. Ask it to justify each proportion, and reject it where the grid breaks.
✦ AI Era
10 / 10
Spotting Fitted Spirals
Image tools overlay golden spirals on anything, and the overlay always fits because it is scaled to fit. Treat a spiral as decoration, not evidence, and measure the underlying proportion instead.