Design system foundation for Lutron’s web redesign
A token‑based design system to help 13 sites feel like one ecosystem.
The challenge
Lutron had 40+ web properties, all built at different times by different teams. The result was a mix of styles and patterns that made the brand feel fragmented, and many people didn’t realize the sub‑brands were part of the same Lutron family. With 13 sites being redesigned at once, there was no shared design system to keep those new interfaces consistent or easy to maintain.
My contribution
I worked on Hypatia as a design foundation that teams could actually use while redesigns were in progress, not as a big, finished system dropped in at the end. I defined core tokens for color, type, spacing, and motion, then paired them with simple UI components and short usage notes so designers had something clear to build from. I stayed close to the UI agency’s concept work, updating tokens and components as real screens took shape, so the system matched how people were actually designing.
How I approached it
With only three months and active projects already underway, I focused on getting the basics in place instead of trying to solve every pattern up front. That meant shipping a solid foundation (shared tokens, core components, and guidance) that teams could adopt quickly while leaving more advanced patterns and deeper documentation for the internal team to grow later.
What changed
The UI agency started using Hypatia within six weeks, which meant the 13 redesigned sites were grounded in the same set of decisions instead of drifting apart again. The internal team kept a documented set of tokens and components they could extend, giving Lutron a clearer, more connected digital ecosystem and a simpler way to keep future work aligned.
