GOLDEN·GRID — editorial grids generated from the golden ratio
Can I generate harmonious editorial layouts straight from the golden ratio — a tool that hands me the type scale, spacing, and frames already built on φ — instead of eyeballing proportions every single time?
Encoding the proportions as reusable tokens turns subjective 'taste iteration' into a setting you dial in. The math (a modular type scale, golden-ratio frames, and an 'optical box' for padding and corner radius — what I call the LiftKit formulas) does the harmonizing. Better still, those tokens became a single source other projects pull from instead of each one reinventing its spacing.
The generator works and outputs the tokens. Parked at the point where the obvious next move is to promote it from a standalone tool into a shared token source that all my sites read from — the same unification Parallax is waiting on.
What it is
GOLDEN·GRID is a small, framework-free ("vanilla") HTML tool I built. It generates editorial grids based on the golden ratio (φ ≈ 1.618) — the proportion that shows up everywhere in classical composition. You set a few inputs; it lays out a grid, a type scale, and spacing that are all related by φ.
The idea: math instead of eyeballing
As a designer, my slowest step is often "taste iteration" — nudging sizes and margins by eye until a layout feels right. GOLDEN·GRID replaces a chunk of that with proportion: if the relationships are derived from φ, they tend to feel coherent by construction. I get to start from something harmonious instead of hunting for it.
What it produces — the φ / LiftKit tokens
The real output isn't just a picture of a grid; it's a set of reusable design tokens (the named values a design system runs on):
- a modular type scale (each size related to the next by the ratio),
- golden-ratio frames for images and blocks,
- an "optical box" — consistent rules for padding and corner radius so elements feel evenly weighted, not just mathematically equal.
How it connects
These tokens are meant to be a single source of truth that my other projects consume — Parallax already pulls from this same φ / LiftKit system for its typography and spacing. One design language, generated once, reused everywhere.
Where it stands
The tool works. The next step is less "build more" and more "consolidate": turn GOLDEN·GRID's output into a shared token file that every one of my sites reads from, so the design language stays identical across all of them.