{"id":21047,"date":"2021-01-10T12:18:15","date_gmt":"2021-01-10T12:18:15","guid":{"rendered":"https:\/\/marvelapp.com\/blog\/?p=21047"},"modified":"2021-02-24T10:48:32","modified_gmt":"2021-02-24T10:48:32","slug":"why-you-need-a-design-system-to-build-at-scale","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/","title":{"rendered":"Why you need a design system to build at scale"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design systems let organisations solve product problems in a structured and guided way. Whilst they can take many different forms, all design systems aim to codify certain principles and practices cross-functionally, letting you work more effectively, build and iterate at scale.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the first article of this series, we\u2019ll explore what having a design system means for your organisation, the benefits they can bring and share some popular examples.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So what is a design system?<\/strong><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A design system is a constantly evolving source of truth for your organisation. It defines a common shared language and way of working to solve design problems and build solutions.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What constitutes a design system depends on who you speak to, and organisations include different aspects in their design systems. This is because an organisation\u2019s design system reflects its structure and priorities. There are also different interpretations of what a design system is within the same organisation because functions utilise them in different ways.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While no two design systems are the same, most design systems will focus on these common areas.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Principles<\/strong><br \/>\nMost design systems are led by a set of principles that have been agreed upon through workshops and discussion with team members. They are not just a reflection of where your products are right now, they can also be aspirational.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/scaling-design-at-spotify\/\">Spotify\u2019s principles<\/a> were set as they developed their GLUE design system: content first, be alive, get familiar, do less, stay authentic and lagom (meaning \u2018just right\u2019 in Swedish). <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/atlassian.design\/brand\/personality\/\">Atlassian\u2019s system<\/a> on the other hand was bold, optimistic and \u2018practical with a wink\u2019.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Principles like these are great prompts to start from and they help ask rhetorical questions about whether what you are building meets these principles. Referring to clearly defined principles also help your team find agreement instead of subjective discussions on personal taste.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Guidelines<\/strong><br \/>\nYour principles form the basis of more codified guidelines, which detail the language of your brand identity and can be used as a reference for design libraries. They act as a handbook of best practices covering things from colours and typography down to spacing and information architecture.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Style guides are not only for visual design but also for content. In particular, language style guides advise on the right tone of voice for your copy and common \u2018do\u2019s and don'ts\u2019.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">UI Libraries<\/strong><br \/>\nFor many designers and developers, a library is the most often used part of their design system. They are places to store and find the building blocks of your user interfaces.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some libraries have been distilled down to individual elements within a component and built out to entire patterns. The level of complexity is up to what you and your teams feel are the most important.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sketch shared libraries are one of the most common ways for designers to use up to date components. Developers use tools like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/features\/handoff\">Marvel\u2019s Handoff<\/a> to view component and text styles defined in Sketch and many will also use them in conjunction with frontend component libraries like Storybook.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Processes and documentation<\/strong><br \/>\nBehind a good design system is an ecosystem of processes and documentation. These ensure the smooth running of your design system and help you to mature and evolve your system over time.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These processes will include rituals, like working group meetings to keep everyone and the design system aligned. It\u2019s also important to document your decision-making process for everyone involved.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Each of the artefacts in a design system are connected to others. By focusing on the processes and people involved, then streamlining and automation become possible.<\/p>\n<div id='gallery-1' class='gallery galleryid-21047 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2132\" height=\"1262\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x.png 2132w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x-600x355.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x-1500x888.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x-768x455.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x-1536x909.png 1536w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Image@2x-2048x1212.png 2048w\" sizes=\"auto, (max-width: 2132px) 100vw, 2132px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The foundation to scale<\/strong><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A successful design system brings significant benefits and competitive advantages to an organisation. They help you scale your work by improving efficiency and removing friction between functions. All of this while ensuring users have consistent and accessible interactions with your products. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Working more collaboratively and efficiently<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Without a design system, your design function becomes fragmented due to a lack of structure with how design decisions are made and documented.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Instead, some teams and people will hold their own knowledge and develop individual ways of working over time. This leads to inconsistencies in your product and duplications of effort within and between teams, limiting your ability to scale and do your best work. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design systems provide your teams with a structure to help with decision making and enable more consistent products. When designers have best practices and resources to refer back to it lets them focus on solving problems with the most impact. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Onboarding new team members also becomes easier because a good design system ensures that assumed ways of working are documented and shared.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Stanley Wood felt these growing pains caused by fragmentation when building Spotify\u2019s first design system. He found that without a design system, not only were their products fragmented, their designers were also.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"When you invest in aligning and co-ordinating designers, design does scale.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Without a design system, there is a greater gap between designers and developers<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Without a design system, designers and developers become disconnected while they spend much of their day working in different environments. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Without shared reference points, things like colours and spacing can be inaccurate; requiring more checks from designers and more work required from developers. Design systems ensure shared reference documents, libraries and tooling that keep different functions on the same page.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Even if teams use different software or internal processes, building a design system means that each team is aware of these differences and has processes in place to ensure they are aligned. This saves time, reduces friction between the teams and makes it easier to iterate your products.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For managers, it is also easier to forecast the time and effort needed to build a product when it has been designed using a design system as there are fewer unknowns for developers to navigate. Once built, the time required to QA testing for bugs is also lower. This is because many of the components used in your products have been tested and reused. <\/p>\n<div id='gallery-2' class='gallery galleryid-21047 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1212\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems@2x.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems@2x.png 2048w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems@2x-600x355.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems@2x-1500x888.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems@2x-768x455.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems@2x-1536x909.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design systems enable your entire business to solve problems<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design systems don\u2019t just serve designers and developers but many functions in an organisation. When running on assumed knowledge, designers can also become gatekeepers to who can explore ideas rather than enabling their product, marketing and customer team peers with design resources. Having defined components, patterns, styles and design tooling (like Marvel) makes it easier for anyone to put together and communicate their ideas. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Accessibility, standardisation &amp; on-brand<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A common misconception is that design systems will just make everything look the same. Even if visual uniformity is not a priority for you, having products that are usable and accessible should be.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Accessibility and device compatibility standards are always changing, and it can be difficult for individual team members to keep up to date with the latest standards. By maintaining a design system for all of your teams, it is easier to update components as standards change. Your team also has a reference point for your usability standards and best practices are, for example with colour.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Beyond accessibility requirements, users also expect consistent functionality across your product, like button state behaviours. Standardisation that leads to better usability. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Just because design systems are structured, it doesn\u2019t mean that they have to be static. Having a design system enables you to evolve your visual identity more easily. <\/p>\n<div id='gallery-3' class='gallery galleryid-21047 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1212\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Handoff@2x.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Handoff@2x.png 2048w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Handoff@2x-600x355.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Handoff@2x-1500x888.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Handoff@2x-768x455.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Handoff@2x-1536x909.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A collection of our favourite design systems<\/strong><\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/polaris.shopify.com\/\">Polaris by Shopify<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Shopify's design system includes guides on how to use language, written content and UI elements to craft better product and user experience for any e-commerce related project. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.carbondesignsystem.com\/\">Carbon by IBM<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">IBM\u2019s design system also includes tools and resources such as tutorials, patterns and design files in Sketch for designers and developers. Their system is a great guide on how to manipulate heavy data in a comprehensive and digestible manner presented via compelling visualizations. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.lightningdesignsystem.com\/\">Lightning by Salesforce<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Customer relationship software Salesforce built their Lightning design system which includes design guidelines and components for those who work on platforms heavy on user experience, interactions and user flows like content management systems, sales, or analytics platforms.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/material.io\/\">Material by Google<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Material by Google is a very influential example of a successful design system. Material is not only used by Google, but has been adopted and adapted by others. The system is based on open-source code and each component is readily available to be downloaded into different design software, like Sketch, which facilitates collaboration between designers and developers. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ux.mailchimp.com\/patterns\/color\">MailChimp<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">MailChimp\u2019s design system is a library of useful tips and examples of best practices that also embodies the creative identity they bring to their products.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These examples can be helpful inspiration for your design system, but slick branded websites can\u2019t fully show the ecosystem of internal processes, tools and people who support them. Not to mention the time that it has taken for these organisations\u2019 design systems to reach maturity.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In part-two of this series on design systems, coming soon, we'll discuss how you can get started with your own design system. We\u2019ll also explore some challenges you might face as well as what the future holds for design systems.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design systems let organisations solve product problems in a structured and guided way. Whilst they can take many different forms, all design systems aim to codify certain principles and practices cross-functionally, letting you work more effectively, build and iterate at scale. In the first article of this series, we\u2019ll explore what having a design system means for your organisation, the&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":358,"featured_media":21055,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[484,482],"tags":[],"class_list":["post-21047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-systems","category-design-thoughts"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Design systems let organisations solve product problems in a structured and guided way, letting you work more effectively, build and iterate at scale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why you need a design system to build at scale | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Design systems let organisations solve product problems in a structured and guided way, letting you work more effectively, build and iterate at scale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-10T12:18:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-24T10:48:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/02\/Design-Systems-Header.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/\",\"name\":\"Why you need a design system to build at scale | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#primaryimage\"},\"datePublished\":\"2021-01-10T12:18:15+00:00\",\"dateModified\":\"2021-02-24T10:48:32+00:00\",\"description\":\"Design systems let organisations solve product problems in a structured and guided way, letting you work more effectively, build and iterate at scale.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/49d14ee158a3de6335c5a90ed8953fce\"},\"headline\":\"Why you need a design system to build at scale\",\"datePublished\":\"2021-01-10T12:18:15+00:00\",\"dateModified\":\"2021-02-24T10:48:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#primaryimage\"},\"articleSection\":\"Design Systems,Design Thoughts\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/why-you-need-a-design-system-to-build-at-scale\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/49d14ee158a3de6335c5a90ed8953fce\",\"name\":\"Rory McCormick\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f043a58946f5c50adeeb824747dfc46a980a13f763d689b88cf1ea8dd2c881cd?s=96&d=mm&r=g\",\"caption\":\"Rory McCormick\"},\"description\":\"Customer Experience Manager at Marvel\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/358"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=21047"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/21047\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/21055"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=21047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=21047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=21047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}