1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[5837],{1912:function(e,n,t){t.r(n),t.d(n,{default:function(){return b}});var a=t(8453),s=t(6540);function i(e){const n=Object.assign({p:"p",h2:"h2",a:"a",span:"span",em:"em",ol:"ol",li:"li",h3:"h3",ul:"ul"},(0,a.RP)(),e.components),{Image:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Image",!0),s.createElement(s.Fragment,null,s.createElement("div",{"data-excerpt":!0},s.createElement(n.p,null,"Design systems standardise and simplify the process of interface design and development, they bring new\napproaches and form their own ecosystem. However, there is no solid understanding of the concepts and terms forming\nthe design systems. To solve the term inconsistency and provide structured professional language, this article\nfocuses on the vocabulary used in the design systems domain by observing a range of materials on the topic, from\nboth academic and popular sources.")),"\n",s.createElement(n.h2,{id:"introduction",style:{position:"relative"}},s.createElement(n.a,{href:"#introduction","aria-label":"introduction permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Introduction"),"\n",s.createElement("a",{href:"google.com"},"Test external link"),"\n",s.createElement("a",{href:"/"},"Test internal link"),"\n",s.createElement(n.p,null,"In general, ",s.createElement(n.em,null,"design systems")," is a systematic approach to creating and maintaining consistent user interfaces which\ncoherently communicate the brand values and empower user experience."),"\n",s.createElement(n.p,null,"Similarly to physical things, such as sewing a dress, a web application can be created not in a factory but by an\namateur. To do this, a person certainly needs some skills but a systematic approach can be out of use. The situation\nchanges if the volume of the subject increases up to the industrial level. In the same manner, when developing and\nmaintaining larger websites, in the long run, there is a need of methods and tooling which ensure the quality of the\noutput and consistency of elements across different items, decrease the costs of the production and empower in-team and\ncross-teams collaboration. In programming and management, such systematic approaches are actively produced and adopted\nby the web community. Currently, similar methodologies are being created for the design part."),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1024px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/162360faaf39c147c21ec0a45536d0f4/72e01/thumb.jpg"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 69%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAWAQEBAQAAAAAAAAAAAAAAAAACAQP/2gAMAwEAAhADEAAAAdq2VuUgIf/EABkQAAIDAQAAAAAAAAAAAAAAAAABEBESMf/aAAgBAQABBQI09RVC5//EABcRAQADAAAAAAAAAAAAAAAAAAECEBH/2gAIAQMBAT8BGOV//8QAFREBAQAAAAAAAAAAAAAAAAAAECH/2gAIAQIBAT8Bp//EABkQAAEFAAAAAAAAAAAAAAAAABAAAREhMf/aAAgBAQAGPwLVDGh//8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERITFx/9oACAEBAAE/IapqIpBV4UeqPglrVk6JER//2gAMAwEAAgADAAAAEB/P/8QAFhEBAQEAAAAAAAAAAAAAAAAAADEB/9oACAEDAQE/EKVa/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EE1P/8QAHBABAAIDAAMAAAAAAAAAAAAAAQARITFRQXGR/9oACAEBAAE/EEE5LS5gDm2xa9w7Eh7zffviPqhZG0tirDNdn//Z\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="thumb"\n title=""\n src="/static/162360faaf39c147c21ec0a45536d0f4/72e01/thumb.jpg"\n srcset="/static/162360faaf39c147c21ec0a45536d0f4/066f9/thumb.jpg 400w,\n/static/162360faaf39c147c21ec0a45536d0f4/4b190/thumb.jpg 800w,\n/static/162360faaf39c147c21ec0a45536d0f4/72e01/thumb.jpg 1024w"\n sizes="(max-width: 1024px) 100vw, 1024px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",s.createElement(n.p,null,"Design systems are meant to standardise and simplify the process of interface design and development, they bring new\napproaches and form their own ecosystem. Currently, design systems are a separate domain in the area of making web and\nmobile applications, they are interesting to apply in practice and study from a scientific perspective. However, there\nis no solid understanding of the concepts and terms forming the design systems. This issue has already been addressed in\nthe professional literature. For example, Alla Kholmatova outlines that âthere isnât a standard definition of âdesign\nsystemâ within the web community, and people use the term in different waysâ (Kholmatova, 2017). Moreover, the specific\nentities, which form the design system concept, are often understood in different ways. Sometimes, authors even use the\nsame term to address different subclasses. Such inconsistency in terms makes â
1hard for newcomers and experts alike to\nget the crux of the problems we are solvingâ (Federman, 2017)."),"\n",s.createElement(n.p,null,"To solve the term inconsistency and provide structured professional language, this article focuses on the vocabulary\nused in the design systems domain by observing a range of materials on the topic, from both academic and popular\nsources. By categorizing and summarizing information in the selected materials, the article outlines the key concept of\ndesign systems in the context of user interface development, introduces the main entities and observes their different\ninterpretations in the literature. Based on the summary of these interpretations, the design system sub-concepts are\norganized into a hierarchical schema and are given most suitable names."),"\n",s.createElement(n.h2,{id:"material-selection-and-methods",style:{position:"relative"}},s.createElement(n.a,{href:"#material-selection-and-methods","aria-label":"material selection and methods permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Material selection and methods"),"\n",s.createElement(n.p,null,"This review article observes both popular and academic sources related to the topic. Academic sources were selected by\ntheir relevance to User Interface Design domain and by presence of keywords âpatternâ, âstyle guideâ and overall\napplicability. Popular sources were selected from highly cited public articles and blog posts by authors who often speak\non the topic at professional conferences or frequently publish materials related to the topic. These popular sources\nalso include articles and blog posts which try to provide their own categorisation and outline the building blocks of\nthe concept."),"\n",s.createElement(n.p,null,"The gathered materials were examined on the presence and description of concepts and sub-concepts related to the design\nsystems. Their representation is categorised and summarised below."),"\n",s.createElement(n.h2,{id:"problems-to-solve",style:{position:"relative"}},s.createElement(n.a,{href:"#problems-to-solve","aria-label":"problems to solve permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Problems to solve"),"\n",s.createElement(n.p,null,"In the design for the web, the following problems occur most frequently:"),"\n",s.createElement(n.ol,null,"\n",s.createElement(n.li,null,"Inconsistent user interfaces"),"\n",s.createElement(n.li,null,"Large costs of design"),"\n",s.createElement(n.li,null,"Low-level multidisciplinary collaboration"),"\n",s.createElement(n.li,null,"Non-efficient design-team work"),"\n"),"\n",s.createElement(n.h3,{id:"1-inconsistent-user-interfaces",style:{position:"relative"}},s.createElement(n.a,{href:"#1-inconsistent-user-interfaces","aria-label":"1 inconsistent user interfaces permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. Inconsistent user interfaces"),"\n",s.createElement(n.p,null,"It still often happens that user interface (UI) elements are not consistent across some websites or applications. There\nare multiple reasons behind that, such as 1) similar elements being created by different designers and developers\nexperiencing lack of in-team communication, or 2) the same elements being implemented more than one time, sometimes even\nby the same person, because of lack of documentation for existing solutions, or 3) new design solutions being made\nwithout aligning with existing ones, and many other reasons. All of those lead to badly done websites and applications\nwhich fail to communicate the brand and provide a good user experience."),"\n",s.createElement(n.h3,{id:"2-large-costs-of-design",style:{position:"relative"}}
1,s.createElement(n.a,{href:"#2-large-costs-of-design","aria-label":"2 large costs of design permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. Large costs of design"),"\n",s.createElement(n.p,null,"Mostly, the reason for user interface inconsistency mentioned above is creating same or\nsimilar things again and again without references to the work already done. Besides bad results, it also costs a lot."),"\n",s.createElement(n.h3,{id:"3-low-level-multidisciplinary-collaboration",style:{position:"relative"}},s.createElement(n.a,{href:"#3-low-level-multidisciplinary-collaboration","aria-label":"3 low level multidisciplinary collaboration permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3. Low-level multidisciplinary collaboration"),"\n",s.createElement(n.p,null,"Web products are created by multidisciplinary teams which include\ndesigners, developers, copywriters, managers, etc. On one hand, they all are working on the same product. On the other\nhand, each of these disciplines has its own fashion barely interconnected with the others. To achieve a good level of\ncollaboration, such team needs to follow special working approaches and use appropriate and efficient tooling."),"\n",s.createElement(n.h3,{id:"4-non-efficient-design-team-work",style:{position:"relative"}},s.createElement(n.a,{href:"#4-non-efficient-design-team-work","aria-label":"4 non efficient design team work permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"4. Non-efficient design-team work"),"\n",s.createElement(n.p,null,"In larger products, many designers work on the same product. This case brings the\ncollaboration problem even down to a single-disciplinary team. This becomes especially visible on the scale. Rapidly\ngrowing companies need to scale their design teams fastly and even place them in multiple locations. Ensuring the design\nconsistency and quality when experiencing such growth is a great challenge. At the same time, the products themselves\nhave to be created âin a scalable and repeatable wayâ (Saarinen, 2016)."),"\n",s.createElement(n.h2,{id:"1-the-concept-of-design-systems",style:{position:"relative"}},s.createElement(n.a,{href:"#1-the-concept-of-design-systems","aria-label":"1 the concept of design systems permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. The concept of design systems"),"\n",s.createElement(n.p,null,"Design systems is a systematic approach that offers solutions to the problems presented above."),"\n",s.createElement(n.p,null,"Since design systems are a yet evolving concept, the sources use different terms when addressing them. Some authors tend\nto observe design systems from a perspective of a technical solution and interpret them as collections of reusable UI\ncomponents:"),"\n",s.createElement(n.p,null,"âA design system is a collection of reusable components, guided by clear standards, that can be assembled together to\nbuild any number of applications.â (Fanguy, 2017) âA design system is a collection of reusable components to tie whole\nproducts togetherâ (Baskanderi, 2018)"),"\n",s.createElement(n.p,null,"At the same time, other authors call such collections âcomponent\nlibrariesâ or âpattern librariesâ and describe them only as a part of a design\nsystem. They interpret the design systems concept as more complex but have\ndifficulties to give a straightforward definition for them. Saarinen (2016)\nfocuses on the processes formed by design systems: âdesign systems are more\nsystematic ways to guide and leverage our collective effortsâ (Saarinen, 2016). Braga partly supports this interpretation but also makes it wider by\nincluding the tools: âDesign systems are basically a combination of tools and\nprocesses that will help our teams working better togetherâ (Braga, 2017).\nAuthors of the iconic âDesign Systems Handbookâ introduce a design system\
1nthrough its function saying that it âunites product teams around a common\nvisual languageâ (Suarez, Anne, Sylor-Miller, Mounter, and Stanfield, 2017).\nThus, they see design systems as a set of approaches for collaborative work,\ndesign tools for providing user-friendly and brand-supportive interfaces, sets\nof methods and frameworks to bridge the gap between design and development and\npractical solutions for saving the costs."),"\n",s.createElement(n.p,null,"The wide interpretation of design systems includes some sub concepts; together\nthey build a whole ecosystem. There have already been attempts to outline the\necosystem as a schema but due to lack of consistency in terms, the schemas by\ndifferent authors vary."),"\n",s.createElement(n.p,null,"Zack Rutherford (2017) proposes a well-structured scheme (Figure 1) with a\nclear hierarchy and no interconnections. The scheme defines such subclasses as\nâbuilding blocksâ, âpattern libraryâ, ârulesâ and âstyle guideâ. Each of these\nsubclasses contains a set of terms."),"\n",s.createElement(t,{caption:"Figure 1. Rutherford (2017) âThe structure of a Design Systemâ",copyright:{text:"Source",link:"https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/"}},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1400px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/f58c4bed4d67828a379e4fbb3aa31ccb/2cefc/figure1.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 64.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACI0lEQVR42n2TS0+TYRCF+zMEqgKCXKpixLj0LmpiaEFuKqVEJKKllFpDWLlBE42Igo0xwahssNJojIoaCUYXaIiJ8R89nvmmTbULFyfzzbzzzjfnvDOhhn7Y0VdGvVDbA9vPwrZut+aXYiVs1Vldz793DaG/C9b1wp4EHJ90HEvDkQk4mITDKTh5zWOGU1lov+hFGyoL1veWA+a3XhAG3bYIzefd7o4LQxAp2qYBv1tCULBRwVpRqIlCOCYqXVCt7+pOp2aJ1rn5Bsuz86qox5vOOXYOFAuaZn03YGIert6HxC3ZORi7B5mHMK5Y9pF8xS7PwtBNuKKzsVmXwSQyJm0JLxoycaceQ/4rPF+Duy/g2UfhMzz95P4T+Us6W1yFByuwotz8F4hNexFjaEWt05DpY11u6XQq4W6nY/QsoVV6tSinJubngSQ6qxJ2xV1bmwbTPChozswSvNmAwjfIvfK/v1QXy+pqoeD+smEd5gueZ7EzU7BPL90+4jagbKLHZyAtvVLScfSO65kU0ubfll2QlkJKel4yPweTOddw73AZQUFr01oPRqU4JobIoNsDo24b+318LKe5+Kptw0XKXW4DymE5c3lY/w1rv/QA70VXlN5tOt5uur+o+OpPSfMdXv+AD/qOTnsRG+5ISUMb5ENJ34KOjGiM+5acyDg6ihtzVBtz+rqQ9S0x7B/xsbEhN2szHRS0P9jT/xcVu1wa+spd/gOxFLxZkMkEjAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 1. Rutherford (2017) âThe structure of a Design Systemâ"\n title=""\n src="/static/f58c4bed4d67828a379e4fbb3aa31ccb/2cefc/figure1.png"\n srcset="/static/f58c4bed4d67828a379e4fbb3aa31ccb/e17e5/figure1.png 400w,\n/static/f58c4bed4d67828a379e4fbb3aa31ccb/5a190/figure1.png 800w,\n/static/f58c4bed4d67828a379e4fbb3aa31ccb/2cefc/figure1.png 1400w"\n sizes="(max-width: 1400px) 100vw, 1400px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(n.p,null,"Jan Toman (2017) draws a different scheme (Figure 2). Besides altered\nstructure, this scheme also uses the different words to name its components. In\nhere, the word âblockâ is used as a synonym for âUI componentâ, the library of\nthem is called âcomponent libraryâ (not âpattern libraryâ as Rutherford (2017)\nproposes), and âstyleguideâ does not include the library but is connected to\nit."),"\n",s.createElement(t,{caption:"Figure 2. Jan Toman (2017) The Design System Schemaâ",copyright:{text:"Source",link:"https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc"}},s.createElement(n.p,null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1600px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/75f489e99f0e5f1ae252af680c9f792c/29007/figure2.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 61%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAACzUlEQVR42mP4Dwb//v378+fvfyQAFHn24u3ew+eWrNq2ePXOCbPXlzbNLm1dPGn+9nsPn0AUMEAoiIbvP34+ef5635FzrROWeEaVC6n7MQjZGAe0xTcfS2g7Fdd6On/G47zpD019Kw8fPw9UzwDReeTk5fSSXiOXNH4VbwZRewZeC0YBawYhK/OQzrpl7yvmPy+f97RhxYfmVZ/7d/z3yl4bm94I0gzE1W1zQBr4rBiFbVmlnLkVPHgUPdllXAQ1gqOrdxZOu1O9+E3xzId1S981rf7SvfW/fcK8uOxmkOYzF29KaPh5hJdGZTb7xlY5BhV6RZX7xFQqm0UxCFkzCFoIaYXZx88snPmgaOb9gqk3U5sPMPDblDdNB2leuGwbg7CduHaQgnGknFGEtH6IhE6QkJofh6ybc0hTXM683MrVBVWrq/pPplesK23Y0jP5pKlrZWnjVJDmzTuPMfBY8Cp5C6n5C6sHcMq6s0m7imkGsUo5eUV2btj6cd2W9zv2/li3+d2SlU8Wr3zS0Xeyb8bF6KzOf//+Mvz9+7eofiqvoheXrLu4VrCgqp+MfricQQSDoGVI0uSVa19NnHqxb9K5GXNuTJx8ce7ie3OX3l+54XXbhCPnL98GBdil6/dkdYKk9YL5lL1ZxJ3ENUHOZhCzq+/aN33erUkzL69c/3zp6sfrtrzZuufr/KUPFq98mlG2es+hMyDNZy/dAgbVk2evb9x+lFTQxS7lzChoy8BnHpI8bdnql8vWvtyy+/viVc+nzL1R3b4/MmO2T3R7VducP3/+MLx+8+HClTtXbty7dvPB/UfP//39e+z0laCkOim9YBmDsMiMSWVN6+o6Nzf3ba5qW9TQPX/+iq2Xr90CpixQgL1+++H0hRtnLt4Cxtm1Ww9+/voNSW0fP399+frdk+cv3r5///Xb1x8/v0M0AMGvX79+/vz1//9/AGGep4HKcqb+AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 2. Jan Toman (2017) The Design System Schema"\n title=""\n src="/static/75f489e99f0e5f1ae252af680c9f792c/29007/figure2.png"\n srcset="/static/75f489e99f0e5f1ae252af680c9f792c/e17e5/figure2.png 400w,\n/static/75f489e99f0e5f1ae252af680c9f792c/5a190/figure2.png 800w,\n/static/75f489e99f0e5f1ae252af680c9f792c/29007/figure2.png 1600w"\n sizes="(max-width: 1600px) 100v
1w, 1600px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),s.createElement("br"))),"\n",s.createElement(n.p,null,"Nate Baldwin (2016) provides the schema (Figure 3) with many intersections and includes additional components such as\nâdevelopment standardsâ and âprocessesâ."),"\n",s.createElement(t,{caption:"Figure 3. Nate Baldwin (2016) Design System Schemaâ",copyright:{text:"Source",link:"https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5"}},s.createElement(n.p,null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 984px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/2f8e28b2e409062ac0389b0394863bea/f30f2/figure3.jpg"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 98%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQD/2gAMAwEAAhADEAAAAfXmMh7WZL0C0Df/xAAaEAADAQADAAAAAAAAAAAAAAAAAQIREBIx/9oACAEBAAEFAqvBVxc6ekp4dVp//8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BWM//xAAVEAEBAAAAAAAAAAAAAAAAAAAgEf/aAAgBAQAGPwIQ/wD/xAAbEAADAAIDAAAAAAAAAAAAAAAAAREQMSFBUf/aAAgBAQABPyG6F5uidRtdor8GzcsaFyJj/9oADAMBAAIAAwAAABDIAHz/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEh/9oACAEDAQE/EJRiC//EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQIBAT8QAjsM/8QAGhABAQEBAQEBAAAAAAAAAAAAAREAITFBUf/aAAgBAQABPxC/BDh33Egwv3dDUxIYkfJ6PcD6LiS/c0eh5ghDf//Z\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 3. Nate Baldwin (2016) Design System Schema"\n title=""\n src="/static/2f8e28b2e409062ac0389b0394863bea/f30f2/figure3.jpg"\n srcset="/static/2f8e28b2e409062ac0389b0394863bea/066f9/figure3.jpg 400w,\n/static/2f8e28b2e409062ac0389b0394863bea/4b190/figure3.jpg 800w,\n/static/2f8e28b2e409062ac0389b0394863bea/f30f2/figure3.jpg 984w"\n sizes="(max-width: 984px) 100vw, 984px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),s.createElement("br"))),"\n",s.createElement(n.p,null,"In many other sources, authors do not provide schemas but operate the terms.\nThis article introduces these sub-concepts and their naming, summarize them to\nrepresent as building blocks of one bigger system and explain their\ncontribution into the UI developing current problems."),"\n",s.createElement(n.h2,{id:"2-blocks-of-a-design-system",style:{position:"relative"}},s.createElement(n.a,{href:"#2-blocks-of-a-design-system","aria-label":"2 blocks of a design system permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. Blocks of a design system"),"\n",s.createElement(n.h3,{id:"21-component",style:{position:"relative"}},s.createElement(n.a,{href:"#21-component","aria-label":"21 component permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.1 Component"),"\n",s.createElement(n.p,null,"The ",s.createElement(n.em,null,"component")," is the most solid term of the design systems concept. It\noriginates from the development field and has the most univocal meaning.\nMultiple authors define a component from the implementation perspective, as\nâportion of reusable code, serving as building blocks for the application\ninterfaceâ (Suarez, Anne, Sylor-Miller, Mounter, and Stanfield, 2017).\nImportant to note that represented as pieces of code, components encapsulate a\nstandalone entity that is meaningful on its own. They can be nested and\ninteract with each other, but semantically they remain equal."),"\n",s.createElement(n.p,null,"From a user perspective, components are meaningful elements of a web\napplication, for example, buttons, form inputs, dropdowns. Figure 4\ndemonstrates a dropdown as an example."),"\n",s.createElement(t,{caption:"Figure 4. Example of a component â dropdown UI element. Carbon Design System for IBM Cloud productsâ",copyright:{text:"Source",link:"http://carbondesignsystem.com/components/dropdown/code"}},s.createElement(n.p,null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 511px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/5db31c97a92a1000bf2ac8963365564b/92e00/figure4.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 55.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAsUlEQVR42pWR2QqDMBBF8/+fV6pQqqnVuEXjkj0xYyvS95rLYd4O98KgRzXdsvaOuwT3yavPW44vkNXrcRFu5jQjybM6IS1Tf+mYIoMsqUDTqkrSDGz+RMb6gLiyQkptzH4mTmarxO+yo0OU+ZOl8cYY61ys7DdA48Tzomj6ASBSDoAWobQ21sY3e0CULUVFOjoGgGhZKLtyrpSObj5mN3RKn3le1eJ4l/NbgAD7FdwGX50GgAGzV9YaAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 4. Example of a component â dropdown UI element"\n title=""\n src="/static/5db31c97a92a1000bf2ac8963365564b/92e00/figure4.png"\n srcset="/static/5db31c97a92a1000bf2ac8963365564b/e17e5/figure4.png 400w,\n/static/5db31c97a92a1000bf2ac8963365564b/92e00/figure4.png 511w"\n sizes="(max-width: 511px) 100v
1w, 511px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),s.createElement("br"))),"\n",s.createElement(t,{caption:"Figure 5. Components",copyright:{text:"Source",link:"http://carbondesignsystem.com/components/dropdown/code"}},s.createElement(n.p,null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 304px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/c34bec09e50302aa821fabbeb77862c1/c1724/figure5.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEFklEQVR42m1Va1NaVxS9bdrJH/GH5ENbTfo/+headtphMiYdo0aUgJhaqI9U5GEEDGpEUB6XNz6iSRPtNKkTUYyICALKvXd17wM62ubO7NlnzmGvs/ba+2wkqfVBkj6DAzd4vdXWdjPfOdBxaJ00FyamM0d2b46tMOHO8F7uvv72VlvHTRHncNyQPvUBTbD9zr6vCjZP9nwpDqRfao3kGmpyRphCa97js8KkZ2X3Xu/XV2Ovgn3OPj9g/b62EFYbiVWUgrJaCkSVk0CUvUZeKy1GyMsNPmvEV8C/zRuG717FuAaGWBa1WFaphBJKNZJuMotlUI2mUZVbFm1aJZxQq7GMAnkFeYPlOuiuru+bKt12Gk2pB+557YNtGv+MOfG3ZQLbQyN4/7uNbBLvRyaF3xl34h3tFXwB9VROKzV/WKX02wXYE0n6suL0xTmFciiu5BxevDVZ8cZowUrnI2z2mvCnYRiv9UNYe6DHZo8Jb41WbJtHsef0grNRSKKyazbBWNLBL/136sEYg6nVUAKXFk7ijC6pU8oUBGKPU9orL8cp3SROlmI4CcpNW44rZ4Rx0GX6ViqNuczIbuLj/HIj5/OjsBAC+8OFZeTngij6w6hQcJkCy+TrpN8ZWZ00rtMl1VCSC6ggs4HiqHNQKtrcKQb8a2pGtXV2wdf3GAHjr3B36zHTa8DaUztOiSGDHQeiePmHE69sz/DG4RbrDzMLqBBDLbGGE4dPlor2mRyndUwtwcz25wI4fMHsAsR6CR9pzQwr1HvFxQiCpmHYH3TD2zuAFwODWH/qYInUc5LneHpuSzp2PN+tU3uQFhozYaMbBaNaJEWppYRuF2ecMuvbTD0j1hSrcmGKDFiye1L8AriBWWDSA2cEIg+Pwt3Tj8gTK5497BP2yjYlmFKjN+2iKEsxRWMMF6VcHp8apOdEB7FGuVU5TpG12ZhwYZNAVscm8do+LSSoh1OXnXCRiShKegNUYJNU6Bq8zSWn0qtcSf5RjdI4p1cjnhexVcjvzwbwbnpWVH6XLmO9j1odQAxV0TYPjXcknSR9UXb5EipRJo2UHe88VsftQuxtl1ekxhdsElsPSeB/PCS8h4qSe+4XMRxbmZpLfMeNzV9O191RoyrX5LS245nTQmYLZvVG0nFESMBpMXOuMrM6Il8gzwODmlyrL0aR63zUcW04HBisPyG5jno8qxAjrUEpcwMz2IUx6IUxGA0LBal17BssP18bDo7WkKSJ80PNH4FCTXosxpfc4GIRS6VpsQbvlUgz7gz+7X7/bz9eA7uciTqd2NjT9dw6snky5/Sk6AVp/AK4x9i4NZDd0Bp0RtM7u6fT37oa+/+p3TrIkLi79/TtBxabueiYiXPDstHfQOKQ9vL39e2ZVgH+C/YvunNv49KLo4UAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 5. Components."\n title=""\n src="/static/c34bec09e50302aa821fabbeb77862c1/c1724/figure5.png"\n srcset="/static/c34bec09e50302aa821fabbeb77862c1/c1724/figure5.png 304w"\n sizes="(max-width: 304px) 100vw, 304px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),s.createElement("br"))),"\n",s.createElement(n.h3,{id:"22-pattern",style:{position:"relative"}},s.createElement(n.a,{href:"#22-pattern","aria-label":"22 pattern permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.2 Pattern"),"\n",s.createElement(n.p,null,"Not all the design solutions can be technically implemented as components. Some\nof them play as properties of many components, for example, paddings, colors,\ntypography, and motions."),"\n",s.createElement(n.p,null,"Academic literature uses the term pattern to address these standalone design\nsolutions. This way, Granlund, LafrenieÌre, and Carr (2001) write that patterns\nâdescribe generic solutions to common problems in contextâ (Granlund,\nLafrenieÌre and Carr, 2001). However, they later limit this wide definition\nsaying that a pattern should be a âformalized description of a proven concept\nthat expresses non-trivial solutions to a UI design problemâ (Granlund,\nLafrenieÌre and Carr, 2001). This defines a pattern wider than a component but\nkeeps it as something specific and objective. This view is supported in popular\nliterature by Lopes (2017), who says that âfoundational elements like defined\ntext styles for headers and content, a colour palette, inputs, forms, what we\ncall patterns and componentsâ (Lopes, 2017)."),"\n",s.createElement(n.p,null,"Figures 6 and 7 demonstrate how a pattern can look for a designer. The exact\nrepresentation may vary depending on the design system technical\nimplementation."),"\n",s.createElement(t,{caption:"Figure 6. Example of a color pattern. Carbon Design System for IBM Cloud products.",copyright:{text:"Carbon Design System",link:"http://carbondesignsystem.com/style/color/swatches"}},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 695px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/a34b86b3da237cc9e190a4f53a175ecf/83b75/figure6.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 81.25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAIAAACZeshMAAAACXBIWXMAAAsTAAALEwEAmpwYAAACeElEQVR42oWT22oTURSGB/Qt9AkUva1gQY1QQa98AMFeCbYWQfFYelEKYqFKqC21tSooESEtUhVEEGrsEZUmTabpKZnzZDKZSea45xxdyY6pINLFx7AXe/619l7/DKGZPiMhVffDMAzCRgRBGEVRvV7/tV8QmqYVaYoXSjQr5LcLXEmmOYFiedNyQO1HUVCvY8J/yhH/Kbp/24Y4uUh1x1N9k8s9E0u9T5duz3L3P6r3PlT655Qbn6XzNHmOzV5gyU46M1hhQBA0L9
1SkTjxIpg9dThy7NnOkJwmcHN44M8afGmVica7jWeHAeoog5w+SKWL9y0U21xD/OTwWZw53J473zR7tnQE6hzdiY/zpUeZsnDuxr/jtQvHSo/mrE4tXxheAm0n2znvl1lz57rvK9U9iF5WLMetdTK6DSg/IDBbvHbtWrRYLu6Zp4mIlkWcZyvVcSH3PEwtMmRPAP0jhnUKRaZrYCkI3TJYXTRvBNvhbUaucKLme3xAHoViWZbUaNk13XFdR1L/9J9oXwIFNguoYCPhgmt9O6PuB7bjQBjAsBCkB5WGB3BaG7egW0i14OjXDZgWJBviSWFZW1nIj04knr5LAyPSb9MY24TXFttMCNJqJMKpugazICoAgyd9+pAfHnj+ceg3A4ns2D50jC3mW42MaDU1UMxoomkVxMDJ+l+Y5Uf66ujYQnxoafzE0/rL/8eRqhiTgN/D8IAgijAOD9gMMcr2abhiWpZmWZSNekpfXsj/JLei5kiElpUrwvJDf3GkPcHNrB4aP157nZsm8WtVwauhGfnMbZr43bWhqI9Q2wHU95DhtC2DLRq0UBm6aFt7FPv8GYAdKABYrWXUAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 6. Example of a color pattern"\n title=""\n src="/static/a34b86b3da237cc9e190a4f53a175ecf/83b75/figure6.png"\n srcset="/static/a34b86b3da237cc9e190a4f53a175ecf/e17e5/figure6.png 400w,\n/static/a34b86b3da237cc9e190a4f53a175ecf/83b75/figure6.png 695w"\n sizes="(max-width: 695px) 100vw, 695px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(t,{caption:"Figure 7. Example of a Spacing pattern. Carbon Design System for IBM Cloud products",copyright:{text:"Carbon Design System",link:"http://carbondesignsystem.com/style/spacing"}},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/630274af52ab7b1332be039923b581a8/a6d36/figure7.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 127.75000000000001%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAIAAAA44esqAAAACXBIWXMAAAsTAAALEwEAmpwYAAACf0lEQVR42pVUybKbMBDk/38jxxzyBbmlKpeck/eMQbax2UHsEtqcBmGMqSSVp2JpDTP0aHokp2w1iWVYqPvHhxOnBbnEtzCL4iSK06woPxDctm2W55TSOMnyoiwo3XkYY3DjbbGxDxu8mIxZAaCeBsDjfbcWbf2ewVlWuN7J9cj7wXt3fULO5HTx/NPB9Y8+OXo+8NE/BcHVJ2ePnN8OxyTNLZMTJ+mvN/cS3I4egZ/nk59v7tE7Yeoep3h3/ovnkYNHEE9p1bbdwiyEHIaB83FgnDHW90PXYyoY4/2AB8fX6ckmLEaxK1jX9f3WpLVaLVgn/msxPEtaKaVs8abgnHZR1nXcNL3C1Q6aNiLKGjutWpEU/WxXt6T2rzm+AtedHKVxipJertE1jPkotLkrbaTSJa3tVEg1Cokq48YUjHCw11Swqq5RszwvpZJzPtBHQXwrCrCUkx2BalHteTmoHnorzfLJaVYZq2qaxjwwKgpPEEur82Y4VVWFcVLQalMwjdpavATPqjK173+subzeIjDDb2Wr69pipA2lbK9RIXbUDmSs6gZ66UdWANB0xUKICRjdSLkPLks6MacZnGx6ah47ZqCQc7ULHkeBTuLjuLWuwYiRC9bBKAYsexuc58X5co3jdFuwfhieuB/sznznY6v1fe0vFOyx8fYy7AaCfzKWznKurtOuwn6E0CvzKs+M9dLnxnznPJDyhXl7YvybORQyEfJlzUVRBujsJAXJn9c8zA1j9OeBfWX8hRn7FCqjKludrbY7jFIz9SKW80zsL+NxvukvjH/q2QtzluXkHIRRsqaNgs07aUl7OXSM+cHHb3Pa951U5j/GfTl2n2n/Bip26kfRZejNAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 7. Example of a Spacing pattern"\n title=""\n src="/static/630274af52ab7b1332be039923b581a8/a6d36/figure7.png"\n srcset="/static/630274af52ab7b1332be039923b581a8/e17e5/figure7.png 400w,\n/static/630274af52ab7b1332be039923b581a8/a6d36/figure7.png 650w"\n sizes="(max-width: 650px) 100vw, 650px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(n.p,null,"Some authors use the term âpatternâ when speaking about components. However,\nthey still face the need to distinguish solutions for repeatable UI elements\nand more general ones. One of such authors, Alla Kholmatova (2017) introduces\n",s.createElement(n.em,null,"functional patterns")," as âtangible building blocks of the interfaceâ (Kholmatova, 2017) and\n",s.createElement(n.em,null,"perceptual patterns"),", which she does not define but provides examples\nsuch as âtone of voice, typography, color palette, layouts, illustrations and\niconography styles, shapes and textures, spacing, imagery, interactions or\nanimations, and all the specific ways in which those elements are combined and\nused in an interfaceâ (Kholmatova, 2017)."),"\n",s.createElement(n.p,null,"Assuming the frequency of using the term âpatternâ as a wide definition for a\nspecific user interface solution and the term âcomponentâ as code\nrepresentation of such pattern, this naming seems to be the most suitable to\nkeep further."),"\n",s.createElement(t,{caption:"Figure 8. Patterns"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 554px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/7bea6ef8d1e575bc76635a2618d0c75c/04abd/figure8.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEOklEQVR42m1UW1MiVxCerE/Zyh9IVX6SValc3B+RP7GP2SRPm8pDKhvdKOAFXXdFLQVkBnEYQGZQQcEVARVZRbnNcJWZOV/6DLpxk0xV1+ma7v7O15fTgnD/AcJngHeM6+rz8actZWaie7zq6Z/6j/uFgMGld7L5vpNd9dSV1xPcZxSHMR4rPP4gcDA4YLfy1NddCkRDBToZZl8nYF4q4CdrpIBuhqGVAgfnvv8L+hx4ws9GcvYXNJJAP8uqsWWWnXlplQNuu+x3Ief5FVnXS1Zam7KGFcVG+4ChqaKd8v4sjAg9uU91pOgp7wvcZcGaKQt11Tav47g7i+DuPIIBne1cEJ3jIPoFCaxG7GtJG3XNRC9DhBd/eowl3OxMPoOewu1JyCok37Ki+g6llA8F7R36lzLYbZJAiHldxVV2E9zOpZEPMdRUC00Ntejk9w6YMvHV54NzMQ0jjdr7oFUikDMCK2krON/zoUsM7yoKBmUZdjWOSnod52QvH6yjnt8Cqgkb+j76Z6G0b/zLp0Ir4XrGi0wpWlaVCn+767CxiQ2aKejFMA4jc8hE5tEuhYGGBkY2Lrwsg8sozKu4BX0PLXV+Qmjn1meom3R7wiqlVihwDtWsH9ZVDOaHGPglZpV0YmfdJDCk/xb9Nwh8T3LjSPbyDCzqPrrHa9NC7zSQQ2ufbonZQ3IcflC4Dvs2QYFRDLIS+inREa7zf9zGL7urRB1firE5qcG5tCvQwOpUWG5gvEY2pWETk7vjMDqSiPaWjLaooB1SHL0jSY6N+/DZtMifABknRY/gghj6PwJaV5QW3T7IhaH7RTQ2w2hsSCRcl0ayEYbhH4HyEvCYB8DuyQYB5v0fU3bqRWm0xRC64QQqnjco/uFC8ZUb+d+nUfzTgwv3IvSg7LDnvjyGSkWDnqZ5FXdHTekd8Z+Wwy7L2W2jvOrH5VoAlfUgWmIUne042tux0RmmpgR3MDiSHuppoXc4akpdnR2NzVXctm7i6GsiOUex717AgduL3MJbNIMRYhzH3swC4pMunC6vobuloKeKsGsOoD0aG8/EaLDL4QynbF4rNncyqAEDOYkOMSm8WUV+aRWndLZCO6gFtomxDCMgo6dR12/iNn8Ug8vwgW9ccDaQwJ8NI3ZWbXfYy4jMCERgSArVKeYAHc0t42RxBQalrpM4KVPHe+kQsymGx9bk1999shxaqXlnORB9Uw+GLIPAjuaXUVxehxlVkSdg5dU0DueWCDAOPbBl0fAPe
1cx/lgMpzi7T1fkfYWiwijFmbG6bFysBk5pj6aEdZoiyTamSrpjGRtg0yQe6xp/bi8cY/yzZe/TaztS3/WIwi9MooKmMxfcxjGqOMIUWbHKXoRBFv+jPNpW/vvmE2b+/B4P02w9f1Pdcz3R1cc6QfWrLv1RukhhRn2poS7Mtsh2SD/f1er1jfOM/gPwNej+8oBbC0f4AAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 8. Patterns"\n title=""\n src="/static/7bea6ef8d1e575bc76635a2618d0c75c/04abd/figure8.png"\n srcset="/static/7bea6ef8d1e575bc76635a2618d0c75c/e17e5/figure8.png 400w,\n/static/7bea6ef8d1e575bc76635a2618d0c75c/04abd/figure8.png 554w"\n sizes="(max-width: 554px) 100vw, 554px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(n.h3,{id:"23-component-library",style:{position:"relative"}},s.createElement(n.a,{href:"#23-component-library","aria-label":"23 component library permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.3 Component library"),"\n",s.createElement(n.p,null,"As described above, a component solves a specific design problem by providing a\npiece of code for rendering a specific functioning UI element, or a set of\nrelated elements. In a regular website, there are multiple components in use.\nEven a simple page with a plain form would contain different types of input\nelements, a submit button and supportive texts. Each of those entities is a\nseparate component."),"\n",s.createElement(n.p,null,"To ensure the reuse of components, they should be represented as a set. Such\nset is usually called âcomponent libraryâ and is meant to provide\nimplementations for design solutions of the same system."),"\n",s.createElement(n.p,null,"In the literature, such sets of components are sometimes also called âpattern\nlibrariesâ and even âdesign systemsâ. For example, Fanguy (2017) writes that âa\ndesign system is a collection of reusable components, guided by clear\nstandards, that can be assembled together to build any number of applicationsâ\n(Fanguy, 2017)."),"\n",s.createElement(n.h3,{id:"24-pattern-library",style:{position:"relative"}},s.createElement(n.a,{href:"#24-pattern-library","aria-label":"24 pattern library permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.4 Pattern library"),"\n",s.createElement(n.p,null,"However, many authors define pattern libraries otherwise than component\nlibraries, based on the difference between component and pattern explained\nabove. This way, a pattern library is âa subclass in the design system, this is\nthe set of design patterns for use across a companyâ (Rutherford, 2017)."),"\n",s.createElement(n.p,null,"Similarly to component libraries being collections of components, pattern\nlibraries are collections of patterns. However, due to more abstract nature of\npatterns, it is harder to visualize such collections."),"\n",s.createElement(n.p,null,"Ste Grainer (2017) gives a comprehensive explanation of pattern libraries\nthrough their attributes. According to him, pattern libraries contain UI\ncomponents as representations of some patterns and also define use cases and\nprovide relations between the patterns (Grainer, 2017). This way, the\nperceptual patterns can be represented by their description, examples of usage\nand their connections to the other patterns."),"\n",s.createElement(n.p,null,"Assuming the nature of perceptual patterns the difference between a component\nlibrary and a pattern library can be identified by the presence of their\ninterconnections and rules of usage. Marco Lopes supports this point of view\nwhen describing the process of creating the pattern library: âbreak down an\ninterface into reusable building blocks, arrange and group them, name them,\nestablish rules between them, generate an overview of all components, and make\nthem available for the entire team to build and design withâ (Lopes, 2017)."),"\n",s.createElement(t,{caption:"Figure 9. Pattern library"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 806px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/e31e6401ebec1416ec91d6c6238cacdd/764be/figure9.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEN0l
1EQVR42o1UW08bVxB225fS31Cpf6O/IQ+RoibPfes7vyAS6StSn6re1EAJNCWQhpJgDL7srr0XY2NjG2OMsRd7ba+9axvfFmy8u1/nbEUKSh96pNGM5sz3zZwzZ47Pd2cB+Jjpp39985lQXnmc0rdXcoa/cGwG+kxybX8hrW//JpytPP6RYu5iPli3G6HC0sOcESg0Z0kYyLgN0tp1AtokgeYshS6OXZ00i+FKSw//k5QcHzEtXqx/27JTOGq+w172uRPKL9s76Z8cf/pnxNU/3U3pO3c78b399vAHp9iLQLcPIRHmLsd7dkXbWOgih9p1wi72eLfY41AaCDgxQyh0wjjtRnBs7CNvBj1d7PKOOlJsE1ko2uaze5WyY2rTOKpW3OGyr9y95O8oGBFU6Zjq9YEnlas4tJskEqofe4k17MZfYDv23M02gk5jlgDj8Mi+nPfNnQ+4TNvNoDwUnVI/htJlDOcjCeowhlqHg07kTYODRvZ5j8fZgPYHIgnTMccgbIk4GBfd29rjJt2FOpLpCBIuqBJ1LKGphzFUg7hWOUwueEwqpMm26pSgFUZlfBsrM7F15xDyxcuvfDlzd6mHPCojeaZaClUZQ68eAswExoV9tKOvYEivUdn6BfW9F3CNBFxdQUcLerH/YCSbuk+d3/nVd9Ldz7PnwCosU9ZOIwSLqjGK+zAKAVyeh+F2kl6CEVVonu6jT/tuQ4JJiRmmMpKclpvGaS+U9uU7+32NXbqluFUzArshYkhHrGffoXb01iMdlCMYVwWPnPk7Z0G4ZhI3WhQMU7YUR6fndjbgVV/eZIQJaoLomo0w0IqjWwpBP/ED3SRcktbpLtrFAJxOAuilYJzueclcimUYwv5LeNzZO9btNMqDqDOgC3fbB7iui7BqUczaMqYlAbOcSBIjOwrbUDCmPasmeIQDLey9jpZ7hEIvlKKm+L2mlPtRe6RxcCjIbilw2gquDjkMAjwud3n0AwL6uxz5InAMth/3Yke1CCP0mpJhTZEqq09Yy8v0ngb1iJfVNhVM8gKRCWi8fANtdYNkE40/toiUntAJ71Xq3KswBVmjZ/P10y8+Pe2H0vXZIYx6yHZ0IqSjWjKPYUjCMCy+l1GEhHyWzHkxLDnDMCzjeLL4+Zw3LRyNjTpR2FTcTOqCY7dkjEUeo7BMJNJ9Id84xggVTGuCQ9Nzo14r4G5H73agD6obCy2k0KmHp05LvLGSVGGQKuLukJE9DFHDkrxrN6VZtxGZtJBGUnu9cO9zuP16lOrms+oVAXrU1bIwHQX56TAoz4YR2R5wss1s5puV+anVFXFhiWCYe9/XBx/s+fKDTNufMS95OE3JncYF3AgipkzIZr7OpYAjfSfLqasP/tevvSjNzwXVtUfJ+sZysbqVVUtbVfVsq1qsvskyX1BdebS4Pu81YH19/ZO7JH8DXWG0XPHfkZEAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 9. Pattern library"\n title=""\n src="/static/e31e6401ebec1416ec91d6c6238cacdd/764be/figure9.png"\n srcset="/static/e31e6401ebec1416ec91d6c6238cacdd/e17e5/figure9.png 400w,\n/static/e31e6401ebec1416ec91d6c6238cacdd/5a190/figure9.png 800w,\n/static/e31e6401ebec1416ec91d6c6238cacdd/764be/figure9.png 806w"\n sizes="(max-width: 806px) 100vw, 806px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(n.h3,{id:"25-visual-language",style:{position:"relative"}},s.createElement(n.a,{href:"#25-visual-language","aria-label":"25 visual language permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.5 Visual language"),"\n",s.createElement(n.p,null,"Both pattern libraries and component libraries ensure the reuse of the design\nsolutions and this way increase consistency across the product. However, on the\nweb, the products are constantly being developed and through time they need new\ndesigns. Similarly to how existing design solutions ideally form a solid\nsystem, new designs should fit into this system and extend but not break its\nconsistency. To achieve that, designers have to align their new designs with\nthe existing ones."),"\n",s.createElement(n.p,null,"The designers can provide new solutions, consistent to the others, in the\namateur fashion making them by analogy with the old ones. However, on the\nindustry level, producing adequate design solutions requires special methods\nand tooling. In the design systems concept, the is a subclass serving for this\npurposes. It is called a ",s.createElement(n.em,null,"visual language"),"."),"\n",s.createElement(n.p,null,"The following content forms visual language:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Design principles.",s.createElement("br"),"\nThey define the core value of the product and team."),"\n",s.createElement(n.li,null,"Best practices.",s.createElement("br"),"\nOutline the best methods to be used for achieving the team goals."),"\n",s.createElement(n.li,null,"Specifications."),"\n"),"\n",s.createElement(n.p,null,"Unlike the pattern libraries which instruct what are the patterns to form a\ngood product, visual language also articulates why these patterns should be\nused (Robson, 2016). The Design Systems Handbook names visual language âa core\npart of ",s.createElement(n.a,{href:".zero"},"..."),"\ndesign standardsâ (Suarez, Anne, Sylor-Miller, Mounter, and\nStanfield, 2017) which ensures user experience and empowers the components not\nonly provide specific designs but also âplay an integral role in expressing the\npersonality of your brandâ (Suarez, Anne, Sylor-Miller, Mounter, and Stanfield, 2017). Visual language helps to make a step from static rules and individual\nsolutions towards evolving ecosystem (Saarinen, 2016)."),"\n",s.createElement(n.h3,{id:"26-style-guide",style:{position:"relative"}}
1,s.createElement(n.a,{href:"#26-style-guide","aria-label":"26 style guide permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.6 Style guide"),"\n",s.createElement(n.p,null,"Well documented pattern library and visual language, accompanied by additional\nattributes such as editorial instructions, form a ",s.createElement(n.em,null,"style guide"),". A style guide is\nan internal company website which ârepresents the styles, patterns, practices,\nand principles of a design system and teaches how to use itâ (Grainer, 2017).\nSuch a website contains âstatic documentation which describes the design system\nitself: how products should look and feel, use cases for UI patterns, correct\ntypographic scales, etcâ (Rutherford, 2017). In other words, the presence of\nvisual language description makes the style guide different from a plain\npattern library documentation."),"\n",s.createElement(n.p,null,"The shared characteristic of the style guide elements is that they all guide\ntowards a great product. This view is supported by academic sources that define\nstyle guides as âa form of standard that assists in managing the development\nprocess, including addressing inconsistencyâ (Simpson, 1999). Thus, the style\nguide elements work each on its level: pattern library provides ready-made\ndesign solutions (components and perceptual patterns) for reuse, visual\nlanguage ensures consistency of upcoming solutions, writing guidelines help to\ncompose texts for the product, technical code style ensures the quality of the\ncode forming the product. Besides listed elements, a style guide may (or may\nnot) include others in accord with the needs of the product."),"\n",s.createElement(t,{caption:"Figure 10. Style guide"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1206px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/ac9aa8e554808b3c2fb478f91f18be8b/5c744/figure10.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEPUlEQVR42m1UyXLbRhClk1vsfFZuuSWOS66c8wOpnHWPfiG3JC5bKUeyQkmWSEcUN4ALIJCEAII7wUUAd5EEV2BeeiDZJSWZqq7ZXr953Wh0IPBgAPiMzz/9Ev8ymJvsRI3pa6E6LwuVuXNvFX4WzA13dvfVZ77P7p3Pf8ZHsnfZ3vNkeVYxBkBpCKa01rgyF5Cb3FYoDcCKA4aEMascZuxvH/o+JHvC57P8ZI+DyyMwtbPyItdDN5i9YSeyjWDWwpt4m8WMqatbW68y8lh5DITU6d5Djk+LEJHVZ8BVY7YNS3WWIimF7hqF9hK51gIqrZOahXCmhlCmys07T5VczXbxtzbbe6T0SBm+KFKI2s3GOxUN9vokiYMPMuT6FHkiVMwlzStkKmMkiFQo9pEko5nlWwuPUoMjafjCJ/v6h+wXUnuj5loOzlJl70IxIdVvyXmCqyblj/ImN+aUvznlkiv2SO3GVx/JmThPVTyZ8FJrVfj+R+Vp4JS+JlcXjKnem/ci3oazFPbCV5TvtqD3NRgjBcWhQmsduU7LVywWR+CRvDkVcHSZdznHuTrbCQi15avaLZCt3rpycwap5kBqWNAGKUjtA2TMt2R/Im8dI938A3LnEPooi2zdRpawXD335RxCzfktINbmJd32eOJZobOlsAYwxglSE4bcOkHePofUuZvF+iHEyiG0XghaPwalNaYUbHmePaMPul+oAaHqzNXOmgiX7Ipq7bqXQXORQKocxHU/gvY6i/Yije4qg+LgEsnyX4jr71AaXxBWAvdRzAXjolK1hX1PuELO3DDZbKE6i6LhiDCXaVijGEbVEKb6GSbXJ5iaF7AnCZirND2aRmUahWx2iHBNhO4doVhzSnwjN1Ysf6MRWQzVuQjLisDrJuHoIUyUY/SFA6xrUbidBLrWhY/h2Fy3yKvBDznNQ05Und+p3KhUHFe1FTSWSTSHMWw7cXhWCm4/DTbKgE0kuDbt6WxDd01Sz7EFK0diFi7nSFacXwP8U5dG4IeeaudRXybQt6JgXYEIRDIBWzPpG99viZTf9eyojy1YBVK4dP3fUJ+8DHy1pzyVWsvrEklWOkWvOr/EyIoBpGRrCZinIhgdh31z0hFSKIDR3ZAe5VilXfK4r9xeqc93L/wOFAheDb/jhamYtle8jWFArzNSs9LiGJ9EYB+cwj58j/FxBCs97t/1e1EUJzGmmH2P/kJwjkdtK6xO9nhxFmzVNYdh5vYELOQ4pmH6MLEUmYjZBwFLJU7Kk2gQpmDrW+7DfR81h4cdR+t5KE+vWX8QdjfapTcLJXwi30
1IJttEjnt0PeaVbjXHsuTr9+VH7uh9PPrIfSdNv4sbEKI6bGM8ltjQusRZjZFEsS5Tfucz0kYmYMTY49n8b7L+79u6+/exIXrw801uvElVVzRhZO03G1/wsKK93OIZj9/fxOXl+UvcPVDjLwiRncAIAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 10. Style guide"\n title=""\n src="/static/ac9aa8e554808b3c2fb478f91f18be8b/5c744/figure10.png"\n srcset="/static/ac9aa8e554808b3c2fb478f91f18be8b/e17e5/figure10.png 400w,\n/static/ac9aa8e554808b3c2fb478f91f18be8b/5a190/figure10.png 800w,\n/static/ac9aa8e554808b3c2fb478f91f18be8b/5c744/figure10.png 1206w"\n sizes="(max-width: 1206px) 100vw, 1206px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(n.h3,{id:"27-design-system",style:{position:"relative"}},s.createElement(n.a,{href:"#27-design-system","aria-label":"27 design system permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.7 Design system"),"\n",s.createElement(n.p,null,"Design systems defined as âa combination of tools and processesâ (Braga, 2017)\ncontain style guides and their inner elements. Besides, they outline the\nprocesses of using these tools to achieve the final goals. This view introduces\ndesign systems as a methodology which transforms the design process similar to\nhow agile approach transformed the development process (Federman, 2017)."),"\n",s.createElement(n.p,null,"To conclude, design systems are âthe methods by which you design productsâ\n(Federman, 2017). This includes âobjective aspectsâ such as specific design\nsolutions implemented as components and documented patterns which communicate\ndecisions and reasoning behind the solutions via a style guide. Other,\nâabstract aspectsâ contain strategies for effective collaboration in\nmultidisciplinary teams and processes established for the team activities."),"\n",s.createElement(t,{caption:"Figure 11. Design systems"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1600px; width: 100%;"\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/9c898427e468d8d75c79858610366669/b2b2c/figure11.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAENElEQVR42mVUSXPiVhDGyS2V5K/lksRO5R+kKsecfcx+SFWOuaVmnPLMuLzOjA3Y7GaVEIh9MSCE2Axik
1QBtX/qJyQyuUNX1mtdff+p+vXg8O79D4CN2nh/Kn2SP1YPazfqo6TdrDb+h0am5utd4nn252GcYhsXh1ud/P7wjE17Mv6j7zMooBXRDlkOkqHnXqLzVUbteQ6a7MdlqN2aFYXd9d8n22Jk/034cJYBxGmiHbTt7MjX5VxOneLlA4XwO+u/wJ49WJwKbYYaEzZ9rP+1yvFcKZFjmACUOS4rAIUEvDhRvpuAvFXCXfZS8M2YHs5HYZLcW5FO81H5+Emn2lXow5YCyV7X5i6FTeKu6Tl2S5i1LWUP1eom6T9/eR4H67QrC1diRorbFfIUX6jcu2R/fVz+XI2bxMQNUvEu7dDNH1a9BChFZ2EYtaaPCkfBbvRmy0A0DD0GDAligFbJt5tsNm6W/fih95hFPF9+OkwB7FynqoBdjuoN8egOupiPRWCDOpLkgfQm+vobIGWhTpHJsm34nTG9KhRLPKMqmd3U0y7JLh70dRWAjk9eRkZbIySuEyypuxUf482P4hCG41hyJ5hQpYe5it4SOxTiavtUzz4PfqAyS7lecdtCBIG6QG2zwJlbBdaKKvEwRyQaynRUihR4CQgdBoYtUewahaKBDPixClnbrzkx6Gj5jKd+znqOiJCzEqmNcRQrwpZuIl6cukdCdv5MNxJ6DWGmI19ESQgUF5aTFfO0BpUyN3yDCzbJHhG50xQ1ilSGu41XEKxPkFBlZKmm+f4f8IACOyp7tSgjmFBcTLfeRLW3IF/aQCGmiGp66b1MZJtnbWU6mpiHfW1OaFvJKAzX1ltK/Aq9cgVPYeYH6LEAfaGwxhOXqOuohy55Qyg93ZsLT8K6euQ8asaxUQ0Oua4CX+mjMw2jpcXQWcQymMZIoJNLZHbPx0sDFck0N9ahlzXiW8upvT+5UddvmIWJbmboGQTIg9ktoahHIkyi0TgCz7GvMcm+g02N1JxE86FEXw7BcgyKkYB4p5eKpeuD58zvx007AEPs0l1xRt3lJR2mUQ3sZht6j5iSDQfNmKvdwSNd7UbTmIRRHglskrqTZ7jgGTZFxudPCn6hfD6lJC9zGTLdXTmFYgDwNwGKD3d+VBEzqfFkNQRyJ4DorR+TXJvPNvlT3n6yt8sXilzHNJF8zDF5pW9KECGn6zR1CphvUEtIkCL7XsrnaxhixHXCh/fpkOfynFE+132QCFHumIz6mbW3gN6EkLEtJ2EyYzu7EcdouKqYjUyFKZ9rv5Lr3ZCfCgz0c42N3jf2z+Er0revlNjX7su0YC1p8M6qamgTTu8uWw2w536YuHs+/dP3Jl3E8XbKMFFvSCG2NzJG+f3+7fB5Ld1IprtBkEkm10zG6yxwv9hnmPRk+kP0LcAraccftJcUAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Figure 11. Design systems"\n title=""\n src="/static/9c898427e468d8d75c79858610366669/29007/figure11.png"\n srcset="/static/9c898427e468d8d75c79858610366669/e17e5/figure11.png 400w,\n/static/9c898427e468d8d75c79858610366669/5a190/figure11.png 800w,\n/static/9c898427e468d8d75c79858610366669/29007/figure11.png 1600w,\n/static/9c898427e468d8d75c79858610366669/b2b2c/figure11.png 1708w"\n sizes="(max-width: 1600px) 100vw, 1600px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}})),"\n",s.createElement(n.h2,{id:"3-value-of-design-systems",style:{position:"relative"}},s.createElement(n.a,{href:"#3-value-of-design-systems","aria-label":"3 value of design systems permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3. Value of design systems"),"\n",s.createElement(n.p,null,"Design systems and their active usage in the design and development process\nbring value to several different levels."),"\n",s.createElement(n.p,null,"Since design systems ensure consistency of interfaces and coherency of design\nacross a whole application or a range of one-brand products, they bring value\nto a user by increasing their productivity and effectiveness when working with\na web application (Simpson, 1999 & Saarinen, 2016)."),"\n",s.createElement(n.p,null,"From the management perspective, design systems provide âlingua francaâ â a\nshared language to be used and help with in-team and cross-teams collaboration.\nIn the teams that adopt design systems, meetings tend to be shorter and more\nproductive (Grundhoefer, 2016). Usage of design systems also makes âwork\nsmarter not harderâ (Grundhoefer, 2016) so that suitable design can be provided\nand implemented the first time and not through many iterations."),"\n",s.createElement(n.p,null,"For the developers, component libraries as elements of design systems ensure\ncode reuse and thus increase the overall quality of the product. They also\nreduce the time needed for implementing new designs."),"\n",s.createElement(n.p,null,"For the designers, design systems define the skeleton of the work on both\nabstract and practical levels. They give tools and processes for systematic\ndesign, ensure design coherency, serve for documenting design solutions,\nguarantee end quality of design implementation and make possible to focus on\n",s.createElement(n.em,null,"solving business problems"),"."),"\n",s.createElement(n.h2,{id:"conclusion",style:{position:"relative"}}
1,s.createElement(n.a,{href:"#conclusion","aria-label":"conclusion permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Conclusion"),"\n",s.createElement(n.p,null,"This article observed the representation of the concept of design systems in\nacademic and popular sources. It demonstrated the large inconsistency of the\nterms used in the domain, summarized and explained the subconcepts introduced\nby different authors. According to this summary, design systems are a\nmethodological concept which includes effective teams processes and tooling.\nThey contain visual language, documentation, patterns, and components in their\nlibraries and a major of guidelines."),"\n",s.createElement(n.p,null,"The value of design systems, proven and outlined by many authors, was\nrepresented from different perspectives: of a user, of a manager, of a\ndeveloper and of a designer."),"\n",s.createElement(n.p,null,"As a yet evolving concept, design systems can change their shape in near\nfuture. In this regard, the provided summary is not final and requires\nre-visiting if new interpretations appear. However, at the moment, it seems\nmore interesting to elaborate on the nature of design systems building blocks\nand study their practical application by different teams working on different\nproducts."),"\n",s.createElement(n.h2,{id:"references",style:{position:"relative"}},s.createElement(n.a,{href:"#references","aria-label":"references permalink",className:"anchor before"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"References"),"\n",s.createElement(n.p,null,"Baldwin, N. (2016). Anatomy of a Design System. Product Hive online blog. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5"},"https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Baskanderi, N. (2018). How to Build a Design System with a Small Team. freeCodeCamp, online community. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac"},"https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Braga, G. (2017). Pattern library, Style guides, Design Systems. Do you need one? Prototypr online blog. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://blog.prototypr.io/pattern-library-style-guides-design-systems-do-you-need-one-b7857af0f255"},"https://blog.prototypr.io/pattern-library-style-guides-design-systems-do-you-need-one-b7857af0f255")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Carbon Design System for IBM Cloud products (2018). ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"http://carbondesignsystem.com/"},"http://carbondesignsystem.com/")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Fanguy, W. (2017). A comprehensive guide to design systems. InVision design blog. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://www.invisionapp.com/blog/guide-to-design-systems/"},"https://www.invisionapp.com/blog/guide-to-design-systems/")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Federman, S. (2017). Distilling How We Think About Design Systems. Design Systems Publications. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9"},"https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Grainer, S. (2017). Design Systems, Style Guides, and Pattern Libraries: Oh My! UXcellence journal. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries"},"https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Granlund., AÌ, LafrenieÌre D. and Carr, D. (2001). A Pattern-Supported Approach to the User Interface Design Process. Proceedings of HCI International 2001 9th International Conference on Human-Computer Interaction, August 5-10, 2001, New Orleans, USA."),"\n",s.createElement(n.p,null,"Grundhoefer, A. (2016). Design Systems: Enterprise UX Evolution. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://speakerdeck.com/annegrundhoefer/design-systems-enterprise-ux-evolution"},"https://speakerdeck.com/annegrundhoefer/design-systems-enterprise-ux-evolution")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Kholmatova, A. (2017). Design Systems. A practical guide to creating design languages for digital products. Freiburg, Germany: Smashing Media AG."),"\n",s.createElement(n.p,null,"Lopes, M. (2017). Setup a design system. Prototypr online blog. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://blog.prototypr.io/design-system-ac88c6740f53"},"https://blog.prototypr.io/design-system-ac88c6740f53")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Robson, S. (2016). Styleguides, Pattern Libraries and Design Languages. Medium blog. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://medium.com/@sturobson/styleguides-pattern-libraries-and-design-languages-84746902c51c"},"https://medium.com/@sturobson/styleguides-pattern-libraries-and-design-languages-84746902c51c")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Rutherford, Z. (2017). Design Systems vs. Pattern Libraries vs. Style Guides â Whatâs the Difference? Studio by UxPin design blog. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/"},"https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Saarinen, K. (2016). Building a Visual Language. AirBNB Design, online portal.",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://airbnb.design/building-a-v
1isual-language/"},"https://airbnb.design/building-a-visual-language/")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."),"\n",s.createElement(n.p,null,"Simpson, N. (1999). Managing the use of style guides in an organisational setting: practical lessons in ensuring UI consistency. Interacting with Computers 11 (1999) 323â351."),"\n",s.createElement(n.p,null,"Suarez, M., Anne, J., Sylor-Miller, K., Mounter, D., and Stanfield, R. (2017). Design Systems Handbook. DesignBetter.Co, online journal. ",s.createElement(n.a,{href:".zero"},"online"),"\nAvailable at: ",s.createElement(n.a,{href:"https://www.designbetter.co/design-systems-handbook"},"https://www.designbetter.co/design-systems-handbook")," ",s.createElement(n.a,{href:".zero"},"Accessed 27 March 2018"),"\n."))}var r=function(e={}){const{wrapper:n}=Object.assign({},(0,a.RP)(),e.components);return n?s.createElement(n,e,s.createElement(i,e)):i(e)};var o=t(5556),l=t.n(o),c=t(3433),d=t(9868),m=t(7037),p=t(3928),h=t(4449);const g={Box:c.a,Button:d.$,Text:m.E,Heading:p.DZ,Paragraph:p.fz,PatternJourney:p.Rl,PureHtml:p.Qi,Section:p.wn,Hero:p.lq,Widget:p.x0,PatternJourney:p.Rl,WidgetContainer:p.uM,Workshop:p.cR,ProjectRoles:p.JV,DsAspects:p.nD,Link:p.N_,Image:p._V,ImageBlock:p.Dq,Map:p.T5,YandexImage:p.zX,Instagram:p.pd},u=e=>({children:n})=>s.createElement(p.DZ,{level:e},n),A={h1:u(1),h2:u(2),h3:u(3),h4:u(4),h5:u(5),h6:u(6),p:({children:e})=>s.createElement(p.fz,{standout:!0},e),a:p.N_,ul:p.Ul,ol:p.Ol,div:({"data-excerpt":e,children:n,...t})=>e?s.createElement(p.fz,{as:"div",lead:!0},n):s.createElement("div",t,n)};A.h1.propTypes={children:l().node};const f=({data:{mdx:e,site:{siteMetadata:{siteUrl:n}}},children:t,pageContext:{next:i,prev:r,fileSourceUrl:o}})=>{const{readingTime:l,slug:d,disqusIdentifier:m}=e.fields,{date:u,title:f,subTitle:b,cover:y,tumblr:v}=e.frontmatter,w=e.frontmatter.tags&&e.frontmatter.tags.split(","),E=d.startsWith("blog/");return e?s.createElement(p.PE,null,s.createElement(p.I0,{imageUrl:y&&y.childImageSharp.gatsbyImageData.images.fallback.src,tags:w,date:u,readingTime:E&&parseInt(l.minutes)>0?`${Math.round(l.minutes).toFixed(1)} min read`:null,title:f,subTitle:b}),s.createElement(p.G$,{data:e}),s.createElement(c.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},s.createElement(a.xA,{components:{...A,...g}},t),s.createElement(c.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},w&&w.length>0&&w.map(e=>s.createElement(p.vw,{key:e,name:e.trim(),slug:(0,h.fX)(e),margin:"xsmall"}))),E&&s.createElement(s.Fragment,null,s.createElement(p.WB,{flex:!1,prevSlug:r&&`/${r.fields.slug}`,nextSlug:i&&`/${i.fields.slug}`,prevTitle:r&&r.frontmatter.title,nextTitle:i&&i.frontmatter.title,pad:{vertical:"medium"}}),s.createElement(p.Sn,{link:o}),s.createElement(p.Hw,{slug:d,title:f,disqusIdentifier:m,tumblr:v,siteUrl:n})))):null};function b(e){return s.createElement(f,e,s.createElement(r,e))}},8453:function(e,n,t){t.d(n,{RP:function(){return i},xA:function(){return o}});var a=t(6540);const s=a.createContext({});function i(e){const n=a.useContext(s);return a.useMemo(()=>"function"==typeof e?e(n):{...n,...e},[n,e])}const r={};function o({components:e,children:n,disableParentContext:t}){let o;return o=t?"function"==typeof e?e({}):e||r:i(e),a.createElement(s.Provider,{value:o},n)}}}]); 2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-testpost-index-md-f5f68b2fb1e1dadb29ae.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.