Leonardo.Ai — Web Platform
Development, Design systems, AI
Leonardo.Ai makes images from words. In July and August 2023, through Wax, I worked as a front-end developer on its Next.js web platform, making the whole interface scale from one number.
- Role
- Front-end Developer
- Team
- Leonardo.Ai engineering, through Wax
- Timeline
- 2023
- Platform
- Web
415
files on one base unit
0.8×
interface scale on high-density screens
47
commits, merged into main
The problem
Every size written by hand
Every size was converted to rem by hand: 388px became 24.25rem. Nothing set the scale in one place, and borders, radii, shadows and blurs each had their own values.
Before
Hand-converted sizes
- 388px written as 24.25rem
- Borders, radii, shadows and blurs set separately
- No single place to change the scale
After
One base unit
- Chakra's space and size keys first
calc(baseSize * n)for everything else- Borders scaled on their own, never under 1px
My role
Front-end developer, through Wax
I owned the scale-ui branch: 47 commits over three weeks across 415 files, merged into main.
The process
Three variables
It comes down to three values in theme/base.ts.
baseUnit
The scaling factor: 1 by default, 0.8 on screens with a device pixel ratio of 2 or more.
baseSize
The rem value every calculated size multiplies.
baseBorderSize
Borders scale separately, so a 1px line never disappears.
The theme came first, from Chakra's buttons and inputs to modals and tooltips. Then every page and component still carrying a raw px or rem, from the canvas to the PhotoReal panel.
I rewrote the README's sizing section so the next developer reaches for Chakra's keys first.
Reflection
What I took with me
Scale is a design decision that lives in code. One documented place saved anyone hunting through 415 files. I have set up tokens before screens ever since.
Through Wax
