I designed the whole system from the ground up (type, color, components), then defined it as coded components the engineering team productionized, cutting roughly 80% off their frontend build time. I defined the coded design system; the engineering team refined it for production.
The resultThe system's documentation board: every token and component defined in one place, and defined in code.
I joined Optimeleon as it was growing fast. Every new feature came with its own buttons, inputs, and spacing, built fresh each time, so the same component could show up in three slightly different forms across the product. The chance to give everything a single, consistent design language was mine to take.
I started at the bottom. I broke the system into layers, anchored on what I called sub-atoms, the smallest pieces: type, color, shadow, spacing. Combine those and you get atoms like an input or a button. Atoms form molecules, molecules form organisms, and so on up to full pages. Each layer leans only on the one below it, so once the base was solid, the system started building itself.
The modelEach layer leans only on the one below it: solid primitives, and the system assembles itself.
The system took shape in Figma, with every token, component, and variant connected and documented. It became the single source the whole product drew from. The effect was immediate: it finally looked like one product, designed by one hand.
In FigmaButtons, labels, dropdowns, and tags, with every variant and state defined in one place.
The Figma system was solid. But I watched how it turned into shipped code, and it was the same slow move every time: a developer read values off the Figma inspector and retyped them by hand.
That step leaked. A padding rounded here, a color approximated there, a radius guessed. What I designed and what shipped never quite matched, and closing that gap meant another round-trip every time.
The design was good. The engineering was good. The cost sat in the distance between them.
The problemEvery component crossed from design to code by hand. It was slow, and it leaked accuracy at every step.
If the cost was translation, the fix was to remove it. I took the system out of static Figma files and built its components as real frontend code: the same tokens and structure, now written in markup and styles instead of redrawn by eye.
I built this with Claude Code as a pair, never on autopilot. My rule was simple: I had to be able to explain every line I committed. Instead of a picture to interpret, engineering now started from working components where the values were exact.
From there they did what they do best: refined the components for production, wired in real data, and handled the edge cases. They were starting from accurate code, not a flat image, and the distance I'd been measuring nearly disappeared.
The changeNo guessing from the inspector. No retyping. What I designed and what shipped started from the same source.
The libraryColor, type, buttons, cards, badges, and dropdowns, all rendered from the same tokens.
The proofEach component beside its code, rendered straight from the classes that define them.
Building in code meant engineering no longer had to rebuild each component by hand, the slowest, most error-prone step.
Design and code became one source, not two. What I defined and what shipped started from the same components.
The engineering team refined the coded components for production and shipped them in the live product.
Defined the sub-atoms (type, color, shadow, spacing) and grew them into a full component library. The product became coherent.
Traced where the time went: components translated from Figma into code by hand, slowly and with constant drift.
Built the components as real frontend code with Claude Code as a pair, so engineering could start from system-accurate components.
The system became coded components the team productionized, closing the distance and cutting ~80% off frontend build time.
The most useful thing I built at Optimeleon wasn't the component library. It was learning that the distance between design and code is itself a design problem, and that the best way to close it is to build the design as code in the first place. Design and code stop being two separate things.