Design Systems: What They Are and Why You Need One
Originally published on Medium Apr 28, 2023. I’ve added an update below to reflect how AI can now be used to accelerate and evolve design systems.
By definition a design system is a complete set of standards intended to manage design at scale using reusable components and patterns. When properly implemented, a design system provides a lot of benefits not only to design teams but development teams as well.
Imagine you are tasked with baking a cake. You know what it looks like from the outside and from your extensive experience eating cakes you know that cakes have layers, frosting and, sometimes, decorations. But do you know just from looking at it what ingredients were used to make it? To successfully make your cake you will need to know more than just the experience of eating cake. You need to know the ingredients and how to use them. Creating a design system is a lot like creating a recipe.
Taking this very relatable scenario one step further, you are now a cake baking superstar. Customers love you, you’re getting very busy and you need to hire staff. As you look to expand your cake baking enterprise you know you want scalability, consistency, to maintain productivity, and to share your cake knowledge with the new bakers so they can follow the recipes. So what do you do? You create a recipe book.
In designing digital products, as in establishing your very own cake shop, the overarching goal is to be able to build for scale. Having to produce digital products (or cakes) without any clear guidance on how to do it isn’t very helpful.
When creating a design system one method that I like to reference is Brad Frost’s Atomic Design. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. Frost defines the five stages of Atomic Design as:
Atoms: The foundational building blocks that comprise all user interfaces. “Atoms” include basic HTML elements like form labels, inputs, buttons, colors, fonts and others that can’t be broken down any further without ceasing to be functional.
Molecules: In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. Creating simple components helps UI designers and developers do one thing and do it well. Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.
Organisms: Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
Templates: Page-level objects that place components into a layout and articulate the design’s underlying content structure.
Pages: Specific instances of templates that show what a UI looks like with real representative content in place.
The Atomic Design method is not a linear process, but rather a mental model to help us think of user interfaces as both a cohesive whole and a collection of parts at the same time. While this method is appropriate for designing and developing evergreen design systems for digital products, there are plenty of other existing design systems that designers often use such as:
So far, we’ve primarily focused on the methods of understanding the value of creating and following a design system for digital products, but the practice of design systems also extends to how a brand is expressed through other communication touch-points. Similar to design systems for digital products, designers create traditional “Brand Guides” which focus on the overall strategy and consistency of a brand as it relates to a logo, colors, and brand personality, which include visual examples of how the brand should be executed in various communications.
It’s been common practice to create brand guidelines ahead of website design in order to ensure that the brand look and feel is in place first. The problem is that these brand guidelines often don’t include guidance for digital products. With the digitization of work, products, and communication, this is now changing.
The practice of creating Design Systems for digital products is still relatively new and rapidly evolving. In 2005, Jenifer Tidwell published her book Designing Interfaces followed by Yahoo! publishing their open source Yahoo User Interface Library (YUI) in 2006. In 2008, phrases such as “CSS Libraries”, and “pattern portfolios” paved the way for the creation of “Front End Style Guides” and “Style Tiles”. In 2011, Twitter shared their own open-source framework around design patterns, Blueprint (later renamed Bootstrap), and Google’s Material Design followed in 2014.
Since then we’ve seen design systems from IBM, AirBnb, and Uber that encompass not just their brand guidelines, but also full-scale design systems.
Whether you’re a small design team or a large enterprise business, defining, scaling and streamlining your design ensures a more holistic user experience, saves money and prepares you for the future. To quote former IBM president Thomas J. Watson Jr., “Good design is good business”, and there is no easier way to bring value to your business than establishing a strong design system.
When developing design systems at The Gnar, we take a holistic approach to ensure that all aspects of your unique brand seamlessly integrate into your digital experiences. From website content to software error messages, each touchpoint with your customer is an opportunity to reinforce your brand values alongside a consistent look and feel.
After establishing your design system, the work doesn’t end there. Technology is rapidly evolving and so are the needs of your users. Thinking back to our super star baker, the original cake that won over customers years ago may not be as good as it is today, or perhaps you’ve added a lot of new desserts as a result of customer requests and the products are longer as consistent as they once were.
At this point, it’s important to reevaluate your current design system to understand what’s holding up and what’s starting to break. Components drift. Patterns get stretched beyond their original intent. Edge cases pile up. What was once coherent slowly turns into a collection of exceptions.
This is the moment where teams usually feel the drag—audits take too long, exploration feels expensive, and iteration slows down just when the product needs to move faster.
That’s where AI can meaningfully accelerate the process.
Update: Where AI Fits Into Modern Design Systems
Design systems have always been about speed, consistency, and shared understanding. AI doesn’t change that goal. It just removes a lot of the friction that used to slow teams down.
Used correctly, AI accelerates thinking, not just production.
Once you already have clear components, states, roles, and a solid design system—AI becomes a force multiplier in a few very specific ways:
1. Faster exploration without starting from zero
If your atoms, patterns, and constraints are defined, AI can generate variations quickly. Different states, edge cases, responsive behaviors, and role-based views can be explored in minutes instead of days. This is especially useful for stress-testing a system before engineers ever touch it.
2. Making intent explicit
Design systems often fail not because components are wrong, but because intent is implicit. AI works best when you’re forced to articulate purpose:
What state is this in?
Who is this for?
What actions are allowed or restricted?
That clarity benefits humans just as much as machines. The system starts to behave instead of just exist.
3. Bridging design and documentation
Documentation is where most design systems quietly rot. AI can help generate and maintain usage guidance, do/don’t examples, accessibility notes, and rationale, as long as the system itself is well-structured. Garbage in still equals garbage out.
4. Supporting iteration, not replacing judgment
AI is not deciding what belongs in your system. It’s helping you test ideas faster, see consequences sooner, and surface inconsistencies earlier. The designer is still responsible for taste, tradeoffs, and coherence.
The important part: this only works if you already have a designed frame. A design system, a shared language, and clear constraints. AI is bad at inventing structure. It’s very good at working within one.
Think back to the baker. AI doesn’t invent the recipe. It helps you try new variations, scale production, and catch mistakes before customers do. The fundamentals still matter. Maybe even more than before.
Design systems were never about freezing design in time. They’re about enabling change without chaos. AI just lets you get there faster, if you’re disciplined enough to use it properly.