Design Atlas
한국어
▦ Layout

Golden ratio

황금비

A 1 : 1.618 proportion where the ratio of the longer part to the shorter equals the ratio of the whole to the longer — used since classical painting and architecture.

Also known as: φ (phi)1.618Golden rectangleFibonacci spiral
···
html
<div class="stage">
  <div class="rect">
    <div class="sq s1"></div>
    <div class="sq s2"></div>
    <div class="sq s3"></div>
    <div class="sq s4"></div>
  </div>
  <svg id="spiral" viewBox="0 0 161.8 100" preserveAspectRatio="xMidYMid meet">
    <path id="path" d="M0,100 A100,100 0 0 1 100,0 A61.8,61.8 0 0 1 161.8,61.8 A38.2,38.2 0 0 1 123.6,100 A23.6,23.6 0 0 1 100,76.4" fill="none" stroke-width="2" vector-effect="non-scaling-stroke"/>
  </svg>
  <span class="label">φ ≈ 1.618</span>
</div>
css
.stage{position:relative;width:min(88%,420px);aspect-ratio:1.618;display:grid;place-items:center}
.rect{position:absolute;inset:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sq{position:absolute;border:1px solid var(--line)}
.s1{left:0;top:0;width:61.8%;height:100%;background:color-mix(in oklab,var(--accent) 12%,var(--surface))}
.s2{left:61.8%;top:0;width:38.2%;height:61.8%;background:color-mix(in oklab,var(--accent) 20%,var(--surface))}
.s3{left:76.39%;top:61.8%;width:23.6%;height:38.2%;background:color-mix(in oklab,var(--accent) 30%,var(--surface))}
.s4{left:61.8%;top:76.4%;width:14.58%;height:23.6%;background:color-mix(in oklab,var(--accent) 42%,var(--surface))}
svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#path{stroke:var(--accent-2);stroke-dasharray:340;stroke-dashoffset:340;animation:draw 3.6s ease-in-out infinite}
@keyframes draw{
  0%{stroke-dashoffset:340}
  65%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}
.label{position:absolute;right:6%;bottom:5%;font:700 clamp(11px,2.4vmin,14px)/1 ui-monospace,monospace;
  color:var(--accent-2);background:color-mix(in oklab,var(--bg) 75%,transparent);padding:2px 6px;border-radius:4px}

φ (phi) ≈ 1.618 is also the value that the ratio of two consecutive Fibonacci numbers (1,1,2,3,5,8,13…) converges to. Keep dividing a golden rectangle into a square plus a smaller golden rectangle, connect the squares' arcs, and you get the famous golden spiral.

In web layout it shows up as the width ratio between two columns (say, content 61.8% : sidebar 38.2%), an image-to-caption ratio, or the height ratio between a hero section and the content below it. You can also apply it directly with aspect-ratio: 1.618.

The "it's beautiful because it's the golden ratio" claim is often overstated, though — in practice any non-extreme asymmetric ratio (roughly 1.3 to 1.8) tends to look fine. It's more useful as a rule of thumb — "an exact 50/50 split reads as boring" — than as a number to worship.

When to use

Use a ratio near 61.8:38.2 as a reference when you want two areas to feel subtly unequal in weight. The clearly-asymmetric feel matters more than hitting the exact number.