What’s a Design System, Design Language, and Design Language System? And what’s the Difference?

TL;DR: Depending on who you ask, a design system and a design language might be the same thing or not. Regardless, the important point here is that both a system and a language go beyond a simple pattern library. They have to include a set of rules and guidelines to give the included components structure and meaning.

Most people concerned with digital design in one way or the other should already have an intuitive understanding of what a design system or a design language is. It’s what Apple’s Human Interface Guidelines are, or Microsoft’s Metro Design Language. I, personally, have heard the term “design language” more often in my career in UX so far, and sometimes “design system”. But a new term I came across for the first time recently was “design language system”. So, I asked myself: Is there actually a difference between these three? What followed was a little literature review of three very useful articles:

• First, A comprehensive guide to design systems by Will Fanguy;
• second, Design Language System by Swetha Suresh;
• and third, What is a Design Language… really? by Nate Baldwin.

I also included the surprisingly short Wikipedia article about design languages in my research. Here’s what I found.

A comprehensive guide to design systems

Will Fanguy describes a design system as a

collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

That is, a simple set of components is not enough if there aren’t structure and meaning behind it. He continues:

Most simply put, the difference is in the standards and documentation […] with a guide on how and why to use them.

Therefore, in summary, a design system comprises (1) a library of design patterns, (2) rules, and (3) streamlined UX guidelines. The latter two are what give the otherwise “lifeless” pattern library logic and structure. Also, Fanguy mentions the relationship to design languages:

The visual design language is the core of a design system. It’s made up of the discernible components that you’ll use to construct your digital product.

Examples for design systems contained in the article include:

• Atlassian’s Design System,
• Salesforce’s “Lightning” Design System, and
• Shopify’s “Polaris” Design System.

Design Language System

Now, according to Swetha Suresh, a Design Language System is a

set of rules or guidelines that heightens the level of harmony in a digital ecosystem.

It should contain a toolbox, naming conventions, a grid system, typo & text styles, and a pattern library. Ultimately, a design language system enhances brand recognizability, she writes, while yielding consistency and authenticity.

Examples given for design language systems include:

• Atlassian’s Design System,
• Salesforce’s “Lightning” Design System, and
• Shopify’s “Polaris” Design System.

But also IBM’s Design System and “Apple’s Design Language System“. So far, it seems like “Design System” and “Design Language System” are describing the same thing. Maybe with a little bit more focus on business and brand identity in the latter case.

What is a Design Language… really?

Nate Baldwin uses a slightly more theoretical approach by focusing on the essential properties of languages themselves. A language is a “formal, unified system of meanings as way to intelligibly communicate with users”. He states that a successful, effective language needs clear and consistent rules and makes clear that, as above, a simple pattern library or style guide is not enough to constitute a design language. Rather, you also need semantics, structures, and meanings behind the individual elements.

In his article he provides an extremely useful framework for determining whether a design language is “truly linguistic”:

The __________ used in the __________ helps to communicate __________.

Here, the first space is for the design element, e.g., “line thickness”. The second space is for the component or pattern, e.g., “primary button”, and the third space is for the semantic, e.g., “important interactive elements”.

So, are they all the same? (a.k.a. Conclusion)

When looking at the core statements from the above three articles, they all have one thing in common. The authors clearly agree that a simple pattern (or component) library is not enough to constitute a design system or language … or a design language system. On top, you need rules or guidelines to put the individual elements in their places and give them meaning.

An example: Take a look at the Floating Action Button (FAB) from Google’s Material Design. A simple pattern library would give you some code and maybe tell you which colors you’re allowed to use. But only the fact that Google includes guidelines that very specifically tell you in which contexts to use the button (why and how) truly makes it a part of a design system.

From this, we could conclude that all three are the same, which also the previously mentioned Wikipedia article supports (design language = design language system = design vocabulary). However, from what I’ve read, I’d disagree with that. The difference between a design system and a design language system seems to be marginal (the second article just focuses a bit more on brand and business). But design system and design language don’t seem to be the same. Will Fanguy makes very clear that a (visual) design language is at the core of a design system, and therefore only a part of it. The one thing he mentions that doesn’t come up in the other two articles are streamlined UX guidelines, which go beyond visual design (UX ≠ UI). However, I suspect that he doesn’t have the same understanding of design language as the other two authors since he simply describes it as a collection of color, typography, sizing and spacing, and imagery.

Ultimately, I have the impression that the definitions of and boundaries between design systems and languages are, at best, a little blurry. Therefore, based on the above, I want to propose that, extremely simply put, the following might hold:

• design language = pattern/component library + rules + semantics
• design system = pattern/component library + rules + semantics + UX guidelines

But, to be honest, I’m not 100% sure about that. Hence, the only definite conclusion I can draw is that when talking about design systems or languages, it’s extremely important to just make very clear what one’s understanding of the concepts is to avoid confusion and misunderstandings.

• 

• 

•