Golden ratio — Foundation

Golden Ratio Grid

This framework uses the Fibonacci sequence and Golden Ratio (phi = 1.618) as its proportional foundation. Spacing, typography, component dimensions, and grid layouts all derive from these mathematical relationships.

Golden Split (38.2% / 61.8%)

Minor
38.2% (1/phi)

Major
61.8% (1 - 1/phi)

<!-- Golden Split Layout (38.2% / 61.8%) -->
<div class="vd-row-golden">
  <div class="vd-col-golden-minor">
    <div class="vd-bg-secondary vd-p-6 vd-rounded-md vd-text-center">
      <strong>Minor</strong><br>38.2% (1/phi)
    </div>
  </div>
  <div class="vd-col-golden-major">
    <div class="vd-bg-primary vd-text-white vd-p-6 vd-rounded-md vd-text-center">
      <strong>Major</strong><br>61.8% (1 - 1/phi)
    </div>
  </div>
</div>

Fibonacci 3-Column (2:3:5)

<!-- Fibonacci 3-Column Layout (2:3:5 ratio) -->
<div class="vd-row-fib-3">
  <div class="vd-col-fib-2">2</div>
  <div class="vd-col-fib-3">3</div>
  <div class="vd-col-fib-5">5</div>
</div>

CSS Grid Golden Layout

1fr

1.618fr

<!-- CSS Grid Golden Layout (1:1.618 ratio) -->
<div class="vd-grid-golden">
  <div>1fr</div>
  <div>1.618fr</div>
</div>

Fibonacci Spacing Scale

1px

2px

3px

5px

8px

13px

21px

34px

55px

89px

144px

/* Fibonacci Spacing Scale CSS Variables */
:root {
  --vd-space-fib-1: 0.125rem;
  --vd-space-fib-2: 0.25rem;
  --vd-space-fib-3: 0.375rem;
  --vd-space-fib-5: 0.5rem;
  --vd-space-fib-8: 0.75rem;
  --vd-space-fib-13: 0.8125rem;
  --vd-space-fib-21: 1.3125rem;
  --vd-space-fib-34: 2.125rem;
  --vd-space-fib-55: 3.4375rem;
}

Golden Ratio Type Scale

xs — base / phi

sm — base / sqrt(phi)

base — 16px

lg — base x sqrt(phi)

xl — base x phi

2xl — base x phi^2

Feel the ratio — interactive spacing scale

Drag through the Fibonacci spacing scale. Each step's ratio to the one before it sits near φ (1.618) — that convergence is why the rhythm feels balanced without manual tuning.

13px

--vd-space-fib-13 · ×1.625 vs previous step

Where the golden ratio lives — and where it doesn't

Vanduo is Fibonacci/φ-first in its design language, and pragmatically conventional where familiarity beats math. We'd rather be honest than dogmatic.

Aspect	Basis
Spacing scale (--vd-space-fib-*)	Fibonacci — 1, 2, 3, 5, 8, 13, 21…	φ
Radius scale	Fibonacci	φ
Shadows & elevation	Fibonacci offset/blur pairs (1/2, 2/3, 3/5…)	φ
Type scale	Golden scale at √φ (≈1.272) steps	φ
Line-heights	φ-derived — 1.236, 1.382, 1.618	φ
Button / card padding	Fibonacci pairs (~φ ratio)	φ
Container widths	Fibonacci / Lucas — 610, 987, 1597	φ
Golden & Fibonacci grids	Opt-in (.vd-grid-golden, .vd-row-fib-*)	φ
Default 12-column grid	Equal columns — φ grids are a class away	conventional
Responsive breakpoints	Familiar 576 / 768 / 992 / 1200 / 1400	conventional
z-index & transition timings	Standard increments	conventional

Compare layouts side by side in Fibonacci vs Standard, or flip the live toggle on the Grid System page.