{"id":71546,"date":"2019-10-07T04:19:34","date_gmt":"2019-10-07T11:19:34","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/"},"modified":"2019-10-07T04:19:34","modified_gmt":"2019-10-07T11:19:34","slug":"design-systems-are-about-relationships","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/","title":{"rendered":"Design Systems Are About Relationships"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/design-systems-relationships\/\"><title>Design Systems Are About Relationships<\/title><\/p>\n<article>\n<header>\n<h1>Design Systems Are About Relationships<\/h1>\n<address>Ryan DeBeasi<\/address>\n<p>                  <time datetime=\"2019-10-07T12:30:59+02:00\">2019-10-07T12:30:59+02:00<\/time><time datetime=\"2019-10-07T11:06:05+00:00\">2019-10-07T11:06:05+00:00<\/time><\/header>\n<p>Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and <a href=\"https:\/\/uxdesign.cc\/design-principle-consistency-6b0cf7e7339f\">apply it to another<\/a>. Similarly, teams can roll out well-tested patterns for navigation or reviews, making products <a href=\"https:\/\/www.nngroup.com\/articles\/trustworthy-design\/\">more trustworthy<\/a>. Effective design systems <a href=\"https:\/\/bigmedium.com\/ideas\/boring-design-systems.html\">solve boring problems<\/a> in a repeatable way so that developers and designers can focus on solving novel problems.<\/p>\n<p>Yet when someone uses the term \u201cdesign system\u201d in a meeting, I\u2019m never quite sure what reaction to expect. I\u2019ve seen curiosity and excitement about trying a new way of working, but I\u2019ve also seen frustration and concern at the idea of a system limiting designers\u2019 creativity.  Some designers argue that design systems <a href=\"https:\/\/blog.prototypr.io\/design-system-weaknesses-81a562232d98\">sap creativity<\/a>, or that they are <a href=\"https:\/\/www.webdesignerdepot.com\/2019\/04\/why-dont-we-just-use-material-design\/\">solutions in search of a problem<\/a>. Design systems can <a href=\"https:\/\/24ways.org\/2017\/why-design-systems-fail\/\">fragment over time<\/a>, causing teams to stop using them.<\/p>\n<p>Design systems aren\u2019t going away, though. Just 15% of organizations lacked a design system in 2018, <a href=\"https:\/\/uxtools.co\/survey-2018\/#design-system\">according to one survey<\/a>. That\u2019s down from 28% the previous year. Some teams use large, general-purpose design systems such as Google\u2019s Material Design, while others use smaller, more bespoke systems such as REI\u2019s <a href=\"https:\/\/rei.github.io\/rei-cedar-docs\/\">Cedar<\/a> and Mozilla\u2019s <a href=\"https:\/\/protocol.mozilla.org\/\">Protocol<\/a>.<\/p>\n<p>Design systems should empower teams, not limit them. For that to happen, we need to start thinking more holistically. <strong>A design system isn\u2019t just code, or designs, or documentation.<\/strong> It\u2019s all of these things, plus relationships between the people who make the system and the people who use it. It includes not just CSS files and Sketch documents, but also trust, communication, and shared ownership. As it turns out, there\u2019s a whole field of study dedicated to exploring systems like these.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18574855-b47e-428b-9c29-3a26ba5c84be\/design-systems-relationships-cedar.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-cedar.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18574855-b47e-428b-9c29-3a26ba5c84be\/design-systems-relationships-cedar.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18574855-b47e-428b-9c29-3a26ba5c84be\/design-systems-relationships-cedar.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18574855-b47e-428b-9c29-3a26ba5c84be\/design-systems-relationships-cedar.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18574855-b47e-428b-9c29-3a26ba5c84be\/design-systems-relationships-cedar.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-cedar.png?w=900\" sizes=\"100vw\" alt=\"Grid of icons including stars, a shopping cart, and a snowflake\"><\/a><figcaption>\n      In REI\u2019s Cedar Design System, icons are tailored to the company\u2019s outdoor gear business. The snowflake icon indicates ski and snowboard services, and the ruler icon indicates a size chart. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18574855-b47e-428b-9c29-3a26ba5c84be\/design-systems-relationships-cedar.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>The Big Picture<\/h3>\n<p>A 1960 paper titled \u201cSocio-technical systems\u201d <a href=\"https:\/\/academic.oup.com\/iwc\/article\/23\/1\/4\/693091#12178445\">explored<\/a> the interactions among technology, humans, and the larger environment in which they exist. <a href=\"https:\/\/onlinelibrary.wiley.com\/doi\/abs\/10.1111\/j.1365-2575.2006.00221.x\">Enid Mumford explained<\/a> that researchers began by investigating how to build better relationships between managers and employees, but by the 1980s, they were focused on making work more efficient and cost-effective. In 2011, Gordon Baxter and Ian Sommerville <a href=\"https:\/\/academic.oup.com\/iwc\/article\/23\/1\/4\/693091#12178445\">wrote<\/a> that this research helped inspire user-centered design, and that there\u2019s a lot of work left to do.<\/p>\n<p>Baxter and Sommerville argued that today, there is still a tension between \u201chumanistic\u201d research, which focuses on employees\u2019 quality of life, and \u201cmanagerial\u201d research, which focuses on their productivity. They also <a href=\"https:\/\/academic.oup.com\/iwc\/article\/23\/1\/4\/693091#https:\/\/academic.oup.com\/iwc\/article\/23\/1\/4\/693091%2312178469\">explained<\/a> that it\u2019s important to consider both technology and human interactions: \u201csystem performance relies on the joint optimization of the technical and social subsystems.\u201d<\/p>\n<p>I\u2019d argue that design systems are socio-technical systems. They involve interactions between the people who create the system, the people who create products using the system, and the end users who interact with these products. They also evoke the same tension between efficiency and humanism that Baxter and Sommerville saw.<\/p>\n<p>Design systems aren\u2019t composed just of images and code; they involve conversations among designers, developers, product managers, CEOs, and random people on GitHub. These interactions occur in various contexts \u2014 a company, an open-source community, a home \u2014 and they happen across cultures and organizational boundaries. Building a team can mean bringing together people from disciplines such as <a href=\"https:\/\/www.carbondesignsystem.com\/guidelines\/motion\/\">animation<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/2012\/09\/guidelines-for-designing-with-audio\/\">sound design<\/a>, <a href=\"http:\/\/ux.mailchimp.com\/patterns\/stats\">data visualization<\/a>, <a href=\"https:\/\/material.io\/design\/platform-guidance\/android-haptics.html\">haptics<\/a>, and <a href=\"https:\/\/design-system.futurelearn.com\/core-styles\/microcopy\">copywriting<\/a>. Creating a successful design system requires equal parts of technical expertise and soft skills.<\/p>\n<p>And yet, peruse design or engineering news aggregators and you\u2019re likely to see a distinct focus on that \u201ctechnical subsystem\u201d \u2014 code and tools, rather than people and conversations. Which creative tool is the best at keeping track of design tokens? What JavaScript technologies should be used for building reusable components \u2014 React, web components, or something else? Which build tool is best?<\/p>\n<p>The answer to these questions is, of course, \u201cit depends!\u201d Who will design, build, and use the system? What are their needs? What constraints are they operating under? What tools and technologies are they comfortable with? What do they want to learn?<\/p>\n<p>To answer these sorts of questions, Baxter and Sommerville recommend two types of activities:<\/p>\n<ul>\n<li><strong>Sensitisation and awareness activities<\/strong><br \/>\nLearning about the varied people who will create and participate in the system, and sharing that information far and wide.<\/li>\n<li><strong>Constructive engagement<\/strong><br \/>\nCommunicating across roles, building prototypes, and considering both the technical and social parts of the system.<\/li>\n<\/ul>\n<div><\/div>\n<h3>Digging In<\/h3>\n<p>In early 2019, I was part of a team \u2014 let\u2019s call them \u201cteam blue\u201d \u2014 that was building a design system for a large organization. I facilitated informal chats with this team and \u201cteam green\u201d, which was using the design system to build a web application. Every couple of weeks, we got all the developers and designers together around a table and talked about what we were building and what problems we were trying to solve. These chats were our \u201csensitization and awareness activities.\u201d<\/p>\n<p>We didn\u2019t have permission to make our design system public, so we did the next best thing: we treated it like a small open-source project within the organization. We put the code in a repository that both teams could access and asked for contributions. Team blue was responsible for reviewing and approving these contributions, but anyone on either team could contribute. Team blue was also building an application of their own, so in a sense, they were both users and custodians of the design system.<\/p>\n<p>These interactions helped the teams build better products, but just as importantly, they established <em>trust<\/em> between the teams. Team blue learned that folks were using the system thoughtfully and building clever new ideas on top of it. Team green learned that the system really was tailored to their needs, so they could work with it instead of against it. Baxter and Sommerville might call this work \u201cconstructive engagement.\u201d<\/p>\n<p>We found that both teams were under pressure to learn new technologies and deliver a complete product quickly. In other words, they were already operating under a pretty considerable <a href=\"https:\/\/alistapart.com\/article\/psychology-of-design\/\">cognitive load<\/a>. As a result, the two teams agreed to focus on making the system easy to use. That meant sidestepping the whole <a href=\"https:\/\/dev.to\/richharris\/why-i-don-t-use-web-components-2cia\">web components debate<\/a>, focusing mostly on CSS, and ensuring that our documentation was clear and friendly.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a743383-e6d9-4147-bcbb-3266530435b8\/design-systems-relationships-fluent.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-fluent.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a743383-e6d9-4147-bcbb-3266530435b8\/design-systems-relationships-fluent.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a743383-e6d9-4147-bcbb-3266530435b8\/design-systems-relationships-fluent.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a743383-e6d9-4147-bcbb-3266530435b8\/design-systems-relationships-fluent.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a743383-e6d9-4147-bcbb-3266530435b8\/design-systems-relationships-fluent.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-fluent.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of links to Windows, Web, iOS, and Android documentation\"><\/a><figcaption>\n      Microsoft\u2019s Fluent Design System targets four very different platforms. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a743383-e6d9-4147-bcbb-3266530435b8\/design-systems-relationships-fluent.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3>Putting It All Together<\/h3>\n<p>Organizations of all sizes create reusable design elements to help teams build more consistent, elegant applications. Different organizations\u2019 needs and dynamics are expressed in their design systems. Here are just a few examples:<\/p>\n<ul>\n<li>Google\u2019s Material Design has several implementations in different frameworks and languages. It\u2019s used by a variety of people inside and outside of Google, so it has comprehensive documentation and a variety of toolkits for design apps.<\/li>\n<li>Microsoft\u2019s <a href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/\">Fluent Design System<\/a> targets four very different platforms. Like Material, it includes toolkits for UX designers and comprehensive documentation.<\/li>\n<li>Mozilla\u2019s <a href=\"https:\/\/protocol.mozilla.org\/\">Protocol<\/a> is implemented in Sass and vanilla JavaScript.  It has a strong focus on internationalization. Alex Gibson <a href=\"https:\/\/alxgbsn.co.uk\/2019\/04\/15\/my-sixth-year-working-at-mozilla\/\">says that this system helps Mozilla<\/a> \u201ccreate on-brand web pages at a faster pace with less repetitive manual work.\u201d<\/li>\n<li>REI\u2019s <a href=\"https:\/\/rei.github.io\/rei-cedar-docs\/\">Cedar<\/a> is built with Vue.js components and can\u2019t be used with other JavaScript frameworks. Cedar is used primarily by REI\u2019s internal developers and is closely tied to the company\u2019s brand. The design system\u2019s code is open source, but <a href=\"https:\/\/rei.github.io\/rei-cedar-docs\/about\/cedar-design-system\/\">its fonts are not<\/a>.<\/li>\n<li>Salesforce\u2019s Lightning Design System is a <a href=\"https:\/\/lightningdesignsystem.com\/faq\/\">JavaScript-agnostic CSS framework<\/a>. It can optionally be used alongside the Lightning Component Framework, which <a href=\"https:\/\/developer.salesforce.com\/blogs\/2018\/12\/introducing-lightning-web-components.html\">includes two JavaScript implementations<\/a>: one using web components and another using Salesforce\u2019s proprietary Aura framework.<\/li>\n<li>Red Hat\u2019s PatternFly was created to provide a consistent user experience <a href=\"https:\/\/opensource.com\/business\/15\/6\/go-beyond-bootstrap-patternfly\">across the company\u2019s cloud platform products<\/a>, so it has a relatively high information density and includes a variety of data visualization components. The PatternFly team recently <a href=\"https:\/\/blog.patternfly.org\/patternfly\/js-framework-for-patternfly-4\/\">switched from Angular to React<\/a> after some <a href=\"https:\/\/developers.redhat.com\/blog\/2016\/08\/09\/are-web-components-in-the-future-for-patternfly-2\/\">experimentation with web components<\/a>. PatternFly also includes a JavaScript-agnostic implementation using HTML and CSS. (Full disclosure: I\u2019m a former Red Hatter.)<\/li>\n<li>IBM\u2019s<a href=\"https:\/\/www.carbondesignsystem.com\/getting-started\/developers\/vanilla\"> Carbon Design System<\/a> offers implementations in React, Vue, Angular, and vanilla JavaScript as well as a <a href=\"https:\/\/github.com\/carbon-design-system\/carbon-design-kit\">design toolkit<\/a> for Sketch. The Carbon team is <a href=\"https:\/\/github.com\/carbon-design-system\/carbon-custom-elements\">experimenting with web components<\/a>. (Hat tip to Jonathan Speek for <a href=\"https:\/\/dev.to\/jonathanspeek\/comment\/c60m\">tracking down<\/a> that repository.)<\/li>\n<\/ul>\n<p>Systems like these are consistent and reliable because people from different teams and roles worked together to build them. These systems solve real problems. They\u2019re not the result of developers trying to impose their will upon designers or vice-versa.<\/p>\n<p>Josh Mateo and Brendon Manwaring <a href=\"https:\/\/spotify.design\/articles\/2018-12-04\/the-paradox-of-design-systems\/\">explain that<\/a> Spotify\u2019s designers \u201csee their role as core contributors and co-authors of <strong>a shared<\/strong> system \u2014 one that they have ownership of.\u201d Mina Markham <a href=\"http:\/\/styleguides.io\/podcast\/mina-markham\/\">describes herself<\/a> as \u201cthe translator between engineering and design\u201d on the Pantsuit design system. Jina Anne <a href=\"https:\/\/www.designbetter.co\/design-systems-handbook\/designing-design-system\">digs into<\/a> the team dynamics and user research behind design systems: \u201cSpoiler alert! You\u2019re going to need more than just designers.\u201d<\/p>\n<div><\/div>\n<h3>Let\u2019s Build Some Stuff!<\/h3>\n<p>Now that we\u2019ve gone through research and some examples, let\u2019s talk about how to build a new design system. Start by talking to people. Figure out who will be using and contributing to your design system. These people will probably span a variety of disciplines \u2014 design, development, product management, business, and the like. Learn about people\u2019s needs and goals, and ask them to share what they\u2019re working on. Consider planning an informal meeting with snacks, coffee, or tea to create a welcoming atmosphere. Establish regular communication with these folks. That might mean joining a shared chat room or scheduling regular meetings. Keep the tone casual and friendly, and focus on listening.<\/p>\n<p>As you talk about what you\u2019re working on, look for common problems and goals. You might find that teams need to display large amounts of data, so they\u2019re investigating tools for displaying tables and generating reports. Prioritize solutions for these problems.<\/p>\n<p>Look also for repeated patterns and variations on similar themes. You might find that buttons and login forms look a bit different across teams. What\u2019s the significance of these variations? What variations are intentional \u2014 for example, a primary button versus a secondary button \u2014 and what variations have happened by accident? Your design system can name and catalog the intentional patterns and variations, and it can eliminate the \u201caccidental\u201d variations.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/374b6a5b-7096-4758-aac1-b242fc0a1dc1\/design-systems-relationships-carbon.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-carbon.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/374b6a5b-7096-4758-aac1-b242fc0a1dc1\/design-systems-relationships-carbon.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/374b6a5b-7096-4758-aac1-b242fc0a1dc1\/design-systems-relationships-carbon.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/374b6a5b-7096-4758-aac1-b242fc0a1dc1\/design-systems-relationships-carbon.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/374b6a5b-7096-4758-aac1-b242fc0a1dc1\/design-systems-relationships-carbon.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-carbon.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of five different button styles\"><\/a><figcaption>\n      IBM\u2019s Carbon Design System lists all the variations of its components. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/374b6a5b-7096-4758-aac1-b242fc0a1dc1\/design-systems-relationships-carbon.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The goal here is to establish a rapid feedback loop with people who are using the design system. Faster feedback and smaller iterations can help avoid going too far in the wrong direction and having to dramatically change course. P.J. Onori <a href=\"https:\/\/blog.prototypr.io\/the-most-important-lessons-ive-learned-about-creating-design-systems-have-little-to-do-with-design-4ceee2717298\">calls these sudden, large changes \u201cthrash.\u201d<\/a> He says that some thrash is good \u2014 it\u2019s a sign that you\u2019re learning and responding to change \u2014 but that too much can be disruptive. \u201cYou shouldn\u2019t fear thrash,\u201d he says, \u201cbut you need to know when it\u2019s useful and how to help mitigate its downsides. One of the best [ways] to mitigate the downsides of thrash is to start small \u2014 with <em>everything<\/em>.\u201d<\/p>\n<p>Consider starting small by setting up a few basic elements:<\/p>\n<ul>\n<li>A version control system to store your code. GitHub, GitLab, and Bitbucket are all great options here. Make sure that everyone who uses the system can access the code and propose changes. If possible, consider making the code open source to reach the widest possible audience.<\/li>\n<li>CSS code to implement the system. Use <a href=\"https:\/\/sass-lang.com\/documentation\/variables\">Sass variables<\/a> or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">CSS custom properties<\/a> to store \u201cdesign tokens\u201d \u2014 common values such as widths and colors.<\/li>\n<li>A package.json file that defines how applications can build and install the design system.<\/li>\n<li>HTML documentation that demonstrates how to use the design system, ideally using the system\u2019s own CSS.<\/li>\n<\/ul>\n<p>The <a href=\"https:\/\/bulma.io\/documentation\/customize\/with-node-sass\/\">node-sass documentation<\/a> for the CSS framework Bulma describes these steps in a bit more detail. You can skip installing and importing Bulma if you\u2019d like to start from scratch, or you can include it if you\u2019d like to start off with some of the basics in place.<\/p>\n<p>You might have noticed that I didn\u2019t mention anything about JavaScript here. You might want to add this element eventually, but you don\u2019t need it to get started. It\u2019s easy to go down a rabbit hole researching the best and newest JavaScript tools, and getting lost in this research can make it harder to get started. For example, \u201c<a href=\"https:\/\/ionicframework.com\/blog\/5-reasons-web-components-are-perfect-for-design-systems\/\">5 Reasons Web Components Are Perfect For Design Systems<\/a>\u201d and \u201c<a href=\"https:\/\/dev.to\/richharris\/why-i-don-t-use-web-components-2cia\">Why I Don\u2019t Use Web Components<\/a>\u201d both make valid points, but only you can decide what tools are right for your system. Starting with just CSS and HTML lets you gather real-world feedback that will help you make this decision when the time comes.<\/p>\n<p>As you release new versions of the system, update your system\u2019s version number to indicate what has changed. Use <a href=\"https:\/\/semver.org\/\">semantic versioning<\/a> to indicate what\u2019s changed with a number like \u201c1.4.0.\u201d Increment the last number for bug fixes, the middle number for new features, and the first number for big, disruptive changes. Keep communicating with the folks who use the design system, invite feedback and contributions, and make small improvements as you go. This collaborative, iterative way of working can help minimize \u201cthrash\u201d and establish a sense of shared ownership.<\/p>\n<p>Finally, consider <a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78\/\">publishing your design system as a package on npm<\/a> so that developers can use it by running the command <code>npm install your-design-system<\/code>. By default, npm packages are public, but you can also <a href=\"https:\/\/docs.npmjs.com\/creating-and-publishing-private-packages\">publish a private package<\/a>, publish the package to a <a href=\"https:\/\/levelup.gitconnected.com\/deploying-private-npm-packages-to-nexus-a16722cc8166\">private registry<\/a>, or ask developers to install the package <a href=\"https:\/\/remarkablemark.org\/blog\/2016\/09\/19\/npm-install-from-github\/\">directly from a version control system<\/a>. Using a package repository will make it easier to discover and install updates, but installing directly from version control can be an easy short-term solution to help teams get started.<\/p>\n<p>If you\u2019re interested in learning more about the engineering side of things, Katie Sylor-Miller\u2019s <a href=\"https:\/\/www.designbetter.co\/design-systems-handbook\/building-design-system\">Building Your Design System<\/a> provides a fantastic deep dive. (Full disclosure: I\u2019ve worked with Katie.)<\/p>\n<h3>Wrapping Up<\/h3>\n<p>Design systems are made up of code, designs, and documentation as well as relationships, communication, and mutual trust. In other words, they\u2019re socio-technical systems. To build a design system, don\u2019t start by writing code and choosing tools; start by talking to the people who will use the system. Learn about their needs and constraints, and help them solve problems. When making technical, design, or strategy decisions, consider these people\u2019s needs over the theoretically \u201cbest\u201d way to do things. Start small, iterate, and communicate as you go. Keep your system as simple as possible to minimize thrash, and invite feedback and contributions to establish a sense of shared ownership.<\/p>\n<p>By giving equal weight to engineering and interpersonal considerations, we can get the benefits of design systems while avoiding the pitfalls. We can work in a way that\u2019s efficient <em>and<\/em> humane; we don\u2019t have to choose one over the other. We can empower teams rather than limiting them. Empowered teams ultimately help us better serve our users \u2014 which, after all, is why we\u2019re here in the first place.<\/p>\n<h4><span>Further Reading<\/span> on SmashingMag:<\/h4>\n<ul>\n<li><a title=\"Read 'Tips For Managing Design Systems'\" href=\"https:\/\/www.smashingmagazine.com\/2019\/05\/tips-managing-design-systems\/\" rel=\"bookmark\">Tips For Managing Design Systems<\/a><\/li>\n<li><a title=\"Read 'Including Animation In Your Design System'\" href=\"https:\/\/www.smashingmagazine.com\/2019\/02\/animation-design-system\/\" rel=\"bookmark\">Including Animation In Your Design System<\/a><\/li>\n<li><a title=\"Read 'Beyond Tools: How Building A Design System Can Improve How You Work'\" href=\"https:\/\/www.smashingmagazine.com\/2018\/03\/building-design-systems-to-improve-work\/\" rel=\"bookmark\">Beyond Tools: How Building A Design System Can Improve How You Work<\/a><\/li>\n<li><a title=\"Read 'Building A Large-Scale Design System For The U.S. Government (Case Study)'\" href=\"https:\/\/www.smashingmagazine.com\/2017\/10\/large-scale-design-system-us-government\/\" rel=\"bookmark\">Building A Large-Scale Design System For The U.S. Government (Case Study)<\/a><\/li>\n<\/ul>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-5.png?w=900\" alt=\"Smashing Editorial\"><span>(ah, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design Systems Are About Relationships Design Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00 Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":71547,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Design Systems Are About Relationships | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-07T11:19:34+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-07T11:19:34+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Design Systems Are About Relationships | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#article\",\"name\":\"Design Systems Are About Relationships | Design for Immersive Technologies\",\"headline\":\"Design Systems Are About Relationships\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/design-systems-relationships-cedar.png?fit=400%2C258&ssl=1\",\"width\":400,\"height\":258},\"datePublished\":\"2019-10-07T04:19:34-07:00\",\"dateModified\":\"2019-10-07T04:19:34-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#listItem\",\"name\":\"Design Systems Are About Relationships\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#listItem\",\"position\":3,\"name\":\"Design Systems Are About Relationships\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/\",\"name\":\"Design Systems Are About Relationships | Design for Immersive Technologies\",\"description\":\"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \\u201clook and feel\\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/design-systems-relationships-cedar.png?fit=400%2C258&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#mainImage\",\"width\":400,\"height\":258},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/design-systems-are-about-relationships\\\/#mainImage\"},\"datePublished\":\"2019-10-07T04:19:34-07:00\",\"dateModified\":\"2019-10-07T04:19:34-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Design Systems Are About Relationships | Design for Immersive Technologies","description":"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#article","name":"Design Systems Are About Relationships | Design for Immersive Technologies","headline":"Design Systems Are About Relationships","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-cedar.png?fit=400%2C258&ssl=1","width":400,"height":258},"datePublished":"2019-10-07T04:19:34-07:00","dateModified":"2019-10-07T04:19:34-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#listItem","name":"Design Systems Are About Relationships"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#listItem","position":3,"name":"Design Systems Are About Relationships","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/","name":"Design Systems Are About Relationships | Design for Immersive Technologies","description":"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-cedar.png?fit=400%2C258&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#mainImage","width":400,"height":258},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/#mainImage"},"datePublished":"2019-10-07T04:19:34-07:00","dateModified":"2019-10-07T04:19:34-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Design Systems Are About Relationships | Design for Immersive Technologies","og:description":"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/","article:published_time":"2019-10-07T11:19:34+00:00","article:modified_time":"2019-10-07T11:19:34+00:00","twitter:card":"summary","twitter:title":"Design Systems Are About Relationships | Design for Immersive Technologies","twitter:description":"Design Systems Are About RelationshipsDesign Systems Are About Relationships Ryan DeBeasi 2019-10-07T12:30:59+02:002019-10-07T11:06:05+00:00Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent \u201clook and feel\u201d across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested"},"aioseo_meta_data":{"post_id":"71546","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:20:26","updated":"2026-09-02 06:36:06","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tDesign Systems Are About Relationships\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Design Systems Are About Relationships","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/design-systems-are-about-relationships\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iBY","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/design-systems-relationships-cedar.png?fit=400%2C258&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=71546"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71546\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/71547"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=71546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=71546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=71546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}