DEV Community

Cover image for Design Systems (Part I: Foundations)
Emma Bostian ✨
Emma Bostian ✨

Posted on • Updated on

Design Systems (Part I: Foundations)

The web was built as a set of interconnected pages, and blossomed from how content was historically consumed: through books. Since books format content in a series of pages, it was only natural for web pages to leverage the familiar paradigm. Thus, web pages were born.

Other technology terminology stems from printed books: bookmarks and pagination are two such examples. And while the traditional concept of web pages worked for decades, we've quickly realized that this paradigm is no longer viable for building sustainable web applications.

Many companies are in the throes of a paradigm shift towards more modular web applications through the use of reusable components. And while modular web applications are more scalable and testable, they can also provide some challenges.

Building component libraries is good practice, so long as all teams within an organization are developing and consuming one library; unfortunately this often isn't the case. More likely you'll see multiple teams building the same component in different places; this is a catalyst for application inconsistency.

This is where design systems shine.
Design systems allow teams throughout an organization to define their own identity and bake it into accessible and consistent components. These are subsequently consumed by product teams and can have an invaluable impact on the success of a product.

Let's delve into some of the foundational knowledge of design systems, and learn how your team can adopt them to build accessible, scalable, and consistent products.


What Is A Design System?

A design system is a set of reusable standards and components which reinforce a brand's identity. These standards and components allow teams to efficiently build user interfaces with respect to accessibility, performance, consistency, and brand.

While the industry hasn't officially defined a design system, in general it's comprised of three facets: a design language, a component library, and a style guide. We'll dive into each of these areas in-depth a bit later.


Benefits Of A Design System

There are many benefits of establishing a design system. Here are some of the benefits.


Design systems bake accessibility into the design language and component library, ultimately ensuring that every customer can use your product, or products, and achieve the same results.

Through the design language we can ensure that the color palette has sufficient contrast, the typography scale is legible, and the content is digestible.

These design language patterns are the foundation for building the component library, which ensures we leverage semantic HTML elements. And when HTML isn't sufficient, we incorporate WAI-ARIA to fill in the gaps.
Accessibility is no longer an after-thought.

Trickle-Down Style Updates

When a design pattern is updated, developers no longer have to struggle to update the components in multiple places. Design systems provide one source-of-truth for components and patterns. Thus, styles must only be updated in one place. The changes are then propagated to products with just a quick update to the library package version.


Component libraries are built to be responsive. They account for varying screen resolutions and viewports.


Arguably one of the most vital benefits of a design system is consistency. As the number of teams working on a product scales, the UI remains consistent.

Easy On-Boarding

Having a design system significantly reduces the on-boarding time of new team members by providing one source-of-truth for them to learn. By providing comprehensive documentation in one easy-to-find location, we reduce the overwhelm of staring a new job.

Additionally, developer and designers can easily collaborate cross-team when there is one component library being used.

Improved Development Speed

Once the component library has had a stable release, development speed will be drastically improved.

Developers will no longer be burdened with building components from scratch and ensuring that they're accessible and responsive. They will simply be able to import and leverage these components.


Drawbacks Of A Design System

While there are many benefits of a design system, there are also some drawbacks. Below are some of the most common.

Time Consumption

Design systems aren't built overnight. Often they take many months to years to build a stable version.

Additionally, design systems are never "done." There will be points within a system life cycle where the focus is primarily on maintenance instead of active development. And while these periods of maintenance take less designer and developer resources, the ultimate reality is that design systems are products, not projects; they must be nurtured to survive.

Large, Up-Front Commitment

For a system to succeed, there must be an up-front investment of designers and developers. Often a lack of dedicated resources leads to system failure.

Product Team Buy-In

Product teams are a design system's primary stakeholders. Without their buy-in and support a system cannot succeed.

Credit cards

Who Is Building Design Systems?

There are many revered companies adopting the paradigm of design systems. The benefits of systems are being more widely acknowledged, causing industry leaders to pave the way for adoption.

Below are some of the most widely known design systems being developed.


Mailchimp is a popular tool for marketing email campaigns. They have developed a comprehensive design system.

They've even published a separate content style guide to help their employees build products with the persona of Mailchimp.


Material Design

Google Material Design is one of the most notable systems to date. Not only does the style guide include foundation such as color and iconography, but their component library serves iOS, web, Android, and Flutter.


IBM Carbon

IBM Carbon is another revered design system. They provide components in React, Vue, Angular, and of course, vanilla JavaScript.



Atlassian's design system is housed within a beautiful style guide. They provide many resources for brand, identity, and iconography.


I hope part one served as a solid foundation of design systems. Part two will cover Design Language in-depth. Feel free to let me know what you think about design systems down below.

All graphics are courtesy of unDraw.

Top comments (33)

taylorpage71 profile image
Taylor Page

Thank you for writing about this. I stumbled across design system information when trying to find tools that checked color accessibility based on a base color and was not totally sure what I was looking at when I found that the US Government even has a design system.

This helped clear up my understanding on what design systems are and their purpose. Also gives me some much needed help learning more about design.

eclecticcoding profile image

Great article Emma. I look forward to learning more.

yaser profile image
Yaser Al-Najjar

Great article 👌

I also love Microsoft's design system "fluent", it's incredible:

alvechy profile image
Alex Vechy

Also like it, but their icons license leads to ditching the style guides entirely 😅

yaser profile image
Yaser Al-Najjar


berardo profile image
Jose Berardo

Loved that, Emma.
Looking forward to the part II.
I believe you are splitting your insightful slides ( into three in-depth write-ups?

Thanks for sharing it, Emma.

emmabostian profile image
Emma Bostian ✨

Yep it'll be a big series!

jnschrag profile image
Jacque Schrag

My team is in the process of building a design system, and you're absolutely right that it doesn't happen overnight. We're several months into the process and haven't even begun writing code yet (small team + other projects to balance). We're hopeful though that it's going to be worth all of the upfront effort & maintenance effort to keep our branding more consistent and to improve developer experience on future projects.

sk8guerra profile image
Jorge Guerra

I've thinking about it, but didn't know how important it is to split you web pages into components. Now I now the basics, and will start working (even though takes me so much time 😂) in my own design system.
Thank you so much Emma for taking the time to write about this important topic.

abdurrkhalid333 profile image
Abdur Rehman Khalid

This is the one of the best posts I have ever seen because I am a developer but I am not good at UI Design and Creation, But I think that the websites that you have mentioned and the things that you have described will help me very much and it is very amazing to read this post as well. So I am going to follow you because I am sure that your articles will help me doing better in the case of building better GUI and UX Applications.

charlesdlandau profile image
Charles Landau

I've been using MUI for awhile now and I'm really happy to see it in your article. Your point about accessibility is really important. MUI is very studious about documenting the accessibility concerns at the component level.

For example:

It makes sense in some projects but I can also see your point about the cost (time and sweat) to get on board with MUI (or any design system).

elmuerte profile image
Michiel Hendriks

We have plans to adopt PatternFly for our software.

Unlike the design systems presented in this article PatternFly has a specific focus: web-based enterprise software. It can also be applied to other areas that feature a lot of forms and data, like administration interfaces.

It is mainly developed by RedHat.

hifza_khan0 profile image

Hey, It’s my first visit on your Post. Very interesting article and very helpful Post.
If anyone required website development and design for your business or product visit Kamil web solutions for the best web designing and development also get SEO Services in Dubai, UAE.

patriciopatriar profile image
Ataghana Micheal

I'm also new to this your. You're welcome on board. I discuss all topics for ecommerce businesses. A step by step guide on Print On demand & dropshipping, tutorials for apps & online tool

chris_bertrand profile image
Chris Bertrand

Great article Emma, a really nice introduction into both benefits and drawbacks. My favourite tool for checking who uses what is

maciekgrzybek profile image
Maciek Grzybek

Nice article Emma :) Are you working on any Design System at the moment? Royal Canin also have their design system - :)

emmabostian profile image
Emma Bostian ✨

Yep I am at LogMeIn!

murkrage profile image
Mike Ekkel

I am currently organising the different components and styling my company uses. I joined the team a little over a month ago and quickly realised it's very hard for new people to jump in and get going. The only way to figure out what type of components and styling has already been made and in what context is by jumping in the code and browsing the website.

I've got a design background and I just couldn't quite get how they got any work done without organising these things. So I prepared some stuff and showed them how efficient a design system could be and how much value it can add to our current work and future projects. This series is definitely helping my case as well as helping me set up the system for my organisation.

juanbosnic profile image

Data speaks better than words. Show them the cost (sometimes called debt) of not mantaining the core elements of your system. You might need to make projections/asumptions, but these things are not so "tangible" since they have mostly long term consequences.

iamandrewluca profile image
Andrei Luca • Edited

You can also add GitHub design system