Have you ever been to a city or neighborhood that feels “cookie cutter”? The buildings all look virtually identical. The layout is virtually the same street to street and building to building. It’s overly repetitive. Your landmarks are on street names, rather than being able to discern the difference from space to space, building to building, block to block. The conformity actually causes confusion because of over-conformity. The usage is tailored to fit the environment, rather than the environment being shaped to fit the usage.
Christopher Alexander is one of my favorite writers around architecture. He famously described how cities organically evolve from coherent patterns, each addressing specific human needs. Your design system operates similarly, not as a rigid library of pre-made parts, but as a living ecosystem of resources that empowers creative, intentional growth.
When you plan a well-functioning city, you don't begin with rigid, pre-built structures. You start with purpose, then consider how to use infrastructure like roads, power lines, and water systems to achieve that purpose. You establish zones, standards, and patterns. Then, neighborhoods, commercial districts, and unique landmarks emerge from these foundations. Likewise, your design system shouldn’t be merely limited to a collection of reusable components; it’s an infrastructure simultaneously enabling creativity and cohesion.
A good design system will accomplish this with strong foundations and pre-built standard compositions. Let’s take a look at both. This might feel like a lot, but hang with me. You’ll see the importance of this pretty quickly.
The Foundations
Effective design systems rely on strong foundations through at least three core pieces: principles, styling infrastructure (design tokens), and basic elements.
Principles and Guidelines
Design systems are built to serve a set of purposes. There are good ways and less good ways to accomplish those purposes. Principles exist to state the purpose and goals of a design system. Guidelines force our choices to meet those principles. They help everyone—from designers to developers to product leaders—align around the unified purpose driving the design system. And they empower teams to contribute to the design system in a consistent and helpful way.
Styling Infrastructure
Design Tokens are really a fancy name for a development idea called a “variable”. They are basically a container that can hold a value. A common design token example is: “brand-primary”. Depending upon your token approach, you might set brand primary as a specific color code…
@brand-primary: #00FFFF;
…or as another design token…
@brand-primary: @yellow-500
A design token can define almost anything like colors, typography, spacing, animation timing, and other critical values throughout the design system. They are the fundamental network on which everything is defined.
And the best part is that they are flexible. If you structure your design token system well enough, you can quickly make sweeping changes, deploy a new brand, and have alternative themes (like dark mode). These are powerful little tokens.
Basic Elements
Another, more obvious foundation is basic elements. A basic element is usually where you start to see the term “component” or “reusable component”. These might be buttons, form fields, containers, or other very simple elements. These are the most common, simple, reusable elements that digital interfaces require. Typically, they rely on Design Tokens to style raw materials (like text, boxes and containers, and simple assets) into reusable components.
These three core pieces (guidelines and principles, design tokens, and basic elements) form the foundation of a robust design system. They are some of the most powerful pieces of a design system. They ensure coherence and structural integrity, supporting numerous variations while maintaining unity.
We’ll come back to foundations in just a bit. But, hopefully, you can already start to see why your design system is (and should be considered) more than just components.
Compositions
Compositions can take many forms, but typically, this is what people think of when they think of design systems. This is where you tend to see people focus on “components”. Since these are pretty well known, I’ll spare the excessive details.
Assembly Components
I like to name things. And, these aren’t just any component. Typically, these take several of the foundations (a few basic elements and some design tokens) to form a more complex, reusable component. These might be modals, cards, date-pickers, tables, and endless other compositions.
Although assembly components are usually the shining centerpiece of design systems, they're fundamentally supported and shaped by the foundations. It’s also where the conversation about “efficiency” tends to focus, though efficiency comes through the entire design system, not just a few of the most common complex components.
Patterns and Templates
Patterns and templates are generally more complex than components. They are a set of components, strung together in some sort of structure or progression. They are user-validated solutions addressing recurring problems. Think of login forms, breadcrumbs and navigation, notifications, and progress steppers. Many times, these are already solved problems in the digital industry, unless you’re doing something fairly novel.
Templates are kind of like mega patterns. They can be much larger, encompassing components and patterns. They can look like pre-defined common pages, or large pieces of an experience that may appear in different areas throughout a system.
Why Foundations and Compositions are Important
Whew! OK, we made it through the design system primer. Maybe you think that wasn’t necessary (and maybe it wasn’t), but here’s why I went through it…
Everything is built on the foundations.
Scroll back up and look at that list. Templates leverage patterns that leverage component assemblies that leverage basic elements and design tokens. All of this is aligned to principles that support the entire guiding purpose of the design system.
The foundations are core to a successful design system. In fact, you could argue that the foundations really are the design system. (Maybe, that’s a bit too far…maybe.)
When Assembly Components Aren’t Enough
So what do you do when an assembly component, pattern, or template isn’t enough? Well, you have two real choices: shove a square peg into a round hole or build something custom. “Custom”, you say?!
Yes. Custom. But, still in the design system. This is where the power of exposing foundations in a design system comes into play.
Design systems should support reuse. They should adopt only the most common pieces for reuse. That means you can never build enough “components” to satisfy everyone. Unless, you consider the incredible reusability of your foundations.
It might be a scary idea, but it’s an idea that provides stability and consistency that you want from a design system, while also providing the freedom that many complex digital applications need (especially enterprise-sized apps). Design systems are enablers [check out my previous article]. We ought to treat them more like crowbars than hammers, to provide leverage…not smashing every screen into an unusable mold.
I admit, you’ll need visibility and processes (and dare I say “governance”) over what gets built using these foundations. But, that’s a topic for a future article.
Let’s dive into the benefits of unleashing your powers of foundations to your teams. I hope it’s enough to convince you.
Benefits of Broadening Your View
Getting beyond the scary notion that people will mess with the private foundations of your design system might take some time for you to come to grips with. So, here are a few things I encourage you to mull over:
Consistency, Not Conformity
Users value consistency. Plus, consistency has a lot of benefits for efficiency when building products. So, it makes sense that any system will enable consistency. But unwavering conformity can cause a natural (underground) resistance to usage. Building systems that naturally and easily enable consistency without falling into the trap of rigid conformity can improve engagement and adoption. It builds a healthy culture around design systems.
Optimized for Usability, Then Reusability
It’s just two letters, but the difference is huge for your end-users. Reusability is one of the key selling points of a design system. It’s efficient for developers, and it enables consistency that users expect. That’s where people tend to focus on assembly components, patterns, and templates. But the not-so-obvious problem is that if you prioritize only using “reusable components,” then inevitably you will degrade the experience for the user. Why? Because it doesn’t make sense to standardize every possible component. So, you’re left to shove a square peg into a round hole…if you’ve limited yourself to pre-built reusable components. Opening up the foundations allows for the creation of highly usable experiences while still staying “within the system”. And guess what…it’s using the reusable foundations.
No more “Design systems are a blocker”
Allowing designers and developers access to foundational elements gives them greater autonomy and ownership. They can proactively solve unique problems without always waiting for centralized updates or approvals. It empowers independent teams to inform and move.
Scalability through Shared Understanding
Exposing the foundational promotes deeper understanding across teams. It enables better collaboration. It allows people to invent new capabilities built with the design system foundations and then propose those back into the system. That means more “community contributions,” which improves momentum and broader adoption of your system. This kind of shared knowledge significantly improves your ability to scale the design system to meet the ecosystem needs of your products.
Innovation and Experimentation
Opening access to the underlying foundations gives more freedom for experimentation. It provides more available materials for creativity and composition. Instead of being locked into the pre-existing solutions, it allows for the freedom to build something unique with enough constraints to still exist in the system.
Shifting the Expectations for Design Systems
So, are you convinced yet? If not, that’s okay. This might not work for everyone, but I encourage you to give it some consideration. Transitioning perspectives around design systems will be challenging…but these rewards can be pretty great. What would happen if you encouraged this kind of culture?
The fear of flexibility leading to chaos is real. But the impact on rigidity stifling innovation is also real. It’s important to educate teams on balancing creative exploration with consistency to help mitigate negative consequences. It’s also important to support healthy working practices and processes that provide visibility and influence. This is where relationships around design systems become very important.
Working hard to adjust the expectations of your design system to an enabling infrastructure—like a well-planned city—rather than restrictive instructions is an intentional activity that won’t happen by accident.
Redefining Adherence to Unlock Creativity
Just as coherent urban infrastructure enables countless unique neighborhoods and landmarks, your design system’s foundational resources provide the power of freedom with the benefits of systematic consistency. What might happen if you consider your system a vibrant ecosystem, rather than a restrictive library? What if it were able to unlock innovation, collaboration, and enduring value in your digital product environments?
Remember that city of over-conformity? The confusing one we started with? There’s a different outcome that would produce a different type of city. The kind that has variety from street to street and building to building. No two buildings are identical. But they are all built with the same materials on the same foundational infrastructure. The city still has a consistent harmony to it, but the environment is tailored to how it’s used, rather than cheap reusability. Consistency serves the usage of the spaces, not constraining its usage. Those kinds of cities are easy to navigate because of their distinctness and form tailored to fit the functional needs. These cities and spaces have character that enhances their use.
This is the advantage of a broader system view. These are the kinds of digital environments that are empowered and built using robust design systems.