The Fibonacci Scale Guide
Vanduo's spacing, type, and radius scales follow the Fibonacci sequence (1, 2, 3, 5, 8, 13, 21…) instead of a linear 4/8px grid. Because each step is the sum of the two before it, sizes relate to one another the way they do in nature — rhythm that feels balanced without manual tuning. It's a design philosophy baked into the tokens themselves, not any one component.
What is the Fibonacci sequence?
Each number is the sum of the two before it:
As the numbers grow, the ratio between neighbours approaches ≈ 1.618 — the golden ratio (φ), the same proportion found in shells, sunflowers, and classical architecture. Our eyes read those proportions as balanced, which is why a φ-tuned scale feels right without fiddling.
Before / after: equal vs Fibonacci columns
Standard — equal columns
Balanced, but uniform — every section gets the same emphasis.
Fibonacci — 3 : 5 : 8
~19% + ~31% + ~50%. Natural hierarchy — the eye flows from small to large.
The spacing scale, to scale
Utilities & tokens
<!-- Fibonacci spacing utilities (rem-based) -->
<div class="vd-p-fib-5"> <!-- padding -->
<h2 class="vd-mb-fib-3">Title</h2>
<p class="vd-mb-fib-2">Body copy with harmonious rhythm.</p>
</div>:root {
/* The scale every spacing/size token derives from */
--vd-space-fib-1: 0.125rem;
--vd-space-fib-2: 0.25rem;
--vd-space-fib-3: 0.5rem;
--vd-space-fib-5: 1rem;
--vd-space-fib-8: 2rem;
--vd-space-fib-13: 4rem;
}Fibonacci layout classes
Swap a single row class to get golden proportions — no custom CSS:
4-column (1 : 2 : 3 : 5)
<!-- 4-column Fibonacci (1:2:3:5) -->
<div class="vd-row-fib-4">
<div>Narrow (1)</div>
<div>Small (2)</div>
<div>Medium (3)</div>
<div>Wide (5)</div>
</div>3-column (3 : 5 : 8)
<!-- 3-column Fibonacci (3:5:8) -->
<div class="vd-row-fib-3-alt">
<div>Sidebar (3)</div>
<div>Secondary (5)</div>
<div>Main content (8)</div>
</div>| Class | Columns | Ratio | Use case |
|---|---|---|---|
vd-row-fib-3 | fib-2 + fib-3 + fib-5 | 2 : 3 : 5 (20 / 30 / 50%) | Sidebar + secondary + main |
vd-row-fib-3-alt | fib-3 + fib-5 + fib-8 | 3 : 5 : 8 (~19 / 31 / 50%) | More dramatic hierarchy |
vd-row-fib-4 | fib-1 + fib-2 + fib-3 + fib-5 | 1 : 2 : 3 : 5 (~9 / 18 / 27 / 45%) | Four columns with strong visual flow |
How to reach for each step
| Steps | Typical use |
|---|---|
1, 2, 3 | Fine adjustments — borders, tight gaps |
5, 8 | Component padding, gaps between elements |
13, 21 | Section spacing, card padding |
34, 55, 89 | Page rhythm, hero spacing |
Why not a linear scale?
A linear 4/8/12/16 scale gives every step the same visual jump, which flattens hierarchy. A Fibonacci scale grows proportionally, so small and large spaces stay distinct and the eye reads structure faster.
Want the proportions in layout form? The Golden ratio page has an interactive φ slider and grid demos.