{"id":34073,"date":"2022-03-21T05:56:00","date_gmt":"2022-03-21T12:56:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=34073"},"modified":"2023-10-23T21:52:04","modified_gmt":"2023-10-24T04:52:04","slug":"design-system-principles-of-success","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/","title":{"rendered":"Design System \u2013 Principles of Success"},"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\/02\/Design-system-Principles-of-Success-1024x512.png\" alt=\"Design system Principles of Success\" class=\"wp-image-34074\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.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>On the surface, building a design system is a matter of designing a collection of elements, components, text styles, and colors. But the truth is it&#8217;s a more complex procedure. Building, managing, and scaling a design system requires principles and direction.<\/p>\n\n\n\n<p>This article was inspired by the webinar about D<meta charset=\"utf-8\">esign System with Carola Cassaro, which outlined the process of building a design system, including the principles that guide teams and decision-making. We have another webinar coming up in May! We will talk about building and scaling enterprise design systems with Amber Jabeen. <a href=\"https:\/\/get.uxpin.com\/enterprise-design-system-how-to-build-and-scale\/\" target=\"_blank\" rel=\"noreferrer noopener\">Join the webinar for free<\/a>.<\/p>\n\n\n\n<p>In <em>Defending Your Design System<\/em>, we feature our revolutionary code-based design technology, <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>. Merge allows you to create a single source of truth between design and development by syncing code components from a repository to UXPin&#8217;s editor. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> and see Merge in action with our <a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\" target=\"_blank\" rel=\"noreferrer noopener\">MUI integration<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-design-system-principles\">What are Design System Principles?<\/h2>\n\n\n\n<p>Principles define the <em>why<\/em> and <em>purpose<\/em> of building your organization&#8217;s design system. These principles guide decision-making and explain how the design system&#8217;s creators want team members to use the system.&nbsp;<\/p>\n\n\n\n<p>A design system&#8217;s principles also streamline onboarding by helping new team members understand the company&#8217;s vision and priorities.&nbsp;<\/p>\n\n\n\n<p>&#8220;Design principles are the guiding light for any software application. They define and communicate the key characteristics of the product to a wide variety of stakeholders including clients, colleagues, and team members. Design principles articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole.&#8221; &#8211; Luke Wroblewski, Product Director at Google<\/p>\n\n\n\n<p>Carola Cassaro, Director of Product Management at Work &amp; Co, and part of the team responsible for building and launching IKEA&#8217;s design system Skapa, broadly outlines design system principles as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Single source of truth:<\/strong> Centralized resource that&#8217;s easy to access and relevant to its users<\/li>\n\n\n\n<li><strong>Inclusive &amp; collaborative:<\/strong> Speaks to a wide audience, uses shared terminology, and fosters the exchange of ideas<\/li>\n\n\n\n<li><strong>Modular &amp; reusable:<\/strong> Solves the majority (80%) of UX problems so that teams have more time to innovate<\/li>\n\n\n\n<li><strong>Living &amp; breathing:<\/strong> Evaluated and evolved over time<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-why-do-you-need-design-system-principles\">Why Do You Need Design System Principles?<\/h3>\n\n\n\n<p>Building a design system is like building any other product. Without a set of principles guiding your decisions, you end up with the same problems your design system is supposed to solve, like design drift, conflicting opinions, and team friction.<\/p>\n\n\n\n<p>With clearly defined principles, team members work together to solve design problems with shared purpose and consistency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-guide-to-establishing-principles-for-a-design-system\">A Guide to Establishing Principles for a Design System<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-components.png\" alt=\"design system components\" class=\"wp-image-32623\" style=\"width:750px;height:300px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/design-system-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Back in 2015, UXPin used a five-step process to define its design system&#8217;s principles. The process is still relevant today.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-find-product-analogies\">Step 1 \u2013 Find product analogies<\/h3>\n\n\n\n<p>To avoid copying direct competitors, look for inspiration from successful products and brands outside your product category. The goal is to identify core values and qualities you want your product to have. What do you want people to experience when using your product?<\/p>\n\n\n\n<p>For example, a red Ferrari might represent wealth, speed, exclusivity, status, and innovation. List these analogies and your reasons for choosing each one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-find-design-principles-in-analogous-products\">Step 2 \u2013 Find design principles in analogous products<\/h3>\n\n\n\n<p>Go through your list of product analogies and identify the qualities that make these products successful. Also, why do you want your product to have these qualities?<\/p>\n\n\n\n<p>For example, a red Ferrari represents status. How does it do that for people? A simplistic answer would be its cost. But there&#8217;s so much more that gives a Ferrari status, like craftsmanship, quality parts, attention to detail, rarity, personalization, Formula 1, and the brand&#8217;s legacy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-make-the-list-real-with-existing-user-research\">Step 3 &#8211; Make the list real with existing user research<\/h3>\n\n\n\n<p>Connect the reasons for your choices with your product&#8217;s user research. Do user pain points contradict what you want your product to be?<\/p>\n\n\n\n<p>For example, you want your product to be as simple and intuitive as an iPad, but users complain that they battle to use features or complete tasks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-build-value-statements\">Step 4 &#8211; Build value statements<\/h3>\n\n\n\n<p>Sort your analogies and reasons, prioritizing those most frequently mentioned by users to make value statements.&nbsp;<\/p>\n\n\n\n<p><strong>We want our product to be like<\/strong> [<em>complete with your product analogy<\/em>] <strong>because it<\/strong> [<em>complete with the reason<\/em>] <strong>and it&#8217;s important to<\/strong> [<em>our users\/me\/us<\/em>].<\/p>\n\n\n\n<p>Using one of Marcin&#8217;s examples: &#8220;We want our product to be like a white Porsche 911 from the 80s because it brings the feeling of timeless quality and it&#8217;s important to us.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-abstract-your-principles\">Step 5 &#8211; Abstract your principles<\/h3>\n\n\n\n<p>Now remove the product references from your value statements to make them applicable to your design system.<\/p>\n\n\n\n<p>For example, <em>&#8220;we want our product to bring a feeling of timeless quality.&#8221;<\/em><\/p>\n\n\n\n<p>From this five-step process, UXPin&#8217;s team developed seven design principles:<\/p>\n\n\n\n<p>1. <strong>No distractions<\/strong>. Every redundant piece of the interface (lines, buttons, shadows, animations) is a source of distraction. As such, it should be eliminated to empower users&#8217; creativity with a well-architected and inspiring design tool.<\/p>\n\n\n\n<p>2. <strong>Design-centric<\/strong>. Users&#8217; designs should lie at the center of UXPin. Our interface should be unobtrusive to the point of transparency.<\/p>\n\n\n\n<p>3. <strong>Adaptive interface.<\/strong> UXPin&#8217;s interface should act according to the context of use. All the &#8216;inactive&#8217; features should remain completely hidden until the user can use them (no inactive buttons and links!)<\/p>\n\n\n\n<p>4. <strong>Space<\/strong>. UXPin&#8217;s interface should create a peaceful atmosphere, triggering users&#8217; creativity. This ambiance can be shaped by leaving a lot of space around every piece of interface. The cluttered interface is the source of stress that produces cortisol and adrenaline; both block our creative powers.<\/p>\n\n\n\n<p>5. <strong>Inspiration<\/strong>. UXPin design should inspire and, as such, can&#8217;t be a derivative of design of other SaaS apps. We should strive for an original aesthetic inspired by the best products ever created (some of the sources of our inspiration: Fountain Pen <a href=\"http:\/\/www.amazon.com\/Namiki-Vanishing-Point-Matte-Fountain\/dp\/B004ICN0X0\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Pilot Vanishing Point Matte Black<\/a>, <a href=\"http:\/\/www.amazon.com\/Harman-Kardon-Soundsticks-III-Multimedia\/dp\/B0042F3K9W\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">speakers Harman Kardon Sound Stick<\/a>,<a href=\"http:\/\/www.amazon.com\/Pro-Ject-Essential-Turntable-Ortofon-Cartridge\/dp\/B00DKSUGOO\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> record player Pro-ject<\/a>, <a href=\"http:\/\/www.amazon.com\/DALI-ZENSOR-Bookshelf-Speaker-White\/dp\/B00E0I7AF6\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">speakers DALI Zensor<\/a>).<\/p>\n\n\n\n<p>6. <strong>Interactive<\/strong> <strong>Consistency<\/strong>. Interface components, icons, and fonts should be consistent to create a predictable experience.<\/p>\n\n\n\n<p>7. <strong>Predictable Architecture<\/strong>. UXPin&#8217;s architecture must be predictable and natural. Features should be placed in the right context for new users to discover easily. Example of predictable architecture: canvas settings should be placed next to the canvas.<\/p>\n\n\n\n<p>Over the years, UXPin has found these principles prevent:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Endless subjective discussion<\/li>\n\n\n\n<li>Unclear design requirements<\/li>\n\n\n\n<li>Inconsistency at the most fundamental level<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-finding-inspiration-and-examples-from-adele\">Finding Inspiration and Examples From <em>Adele<\/em><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-system-library-components.png\" alt=\"design system library components\" class=\"wp-image-32904\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-system-library-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-system-library-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Adele is a UXPin initiative that features an A-Z <a href=\"https:\/\/adele.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems Repository<\/a>. Inspired by the 70&#8217;s design system pioneer Adele Goldberg, <a href=\"https:\/\/adele.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Adele by UXPin<\/em><\/a> aims to encourage people to develop principle-driven design systems using inspiration from the world&#8217;s leading organizations.<\/p>\n\n\n\n<p>The directory breaks each design system down into 31 categories, including components, framework, brand guidelines\/principles, color palette, typography, grid, accessibility, documentation, and more.<\/p>\n\n\n\n<p>Adele also provides links to each of these categories (where applicable), so you can quickly find references and inspiration. For the purposes of this article, we&#8217;ll outline the principles from four established design systems.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-estonia-brand-estonia\">Estonia &#8211; Brand Estonia<\/h3>\n\n\n\n<p>As a country that&#8217;s marketing itself as <em>&#8220;the world&#8217;s most digitally advanced society&#8221;<\/em> and strategies to attract startups and remote workers like <a href=\"https:\/\/www.e-resident.gov.ee\/\" target=\"_blank\" rel=\"noreferrer noopener\">e-Residency<\/a> and its <a href=\"https:\/\/www.e-resident.gov.ee\/nomadvisa\/\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Nomad Visa<\/a>, it&#8217;s no surprise that Estonia has one of the world&#8217;s best governmental design systems.<\/p>\n\n\n\n<p><a href=\"https:\/\/brand.estonia.ee\/messages\/?lang=en\" target=\"_blank\" rel=\"noreferrer noopener\">Brand Estonia<\/a> comprises of three core messages or principles that designers must use to introduce Estonia:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Digital society:<\/strong> Estonia is the first country to function as a digital service. Our citizens and e-residents can get things done fast and efficiently.<\/li>\n\n\n\n<li><strong>Independent minds:<\/strong> Estonia&#8217;s biggest asset is our people.<\/li>\n\n\n\n<li><strong>Clean environment:<\/strong> Estonia has a lot of untouched nature and a low population density. This is very rare in today&#8217;s world. We know how to care for our environment and we are proud of it.<\/li>\n<\/ul>\n\n\n\n<p>Estonia also has <a href=\"https:\/\/brand.estonia.ee\/messages\/industries\/?lang=en\" target=\"_blank\" rel=\"noreferrer noopener\">11 primary industries<\/a> or products, each with its principles that align with the country&#8217;s three core messages.<\/p>\n\n\n\n<p>Coupled with messaging are Brand Estonia&#8217;s copy and design guidelines which define the country&#8217;s character in three words: Nordic, Surprising, and Smart. The visual language must always be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clean:<\/strong> as in uncluttered with unnecessary information and confusing typography<\/li>\n\n\n\n<li><strong>Simple:<\/strong> because we like to leave enough space around text and images \u2013 making them more legible and emphasizing only the essential<\/li>\n<\/ul>\n\n\n\n<p>Brand Estonia is a wonderful example of how designers can use the nation&#8217;s values (or company culture) to define its design system&#8217;s principles succinctly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-atlassian-design-system\">Atlassian Design System<\/h3>\n\n\n\n<p><a href=\"https:\/\/atlassian.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atlassian&#8217;s design language resource<\/a> provides teams with guidelines <em>&#8220;to create simple, intuitive and beautiful experiences.&#8221;<\/em><\/p>\n\n\n\n<p>The design system team has separated the guidelines into six categories:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Brand:<\/strong> reflects who we are and how we want our users to feel when they use our products<\/li>\n\n\n\n<li><strong>Foundations: <\/strong>the visual elements needed to create engaging layouts and end-to-end user experiences<\/li>\n\n\n\n<li><strong>Content:<\/strong> covers our voice and tone, and the mechanics of our grammar, and style<\/li>\n\n\n\n<li><strong>Components: <\/strong>each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences<\/li>\n\n\n\n<li><strong>Patterns:<\/strong> best-practice solutions help users achieve their goals and help ensure consistency across experiences<\/li>\n\n\n\n<li><strong>Resources:<\/strong> a collection of tools, kits, plugins, and guides to help simplify the creation process for our users<\/li>\n<\/ul>\n\n\n\n<p>Within each category are several subcategories where Atlassian uses a sentence or two to reinforce the company&#8217;s principles. For example, under <strong>Brand<\/strong>, they have <strong>Mission<\/strong>: <em>Our mission is to unleash the potential in every team.<\/em><\/p>\n\n\n\n<p>Atlassian demonstrates that with clear design system principles, you can develop a complex suite of products with remarkable consistency and seamless integration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-salesforce-lightning-design-system\">Salesforce &#8211; Lightning Design System<\/h3>\n\n\n\n<p>Design system professionals often point to Lightning as an example of simplistic cohesion and consistency. <a href=\"https:\/\/www.lightningdesignsystem.com\/guidelines\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lightning&#8217;s guidelines<\/a> are as comprehensive as the design system itself, with documentation for every component and layout.<\/p>\n\n\n\n<p>Salesforce outlines four code principles behind its design system:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clarity:<\/strong> Eliminate ambiguity. Enable people to see, understand, and act with confidence<\/li>\n\n\n\n<li><strong>Efficiency:<\/strong> Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster<\/li>\n\n\n\n<li><strong>Consistency: <\/strong>Create familiarity and strengthen intuition by applying the same solution to the same problem<\/li>\n\n\n\n<li><strong>Beauty:<\/strong> Demonstrate respect for people&#8217;s time and attention through thoughtful and elegant craftsmanship<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.lightningdesignsystem.com\/getting-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">Salesforce&#8217;s goal for Lightning<\/a> is to create a design system that allows team members to focus on their core tasks and responsibilities:<\/p>\n\n\n\n<p><em>&#8220;The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.&#8221;<\/em><\/p>\n\n\n\n<p>If you&#8217;re having trouble defining your design system&#8217;s principles, start by identifying a high-level goal and working your way down from there.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-stack-overflow-stacks\">Stack Overflow &#8211; Stacks<\/h3>\n\n\n\n<p>Stack Overflow divides Stacks&#8217; guidelines into four categories: Product, Email, Content, and Brand. Under Brand is where the company outlines its design system&#8217;s principles.<\/p>\n\n\n\n<p>Stacks emphasizes four brand principles that <em>&#8220;represent the approach and opinion all things Stack Overflow should have.&#8221;<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Focused:<\/strong> Designs should focus the person on what&#8217;s important at hand. Designs should focus on the central goal, pushing distractions and interruptions to the side until the stated goal is completed.<\/li>\n\n\n\n<li><strong>Welcoming:<\/strong> Our designs shouldn&#8217;t feel &#8220;members only,&#8221; but inviting and approachable. Designs should be intentional and intuitive, not be some secret codex for users to decipher. While the subjects developers talk about may seem impersonal, our design approach shouldn&#8217;t be.<\/li>\n\n\n\n<li><strong>Purposeful:<\/strong> Everything in its right place. Our designs might be packed with information, but everything should be purposeful. Don&#8217;t add extraneous data or ornamentation, as it might distract people from the central goal at hand.<\/li>\n\n\n\n<li><strong>Five percent fun:<\/strong> We&#8217;re quirky, not corny. We enjoy the long joke. Our humor is dry and pops up in unexpected, but appropriate, places. We&#8217;re &#8220;business in front, party in the back.&#8221;<\/li>\n<\/ul>\n\n\n\n<p>Stack Overflow also provides its teams with guidelines for copywriting and visuals. The design system team does a fantastic job of using simple language to describe the company&#8217;s principles, including images and graphics to clarify messaging.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-merge-the-ultimate-design-system-tool\">UXPin Merge &#8211; The Ultimate Design System Tool<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/uxpin-merge-component-responsive-1.png\" alt=\"uxpin merge component responsive 1\" class=\"wp-image-32524\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/uxpin-merge-component-responsive-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/uxpin-merge-component-responsive-1-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Building a design system is one thing. Managing and scaling it takes <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" target=\"_blank\" rel=\"noreferrer noopener\">governance<\/a> and proper tools. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> lets you sync your design system from a repository to the design editor so designers can build fully functioning prototypes using code components.<\/p>\n\n\n\n<p>This single source of truth means all teams, including product, design, and development, use exactly the same design system components to build products. When engineers update the repository, UXPin automatically syncs the changes and notifies all teams.<\/p>\n\n\n\n<p>Build, manage, and scale your design system with the world&#8217;s most advanced design system technology. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to experience UXPin and Merge with React components from MUI.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>On the surface, building a design system is a matter of designing a collection of elements, components, text styles, and colors. But the truth is it&#8217;s a more complex procedure. Building, managing, and scaling a design system requires principles and direction. This article was inspired by the webinar about Design System with Carola Cassaro, which<\/p>\n","protected":false},"author":3,"featured_media":34074,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,183,199,71,174],"tags":[],"class_list":["post-34073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-design-leadership","category-design-systems","category-documentation","category-enterprise-ux"],"yoast_title":"","yoast_metadesc":"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.","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>Design System \u2013 Principles of Success | UXPin<\/title>\n<meta name=\"description\" content=\"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.\" \/>\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\/design-system-principles-of-success\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System \u2013 Principles of Success\" \/>\n<meta property=\"og:description\" content=\"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T12:56:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-24T04:52:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.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=\"10 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\\\/design-system-principles-of-success\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design System \u2013 Principles of Success\",\"datePublished\":\"2022-03-21T12:56:00+00:00\",\"dateModified\":\"2023-10-24T04:52:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/\"},\"wordCount\":2145,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Design-system-Principles-of-Success.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Design Leadership\",\"Design Systems\",\"Documentation\",\"Enterprise UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/\",\"name\":\"Design System \u2013 Principles of Success | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Design-system-Principles-of-Success.png\",\"datePublished\":\"2022-03-21T12:56:00+00:00\",\"dateModified\":\"2023-10-24T04:52:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Design-system-Principles-of-Success.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Design-system-Principles-of-Success.png\",\"width\":1200,\"height\":600,\"caption\":\"Design system Principles of Success\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-principles-of-success\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design System \u2013 Principles of Success\"}]},{\"@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":"Design System \u2013 Principles of Success | UXPin","description":"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.","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\/design-system-principles-of-success\/","og_locale":"en_US","og_type":"article","og_title":"Design System \u2013 Principles of Success","og_description":"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/","og_site_name":"Studio by UXPin","article_published_time":"2022-03-21T12:56:00+00:00","article_modified_time":"2023-10-24T04:52:04+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design System \u2013 Principles of Success","datePublished":"2022-03-21T12:56:00+00:00","dateModified":"2023-10-24T04:52:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/"},"wordCount":2145,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.png","articleSection":["Blog","Collaboration","Design Leadership","Design Systems","Documentation","Enterprise UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/","name":"Design System \u2013 Principles of Success | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.png","datePublished":"2022-03-21T12:56:00+00:00","dateModified":"2023-10-24T04:52:04+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Without principles, you end up with more problems. Find out what principles should guide you when building a design system.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/Design-system-Principles-of-Success.png","width":1200,"height":600,"caption":"Design system Principles of Success"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design System \u2013 Principles of Success"}]},{"@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\/34073","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=34073"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/34073\/revisions"}],"predecessor-version":[{"id":50827,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/34073\/revisions\/50827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/34074"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=34073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=34073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=34073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}