{"id":22428,"date":"2020-08-20T04:25:00","date_gmt":"2020-08-20T11:25:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=22428"},"modified":"2026-03-03T16:17:00","modified_gmt":"2026-03-04T00:17:00","slug":"atomic-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/","title":{"rendered":"Atomic Design Systems: A Checklist for Each Individual Design Component"},"content":{"rendered":"<p>Are you following every step that leads to success? Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.<\/p>\n<h2 class=\"wp-block-heading\">What is Atomic Design?<\/h2>\n<p>Atomic design is a design system created by <a href=\"https:\/\/bradfrost.com\/\">Brad Frost<\/a> in 2016. Frost wanted to create a design system that made it easy for him to focus on essential elements like color, typography, and texture. While exploring his ideas, Frost kept returning to the connections he found between design processes and chemistry. Naturally, he decided to call his approach \u201catomic design.\u201d<\/p>\n<h3 class=\"wp-block-heading\">Frost\u2019s original approach included five categories:<\/h3>\n<ul class=\"wp-block-list\">\n<li>Atoms<\/li>\n<li>Molecules<\/li>\n<li>Organisms<\/li>\n<li>Templates<\/li>\n<li>Pages<\/li>\n<\/ul>\n<p>The farther you move up the chain, the more complex the design becomes. At the Atoms level, you work with the basic building blocks of a design, such as color palettes and fonts. At the Molecules level, multiple atoms work together. For example, you might pair a specific color with a particular font.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/b6Rasnfqnh0nAco1kUS4SAdf3Ypnwyz4PT4_nAO0MKpDGaJcn1nolskQnAn4PNKkZlpahHEH7O1mKZ3nvEzzWtT5bt62PEEmRF3cUaNRCwxqRUFkGRxWt3YJwJ4qgQbrejpm-yU\" alt=\"Atomic design system hierarchy showing atoms and molecules\"\/><\/figure>\n<\/div>\n<p>By the time you reach the Pages level, you have a fully developed design. The design has opportunities to evolve in the future. For now, though, you have a design that meets your goals.<\/p>\n<p>Frost calls this approach \u201catomic design\u201d because it begins with the smallest element.&nbsp;<\/p>\n<p>In chemistry, atoms are the smallest things to work with. In design, the smallest factors might include colors and buttons. Also like chemistry, the more atoms you put together, the more complex the project becomes.<\/p>\n<p>Eventually, you have a functional creature built on the smallest elements possible.<\/p>\n<p>When you design from this perspective, you should find that you create more consistent, simple, effective products that users will enjoy.<\/p>\n<h2 class=\"wp-block-heading\"><strong>Atomic Design System Checklist<\/strong><\/h2>\n<ul class=\"wp-block-list\">\n<li>Design Language<\/li>\n<li>Design Tokens<\/li>\n<li>Core Components<\/li>\n<li>Tooling<\/li>\n<li>Project Management<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\"><strong>Design Language<\/strong><\/h3>\n<p>A design language defines a project-wide style that guides teams toward a common goal. When done well, the design language helps products stand out from competitors. Some developers create design languages that guide product lines. When this happens, an app released today will share similarities with a website released two months later.<\/p>\n<h4 class=\"wp-block-heading\">Developing a \u201cBrand\u201d<\/h4>\n<p>Designers successfully develop a brand when they create design languages that consumers recognize across products. When the average person knows that product A and product B comes from the same company, a brand has been established.<\/p>\n<p>Developing a brand takes time as well as design skills. As a company releases more products, it has more opportunities to solidify its brand.<\/p>\n<h4 class=\"wp-block-heading\">Copy and Content Requirements<\/h4>\n<p>Design language also includes copy and content requirements. Copy requirements may force writers to use a slogan on each page. Writers may also need to follow the same style guide to make sure they create a cohesive experience for users.<\/p>\n<p>Content requirements can refer to any visual element. For example, the design language may require that the company logo appears at the same place on every web page.<\/p>\n<h4 class=\"wp-block-heading\">Industry-Leading Examples<\/h4>\n<p>Industry-leading examples of design language mastery include Apple and Volkswagen.<\/p>\n<p>Apple maintains a sleek aesthetic for every product, including its hardware, websites, and applications.&nbsp;<\/p>\n<p>Any tech-savvy consumer will recognize an Apple product immediately.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/KMJ-6YhVLAAq3XHcanQ3rWeP8D0WDkNwHA7ogtnJk5cp8WH0avvYOIS8MNgRUoGXItOowNA8G0ATWAbP924kTrPbLlMEEdBDygj75_59hagws0LfCsYU1Pc6tG7tczi4Jzyk8UY\" alt=\"Apple product design showing consistent brand aesthetics\"\/><figcaption><a href=\"https:\/\/cdn.arstechnica.net\/wp-content\/uploads\/2019\/09\/applewatchseries5_7-800x534.jpg\">Source<\/a><\/figcaption><\/figure>\n<\/div>\n<p>Volkswagen built an alluring design language with its VW Beetle and Bug revival. The cars have a friendly design that welcomes drivers and promotes positive feelings.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/WWPSwgSvWG2TUTarAxEH2x2uwDiDU_oJPF19RsLr7zmPpOsmQfLMlweKX6_BAugFkz57FZJVLXHWuAui1ZeK7qtJIxdI2ndLkgJvp9JBSnSaU3WQMMkkHasb9b1l31bseoeQypA\" alt=\"Volkswagen Beetle design language example\"\/><figcaption><a href=\"https:\/\/www.baltimoresun.com\/resizer\/w9i8myvLmG5tua8XFRdg882BcZc=\/800x627\/top\/arc-anglerfish-arc2-prod-tronc.s3.amazonaws.com\/public\/7NMT6QIBDJHXPNHTIDYP3ZQTIY.JPG\">Source<\/a><\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\"><strong>Design Tokens<\/strong><\/h3>\n<p>Design tokens make it easy for teams to maintain cohesive aesthetics while collaborating. Design tokens can include a color, font, or icon. Frost actually thinks of design tokens as sub-atomic particles. They\u2019re more like quarks than atoms. When you put several design tokens together, you get an atom. When you start your design here, you ensure consistency throughout your project.<\/p>\n<h4 class=\"wp-block-heading\">Color Palettes<\/h4>\n<p>A color palette includes all of the colors that your design team will use in a project. You can include dozens of colors to the palette. You shouldn\u2019t add too many colors in a palette, though. Doing so will make it harder for designers to understand the intended aesthetic.<\/p>\n<h4 class=\"wp-block-heading\">Typography<\/h4>\n<p>Many people think of typography and font as the same thing. There are small differences, but you don\u2019t need to worry about them unless you design your own type.<\/p>\n<h4 class=\"wp-block-heading\">Layout<\/h4>\n<p>A layout defines where items sit on a page. For example, a website may have a menu that stays on the left side of the screen, or a collapsible search bar that disappears when not in use.<\/p>\n<h4 class=\"wp-block-heading\">Iconography<\/h4>\n<p>Iconography includes small images that digital designers use. You may use icons as guides for navigation or choosing features on a page.<\/p>\n<h4 class=\"wp-block-heading\">Industry-Leading Examples<\/h4>\n<p>Many companies succeed because their designers know how to use design tokens extremely well.&nbsp;<\/p>\n<p>Netflix stands out as a fairly recent example of a company that has mastered design tokens. The Netflix website follows a simple grid layout that helps users navigate their options.&nbsp;<\/p>\n<p>Each page includes the Netflix logo. The company further emphasizes its understanding of design tokens by using white and red letters wherever possible.&nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/IYyquhzNKQHN3POR3eTDP1DUVZqy5GkltTxrVd5E3rstn1DfnklCFE41rWKSO6zX4yh2ycFw-WFcWUx5ofXaLhUxWCoXM6t8KlYTBryh6jUH7C79MqBIq_4DpmY9x2j07zTlHL4\" alt=\"Netflix grid layout using design tokens with logo and brand colors\"\/><figcaption><a href=\"https:\/\/streambly.com.au\/content\/expressvpn\/netflix_us.jpg\">Source<\/a><\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\"><strong>Core Components<\/strong><\/h3>\n<p>Core components occupy the atomic level in Frost\u2019s atomic design schema. A web page or app needs several core components that users interact with. Core components can include buttons, search forms, and tabs.<\/p>\n<h4 class=\"wp-block-heading\">What Makes for Effective UI Components?<\/h4>\n<p>Effective UI components need to work harmoniously together to give the user an intuitive experience. Ideally, new users can look at their screens and know what component they should touch to launch a feature.<\/p>\n<p>The design of each component can contribute to a UI\u2019s overall success. A green sign that says \u201cGo\u201d makes an extremely simple component that nearly everyone will understand.<\/p>\n<p>As you add components to your UI, you need to think about how they work together. Does opening a hamburger menu push the search bar out of the way? Some users may find that frustrating. Are the icons so small that people can\u2019t tap them without launching other features? You will lose users quickly when they find that the UI fails them.<\/p>\n<h4 class=\"wp-block-heading\">Industry-Leading Examples<\/h4>\n<h4 class=\"has-text-align-center wp-block-heading\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"944\" src=\"https:\/\/lh5.googleusercontent.com\/8x8c0gBp0lhYEi_MoZloMNdEyKhaLxpcuikFV48unOULSKLSlX7B5TzCmo7f5z80NpsNqLvkx_kcXt9LZYhaRByQQlr1LT11V3U5NCWMC1yhElKeqap7a1sZbZ-KQvFFPYT6FNg\" alt=\"Mobile UI icon design and usability example\"><\/h4>\n<p class=\"has-text-align-center\"><a href=\"https:\/\/miro.medium.com\/max\/500\/1*7l-68_33Vz7tlAlobxpBmg.png\">Source<\/a><\/p>\n<p>The smartphone photography app Halide excels at using UI components effectively. When users open the app, they see a small section of their screens that control the camera. The large circle clearly indicates that pressing the element will snap a photograph.&nbsp;<\/p>\n<p>The app improves the user experience even more by displaying a small version of the previous photo. Users do not have to navigate away from their cameras to see what image they just took.<\/p>\n<h3 class=\"wp-block-heading\"><strong>Tools and Platforms<\/strong><\/h3>\n<p>UXPin\u2019s platform offers several features that can help designers follow atomic design principles. Some of the most useful features include:<\/p>\n<ul class=\"wp-block-list\">\n<li>Design systems<\/li>\n<li>Libraries<\/li>\n<li>Interactive elements<\/li>\n<li>Data inputs<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\"><strong>Project Management<\/strong><\/h3>\n<p>Project management involves making sure every step happens on time. Design collaboration only works well when someone manages the project. Without strong management, members of the team might find themselves waiting for someone to finish a job before they can contribute.<\/p>\n<h4 class=\"wp-block-heading\">Project Management Tools<\/h4>\n<p>Some of the most popular project management tools include:<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/trello.com\/en-US\">Trello<\/a><\/li>\n<li><a href=\"https:\/\/basecamp.com\/\">Basecamp<\/a><\/li>\n<li><a href=\"https:\/\/asana.com\/\">Asana<\/a><\/li>\n<li><a href=\"https:\/\/monday.com\/\">Monday.com<\/a><\/li>\n<\/ul>\n<p>These project management tools work well because they let administrators assign tasks, set deadlines, and adapt to schedule changes.<\/p>\n<h4 class=\"wp-block-heading\">Collaboration and Communication<\/h4>\n<p>Some of the best project management tools can also help your team collaborate and communicate. Asana, for example, lets users update each other on project milestones.<\/p>\n<p>You don\u2019t need independent collaboration and communication tools when you choose a UI design platform that offers real-time collaboration features. UXPin has seamless collaboration that works like Google Docs. You can watch your colleagues move elements across the screen.<\/p>\n<p>UXPin will also let <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/free-and-seamless-collaboration-for-cross-functional-teams\/\">unofficial users provide feedback<\/a>. Send a link to a trusted colleague or stakeholder to get meaningful feedback that contributes to your project\u2019s success.<\/p>\n<h2 class=\"wp-block-heading\"><strong>Create Your Own Design Systems<\/strong><\/h2>\n<p>UI designs want to create intuitive environments that show off a brand\u2019s personality and help users get the services they need. Many of those goals start with creating your own design system. Once you establish your design standards, everyone on your team will know how to stay within the guidelines.<\/p>\n<p>UXPin makes it simple for you to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\">create your own design systems<\/a>. When making a design system, you can:<\/p>\n<ul class=\"wp-block-list\">\n<li>Create a UI inventory with a list of accepted patterns, colors, icons, and copy.<\/li>\n<li>Establish design principles that will direct other team members.<\/li>\n<li>Build a color palette that prevents other designers from straying.<\/li>\n<li>Build a typographic scale that includes type fonts, weights, line-heights, and other features.<\/li>\n<li>Provide examples of designs that you would like to see other team members imitate so they can create a cohesive UI experience.<\/li>\n<\/ul>\n<p>Now that you have a checklist of design components that will lead you to success, put it to practice by <a href=\"https:\/\/www.uxpin.com\/sign-up\">starting your free trial with UXPin<\/a>. UXPin has all of the features that you need for atomic design. Come experience how simple designing and prototyping become when you have a platform that can do it all.<\/p>\n<p><strong>UXPin is the design process tool that helps product teams around the world turn ideas into products faster.<\/strong><\/p>\n<p><strong>With Merge, UXPin\u2019s revolutionary technology, companies like PayPal can easily solve DesignOps challenges. <a href=\"https:\/\/www.uxpin.com\/merge\">UXPin Merge<\/a> allows you to design with React components to achieve full consistency with the final product.<\/strong><\/p>\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.uxpin.com\/merge\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/MergeAccess_Blog-11.png\" alt=\"MergeAccess Blog 11\" class=\"wp-image-23506\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/MergeAccess_Blog-11.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/MergeAccess_Blog-11-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Are you following every step that leads to success? Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs. What is Atomic Design? Atomic design is a design system created by Brad Frost in 2016. Frost wanted to create a<\/p>\n","protected":false},"author":156,"featured_media":22429,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-22428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"A Checklist for Each Individual Atomic Design Systems Component","yoast_metadesc":"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.","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>A Checklist for Each Individual Atomic Design Systems Component<\/title>\n<meta name=\"description\" content=\"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.\" \/>\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\/atomic-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Atomic Design Systems: A Checklist for Each Individual Design Component\" \/>\n<meta property=\"og:description\" content=\"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-20T11:25:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-04T00:17:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/BlogHeader_AtomicDesignSystems_1200x600.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: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=\"9 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\\\/atomic-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"Atomic Design Systems: A Checklist for Each Individual Design Component\",\"datePublished\":\"2020-08-20T11:25:00+00:00\",\"dateModified\":\"2026-03-04T00:17:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/\"},\"wordCount\":1537,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/BlogHeader_AtomicDesignSystems_1200x600.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/\",\"name\":\"A Checklist for Each Individual Atomic Design Systems Component\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/BlogHeader_AtomicDesignSystems_1200x600.png\",\"datePublished\":\"2020-08-20T11:25:00+00:00\",\"dateModified\":\"2026-03-04T00:17:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/BlogHeader_AtomicDesignSystems_1200x600.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/BlogHeader_AtomicDesignSystems_1200x600.png\",\"width\":1200,\"height\":600,\"caption\":\"BlogHeader AtomicDesignSystems 1200x600\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atomic-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Atomic Design Systems: A Checklist for Each Individual Design Component\"}]},{\"@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\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Checklist for Each Individual Atomic Design Systems Component","description":"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.","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\/atomic-design-system\/","og_locale":"en_US","og_type":"article","og_title":"Atomic Design Systems: A Checklist for Each Individual Design Component","og_description":"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2020-08-20T11:25:00+00:00","article_modified_time":"2026-03-04T00:17:00+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/BlogHeader_AtomicDesignSystems_1200x600.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"Atomic Design Systems: A Checklist for Each Individual Design Component","datePublished":"2020-08-20T11:25:00+00:00","dateModified":"2026-03-04T00:17:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/"},"wordCount":1537,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/BlogHeader_AtomicDesignSystems_1200x600.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/","name":"A Checklist for Each Individual Atomic Design Systems Component","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/BlogHeader_AtomicDesignSystems_1200x600.png","datePublished":"2020-08-20T11:25:00+00:00","dateModified":"2026-03-04T00:17:00+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"Use this checklist to make sure that your atomic design system includes all of the individual design components that you need to build amazing UIs.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/BlogHeader_AtomicDesignSystems_1200x600.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/BlogHeader_AtomicDesignSystems_1200x600.png","width":1200,"height":600,"caption":"BlogHeader AtomicDesignSystems 1200x600"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atomic-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Atomic Design Systems: A Checklist for Each Individual Design Component"}]},{"@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\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22428","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\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=22428"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22428\/revisions"}],"predecessor-version":[{"id":58393,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22428\/revisions\/58393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/22429"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=22428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=22428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=22428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}