Design Systems That Span Multiple Brands
Design systems have evolved well beyond pattern libraries and sticker sheets. Today they are living systems with code counterparts, and they've fundamentally changed how design teams work. Beyond standardizing components, they let teams move faster and more efficiently. Leaders from Shopify, Condé Nast, and Harry's recently shared how they approach building multi-brand design systems in a livestream, offering lessons that apply to remote teams and beyond.
Flexibility Over Rigidity
A design system can be a single source of truth, but it's tempting to treat it as a set of hard rules about both content and usage. While structure matters, being too prescriptive can stifle creativity and push designers to work outside the system.
Mae Capozzi, former Senior Software Engineer at Harry's, advocates for trading complexity for flexibility. Harry's builds its system in layers, architected from least complex and least flexible—base components—to most complex and most flexible—a starter kit. This lets designers build something standard or explore a new approach. Most projects work with the simple layers, but when a project needs something custom, the system flexes to support it. By defaulting to simplicity while allowing for complexity, the system optimizes for efficiency and keeps designers from leaving it.
Condé Nast oversees titles like Vogue, The New Yorker, and Bon Appétit, so its design system must flex to different brand needs. Mason Wendell, frontend developer, explains the team does this with modular, adaptable components built on a token system. A single token can hold a different value for each brand, letting the system scale easily. For instance, the token "prominent text" maps to a different font per brand.
Systems Must Evolve
Work doesn't stop once you've built a system that fits your team's needs. After implementation you learn what's working and what isn't, identify what must evolve, and better understand usage. The best design systems are easy to change and experiment with, and teams that evolve fastest get the best results.
Shopify's team aims for a foundation that will "bend but not break." UX Manager Ricardo Vazquez cautions against "museum quality" systems treated as artifacts, where teams are afraid to make changes as use cases evolve. "It's imperative for us to observe," he says—not just designers, but end users like Shopify's merchants. "Watch how it breaks in order to reinvent it."
Bridging Design and Code
Components may start in design, but translating them to code unlocks speed and efficiency.
Condé Nast's site runs on JavaScript, enabling a token system defined in JSON. The team built a custom plugin to import and export token value changes in JSON format. Mason says this system lets them "stand up a new market quickly" and smooths the handoff between designers and engineers.
You don't need a complex setup to get value here. Mason notes that if you don't have multiple brands, you can start by associating a purpose with a value, whether for colors or typography. "By settling on names and values, that gives you some perspective on how complex—or overly-complex—your design system might currently be."
Above all, build a system and processes that fit your team's size, structure, and priorities. As Mae reminds us, "I really don't think that there is a one-size-fits-all solution."
