{"id":36605,"date":"2022-09-14T03:45:37","date_gmt":"2022-09-14T10:45:37","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36605"},"modified":"2022-09-21T06:18:39","modified_gmt":"2022-09-21T13:18:39","slug":"design-system-glossary","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/","title":{"rendered":"Design System Glossary \u2013 34 Powerful Terms You Should Know"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary-1024x512.png\" alt=\"Design system glossary\" class=\"wp-image-36606\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Design systems can be very confusing and complicated if you don\u2019t fully understand the terminology associated with them. It\u2019s important for designers and developers alike to be on the same page for the most effective communication efforts.&nbsp;<\/p>\n\n\n\n<p>For this reason, we have comprised some key terms along with associated applications and examples to provide a clearer understanding of design systems.<\/p>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>List of Design System Definitions<\/h2><ul><li><a href=\"#h-design-system\" data-level=\"2\">Design System\u00a0<\/a><\/li><li><a href=\"#h-components\" data-level=\"2\">Components\u00a0<\/a><\/li><li><a href=\"#h-design-system-principles\" data-level=\"2\">Design System Principles\u00a0<\/a><\/li><li><a href=\"#h-single-source-of-truth\" data-level=\"2\">Single Source of Truth<\/a><\/li><li><a href=\"#h-prototypes\" data-level=\"2\">Prototypes\u00a0<\/a><\/li><li><a href=\"#h-component-library\" data-level=\"2\">Component Library\u00a0<\/a><\/li><li><a href=\"#h-material-design\" data-level=\"2\">Material Design\u00a0<\/a><\/li><li><a href=\"#h-usability\" data-level=\"2\">Usability\u00a0<\/a><\/li><li><a href=\"#h-typography\" data-level=\"2\">Typography\u00a0<\/a><\/li><li><a href=\"#h-icons\" data-level=\"2\">Icons<\/a><\/li><li><a href=\"#h-spacing\" data-level=\"2\">Spacing\u00a0<\/a><\/li><li><a href=\"#h-grids\" data-level=\"2\">Grids<\/a><\/li><li><a href=\"#h-style-guide\" data-level=\"2\">Style Guide\u00a0<\/a><\/li><li><a href=\"#h-ui-kit\" data-level=\"2\">UI Kit\u00a0<\/a><\/li><li><a href=\"#h-ui-patterns\" data-level=\"2\">UI Patterns\u00a0<\/a><\/li><li><a href=\"#h-properties\" data-level=\"2\">Properties\u00a0<\/a><\/li><li><a href=\"#h-pilot\" data-level=\"2\">Pilot<\/a><\/li><li><a href=\"#h-tokens-and-variables\" data-level=\"2\">Tokens and Variables\u00a0<\/a><\/li><li><a href=\"#h-classes\" data-level=\"2\">Classes\u00a0<\/a><\/li><li><a href=\"#h-binding\" data-level=\"2\">Binding\u00a0<\/a><\/li><li><a href=\"#h-slots\" data-level=\"2\">Slots\u00a0<\/a><\/li><li><a href=\"#h-events\" data-level=\"2\">Events\u00a0<\/a><\/li><li><a href=\"#h-framework\" data-level=\"2\">Framework\u00a0<\/a><\/li><li><a href=\"#h-reference-site\" data-level=\"2\">Reference Site<\/a><\/li><li><a href=\"#h-design-system-governance\" data-level=\"2\">Design System Governance\u00a0<\/a><\/li><li><a href=\"#h-design-system-graveyard\" data-level=\"2\">Design System Graveyard\u00a0<\/a><\/li><li><a href=\"#h-css-modules\" data-level=\"2\">CSS Modules<\/a><\/li><li><a href=\"#h-storybook\" data-level=\"2\">Storybook<\/a><\/li><li><a href=\"#h-design-system-maturity\" data-level=\"2\">Design system maturity<\/a><\/li><li><a href=\"#h-atomic-design\" data-level=\"2\">Atomic design<\/a><\/li><li><a href=\"#h-atom\" data-level=\"2\">Atom<\/a><\/li><li><a href=\"#h-molecule\" data-level=\"2\">Molecule<\/a><\/li><li><a href=\"#h-organism\" data-level=\"2\">Organism<\/a><\/li><li><a href=\"#h-repository\" data-level=\"2\">Repository<\/a><\/li><li><a href=\"#h-npm-package\" data-level=\"2\">NPM Package<\/a><\/li><\/ul><\/div>\n\n\n\n<p>UXPin helps you build interactive prototypes and manage design systems like no other prototyping tool in the market. Build consistent interfaces 10x faster and speed up development that stays in line with your designs. Manage a complete library of interactive elements in UXPin Merge. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Find out more about it<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-system\">Design System\u00a0<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A design system is a set of standards, best practices, components, and rules that define a design project&#8217;s approach to creating websites in a certain style or brand identity. A style guide, for example, is often included as part of the design system. A pattern library of samples and the real assets \u2013 fonts, images, CSS frameworks, JavaScript libraries, and so on \u2013 all components needed to complete the final product.<\/p>\n\n\n\n<p><strong>Application:<\/strong> Front-end developers and designers use these to replicate designs through pre designed components and elements. The elements can be repeated and reused, which saves teams a ton of extra time. By including guidelines within these systems, some entry-level designers may find them as useful educational references.<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/material.io\/design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Material Design,<\/a> <a href=\"https:\/\/atlassian.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Atlassian Design System,<\/a> and other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system examples<\/a>.<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comprehensive guide on Creating a Design System<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/create-design-system-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">eBook on building Design Systems quickly<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-rodmap\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to create a design system roadmap?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems in UXPin<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Enterprise Design System \u2013 How to Build and Scale Webinar\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/in4axiKk-uE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-components\">Components&nbsp;<\/h2>\n\n\n\n<p><strong>Definition:<\/strong> Components are the building blocks of a design system. They can be small (e.g., buttons, icons) or large (e.g., navigation systems, carousels). A core aspect of components is that they&#8217;re designed to be as simple yet as flexible as possible so that they can be used in multiple instances.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Companies use\/reuse components to create patterns within their systems and to improve user experiences. Overall, components improve the quality and effectiveness of workflows. Many design systems will have component libraries that help designers and developers share UI elements that have interactivity and responsiveness build into them.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\">buttons<\/a>, footer, <a href=\"https:\/\/www.uxpin.com\/examples\/carousel\" target=\"_blank\" rel=\"noreferrer noopener\">carousel<\/a>, etc.<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is component-driven prototyping?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mui\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI components<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top 5 UI Components in Atomic Design<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/unleashing-the-full-potential-of-components-in-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Supercharging UI components in UXPin<\/a><\/li><li><a href=\"https:\/\/www.linkedin.com\/learning\/uxpin-for-ux-design-2\" target=\"_blank\" rel=\"noreferrer noopener\">Creating UI components in UXPin<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Design To React Code Components\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/PsxwVAjMtqI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-system-principles\">Design System Principles\u00a0<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A design system requires a governing model that acts as a set of rules. These are required to manage all components within a project. They might pertain to visual design (e.g., animation, colors, typeface) or refer to a more complicated aspect of a project, like the personality or style of the branding or writing.<\/p>\n\n\n\n<p><strong>Application: <\/strong>These act as guidance for decision-making processes through preset standards to be followed throughout a design system. They help keep design teams on track and moving in a consistent direction. Teams commonly follow them for advice on how to achieve goals. An effective foundation will provide a clear framework for the team&#8217;s ideal system.\u00a0<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-principles-of-success\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design System Principles<\/a><\/li><li><a href=\"https:\/\/designsystem.digital.gov\/design-principles\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">USWDS Principles<\/a><\/li><li><a href=\"https:\/\/uxdesign.cc\/defining-design-system-principles-69e4790b95b0\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">UX Design Principles<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-single-source-of-truth\">Single Source of Truth<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A single source of truth is a reference point between designers and developers that help them make their product consistent. Design systems, or particularly component libraries serve as a great single source of truth that product designers, product managers, and devlopers can use when building products.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Teams that struggle with removing silos, front-end UI debt or misalignment can develop a single source of truth as the first attempt to bring the whole team closer. They start with building coded UI component library that they can share across the whole product development process.\u00a0<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is a single source of truth?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/teampassword-uxpin-merge-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">TeamPassword&#8217;s struggle to consistency<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prototypes\">Prototypes\u00a0<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A prototype refers to a sample version of a product (or its specific aspect), used by designers to test the solution out before launch. It is used to test or de-risk ideas, simulate the final product, address any assumptions, and eliminate concerns towards any other elements of its conception quickly and inexpensively. This allows the designer\/s to work on the project, making modifications or adjustments in direction on the end goal if necessary.<\/p>\n\n\n\n<p><strong>Application:<\/strong> Designers will commonly use prototypes to test their product and gain user feedback during an initial trial period prior to an official launch taking place. This helps them save money by testing the product for inefficiencies, which saves time and resources in the long run.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\">high-fidelity prototypes vs. low-fidelity prototypes<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-shouldnt-neglect-mockups\/\">mockups<\/a><\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">eBook The Ultimate Guide to Prototyping<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is a prototype? A guide to functional UI<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advanced-prototyping-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">What can help you create interactive prototypes?<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-component-library\">Component Library&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\">component library<\/a> is a collection of UI components that can be reused across multiple projects. It typically includes code, documentation, and guidelines on how and when to use each component.<\/p>\n\n\n\n<p><strong>Application:<\/strong> Component libraries help ensure effective communication and collaboration between teams. They provide a quick access point for reference guides and stored, reusable components. Front-end developers can use these to help reduce cross-browser and cross-device incompatibility. In addition, component libraries eliminate the need to convert design to code, which lowers code duplication.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/\">MUI component library<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/integrate-with-ant-design-npm\/\">Ant Design component library<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\">Bootstrap component library<\/a>,<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-frameworks-build-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook frameworks you can use to build component libraries<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">React component libraries to use<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/rapid-development-process-paypal\/\" target=\"_blank\" rel=\"noreferrer noopener\">PayPal&#8217;s prototyping process with components<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Live Prototyping Session: Scale Up Your Design with PayPal\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/39c6InzDky4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-material-design\">Material Design&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Material Design is a visual language that Google developed in 2014. It&#8217;s based on the principles of how materials exist and interact in the physical world. Many companies have since adopted Material Design as their design system of choice.<\/p>\n\n\n\n<p>The language aids in the development of digital experiences for platforms like Android OS, iOS, Flutter, and websites. The structure makes the technique for creating components such as grid-based layouts, animations and transitions, padding, responsive compositions, dimensional depth effects, and more straightforward.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Material Design is used by designers to optimize the user experience through 3D effects and lighting\/animation features in GUIs. The approach helps eliminate confusion among users and provides consistency. For designs, it\u2019s a key feature for animations and getting feedback on graphics.\u00a0<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/material-design-ui-kit\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Material Design UI kit<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Motion and interactions in Material Design<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/material-design-rules\/\" target=\"_blank\" rel=\"noreferrer noopener\">Rules of Material Design<\/a><\/li><li><a href=\"https:\/\/material.io\/design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Design Library<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Design Language\u00a0<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A design language is a set of rules, guidelines, and best practices that govern the design of a product. A strong design language will make a product more consistent, cohesive, and easy to use. It also defines the overall visual identity of a brand.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Design language helps teams follow a specific set of rules and methodologies. It makes the design process run smoothly without inconsistencies or unnecessary confusion. By creating a set of standards to follow, users can feel more comfortable navigating designs that feel familiar to them.\u00a0<\/p>\n\n\n\n<p><strong>Example:<\/strong> Apple&#8217;s human interface guidelines are a design language that governs the design of all their products.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-usability\">Usability&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Usability measures how easy it is for users to accomplish their goals when using a product. A product with good usability is tested through five criteria \u2013 learnability (i.e., a soft learning curve), efficiency, satisfaction (how satisfied users are after interacting with it), memorability, and the number of errors users make.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/screens-process-lo-fi-to-hi-fi-mobile-1.png\" alt=\"screens process lo fi to hi fi mobile 1\" class=\"wp-image-35474\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/screens-process-lo-fi-to-hi-fi-mobile-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/screens-process-lo-fi-to-hi-fi-mobile-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application: <\/strong>Usability helps designers and developers measure how well they are adhering to the needs of their users. It is an approach that assesses the effectiveness, efficiency, and appropriateness of a system and helps to identify how easily users will be able to solve any potential problems on their own.\u00a0<\/p>\n\n\n\n<p><strong>Related terms:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">10 usability heuristics<\/a><\/li><li><a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/usability\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">What is usability?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-run-an-insightful-usability-test\/\" target=\"_blank\" rel=\"noreferrer noopener\">Basics of usability tests<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-typography\">Typography&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Typography refers to the practice of arranging type (letters and text) to ensure the copy is clear, aesthetically attractive, and supports the content and design. Variables within typography include font size and style, as well as spacing and the length of copy on a line and page.&nbsp;<\/p>\n\n\n\n<p>Good typography should be invisible\u2014the user should be able to focus on the content, not the typeface.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Good typography carries a myriad of benefits for designers and developers. It is perhaps one of the most important elements of a design system and helps communicate things like tone, sentiment, and the overall message. Typography will typically be used to draw a reader in while providing legibility.\u00a0<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-typography-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">The web typography checklist<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-typography-tips-for-designers-how-to-make-fonts-speak\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typography tips for product designers<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-local-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Using local fonts in UXPin<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-icons\">Icons<\/h2>\n\n\n\n<p><strong>Definition:<\/strong> Icons are visual symbols that represent a concept, action, or object. They can be used to help users navigate a product or to provide additional information about a particular element on the screen.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Designers use icons to help users quickly navigate through a system with graphical representations. Icons are a great tool because they help free up space for other things since they\u2019re typically quite small. They\u2019re also an ideal tool for marketing efforts to add visual appeal.&nbsp;<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design Icons<\/a> <\/p>\n\n\n\n<p><strong>Related terms:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-app-icon-design-tips\/\" target=\"_blank\" rel=\"noreferrer noopener\">Icon design tips<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/implement-icons-library-for-design-system\" target=\"_blank\" rel=\"noreferrer noopener\">Icon libraries in design system<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-spacing\">Spacing&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Spacing is the use of empty space to separate elements on a page. Good spacing can make a product more legible and easier to use. Spacing can be implemented across all aspects of a product, from the margins and gutters to the spacing between lines of text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/lo-fi-prototyping-wireframe_1.png\" alt=\"lo fi prototyping wireframe 1\" class=\"wp-image-32258\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/lo-fi-prototyping-wireframe_1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/lo-fi-prototyping-wireframe_1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application: <\/strong>Clear and concise spacing helps developers and designers maintain an aesthetically pleasing atmosphere for users. Spacing is typically very deliberate in the way that it is placed throughout a system. It allows for things like optimal readability, consistency, and harmony across a design system.\u00a0<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-grids\">Grids<\/h2>\n\n\n\n<p><strong>Definition:<\/strong> Grids are a system for organizing content on a page. They can be used to create structure and hierarchy or to divide a page into sections. Grids can be implemented in various ways, from simple columns to more complex multi-column layouts.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Grids help designers develop a user-friendly system that\u2019s low-cost and provides consistency across multiple devices. Grids are typically designed in one spot then reproduced in other areas of a design system. Overall, they\u2019re a great tool for designers to use for organizing information and providing precision.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-style-guide\">Style Guide&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A style guide is a document that outlines the rules and guidelines for the design of a product. It includes information on typography, color, iconography, and more. A style guide is an essential tool for maintaining consistency across a product. It\u2019s a must-have if you&#8217;re working on a design system.&nbsp;<\/p>\n\n\n\n<p><strong>Application:<\/strong> Style guides are generally used for entire teams to work together more cohesively. It allows designers, project managers, and developers to stay on the same page with project expectations. In addition, teams can utilize style guides to quickly transition new hires and get them up to speed with a particular project.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/www.wix.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WIx Style Guide<\/a><\/p>\n\n\n\n<p><strong>Related resources<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">Style guide vs. design system, etc<\/a>.<\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to go from style guide to interactive design system<\/a><\/li><li><a href=\"http:\/\/styleguides.io\/examples.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Style Guides.io<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Interactive Design Systems: Webinar with Johnson &amp; Johnson\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/gnSv_nNBtyg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ui-kit\">UI Kit&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A UI Kit is a collection of graphical user interface (GUI) elements that can be reused in digital products. A UI Kit typically includes buttons, icons, input fields, and other basic elements that can be used to build user interfaces.<\/p>\n\n\n\n<p>UI kits usually come from companies or design teams who want to share their work with others. They can be a great starting point for new projects or a way to speed up the development of an existing project.<\/p>\n\n\n\n<p><strong>Application:<\/strong> Most commonly, UI kits have two primary uses, which include prototyping and mobile and website design. They\u2019re especially useful for rapid prototyping where design functions are shared with developers, stakeholders and designers while a design is still in production. UI kits are especially useful for designers with no coding experience.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/developer.apple.com\/design\/resources\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Apple UI Design Kit,<\/a> <a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/apps\/design\/downloads\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Microsoft UWP<\/a><\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/why-using-a-ui-kit-in-uxpin-will-make-your-life-easier\/\" target=\"_blank\" rel=\"noreferrer noopener\">Using UI kit in UXPin<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create mockups faster with UI kit<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ui-patterns\">UI Patterns\u00a0<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Patterns are recurring solutions to common problems. They can be used to solve design challenges in a variety of ways, from layout to interaction. Within most design projects, patterns will be used to help with the structure and flow of the product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/scaling-prototyping.png\" alt=\"scaling prototyping\" class=\"wp-image-34095\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/scaling-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/scaling-prototyping-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application:<\/strong>\u00a0 Patterns are commonly used for better consistency and for saving time by helping a team run more efficiently. By producing design patterns that are familiar to users, a team\u2019s message and overall goal can be better focused on. Patterns make coming to decisions much easier due to the predictability that they bring.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong>color, font, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/navigation-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">navigation patterns<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/\" target=\"_blank\" rel=\"noreferrer noopener\">control patterns<\/a>, interactions\u00a0<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is a pattern library?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-form-design-best-practices-5-useful-ui-patterns-2\/\">Useful UI Patterns<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-properties\">Properties&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Properties are the characteristics of an element that define its appearance and behavior. In CSS, for example, properties include things like color, font size, and margin. In HTML, this could be used to make an element bold, italic, or a certain color.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Some designers can find benefits from visual properties such as image-rendering, drop-shadows, border-radius cascading style sheets (CSS), or linear gradient to help improve design tasks. They might also use properties (like bold or italics) to emphasize a set of text, so users can quickly identify keywords.\u00a0<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/uxdesign.cc\/why-component-properties-will-save-your-design-system-22323edc950e\">Component Properties<\/a><\/li><li><a href=\"https:\/\/arunrajeevan.medium.com\/difference-between-attribute-and-property-in-html-world-70de9b7fb25c\">HTML Attributes vs. Properties<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-pilot\">Pilot<\/h2>\n\n\n\n<p><strong>Definition:<\/strong> \u200b\u200bA pilot is a miniature, self-contained version of a larger project. Pilots are often used to test new ideas or approaches before investing in a full-scale implementation.<\/p>\n\n\n\n<p>They can be a great way to get feedback on a design system before committing to a full rollout and will typically be used by a smaller team or group of users.<\/p>\n\n\n\n<p><strong>Application: <\/strong>A developer might put together a testing group for a new video game that has yet to be released. They will allow the group to offer feedback for the game and offer any helpful suggestions for improvements. Pilot projects are a great way to identify mistakes and mitigate risk prior to an official launch.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tokens-and-variables\">Tokens and Variables&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Tokens and variables are used to store values that can be reused throughout a product. In CSS, for example, variables can be used to store colors, sizes, and spacing values. Tokens and variables can be a great way to maintain consistency across a product.<\/p>\n\n\n\n<p>They can also make it easier to make changes to a product since you can update the values in one place and have those changes propagate throughout the solution.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Tokens and variables are helpful for designers who are looking to make an update to their system or put together an entirely new project. They\u2019re also helpful for maintaining future updates and managing a system that spreads across multiple platforms. For those using Material Design, tokens are optimal for features like dynamic color.<\/p>\n\n\n\n<p><strong>Related terms:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\">What are design tokens?<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-classes\">Classes&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Classes are used to group elements together. HTML elements, for instance, can be grouped together by their class attribute. Classes can be used to create reusable components or to apply styles to multiple elements.<\/p>\n\n\n\n<p>You could create a class for all of the buttons on your site. This would allow you to style all of the buttons in the same way and make it easy to update the styling if you want to change it in the future.<\/p>\n\n\n\n<p><strong>Application:<\/strong> By classifying certain elements on a site, designers can ensure that similar tasks are simplified in the future. This, in turn, saves time by making future updates quicker. In design software, designers can quickly group elements through a keyboard shortcut to optimize future processes.\u00a0<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-binding\">Binding&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Binding is the process of connecting an element to data. In HTML elements can be bound to data using the data-* attributes. This allows the element to display the data in a specific way.<\/p>\n\n\n\n<p>Binding is a powerful way to create dynamic and interactive user interfaces. It can be used to build things like data tables, form controls, and charts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/code-design-developer.png\" alt=\"code design developer\" class=\"wp-image-35038\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/code-design-developer.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/code-design-developer-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application: <\/strong>Binding is commonly useful by front-end developers to link components to variables. This can also be done by linking variables to components, which is also referred to as to-way-data-binding. Some developers will use binding techniques to link a user interface and the data that it shows.<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-based-design-without-learning-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to become a code-based designer?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-engineer-vs-ux-designer\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX designer vs UX engineer<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-slots\">Slots&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Slots are used to insert content into a component. They are a great way to reuse components and to make sure that your content is always up-to-date. Among others, by using slots you could create a slot for your site&#8217;s navigation and insert the latest links into it whenever the content is updated.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Slot components help product designers by customizing certain components to save time with their designs. They help reduce the complexity of projects in order to make them more flexible. Many choose customized design system libraries with slot components, for example.<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\">How to use UXPin Merge?<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-events\">Events&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Events are used to trigger actions in a product. HTML elements, for instance, can be given event attributes that will cause them to respond to user input. They are a powerful way to create interactive user interfaces and be used to trigger things like modals, forms, and navigation.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Events have a variety of applications, such as marking the start and end of a visitor session, obtaining visitor profile data, and changing a visitor audience level. Many applications allow users to access an events summary via a system dashboard. This report can usually be filtered to show most relevant data.\u00a0<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-framework\">Framework&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A framework is a collection of code that can be reused to build software products. They can include aspects of a project like libraries, tools, and best practices.<\/p>\n\n\n\n<p>Frameworks can be a great way to speed up the development of a product. They can also make it easier to maintain a product over time. They are helpful for both small projects and large enterprise applications.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/collaboration-team-prototyping.png\" alt=\"collaboration team prototyping\" class=\"wp-image-34016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/collaboration-team-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/collaboration-team-prototyping-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application:<\/strong> Teams will commonly use frameworks to facilitate an in-depth analysis of certain issues and come up with a plan of how to take prompt action. Frameworks are an important part of any design system because they allow users to identify new insights at any given point in a design process.\u00a0<\/p>\n\n\n\n<p><strong>Related terms:\u00a0<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/vue-react-angular-framework-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular, React and Vue frameworks<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-frameworks-build-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook frameworks<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\">Code-based prototyping in UXPin<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-reference-site\">Reference Site<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A reference site is a website that provides information about a specific topic. You can use it to learn about new technologies or to find solutions to common problems.<\/p>\n\n\n\n<p>Reference sites can be a great way to get started with a new technology or to troubleshoot an issue. They can also be an excellent resource for finding more information about a topic.<\/p>\n\n\n\n<p>When designing a product or service, most teams will develop a reference site to ensure that everyone is using the same terminology, components, and processes.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Reference sites are usually the first touchpoint for someone looking for a specific design system. These are posted by teams to make important information accessible in one centralized location. These generally include a component library along with a set of guidelines.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-system-governance\">Design System Governance&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Design system governance is the process of managing and maintaining a design system. This includes things like setting up standards, creating documentation, and enforcing rules.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Design system governance is important for preparing a system for change. It ensures that everyone is following the same standards. Governance is key to managing requests and keeping track of decisions. For this reason, many teams use it for better collaboration efforts and contributions.\u00a0<\/p>\n\n\n\n<p>Related resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/adopting-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design system advocacy<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-system-graveyard\">Design System Graveyard&nbsp;<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A design system graveyard is a collection of abandoned or outdated design systems. This can be a great resource for learning what not to do when creating a design system. When a design system is no longer being used or maintained, it is said to have been &#8220;put to rest&#8221; in the design system graveyard. This is usually because the product or service that it was created for has been discontinued or because the team has moved on to a new system.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-2.png\" alt=\"design system 2\" class=\"wp-image-34947\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-2-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application: <\/strong>Designers and Developers can benefit from the design system graveyard by studying it and educating their teams on what not to do if they want to keep their system afloat. Some also find it effective to utilize the graveyard to construct alternative designs from abandoned data.&nbsp;<\/p>\n\n\n\n<p><strong>Examples:<\/strong> <a href=\"https:\/\/www.gwern.net\/Design-graveyard\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Gwern &#8211; Design Graveyard,<\/a> <a href=\"https:\/\/fuzzymath.com\/blog\/design-graveyard\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">5 UX Designs That Died\u00a0<\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-css-modules\">CSS Modules<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>CSS Modules are CSS files which define, by default, animation and class names. By using CSS modules, you ensure that your CSS code is consistent across projects.<\/p>\n\n\n\n<p>They are a great way to manage CSS in large projects. They can also be used to create reusable components that can be applied across multiple projects.<\/p>\n\n\n\n<p><strong>Application: <\/strong>CSS modules are commonly used to build element styles more granularly. They help developers write more legible, maintainable code and are ideal for situations where application styles are expanding. When they expand, the likelihood of two classes ending up with identical or similar names increases, so these modules help developers combat this issue.<\/p>\n\n\n\n<p><strong>Related terms:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/custom-styles-use-css-to-style-elements-in-uxpin\/\">Use CSS to Style Elements in UXPin<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-storybook\">Storybook<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Storybook<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Storybook is an open-sourced tool that can be used to develop and test UI components. It allows for the creation of isolated environments for each component. The software can be used to generate static documentation for a component library.<\/p>\n\n\n\n<p>Storybook lets designers test out different variations of a component to see what works best. It also offers the ability to generate documentation for a design system.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Storybook helps designers and developers collaborate more cohesively. It\u2019s used to locate inconsistencies through connecting common tools that designers use with the different tools that developers use. For example, Storybook connects components of JavaScript with (e.g., React) with prototyping tools like UXPin. Even more, the platform allows for UI review and feedback to be in one centralized location.\u00a0<\/p>\n\n\n\n<p><strong><br>Related terms:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/review-uxpin-storybook-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook and UXPin Merge integration<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-best-practices-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook best practices<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook examples<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener\">Import components with Storybook<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-args-story\/\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Args<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Design with code: UXPin and Storybook Integration\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/WXgUfZLCPfE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-system-maturity\">Design system maturity<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Also known as a design system maturity model, this refers to the way to measure the progress of a design system. It can be used to track the development of a system and to identify areas that need improvement.<\/p>\n\n\n\n<p>There are four stages of design system maturity: initial, foundational, comprehensive, and integrated. Each stage has its own challenges and characteristics. These include;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Stage one \u2013 Style guides.<\/li><li>Stage two \u2013 HTML &amp; CSS.<\/li><li>Stage three \u2013 Design &amp; code components.<\/li><li>Stage four \u2013 Fully integrated.<\/li><\/ul>\n\n\n\n<p><strong>Application: <\/strong>Design system maturity models are commonly used by companies to help them follow a more cohesive, consistent system. Their effectiveness vastly outweighs traditional models; therefore, they reap more promising results. The models help teams handoff a design with ease knowing everyone is on the same page, and, for this reason, it is especially useful for designers and engineers alike.&nbsp;<\/p>\n\n\n\n<p><strong>Examples:<\/strong> <a href=\"https:\/\/sparkbox.com\/foundry\/design_system_maturity_model#:~:text=These%20teams%20create%20product%20roadmaps,consistent%20experiences%20for%20their%20users.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Design System Maturity Model<\/a><\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/iress-design-tool-review\/\">How Iress managed to increase their maturity?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/track-designops-maturity\/\" target=\"_blank\" rel=\"noreferrer noopener\">Checklist to track design system maturity<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Design System Maturity<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-atomic-design\">Atomic design<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Atomic Design is a design system methodology, which is based on the idea of modularity and reuse. Atomic Design is made up of five stages \u2013 atoms, molecules, organisms, templates, and pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components-1.png\" alt=\"design system atomic library components 1\" class=\"wp-image-34937\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application: <\/strong>One of the best uses for atomic design is gaining the ability to seamlessly switch between abstract to concrete. It allows users to switch and see their interfaces broken down to their atomic elements. Furthermore, atomic design breaks down the process of combining those elements to reach a final experience.&nbsp;<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/atomicdesign.bradfrost.com\/chapter-2\/\">Atomic Design Methodology,<\/a> <a href=\"https:\/\/andela.com\/insights\/structuring-your-react-application-atomic-design-principles\/\">Andela &#8211; Atomic Design Principles<\/a><\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\">Atomic design<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-atomic-design-improve-ab-testing\/\">How to use atomic design in A\/B testing?<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\">Atomic design system checklist<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-atom\">Atom<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>An atom is a design model that refers to the smallest unit of a system. In other words, it is the most basic building block. All atoms have the same structure and cannot be divided into smaller parts. Design-wise, this could refer to a simple component like a button or a form field.<\/p>\n\n\n\n<p><strong>Application:&nbsp; <\/strong>Atoms help designers and developers break down components into their smallest form (e.g., button). They can be matched with other components to form things like molecules or organisms (see below). They\u2019re ideal for combining into molecules to make web pages.&nbsp;<\/p>\n\n\n\n<p><strong>Examples: <\/strong>buttons, inputs, labels<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-molecule\">Molecule<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A molecule is a design model that refers to a group of atoms that are bonded together. Molecules are slightly more complex than atoms but still considered basic building blocks. A step up from atoms, a molecule could be a button with an icon or a group of form fields.<\/p>\n\n\n\n<p><strong>Application: <\/strong>Molecules help teams build more complex structures out of existing atoms. For example, a profile molecule would be comprised of an avatar element and name label elements. Overall, molecules are great for bringing different elements together to form unique groupings.&nbsp;<\/p>\n\n\n\n<p><strong>Related resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-patterns-how-to\/\">Build and keep molecules with UXPin Merge Patterns<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-organism\">Organism<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>An organism is a design model that refers to a group of molecules that are bonded together. Organisms are more complex than molecules but are still considered to be basic building blocks. An organism could consist of an element like a header, footer, or search form.<\/p>\n\n\n\n<p><strong>Application: <\/strong>The organism stage of atomic design helps take the process one step further from molecular level. It allows designers and developers to utilize it as a component that can be reused across numerous designs (although it is not yet a completed design).&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-repository\">Repository<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A repository is a collection of code that is used to manage a design system. This can be used to store and share components, templates, and other assets. A repository can be hosted on a server, or it can be stored locally. Respectively a Design System Repository is a collection of code that can be used to manage a design system. It contains all of the assets needed to create and maintain a system.<\/p>\n\n\n\n<p><strong>Application: <\/strong>\u00a0Designers use repository hosting services, such as Github, to access and store resources. Programs like Github are helpful because they save code, store it, allow it to be shared with team members. This makes collaboration efforts simple and seamless.\u00a0<\/p>\n\n\n\n<p><strong>Examples: <\/strong><a href=\"https:\/\/bitbucket.org\/product\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Bitbucket,<\/a> <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Github<strong><br><br><\/strong><\/a><strong>Related terms:<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Git Repository<\/strong><\/h2>\n\n\n\n<p><strong>Definition: <\/strong>A Git repository is a type of repository that is used to manage code. It is a distributed version control system that allows for collaboration on code. Git repositories can be used to store and share components, templates, and other assets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1.png\" alt=\"uxpin merge comparison 1\" class=\"wp-image-33988\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/uxpin-merge-comparison-1-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><strong>Application: <\/strong>Designers use GIT by identifying versions of their code, which can be accessed at any time. GIT is effective throughout every step in a project&#8217;s lifestyle because it keeps track of any changes that take place along the way. They are generally tracked via snapshots or paper trails.&nbsp;<\/p>\n\n\n\n<p><strong>Related terms:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/git-for-designers\/\">Git for designers<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Git integration<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/what-is-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to use Merge?<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-npm-package\">NPM Package<\/h2>\n\n\n\n<p><strong>Definition: <\/strong>Also referred to shortly as NPM, it is a collection of software tools built in the JavaScript programming language. It acts as a type of repository that is used to store and share code. NPM packages are frequently used to share components, templates, and other assets.&nbsp;<\/p>\n\n\n\n<p><strong>Application:<\/strong> While, as a designer, you don\u2019t need to understand the intricacies of how NMPs are built, it\u2019s worth knowing that you can use them in tools like UXPin to facilitate your work on user interface designs. Namely, you can use NPM packages to import UI elements from component libraries and, as a result, design interfaces with ready-to-use elements directly from the code.<\/p>\n\n\n\n<p>Related resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\">What is npm<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/introducing-npm-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm Merge integration<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI npm integration with UXPin<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/integrate-with-ant-design-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant design integration with UXPin<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap integration with UXPin<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Build Robust Prototypes with npm Libraries \u2013 UXPin Live Product Demo\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/OPOLngBfmxw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Bridge communication gap between design and development teams at your organization. Try the most advanced prototyping tool on the market that&#8217;s powered with its proprietary Merge technology. Bring interactive, code-based components and build interfaces in minutes instead of hours. Find out more about UXPin Merge.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design systems can be very confusing and complicated if you don\u2019t fully understand the terminology associated with them. It\u2019s important for designers and developers alike to be on the same page for the most effective communication efforts.&nbsp; For this reason, we have comprised some key terms along with associated applications and examples to provide a<\/p>\n","protected":false},"author":3,"featured_media":36606,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,439,172,4],"tags":[],"class_list":["post-36605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-designops","category-product-design","category-ui-design"],"yoast_title":"","yoast_metadesc":"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design System Glossary \u2013 34 Powerful Terms You Should Know | UXPin<\/title>\n<meta name=\"description\" content=\"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System Glossary \u2013 34 Powerful Terms You Should Know\" \/>\n<meta property=\"og:description\" content=\"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-14T10:45:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-21T13:18:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design System Glossary \u2013 34 Powerful Terms You Should Know\",\"datePublished\":\"2022-09-14T10:45:37+00:00\",\"dateModified\":\"2022-09-21T13:18:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/\"},\"wordCount\":4790,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Design-system-glossary.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"DesignOps\",\"Product Design\",\"UI Design\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/\",\"name\":\"Design System Glossary \u2013 34 Powerful Terms You Should Know | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Design-system-glossary.png\",\"datePublished\":\"2022-09-14T10:45:37+00:00\",\"dateModified\":\"2022-09-21T13:18:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Design-system-glossary.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Design-system-glossary.png\",\"width\":1200,\"height\":600,\"caption\":\"Design system glossary\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-glossary\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design System Glossary \u2013 34 Powerful Terms You Should Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design System Glossary \u2013 34 Powerful Terms You Should Know | UXPin","description":"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/","og_locale":"en_US","og_type":"article","og_title":"Design System Glossary \u2013 34 Powerful Terms You Should Know","og_description":"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/","og_site_name":"Studio by UXPin","article_published_time":"2022-09-14T10:45:37+00:00","article_modified_time":"2022-09-21T13:18:39+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design System Glossary \u2013 34 Powerful Terms You Should Know","datePublished":"2022-09-14T10:45:37+00:00","dateModified":"2022-09-21T13:18:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/"},"wordCount":4790,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png","articleSection":["Blog","Design Systems","DesignOps","Product Design","UI Design"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/","name":"Design System Glossary \u2013 34 Powerful Terms You Should Know | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png","datePublished":"2022-09-14T10:45:37+00:00","dateModified":"2022-09-21T13:18:39+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"What is pattern library, UI kit, and brand voice? Learn all the terms that you need to build and use a long-lasting design system.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Design-system-glossary.png","width":1200,"height":600,"caption":"Design system glossary"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-glossary\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design System Glossary \u2013 34 Powerful Terms You Should Know"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=36605"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36605\/revisions"}],"predecessor-version":[{"id":36634,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36605\/revisions\/36634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36606"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}