Share the rules that help a product work: interaction states, accessibility, content structure and component contracts. Change the expression that tells the user which product they are in and why it exists. Test both parts together.

Multi-brand design systems are often pitched as a switch that changes colors in a component library. That demonstration can be useful, but it proves only that a theme can render. It does not prove that the brands have distinct promises, that content will fit, or that a customer understands the relationship. The real challenge is to decide what should remain invariant and what should respond to context. Treat that boundary as a product decision, not a CSS trick.

Start from a real flow that repeats

Choose a recurring journey: navigating from an article to a related service, filling out a form, correcting an error, reading a disclosure, or viewing progress. Write down its functional expectations independent of brand. A button needs a keyboard focus state and a clear label wherever it appears. A form needs an error that explains what to fix. An outbound recommendation needs to show where the visitor is going. These contracts can be shared even when layout, tone, hierarchy and visual identity change.

Designer Denis Artemmenko described a seven-brand design-system migration in a June 2026 first-person case study. He reported that a shared template hid duplicated manual work, then used variables and components to coordinate distinct themes. The account is valuable as a practitioner's report of one project; its reported time savings and migration scale should not be generalized to every team. The lesson to test is where repetition is expensive, and whether the abstraction removes that work without obscuring the brand.

For a small portfolio, the first shared artifact can be a written interaction contract rather than a package. Describe focus behavior, validation, responsive breakpoints, image loading and what an article header must show. Then select one flow and implement it across two properties. If the experience improves without making the pages interchangeable, formalize the shared part. If implementing the common rule requires many exceptions, the abstraction may be drawn at the wrong level.

Three layers, each with a different owner

Foundation contains accessible states, spacing conventions and performance budgets. Semantics gives names to intent: primary action, caution, article metadata, inquiry field and system feedback. Expression decides how a particular brand speaks, organizes emphasis and signals its purpose. A blue accent can be reused across properties, but color alone cannot tell a visitor whether they are reading an editorial judgment, booking a service or enrolling in a course.

A semantic token such as action-primary is helpful because its meaning can survive a visual change. The same principle applies to content: an editorial article needs named sources and a visible date; a service case study needs a stated role and demonstrable outcome. One generic card component can enforce title hierarchy and interaction behavior. It should not force the same evidence or call to action into different contexts. Component reuse is a maintenance decision, not a license to flatten editorial distinctions.

Motion makes the boundary more visible. In a February 2026 account, studio founder Andrew Vucko describes balancing Google, Google Cloud and Gemini in a shared NRF experience, as well as work across the Intuit brand family. These are his team's examples, not independent benchmarks. Their useful design question is who should lead in a shared moment and how the other identities should support without competing for attention.

Check recognition as well as efficiency

Put a page from each product side by side and remove its logo. Can a user still infer what kind of decision the page helps them make? Then add the shared component and see whether recognition survives. Test on a narrow phone, a laptop and at enlarged text size. Inspect focus, line breaks, image crops and the transition between related properties. A brand system fails if it saves implementation time but creates an unclear journey for the person using it.

Maintain a small exception log. If an editorial page needs disclosure above the fold while a product page needs a purchase summary, those are legitimate differences. If the only exception is a designer repeatedly setting an arbitrary radius by hand, it probably belongs in a token. Review exceptions during real releases instead of designing every hypothetical variant up front. Governance works when someone can say why a rule is shared and who may change it.

Interface Report's earlier design-system explainer describes the structural model. This article offers the operational test: choose one repeated flow, specify behavior, preserve the customer's distinct decision, and verify it in the rendered product. A multi-brand interface is working when customers understand which promise they have entered and the team can improve a common interaction without repeating the same repair three times.

Sources and further reading

Continue reading