What is a design system?

The internet was not originally intended to host large-scale social and enterprise applications; it was built as a method for sharing data all across the world.

Yet much of the terminology we've coined in regards to web development has its roots in printed books. Webpages, bookmarking, and pagination all allude to a time when printed media was king.

This era is long gone.

Digital media has taken over as the primary resource for sharing and digesting content.

We don't develop websites as full pages anymore, which poses a problem. When we associate websites with the concept of pages, subconsciously we throw re-usability out the window; nothing about the word page indicates re-usability. And when we don't re-use our code consistency, accessibility, and development speed suffer.

Instead of thinking in terms of pages, we should be thinking in terms of components. Components allow us to maintain consistent user interfaces which are accessible by nature. And design systems are the way in which we can create these sets of reusable patterns and components.

Design systems allow us to create a cohesive experience throughout every leg of a user's journey.

What Is A Design System?

There is no industry definition for a design system, which can make it a bit tricky to understand.

If you hear a designer say design system, they're most likely referring to the design language and UI Kit.

If you hear a developer say design system, they're probably referring to the component library or style guide.

But a design system encompasses all of these things: design language, UI Kit, component library, and style guide.