All proportions derive from a single ratio: φ = 1.618. The golden ratio is not a style choice — it is a structural constraint that makes every proportion decision self-similar. Apply it to page grids, canvas dimensions, column splits, and spacing.
The same ratio governs the Fibonacci sequence. Consecutive Fibonacci numbers converge to φ, making integer spacing values (8, 13, 21, 34…) naturally proportional without needing to calculate.
φ = 1.618
Major — 61.8%
1 / φ = 0.618
Minor — 38.2%
Column split — this page
Tailwind: grid-cols-[61.8fr_38.2fr]
Each step cuts the remaining golden rectangle into a square and a new golden rectangle. The spiral arc is the same curve at every scale — self-similar, inward forever.
Use Fibonacci numbers as px/rem spacing steps. Each value is the sum of the previous two — consecutive ratios converge to φ. Skip 1 and 2 for practical use; start at 3px for hairlines.
Sequence: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 …
Social card 1200 × 630: ratio is 1200/630 = 1.905 — close to φ². Slide 16:9 (1920 × 1080): ratio 1.778. A4 paper 297 × 210mm: ratio 1.414 (√2 — ISO standard). Apply the golden column split within each canvas: left margin at 38.2%, right at 61.8%.
xCO uses four diagram types. Pick the one that matches the relationship in the data — not the one that looks most complex.
A
Ranked order, proportion, accumulation
Vertical or horizontal bars. Widths proportional to value. No baseline grid lines — only the bar edge reads.
e.g. Risk weighting across three regimes; carbon budget allocation by sector.
B
Relationship between two independent variables
Dot or region placement on a plain field. Axis labels at extremes only. No tick marks, no grid lines — region defines meaning.
e.g. Feasibility vs impact quadrant; state capacity vs ambition level.
C
Three-dimensional relationships shown in flat space
Isometric projection (30° / 120° angles). No perspective distortion. Each face reads as a 2D surface. Stack C diagrams only if each face is independent.
e.g. Three Regimes as volumetric field; territory + trajectory + time.
D
Process, causation, dependency, decision
Left-to-right or top-to-bottom reading order. Solid lines = direct connection. Dotted lines = conditional / weak link. Merge dot (filled circle) at convergence points.
e.g. Three Regimes diagram; policy cascade; intervention logic.