A design system is the backbone of any great product. One reason many websites, products, and systems struggle at scale is inconsistencies in design. As they grow, their design language slowly changes over time and soon their visual language is cluttered and indistinguishable.
Often we waste money and talent by having skilled creators and thinkers solve the same problem again and again and again. Each time they create a slightly different result.
Atomic Design means we create the small atoms of a design first. We carefully curate every button, every slider, every date picker, and every tiny piece of the platform. Then we combine those atoms into molecules to create our environments.
Those atoms are consistent across every platform and every environment. Atoms can have different varients, but their core rationale remains the same. THEN when we need to make edits, we don't edit the environment. We don't change the whole page. We edit the atom and every single environment is immidiately updated and consistent.
You can see this in practice with some of my favorite design systems:
Material Design
This is Google's EXHAUSTIVE design system. They have solutions for every type of product. They made all of the mistakes so you don't have to.
Atlassian
Great for project management tools and finding components for collaboration. Made by the creators of Trello.
Apple Human Interface
Apple provides lots of resources and downloads for all kinds of devices and operating systems.
Microsoft Fluent
Microsoft has created a diverse design system and even provided complete figma files for it.
Polaris
Shopify has mastered the checkout and shopping design flow. Their checkout design system is second to none and their entire figma system is available.
Audi
It shouldn’t be any surprise that the car company that prides itself on cutting edge technology and user experience has a killer design system. When I designed for Audi their system made it infinitely easy to create work that fit their vision.
