LyondellBasellHow I created a design system to save $2.8M, from components to code
Context: I was a Principal designer on an industrial SaaS team building data-heavy products for petrochemical engineers. Four designers, roughly 50 developers, nine active products, and no shared design system.
Problem: I proposed building a system in my first week and was outvoted. Two years later, quality depended on staffing. Projects were consistent if I was on them and drifted if I wasn't. Other designers were creating inconsistent designs that required extra engineering effort.
What I did: I audited every component and variant in use and made anyone customizing past Material UI defaults justify it. Then I authored the Figma library and the production React theme and kept them one-to-one.
Impact: Adopted across five product teams. In early 2025, we let go of 90% of the contractor team, and the front end moved from React to Python Dash. I rebuilt the system in the new language myself in days.
Projected annual savings: $2.8M, from a 30% design system efficiency benchmark applied to front-end developer time.
Role: Principal Product Designer | Year: 2025 | Duration: 3 months
5
teams adopted
9
products unified
$2.8M
projected cost savings
Quality was determined by staffing
I proposed a design system in my first week and was outvoted. Two years later, engineering effort and quality varied depending on which designer was on the product.
I was in the codebase doing PRs and merging them myself, so I saw the customization going in before it shipped.
One designer was using around ten different blues for the same brand color. His work was also customized far enough past the component library that there was never a version small enough to ship.
There were four designers by then, nine active products, and roughly 50 developers.
The gap was costing an estimated $2.8M a year, based on N/ng’s design system efficiency benchmark for front-end developer time.
The system needed to serve two users without my help
Two users defined every architectural decision.
The first was the designer with no deep systems experience, who needed to produce a consistent screen without my review. Otherwise, quality still depended on my availability. So I typed the theme file, with spacing, colors, and typography each in their TypeScript file.
Start typing padding and the editor offers small, medium, large sizes rather than individual values.
The second was the Polish contractor engineer receiving a handoff while I was asleep. If they couldn't work until I got online, I was the roadblock. So I wrote the documentation for the system I built in Docusaurus, with examples pulled from React.
Where things needed customization, like the chips and buttons, I wrote the production React myself and opened the pull request.
Status icons on each Figma page showed what was done and what was open, so anyone could pick up work without asking me.
Four decisions created a system that raised a team's work
Decision 1
A team-wide audit before designing anything. Every customized component now had to be justified. Almost none of them could be. So I only built for the few real exceptions, and once people saw how much of their customization was pointless, they stopped doing it.
Decision 2
Token naming by function. A token is a saved value like a color or a spacing amount. I named them by function (small, medium, large) rather than pixel value. That way, if we wanted dense mode, that's only changing one value in a file.
Decision 3
No to the 10-shade color system. Material 3 guidance went back to ten shades per color. The code library we built didn't support that, and following spec meant a significant amount of development work for all of the components. While it allowed for more design flexibility, it wasn’t worth the development effort for such a small team. Rolling out functionality was more important in this instance.
Decision 4
A voting system for contested calls. When designers had multiple reasonable answers, the team voted. I accepted votes I lost.
What survived the pivot
The design system was about half built when the contractors were let go. At the same time, the front end of every product moved to a different programming language
The code I wrote couldn't come with us. But every color, spacing value, and text size had already been argued out and written down.
Nobody had to decide anything twice. What was left was typing it into a new language.
I did that part myself. The remaining engineers were picking up open work in a stack they hadn't used, and this wasn't where their time should go. I had the first product looking identical in two days. Users could not tell the difference.
“We stopped asking 'what should this look like?' and started asking 'what should this do?' … The whole team moved faster because no one was blocked on design decisions, and no one had to make the same call twice.”
— Manuel Lopez, Principal Analytics Platform Engineer