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. I proposed building one in my first week, but I was outvoted.
Problem: 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 authored the Figma library and the React theme file and kept them one-to-one. I audited every component and variant in use and required anyone customizing past Material UI defaults to justify their changes. Then I named everything by function rather than by value.
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 had the first Dash product looking identical in two days.
Projected annual savings: $2.8M, from a 30% efficiency benchmark applied to our front-end developer time at estimated rates.
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
The level of engineering effort and quality varied wildly depending on which designer was on the product. It was the same company and products, but output changed based on who was assigned where.
Often, engineering spent time on customization nobody could justify, like multiple shades of the organization’s primary brand color. I was in the codebase reviewing PRs, so I could see it going in before it shipped.
Halfway into the build, 90% of the contractor engineering pool was let go, and the front end switched from React to Python Dash. The remaining engineers picked up the open work in a stack they had not been using.
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. The decisions behind it could.
Every color, every spacing value, every text size had already been argued out, agreed on, and written down, so nobody had to decide anything twice.
What was left was typing it into a new language.
I had the first product looking identical in two days. Users could not tell the difference.
I kept building the system for as long as I was there.
Projected annual savings: $2.8M.
“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