Gesso
Colors and fonts are only part of how a design feels. Gesso handles the rest, like how rounded the corners are, how shadows fall, and how things move, and keeps them consistent across a whole site.
The surface system: the part of a design that decides how it feels.
Open gesso-wheat.vercel.app6
Material axes
10
Named registers, from Paper to Brutalist
108
Contrast assertions across 12 generations
2
Export formats: CSS tokens and DTCG JSON
Why we built it.
Every design tool generates color and type, yet material is what gives an interface its feel: radius, elevation, border policy, fill strategy, density, and motion. That layer is usually assembled by hand, inconsistently, and it's the first thing to drift across a build.
The decisions we made, and why.
This part gets into the technical detail. If that isn't your thing, the short version is at the top of the page.
Six axes, where the coherence rules are the product
Radius base, a five-step elevation ladder, border policy, fill strategy, density, and motion register. Generation anchors on named registers and varies around them, and the value is in the constraints between axes: borders and shadows trade off, glass restrains elevation, radius follows density, and pills appear only once the register is already round. Random values across six axes produce noise, and these rules are what make a generated surface look designed.
It dresses a real wireframe, one engine at a time
Three engines, for surface, color, and type, dress a stage of real components, and you can re-roll each one while the others hold. Keep a palette you like and roll the material underneath it, which is how the decision gets made in practice.
What we only learned by testing.
Every item below is a real problem we found by measuring, and each one has a fix behind it. We share them because they tell you more about how we work than the features do.
The bug that only showed up on a phone
When we reviewed it on a phone instead of a laptop, dark-mode labels were invisible and light generations looked flat. We found two separate causes: a role swap, with accent-as-text used where text-on-accent was needed, and most of the role vocabulary going unused, so generations differed in hue but shared one structure.
We verified the fix across generations, rather than on one example
We corrected the role mapping, widened the registers, and then checked 108 pixel-contrast assertions across twelve generated systems in both light and dark. A single fixed example proves only that example. Variety is the product here, so the testing has to cover the variety.
A deploy created a stray project
A deploy created an unwanted second Vercel project named after the output directory. It's small, but it's the kind of thing that quietly piles up in an account until someone wonders what half the projects are.
Built with, and still open
- TypeScript
- Vite
- Umber engine
- Kern engine
- Live tuning against any site is designed and still to be built: click an element, see variants in place, accept one, and have it write back to source. We want the write-to-source path worked out properly before we ship it.