Rebuilding the Core of SMG’s Multibrand Experience
In SMG’s Real Estate vertical, our design ecosystem relied on two major systems: 1. Tomodachi — the design system in Figma 2. Domus — the corresponding frontend component library Both supported four brands — ImmoScout24, Homegate, Flatfox, and SMG — and in the early stages, the setup worked well. Patterns were introduced in Figma, implemented in frontend, and both sides stayed fairly aligned. But as the products expanded, design naturally evolved faster. New variants, updated patterns, and improved foundations were created in Tomodachi, while Domus couldn’t keep up with the pace. Over time, this created a widening gap between what designs showed and what the frontend actually supported. It wasn’t caused by neglect; it was simply the result of product velocity and no dedicated owner for the system. Designers and engineers were still getting the work done, but with more friction than needed. To reduce that friction, I stepped into the role of Design System Owner, working to realign Tomodachi and Domus, rebuild consistent foundations for all brands, and shift the design system toward a model where design defines the system, and frontend follows it, not the other way around.
My goal wasn’t to reinvent the system but to tighten the connections, clarify foundations, and create a working model that felt stable for everyone involved.
Here’s how the work unfolded:
Steps of the Tomodachi Initiative
1. Establishing Ownership & a Dedicated Design System Team
I took on the Design System Owner role and helped set up a small, focused team so there was finally a clear place for questions, decisions, and long-term direction..
2. Mapping the roadmap and defining how the work would actually happen
We sketched out a five-phase roadmap together as a team, giving everyone a clear view of how the work would unfold and how each phase supported the next. It became a shared guide for designers, engineers, and stakeholders, helping us align on what we were doing, why, and when.
3. Aligning the foundations across ImmoScout24, Homegate, SMG, and Flatfox
We refreshed and unified the basics, typography, colors, icons, and spacing, so all four brands shared the same backbone, which was key for building a true white-label system.
4. Reworking Components and Setting Clear Usage Standards
With the foundations aligned across all brands, we revisited the components and rebuilt them to feel clearer, more reliable, and actually pleasant to work with. Once that was in place, we brought everything together into one documentation hub so teams didn’t have to guess or fall back on old shortcuts. The mix of real examples, clear guidelines, and simple usage rules made the system something people could genuinely use in their everyday work.
5. Bringing Tomodachi and Domus back in sync
We aligned naming, logic, states, and documentation so design and frontend weren’t drifting apart anymore, making the whole system easier to ship and scale.
Outcomes
Reflection
This work reminded me that design systems often drift not because people stop caring, but because teams move quickly and foundations don’t always keep up.
Realigning Tomodachi and Domus wasn’t about inventing something new, it was about listening, adjusting, and re-establishing shared expectations. There were moments where we had to revisit assumptions, clarify logic that seemed obvious, and negotiate how certain components “should” behave across design and development.
The process was iterative, practical, and collaborative.
And while the system still evolves, as it should, it now does so with much less friction and with a clearer path forward.
see also
