{"id":38151,"date":"2023-10-05T07:08:40","date_gmt":"2023-10-05T14:08:40","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=38151"},"modified":"2023-10-05T07:09:01","modified_gmt":"2023-10-05T14:09:01","slug":"multi-brand-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/","title":{"rendered":"Multi-Brand Design System \u2013 How to Get Started"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system-1024x512.png\" alt=\"multi brand design system\" class=\"wp-image-38152\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Developing digital products from scratch requires a lot of resources. Multi-brand design systems enable organizations to build once, duplicate, and customize\u2013saving thousands of design and development hours.<\/p>\n\n\n\n<p>This centralized approach to <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design systems<\/a> means organizations can share costs across different brands while providing a framework to enter markets with new products much faster.<\/p>\n\n\n\n<p>Sync your component library with UXPin&#8217;s design editor using our revolutionary Merge technology to create a single source of truth across design and development. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> to learn more and request access.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Multi-Brand Design System?<\/h2>\n\n\n\n<p>A multi-brand design system is a set of guidelines, assets, and rules that allows for the efficient and consistent user interfaces across multiple brands or sub-brands within a larger organization. Multi-brand DS ensures harmony and efficiency in the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a> while allowing each brand to shine with its unique personality within the broader context.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-does-it-differ-from-a-standard-design-system\">How Does it Differ from a Standard Design System?<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/br3RGKY3Qgw?t=1852\" target=\"_blank\" rel=\"noreferrer noopener\">GroupUI used internal Volkswagen research<\/a> to compare multi-brand vs. regular design systems, discovering that <em>&#8220;multi-brand design systems share costs and enable real collaborative development.&#8221;<\/em><\/p>\n\n\n\n<p>The results across four key metrics were staggering when comparing multi-brand vs. regular design systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>25% cheaper and faster UI design work<\/li>\n\n\n\n<li>30% increased development <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/quantifying-designops-impact-webinar-summary\/#h-define-the-problem-efficacy-vs-efficiency\" target=\"_blank\" rel=\"noreferrer noopener\">efficiency &amp; efficacy<\/a><\/li>\n\n\n\n<li>30% reduction in future managed costs<\/li>\n\n\n\n<li>3-4 times faster to market<\/li>\n<\/ul>\n\n\n\n<p>But for us, there&#8217;s one word that sets them apart\u2013<em>flexibility<\/em>. Multi-brand design systems are optimized for flexibility, enabling product teams to leverage an existing component library to develop products for another brand.<\/p>\n\n\n\n<p>Conversely, companies build mono-brand design systems around principles and constraints that limit flexibility. These limitations ensure designers deliver projects to high standards of quality and consistency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-facilitating-change-through-design-tokens\">Facilitating change through design tokens<\/h3>\n\n\n\n<p>Most multi-brand design systems use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" target=\"_blank\" rel=\"noreferrer noopener\">design tokens<\/a> to facilitate global styling changes, for example, adapting colors, typography, corner radius, spacing, etc., to meet brand requirements simply by modifying the token&#8217;s property.<\/p>\n\n\n\n<p>In this way, multi-brand design systems share a lot of parallels with themeable <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">open-source component libraries<\/a>\u2013<em>built to facilitate change<\/em>. A multi-brand design system is essentially a template or toolkit with an adaptable codebase, design language, and brand guidelines.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Multi-Brand Design System Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-forge-from-harry-s\">1. <em>Forge<\/em> from Harry&#8217;s<\/h3>\n\n\n\n<p>Using design tokens is one aspect of a multi-brand design system. Organizations must also make the component library customizable. Personal care brand <a href=\"https:\/\/medium.com\/harrys-engineering\/the-forge-harrys-approach-to-the-multi-brand-component-library-60fd1144b08f\" target=\"_blank\" rel=\"noreferrer noopener\">Harry&#8217;s used Brad Frost&#8217;s Atomic Design (or layering as they call it) approach<\/a> to build its multi-brand component library, <em>Forge<\/em>.<\/p>\n\n\n\n<p>Forge uses two layers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Base layer (or sub-components):<\/strong> <em>&#8220;flexible base components that cannot be deconstructed further.&#8221;<\/em> Product teams only change styling properties for these base components\u2013<em>possibly through design tokens.<\/em><\/li>\n\n\n\n<li><strong>Complex layer (&#8220;second layer &#8220;):<\/strong> <em>&#8220;multiple base components arranged in specific and opinionated ways.&#8221;<\/em><\/li>\n<\/ul>\n\n\n\n<p>By structuring components in &#8220;layers,&#8221; Harry&#8217;s built a multi-brand component library that enabled product teams to keep brand-agnostic layers and swap brand-specific ones to customize user interfaces.<\/p>\n\n\n\n<p>Forge&#8217;s layered-component structure also facilitates flexibility because individual brands can use sub-components like Lego blocks to build a design system for a new product.<\/p>\n\n\n\n<p><em>&#8220;With the Forge, brands are free to combine sub-components to create solutions tailored to their users without requiring any changes to the component library.&#8221;<\/em> &#8211; <a href=\"https:\/\/medium.com\/harrys-engineering\/the-forge-harrys-approach-to-the-multi-brand-component-library-60fd1144b08f\" target=\"_blank\" rel=\"noreferrer noopener\">Mae Capozzi, Senior Software Engineer at Harry&#8217;s<\/a><\/p>\n\n\n\n<p>Forge&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system governance<\/a> offers product managers four options for promoting new patterns:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Existing Option A: Build custom components<\/li>\n\n\n\n<li>Existing Option B: Try to reuse components from the existing codebase<\/li>\n\n\n\n<li>New Option C: Assemble &#8220;new&#8221; components out of Forge base components<\/li>\n\n\n\n<li>New Option D: Use an out-of-the-box Forge component<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-volkswagen-s-groupui\">2. Volkswagen&#8217;s GroupUI<\/h3>\n\n\n\n<p>Volkswagen&#8217;s GroupUI is a multi-brand design system serving some 15+ brands. At the time of recording a <a href=\"https:\/\/www.youtube.com\/watch?v=br3RGKY3Qgw\" target=\"_blank\" rel=\"noreferrer noopener\">webinar with <em>Into Design Systems<\/em><\/a> in 2022, only several of Volkswagen&#8217;s brands had adopted GroupUI, including VW, Skoda, Audi, Porche, Man, Scania, and RIO.<\/p>\n\n\n\n<p>Unlike a tech company, Volkswagen has many design layers, including real-world (tangible) products and digital products.&nbsp;<\/p>\n\n\n\n<p><em>&#8220;You have to bring two things together-the vertical harmonization of touchpoints within one brand. For example, the harmonization of in-car HMI, web applications, and apps, plus some internal VR\/AR applications. And then the horizontal harmonization of technology.&#8221;<\/em> &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=br3RGKY3Qgw\" target=\"_blank\" rel=\"noreferrer noopener\">Thorsten Jankowski, User Experience Lead Group IT, Volkswagen AG<\/a>.<\/p>\n\n\n\n<p>Volkswagen has multiple touchpoint layers within each brand, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Web technology<\/li>\n\n\n\n<li>Native applications<\/li>\n\n\n\n<li>AR &amp; VR driver systems<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/automotive-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">Automotive UIs<\/a><\/li>\n<\/ul>\n\n\n\n<p>GroupUI focuses on <em>web technology<\/em> but must align with each brand&#8217;s vertical as much as possible to create a consistent user experience across every touchpoint.<\/p>\n\n\n\n<p>For example, when a customer purchases a vehicle through a brand&#8217;s website, the user experience and UI must be consistent from website to email marketing and in-car user interfaces.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-groupui-s-multi-brand-design-system-principles\">GroupUI&#8217;s Multi-Brand Design System Principles<\/h3>\n\n\n\n<p>To achieve this level of flexibility and customizability while maintaining a consistent brand experience across every vertical and touchpoint, GroupUI developed a set of <em>&#8220;overarching principles:&#8221;<\/em><\/p>\n\n\n\n<p>GroupUI&#8217;s over overarching principles help guide the group through three pillars that intersect toward a common goal:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flexibility<\/li>\n\n\n\n<li>Collaboration<\/li>\n\n\n\n<li>Transparency<\/li>\n<\/ul>\n\n\n\n<p><strong>Flexibility over rigidity:<\/strong> GroupUI is framework-agnostic, meaning brands can adopt a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/vue-react-angular-framework-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">framework (React, Angular, Vue, etc.)<\/a> that best serves their purpose and goals. To achieve this, GroupUI&#8217;s core component library uses <a href=\"https:\/\/kinsta.com\/blog\/web-components\/#what-are-web-components\" target=\"_blank\" rel=\"noreferrer noopener\">Web Components<\/a>, is token-based, and facilitates <a href=\"https:\/\/www.snowflake.com\/en\/why-snowflake\/\" target=\"_blank\" rel=\"noreferrer noopener\">Snowflakes<\/a>.<\/p>\n\n\n\n<p><strong>Global collaboration over stakeholder focus:<\/strong> GroupUI aims for <em>&#8220;continuous evolution as a common goal&#8221;<\/em> by putting the group&#8217;s needs ahead of a single brand or stakeholder. This generic strategy increases trust. GroupUI&#8217;s team works continuously on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/evangelize-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">evangelism<\/a> and distribution to promote generic over brand-specific implementation.<\/p>\n\n\n\n<p><strong>Transparency over complex documentation:<\/strong> GroupUI uses a centralized backlog for issues and design solutions. This centralization reduces silos vertically within each brand and horizontally across the entire group while facilitating an ecosystem for brands to learn and evolve together.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-tips-for-building-a-multi-brand-design-system\">3 Tips for Building a Multi-Brand Design System<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tip-1-use-fewer-tools-to-increase-adoption\">Tip #1: Use fewer tools to increase adoption<\/h3>\n\n\n\n<p>The first step to building a multi-brand design system is minimizing design tools! More tools mean the design system team must maintain multiple platforms.<\/p>\n\n\n\n<p>When <a href=\"https:\/\/www.news.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">News UK<\/a> built its multi-brand design system for The Times, The Sun, Virgin Radio, and The Sunday Times, to name a few, Nick Dorman, Head of Design Systems, found that using multiple tools resulted in a <em>&#8220;disjointed solution.&#8221;<\/em> Implementing simple changes would take days or weeks because the DS team had to update and verify changes across each platform systematically.<\/p>\n\n\n\n<p>News UK chose an image-based design tool which helped unify Design but still meant they had to maintain two design systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One for design \u2013 image-based <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI kit<\/a><\/li>\n\n\n\n<li>One for development \u2013 <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a><\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> is a far better design tool solution for multi-brand design systems. Merge syncs a component library hosted in a repository to UXPin&#8217;s design editor, so designers and engineers use the same UI elements. Any updates to the repo automatically sync to UXPin, notifying design teams of the changes\u2013<em>creating a single source of truth across design and development.<\/em>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tip-2-choose-a-framework-agnostic-design-system\">Tip #2: Choose a framework-agnostic design system<\/h3>\n\n\n\n<p>As we learned from Volkswagen, a framework-agnostic design system allows brands to use a tech stack that best serves their needs. GroupUI supports Web Components\/HTML, Angular, and React\u2013the three frameworks used across Volkswagen&#8217;s brands. Brands can preview these components through a centralized Storybook, including guidelines and documentation.<\/p>\n\n\n\n<p>Like Forge, GroupUI&#8217;s design system works in layers so teams can build components to meet their needs. A brand theme defines each component and nested component&#8217;s properties.<\/p>\n\n\n\n<p>Designers can also benefit from a framework-agnostic design system with UXPin Merge. <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Merge&#8217;s Storybook integration<\/a> enables design teams to sync any Storybook-compatible framework with UXPin&#8217;s design editor\u2013eliminating the need for creating UI kits.<\/p>\n\n\n\n<p>At design handoff, engineers install the framework&#8217;s package, apply the appropriate theme and copy component changes rendered by UXPin to complete front-end development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tip-3-adopt-atomic-design-methodology\">Tip #3: Adopt atomic design methodology<\/h3>\n\n\n\n<p>Adopting an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design methodology<\/a> is an excellent strategy to future-proof your multi-brand design system. Volkswagen, Harry&#8217;s, and News UK applied Atomic Design principles to build flexible, themeable design systems.<\/p>\n\n\n\n<p>The idea is to create a base layer of core components or building blocks that never change. Engineers nest these core components inside a themed master component to apply brand-specific styling via design tokens.<\/p>\n\n\n\n<p>This example from Volkswagen shows two tab patterns. One for Porsche, the other for Volkswagen. Notice how the tab patterns and nested components are identical; only the theme property changes for each brand.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/JhsGbk5Mu8lMr34y1ZPQ3MgO-Q_Qqk16fjfLP-9WRX9zSxDQEISceQudoy74lTrIK3Kq4EQm-7LXjMJLR6fM0gp6p8jn3-DMj8wrDOS3Ni-Z-iVXNnvfsunxj1MIeMlufxi-rQPYyHlR2zXlPNZwuTDN0C3xmG-wB8rw5Y0b7D83_ZfEABk48TLVCbnR5Q\" alt=\"Volkswagen example of tab patterns\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/xWjhxHUbx0956Fx3TKm1RwbkzyYFiZoovdYHdzyOo-CLAS9BzsA5J-i_1qg9N9wsZ8FW5T4mxnk1AfjUnLCrzG93Eeedj7OCYRhFttWR0Q_uxR_NWxK2p_BLyOl-vZFjPmAOLo7qBKhG4KvWqEV9dkwI71H8Dua4nKXT0Am2ATDPGfBuHFsfBoOBlm0Ljw\" alt=\"Volkswagen example of tab patterns\" style=\"width:650px\" width=\"650\"\/><\/figure>\n\n\n\n<p>Building components and patterns using this Atomic methodology make it easy to scale the multi-brand design system while providing each brand with a framework to scale individual design systems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-build-your-multi-brand-design-system-with-uxpin-merge\">Build Your Multi-Brand Design System With UXPin Merge<\/h2>\n\n\n\n<p>Multi-brand design systems are complex beasts with lots for design system teams to consider. The design system team must find ways to simplify workflows, reduce tools, and minimize time-consuming tasks.<\/p>\n\n\n\n<p>As we saw with News UK, using multiple tools creates a massive burden for design system teams updating and maintaining several platforms.&nbsp;<\/p>\n\n\n\n<p>UXPin Merge solves this design tool challenge by providing designers with a single design, prototyping, and testing solution. No plugins or extensions\u2013everything design teams need is built-in.<\/p>\n\n\n\n<p>Merge has the added benefit of syncing design and development to create a single source of truth across every brand\u2013<strong><em>impossible<\/em><\/strong><em> to achieve with traditional image-based design tools.<\/em><\/p>\n\n\n\n<p>With <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Patterns<\/a>, design teams can combine building blocks from a multi-brand design system to promote new patterns for the component library. UXPin Patterns is also helpful for saving <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns#how-to-use-patterns\" target=\"_blank\" rel=\"noreferrer noopener\">multiple component variants<\/a>, so designers can save time during prototyping by dragging and dropping elements to find the right solution fast!<\/p>\n\n\n\n<p>Sync design and development while unifying multiple brands through a single component-driven design solution. <a href=\"https:\/\/www.uxpin.com\/merge\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Developing digital products from scratch requires a lot of resources. Multi-brand design systems enable organizations to build once, duplicate, and customize\u2013saving thousands of design and development hours. This centralized approach to design systems means organizations can share costs across different brands while providing a framework to enter markets with new products much faster. Sync your<\/p>\n","protected":false},"author":3,"featured_media":38152,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,199],"tags":[],"class_list":["post-38151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-design-systems"],"yoast_title":"","yoast_metadesc":"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Multi-Brand Design System \u2013 How to Get Started | UXPin<\/title>\n<meta name=\"description\" content=\"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi-Brand Design System \u2013 How to Get Started\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-05T14:08:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-05T14:09:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Multi-Brand Design System \u2013 How to Get Started\",\"datePublished\":\"2023-10-05T14:08:40+00:00\",\"dateModified\":\"2023-10-05T14:09:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/\"},\"wordCount\":1609,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/multi-brand-design-system.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/\",\"name\":\"Multi-Brand Design System \u2013 How to Get Started | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/multi-brand-design-system.png\",\"datePublished\":\"2023-10-05T14:08:40+00:00\",\"dateModified\":\"2023-10-05T14:09:01+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/multi-brand-design-system.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/multi-brand-design-system.png\",\"width\":1200,\"height\":600,\"caption\":\"multi brand design system\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/multi-brand-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Multi-Brand Design System \u2013 How to Get Started\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Multi-Brand Design System \u2013 How to Get Started | UXPin","description":"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/","og_locale":"en_US","og_type":"article","og_title":"Multi-Brand Design System \u2013 How to Get Started","og_description":"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2023-10-05T14:08:40+00:00","article_modified_time":"2023-10-05T14:09:01+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Multi-Brand Design System \u2013 How to Get Started","datePublished":"2023-10-05T14:08:40+00:00","dateModified":"2023-10-05T14:09:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/"},"wordCount":1609,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png","articleSection":["Blog","Collaboration","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/","name":"Multi-Brand Design System \u2013 How to Get Started | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png","datePublished":"2023-10-05T14:08:40+00:00","dateModified":"2023-10-05T14:09:01+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn how to create a multi-brand design system and what to do if you want to adapt your design system to multiple markets. Read more.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/multi-brand-design-system.png","width":1200,"height":600,"caption":"multi brand design system"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Multi-Brand Design System \u2013 How to Get Started"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/38151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=38151"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/38151\/revisions"}],"predecessor-version":[{"id":50479,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/38151\/revisions\/50479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/38152"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=38151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=38151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=38151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}