Skip to content
Ercan Labs
← Notes

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.

RELATED CASE

Style Lab

A design style catalogue: 145 styles with tokens, measurable motion signatures and 580 rendered scene screenshots.

MORE NOTES