Design
One number, φ, sets the proportions. One angle turns the gold into the tints. The fonts are your device’s own.
Proportion
The golden ratio, φ, and a scale of its powers.
φ = (1 + √5) ÷ 2 ≈
Your browser worked that out from calc((1 + sqrt(5)) / 2).
The scale: powers of φ, in rem.
- Page width
- 61.8 rem100 ÷ φ
- Two columns
- 23.6 : 38.2heading : body, 1 : φ
- Measure
- 38.2 rem100 ÷ φ², paragraph width
- Line height
- 1.618φ, body text
- Corner radius
- .382 remφ⁻²
The tiles
Fibonacci squares and a spiral.
The top of the home page: a 13 × 8 rectangle, near enough golden, cut into squares of 8, 5, 3, 2, 1 and 1. A quarter circle in each makes the spiral.
Largest first: who I am, what I’m building, my resume, the question box, φ, email. On a narrow screen it stands on end, 8 × 13.
Type
No web fonts. Your device’s own.
The system face: San Francisco, Segoe UI or Roboto. Labels in the system monospace. The one serif is the φ.
- 2.618 remHeadings
- 1.618 remSection titles
- 1 remBody text, with a line height of φ.
- .8125 remSmall print and captions
- .75 remLabels in monospace
- 2.618 remφ
Headings balanced across their lines; paragraphs set pretty, no lone last word; headings trimmed to cap height where the browser can.
Colour
One gold, turned round the wheel by the golden angle.
One gold; greys for the rest. Each tile and card turns the gold a further 137.5°, the golden angle, round the hue wheel. It keeps the tints apart.
- 0°
- 138°
- 275°
- 53°
- 190°
- 328°
- Gold
- #e2b13cfills: the φ tile, the reading line
- Gold as ink
- #8a6100 · #f0c75elight · dark, for text and lines
- Paper
- #faf8f3 · #111216light · dark
- Ink
- #1c1c21 · #eeebe3light · dark
Each colour is one light-and-dark pair; the colour scheme picks the side.
Motion
A little, in φ time, and none if you’ve asked for none.
The spiral draws itself in 2.618 seconds, a gold dot leading. Tiles stagger in, a gold line tracks your reading, sections ease in. Every duration is a power of φ.