{"id":10865,"date":"2022-06-03T11:04:08","date_gmt":"2022-06-03T11:04:08","guid":{"rendered":"http:\/\/143.244.150.201\/?p=10865"},"modified":"2022-06-07T11:22:48","modified_gmt":"2022-06-07T11:22:48","slug":"components-in-a-design-system","status":"publish","type":"post","link":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/","title":{"rendered":"15 essential components in a design system"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">The digital realm is concentrated with mind-blowing visuals that we encounter every day.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might find yourself looking at them and wondering how you can create an equally impactful design. The answer is right here.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Most organizations have integrated a design system into their business development process to be a part of this realm. While <\/span><a href=\"https:\/\/material.io\/blog\/research-state-of-design-systems-2020\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">74%<\/span><\/a><span style=\"font-weight: 400;\"> of creative professionals also reported that their design system had a component code library.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I&#8217;m sure that sounds super important and super confusing at the same time. If you&#8217;re here, you&#8217;re looking for ways to create a design system or improve an older one to make better progress. Whichever the case, this guide will be the answer you&#8217;re looking for.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We will cover everything from the basics to professional uses and examples in this short, information-packed guide.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">So let&#8217;s get started!<\/span><\/i><\/p>\n<p>&nbsp;<\/p>\n\t\t<div data-elementor-type=\"section\" data-elementor-id=\"3538\" class=\"elementor elementor-3538\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-09eaa27 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"09eaa27\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-de311bb\" data-id=\"de311bb\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-54a4219 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"54a4219\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-1fd1652\" data-id=\"1fd1652\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3b77e6e elementor-widget elementor-widget-heading\" data-id=\"3b77e6e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Cut design &amp; video review time in half<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d709c1 elementor-widget elementor-widget-text-editor\" data-id=\"2d709c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tGoVisually is the #1 online proofing software to get visual feedback on Designs, PDFs &amp; Video content.<br>\n\n<strong>Try GoVisually free today!<\/strong>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-709d96c elementor-mobile-button-align-stretch elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"709d96c\" data-element_type=\"widget\" data-settings=\"{&quot;button_width&quot;:&quot;33&quot;,&quot;button_width_mobile&quot;:&quot;100&quot;,&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"Ready to simplify?\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"3538\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"709d96c\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"GoVisually\" \/>\n\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-getmail elementor-col-66 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-getmail\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[getmail]\" id=\"form-field-getmail\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Your Email Address\" required=\"required\" aria-required=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-33 e-form__buttons elementor-sm-100\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Started<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-67c5840180251\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-67c5840180251\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#What_makes_a_good_design_system\" title=\"What makes a good design system?\">What makes a good design system?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#Purpose_and_values\" title=\"Purpose and values\">Purpose and values<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#Design_principles\" title=\"Design principles\">Design principles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#Brand_philosophy\" title=\"Brand philosophy\">Brand philosophy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#Components\" title=\"Components\">Components<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#What_is_an_example_of_a_design_system\" title=\"What is an example of a design system?\">What is an example of a design system?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#What_are_components_in_a_design_system\" title=\"What are components in a design system?\">What are components in a design system?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#15_main_components_in_a_design_system\" title=\"15 main components in a design system\">15 main components in a design system<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#1_Tabs\" title=\"1. Tabs\">1. Tabs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#2_Tags\" title=\"2. Tags\">2. Tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#3_Radio_buttons\" title=\"3. Radio buttons\">3. Radio buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#4_Buttons\" title=\"4. Buttons\">4. Buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#5_Breadcrumbs\" title=\"5. Breadcrumbs\">5. Breadcrumbs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#6_Comment\" title=\"6. Comment\">6. Comment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#7_Form\" title=\"7. Form\">7. Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#8_Dividers\" title=\"8. Dividers\">8. Dividers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#9_Drawers\" title=\"9. Drawers\">9. Drawers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#10_Dropdown_menu\" title=\"10. Dropdown menu\">10. Dropdown menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#11_Grid\" title=\"11. Grid\">11. Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#12_Banner\" title=\"12. Banner\">12. Banner<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#13_Progress_indicators\" title=\"13. Progress indicators\">13. Progress indicators<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#14_Tooltips\" title=\"14. Tooltips\">14. Tooltips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#15_Toggle\" title=\"15. Toggle\">15. Toggle<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#Get_started_with_a_component_design_software\" title=\"Get started with a component design software\">Get started with a component design software<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#Final_takeaway\" title=\"Final takeaway\u00a0\">Final takeaway\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_makes_a_good_design_system\"><\/span><span style=\"font-weight: 400;\">What makes a good design system?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Before we explain the aspects of a good design system, it&#8217;s better to reinstate <\/span><span style=\"font-weight: 400;\">what a design system is<\/span><span style=\"font-weight: 400;\"> and why it&#8217;s important.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A design system is a collection of patterns, functional elements, and components that align an organization&#8217;s persona across all its services and products. Design systems are usually put together by a collaborative effort of creative, marketing, and product teams.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Having a predetermined design system helps maintain consistency in your enterprise&#8217;s operations and makes it easier for your developers to create projects in line with your organization&#8217;s online persona.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A good design system will also strengthen the base of your <\/span><a href=\"http:\/\/govisually.com\/blog\/graphic-design-process\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">design process<\/span><\/a><span style=\"font-weight: 400;\"> and lead to an unprecedented user experience. For organizational growth, consistency is key. And that key can be obtained by combining your brand philosophy, design vision, and principles to make a design system unique to your organization.<\/span><\/p>\n<p><em><span style=\"font-weight: 400;\">So what do we call a good design system?<\/span><\/em><\/p>\n<p><span style=\"font-weight: 400;\">There are some pillars necessary to establish early on when making a successful design system:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-10880 size-large\" src=\"http:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-1024x1024.png\" alt=\"What-makes-a good-design-system\" width=\"800\" height=\"800\" srcset=\"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-1024x1024.png 1024w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-300x300.png 300w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-150x150.png 150w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-768x768.png 768w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-24x24.png 24w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-48x48.png 48w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system-96x96.png 96w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/What-makes-a-good-design-system.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Purpose_and_values\"><\/span><span style=\"font-weight: 400;\">Purpose and values<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You should always start by outlining clear goals and company values to help your teams understand what they are working toward. Defining a clear purpose will help your teams maintain <\/span><a href=\"http:\/\/govisually.com\/blog\/how-to-ensure-brand-compliance\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">brand compliance<\/span><\/a><span style=\"font-weight: 400;\"> and work cohesively over a shared goal.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Design_principles\"><\/span><span style=\"font-weight: 400;\">Design principles<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Crafting design principles gives your organization&#8217;s purpose and values a visual representation. Everything will contribute to your company&#8217;s design principles, from your brand symbols to color schemes and the type of content you wish to share.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Brand_philosophy\"><\/span><span style=\"font-weight: 400;\">Brand philosophy<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Design principles and brand philosophy are two sides of the same coin. Imagine if Google decided to make all its logos a different color or style? It would be a wreck for both the users who see them and the developers who try to fit them on their web pages. Once you decide on a brand philosophy, you need to stick to it.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Components\"><\/span><span style=\"font-weight: 400;\">Components<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The most crucial part for creative designers is the components available to them that can convey information and perform functions that can represent their purpose, principles, and philosophy all at once. The rest of this guide will further elaborate on a list and effective use of these components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But let&#8217;s first look at an exceptional example of a great system design for inspiration.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_is_an_example_of_a_design_system\"><\/span><span style=\"font-weight: 400;\">What is an example of a design system?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You might have come across the term <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">atomic design<\/span><\/a><span style=\"font-weight: 400;\">. Yes, that&#8217;s currently the basis of every great design system you can use as inspiration.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The main features of an atomic design are its simple codes, abstract visuals, and straightforward layouts. Many digital giants use atomic designs globally as their fundamental design concept.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Organizations like Google, Apple, Amazon, and many others have implemented this type of design in their web structures. Component design software powered by these big sharks also uses the same theory in action. Now let&#8217;s move on to system design components, what they are, how they work and\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_are_components_in_a_design_system\"><\/span><span style=\"font-weight: 400;\">What are components in a design system?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Design components are the functional factors of a user interface (UI). Components are derived from design elements that come together after the whole <\/span><a href=\"http:\/\/govisually.com\/blog\/what-is-design-thinking\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">design thinking<\/span><\/a><span style=\"font-weight: 400;\"> process. Such as color, typography, and spacing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When choosing the right components in a design system, an important thing to consider is how your organizational procedures are structured.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, if you want your audience to fill a survey on a relevant page, you need to optimize it to appear as a questionnaire. In that case, you&#8217;ll probably be using forms, check boxes, and progress indicators as the key components.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"15_main_components_in_a_design_system\"><\/span><span style=\"font-weight: 400;\">15 main components in a design system<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are 15 essential components in system designs that you will be using one way or another. And we have listed them here with guidelines on their use cases and functionality.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-10881 size-large\" src=\"http:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-1024x1024.png\" alt=\"15-main-components-in-a-design-system\" width=\"800\" height=\"800\" srcset=\"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-1024x1024.png 1024w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-300x300.png 300w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-150x150.png 150w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-768x768.png 768w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-24x24.png 24w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-48x48.png 48w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system-96x96.png 96w, https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-main-components-in-a-design-system.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Tabs\"><\/span><span style=\"font-weight: 400;\">1. Tabs<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Tabs are the best way to organize similar information on the same page. They help you break the pages and make them more readable and easy to navigate.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, tabs should be used effectively instead of placing multiple categories on the same bar to outline tiny bits of information. Tab titles should also be concise and small to improve their appearance on the page.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"2_Tags\"><\/span><span style=\"font-weight: 400;\">2. Tags<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Tags are used to label UI information for quick recognition and the navigation of similar items. A great example is Pinterest, where you can use tags under an image to find more similar ones.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom colored tags have also proven to organize large amounts of user-friendly and less noisy content. A simple tag can link to tens of different variations of the same product.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"3_Radio_buttons\"><\/span><span style=\"font-weight: 400;\">3. Radio buttons<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Radio buttons are a key component in limiting user responses by enabling them only to select one option at a time. This can help reduce system errors by an overload or misinterpretation of information, and you should use them when you should.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"4_Buttons\"><\/span><span style=\"font-weight: 400;\">4. Buttons<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can&#8217;t complete a design in the absence of buttons. This is one of the most essential features that you won&#8217;t be able to leave out even if you want to. Buttons are used to move users through a sequence of pages or screens or as CTAs. Every design must have a primary button followed by secondary and tertiary buttons if required.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Buttons serve as a great means to lead your users to an intended destination because, let&#8217;s be real, we all have the urge to click on them at least once.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"5_Breadcrumbs\"><\/span><span style=\"font-weight: 400;\">5. Breadcrumbs<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Breadcrumbs are an alternative way to help users navigate your design without getting lost. They show hierarchical progress from the first level into other levels or links in a chain.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This component is also very useful to increase the user-friendliness of your design because nobody wants to click on the back button 7 times to land on the initial page again.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"6_Comment\"><\/span><span style=\"font-weight: 400;\">6. Comment<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Comments are a crucial component of any design system because they are a great tool for user interaction and engagement.\u00a0 If there weren&#8217;t a comment section on this blog, we&#8217;d miss out on your precious feedback!<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"7_Form\"><\/span><span style=\"font-weight: 400;\">7. Form<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Forms are used when a user response is required to complete an action. Forms are the best way to collect user data and are combined with other components to complete it, like checkboxes, radio buttons, or free text fields.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"8_Dividers\"><\/span><span style=\"font-weight: 400;\">8. Dividers<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Do you ever notice a divider on a page? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course, you don&#8217;t, we don&#8217;t either. But dividers help reduce page noise and make the layout of the design look more organized without the users actively registering their presence.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"9_Drawers\"><\/span><span style=\"font-weight: 400;\">9. Drawers<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We wouldn&#8217;t be able to find a different section or category on any webpage if there are no drawers and will have to constantly jump from one search to another to find relevant results. That says everything about drawers and their value.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"10_Dropdown_menu\"><\/span><span style=\"font-weight: 400;\">10. Dropdown menu<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Everyone loves drop-down menus. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><em>Why?<\/em> <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because they make our lives easier while taking less space and giving our designs a great modification. Drop-down menus are a norm for every design system, so don&#8217;t forget to add them to yours.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"11_Grid\"><\/span><span style=\"font-weight: 400;\">11. Grid<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A grid is especially essential for home page designs. It makes your layout more organized for visuals and gives your design a blueprint for later development.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"12_Banner\"><\/span><span style=\"font-weight: 400;\">12. Banner<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Banners act as a notification bar or a promotional component for your page design. You can make them look as vibrant as possible or as minimal as possible. Either way, banners never fail to do their job.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"13_Progress_indicators\"><\/span><span style=\"font-weight: 400;\">13. Progress indicators<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Progress indicators and progress bars are a great way to enhance your design. It lets users know how far they&#8217;ve made into a certain process, whether reading an article or registering to a new platform.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"14_Tooltips\"><\/span><span style=\"font-weight: 400;\">14. Tooltips<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When you&#8217;re focusing on the big things, you&#8217;re more likely to forget to add delicate details.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tooltips are essential for creative concepts or any general design where tools play a major role. It would be a baffling experience writing this article without seeing where the cursor is or what am I clicking on, right?<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"15_Toggle\"><\/span><span style=\"font-weight: 400;\">15. Toggle<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Toggle bars first became a thing from mobile baser UI, but now are a great addition for any component design software. <\/span><span style=\"font-weight: 400;\">When making your design make sure to add a toggle for light\/dark mode because we night owls appreciate this feature.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Get_started_with_a_component_design_software\"><\/span><span style=\"font-weight: 400;\">Get started with a component design software<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you&#8217;ve learned everything about design systems and the essential components in a design system, you must be thinking about the software you can use and bring your design system to life.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">No need to fret, you won&#8217;t have to look elsewhere. Here&#8217;s a list of the leading <\/span><a href=\"https:\/\/component.gallery\/design-systems\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">design systems<\/span><\/a><span style=\"font-weight: 400;\"> to help you develop your design components and elements.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Material Design<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/carbondesignsystem.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Carbon Design System\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/atlassian.design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Atlassian Design System<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/spectrum.adobe.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Spectrum<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/polaris.shopify.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Polaris<\/span><\/a><\/li>\n<\/ol>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Final_takeaway\"><\/span><span style=\"font-weight: 400;\">Final takeaway\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">This is where we wrap up our journey to find system design components. Remember that good collaboration is the main aspect that drives everything in an organization&#8217;s design process and operational management.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you still haven&#8217;t started building your brand philosophy or face difficulties bringing all concepts and teams to the same platform, use a multifunctional collaboration software like <\/span><a href=\"http:\/\/govisually.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">GoVisually<\/span><\/a><span style=\"font-weight: 400;\">. Because in the digital realm, all creative journeys begin in visual.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p class=\"c-mrkdwn__pre\" data-stringify-type=\"pre\">\t\t<div data-elementor-type=\"page\" data-elementor-id=\"9369\" class=\"elementor elementor-9369\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-09eaa27 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"09eaa27\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-de311bb\" data-id=\"de311bb\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-54a4219 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"54a4219\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-1fd1652\" data-id=\"1fd1652\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3b77e6e elementor-widget elementor-widget-heading\" data-id=\"3b77e6e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Want to send big files?<br><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb61a20 elementor-widget elementor-widget-image\" data-id=\"fb61a20\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"222\" height=\"294\" src=\"https:\/\/govisually.com\/wp-content\/uploads\/2020\/04\/AddFile.png\" class=\"attachment-large size-large wp-image-3739\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d709c1 elementor-widget elementor-widget-text-editor\" data-id=\"2d709c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Need a quick way to share large files and creative assets?<\/p><p><strong>With GoVisually Share, it&#8217;s absolutely free! Try today.<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1aff8af elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1aff8af\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/share.govisually.com\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Send your file. 100% Free. <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The digital realm is concentrated with mind-blowing visuals that we encounter every day. You might find yourself looking at them and wondering how you can create an equally impactful design. The answer is right here. Most organizations have integrated a design system into their business development process to be a part of this realm. While [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":10882,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>15 essential components in a design system - GoVisually<\/title>\n<meta name=\"description\" content=\"An organization&#039;s journey to creating a design system is complex. This guide has all you need to know about the components in a design system.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15 essential components in a design system - GoVisually\" \/>\n<meta property=\"og:description\" content=\"An organization&#039;s journey to creating a design system is complex. This guide has all you need to know about the components in a design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"GoVisually\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-03T11:04:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-07T11:22:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1115\" \/>\n\t<meta property=\"og:image:height\" content=\"622\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alina Zahid Khan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Zahid Khan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/\",\"url\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/\",\"name\":\"15 essential components in a design system - GoVisually\",\"isPartOf\":{\"@id\":\"https:\/\/govisually.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg\",\"datePublished\":\"2022-06-03T11:04:08+00:00\",\"dateModified\":\"2022-06-07T11:22:48+00:00\",\"author\":{\"@id\":\"https:\/\/govisually.com\/#\/schema\/person\/a982304404a180b70f43b019e3e646b4\"},\"description\":\"An organization's journey to creating a design system is complex. This guide has all you need to know about the components in a design system.\",\"breadcrumb\":{\"@id\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#primaryimage\",\"url\":\"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg\",\"contentUrl\":\"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg\",\"width\":1115,\"height\":622,\"caption\":\"15-essential-components-in-a-design-system\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/govisually.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15 essential components in a design system\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/govisually.com\/#website\",\"url\":\"https:\/\/govisually.com\/\",\"name\":\"GoVisually\",\"description\":\"GoVisually - Online Proofing, Design Review &amp; Approval Software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/govisually.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/govisually.com\/#\/schema\/person\/a982304404a180b70f43b019e3e646b4\",\"name\":\"Alina Zahid Khan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/govisually.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/31530773e57b36130e0162145c5eb1b9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/31530773e57b36130e0162145c5eb1b9?s=96&d=mm&r=g\",\"caption\":\"Alina Zahid Khan\"},\"description\":\"Alina Zahid Khan is a storyteller, brand strategist, and growth manager at GoVisually. She loves creating value-driven content for creative professionals.\",\"url\":\"https:\/\/govisually.com\/blog\/author\/alinaz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"15 essential components in a design system - GoVisually","description":"An organization's journey to creating a design system is complex. This guide has all you need to know about the components in a design system.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/","og_locale":"en_US","og_type":"article","og_title":"15 essential components in a design system - GoVisually","og_description":"An organization's journey to creating a design system is complex. This guide has all you need to know about the components in a design system.","og_url":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/","og_site_name":"GoVisually","article_published_time":"2022-06-03T11:04:08+00:00","article_modified_time":"2022-06-07T11:22:48+00:00","og_image":[{"width":1115,"height":622,"url":"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg","type":"image\/jpeg"}],"author":"Alina Zahid Khan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Zahid Khan","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/","url":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/","name":"15 essential components in a design system - GoVisually","isPartOf":{"@id":"https:\/\/govisually.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#primaryimage"},"image":{"@id":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg","datePublished":"2022-06-03T11:04:08+00:00","dateModified":"2022-06-07T11:22:48+00:00","author":{"@id":"https:\/\/govisually.com\/#\/schema\/person\/a982304404a180b70f43b019e3e646b4"},"description":"An organization's journey to creating a design system is complex. This guide has all you need to know about the components in a design system.","breadcrumb":{"@id":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/govisually.com\/blog\/components-in-a-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#primaryimage","url":"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg","contentUrl":"https:\/\/govisually.com\/wp-content\/uploads\/2022\/06\/15-essential-components-in-a-design-system.jpg","width":1115,"height":622,"caption":"15-essential-components-in-a-design-system"},{"@type":"BreadcrumbList","@id":"https:\/\/govisually.com\/blog\/components-in-a-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/govisually.com\/"},{"@type":"ListItem","position":2,"name":"15 essential components in a design system"}]},{"@type":"WebSite","@id":"https:\/\/govisually.com\/#website","url":"https:\/\/govisually.com\/","name":"GoVisually","description":"GoVisually - Online Proofing, Design Review &amp; Approval Software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/govisually.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/govisually.com\/#\/schema\/person\/a982304404a180b70f43b019e3e646b4","name":"Alina Zahid Khan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/govisually.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/31530773e57b36130e0162145c5eb1b9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/31530773e57b36130e0162145c5eb1b9?s=96&d=mm&r=g","caption":"Alina Zahid Khan"},"description":"Alina Zahid Khan is a storyteller, brand strategist, and growth manager at GoVisually. She loves creating value-driven content for creative professionals.","url":"https:\/\/govisually.com\/blog\/author\/alinaz\/"}]}},"_links":{"self":[{"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/posts\/10865"}],"collection":[{"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/comments?post=10865"}],"version-history":[{"count":4,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/posts\/10865\/revisions"}],"predecessor-version":[{"id":10884,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/posts\/10865\/revisions\/10884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/media\/10882"}],"wp:attachment":[{"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/media?parent=10865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/categories?post=10865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/govisually.com\/wp-json\/wp\/v2\/tags?post=10865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}