Turning taste into numbers
145 styles, 580 scenes, 38 gates. Taste becomes reusable only when it turns into text and numbers.
· 5 min
Client work kept landing on the same layout: dark hero, three cards, generous whitespace. Not bad taste; there was no vocabulary. Every project started from zero and reached for the same defaults.
The fix was not a mood board. A mood board shows a feeling, it does not reproduce it. What was needed was a catalogue where every style has machine-readable tokens, a written signature, and evidence that it actually renders.
Style = schema
Each style ships three files: style.md (why), tokens.json (palette, type, motion) and token-block.css (the applicable block). The gallery is generated from the schema, so a style cannot exist only in prose.
A measurable signature
Every style got a motion signature: duration, easing, shift amount, stagger. Duplicate signatures inside a family are forbidden. Instead of claiming "all different", the catalogue publishes a uniformity index: hero and nav fingerprints are compared, and it comes out at 16% (the previous version was 100%, meaning all identical).
Screenshots are expensive
There are 37 scenes per style; 145 × 37 = 5,365 images. Keeping all of them in the repository makes cloning impractical. The decision: four core scenes per style in the repo (580 PNGs, ~167 MB), the remaining 27 rendered on demand into a gitignored cache.
38 gates before commit
A shell script checks schema validity, contrast ratio, dark-mode parity, scene presence and duplicate fingerprints. A style that fails cannot be committed. The result: the catalogue cannot drift silently.
The cost
Writing JSON for 145 styles took longer than writing 145 blog posts. The gates slow commits down. And the catalogue proves a style renders — not that it sells. There is no conversion data; this is an internal tool, not a shop window.
Style Lab
A design style catalogue: 145 styles with tokens, measurable motion signatures and 580 rendered scene screenshots.