Design systems for solving bigger problems

The term "Design System" is one you’ve probably heard if you work at a tech company. To me now, a design system is like a set of rules, or what I’d call the "ground rules" for a company's product development. In a single app, countless features are born and retired. Throughout this process, multiple developers and designers work on different functions, yet these functions need to merge into a cohesive product. I believe this is where the design system plays a vital role. In this post, I’ll explore what a design system is and take a look at some well-known examples.

What is a Design System?

So, what exactly is a design system? I see it as a collection of design components that come together to create a brand. For the rest of this post, I’ll refer to this simply as components. You can think of these components as building blocks that can be combined to create something larger. For instance, you might create a button component and then use that button in a dialog component. Design systems may also include guidelines and names for specific styles such as colors or fonts.

Here’s an example. Let’s say a frequently used color has the HEX code #13BD7E. Instead of referring to it as "that green color" or repeatedly typing #13BD7E, we could simply call it "GREEN-100". Design systems incorporate this kind of standardized naming.

These guidelines extend to the coding stage as well. Just as you would import an IDL (Interface Description Language) in code to define types, these names can be saved in a global style file and referenced throughout the project. The advantage of this approach is that when reviewing someone else’s code, you’ll immediately recognize what screen or feature it refers to, just by looking at the component names. And if a "ground rule" changes, you only need to update the value in the style file—no need to comb through the entire codebase.

Google’s Design System: Material Design

One of the most prominent examples of a design system is Google’s Material Design. Google describes it as follows:

Material Design is a system for building bold and beautiful digital products. By uniting style, branding, interaction, and motion under a consistent set of principles and components, product teams can realize their greatest design potential.

Material Design provides rules and components that allow teams to use style, branding, interaction, and motion consistently across their products. Being an OS design system, it guides teams on how to apply it across different platforms.

In the Material Studies section, Google showcases web apps that implement this design system, breaking down elements like layout, color, typography, and icons. Material Design has paved the way for many teams to adopt similar systems. I remember when a designer first introduced me to Material Design—it became my gateway into the world of design systems.

Apple’s Design System: Human Interface Guidelines

Apple’s design system, Human Interface Guidelines, is also an OS-specific system, featuring detailed guidelines for macOS, iOS, watchOS, and tvOS.

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

Apple emphasizes simplicity and offers various resources and downloadable templates that developers can use to create applications that perfectly align with the company’s design philosophy.

Microsoft’s Design System: Fluent Design System

Microsoft’s Fluent Design System is an open-source, cross-platform design system:

Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

Fluent supports the creation of design models tailored to different OS platforms. You can even check out the code on GitHub and use templates for React projects, like this:

# Option 1: using npx/npm
npx create-react-app my-app --template @fluentui/cra-template
cd my-app
npm start

# Option 2: using yarn
yarn create-react-app my-app --template @fluentui/cra-template
cd my-app
yarn start

Airbnb’s Design System: Design Language System (DLS)

Airbnb introduces its design system, Design Language System, like this:

The DLS is a collection of components defined by shared principles and patterns. This allows for rapid iteration using a shared vocabulary across design, engineering, and other disciplines. The structure of the DLS is simple and coherent, easing communication across teams.

Airbnb’s philosophy is clear: “You can’t build a product without first building the way to make it.” Their design team talks about the joy of designers and developers collaborating in a shared language, focusing on logic and design rather than on style types or code naming conventions.

Conclusion

I still remember the first time I used a design system—it was amazing how quickly I could create a service using the components. Of course, a design system is never truly "done"; it continues to evolve. This ongoing process requires continuous collaboration between the design and development teams. The process isn’t easy, but the end result is a tool that helps solve "bigger" problems, and for that, I am truly grateful.

I’ll end this post with a quote from Airbnb’s design team that resonates deeply:

We are building a world where the differences between disciplines are blurred, where logic and design truly coexist, and where collaboration is not painful but inspiring.