The Language of Design Systems

It’s critical during design projects that your team is speaking the same language right from the beginning. I’ve come to rely on metaphors as a device to quickly draw parallels and elicit shared understanding from collaborators and clients. This is especially useful when introducing new concepts to the uninitiated.

One metaphor I return to consistently is comparing the framework of a design system to that of a traditional language. They are similar in that they both provide a set of consistent and agreed-upon “words” (components) and “grammar” (guidelines) used for creating structure. Just as a language allows people to communicate and convey meaning, a design system allows teams to create visuals and experiences that are consistent and easy to understand.

Running with this metaphor, there are four main aspects of language I find apply to the creation of design systems.

To help illustrate these concepts I’ve pulled images from one of my favorite brand redesigns, the Netflix work done by Gretel. These images are for educational purposes only and I have no association with the work. Other than being a huge fan. 😉

1. Words = Foundational components

This set of components typically includes logo, color, and typography — although there are plenty of other elements to consider here such as texture or audio. These items hold little to no meaning on their own but are the seeds from which your unique voice will sprout.

2. Grammar = The arrangement of your components

Here we define the rules around how our foundational components are to be assembled. This is where we begin to be able to articulate when something feels “on-brand”. Some examples include color ratios, type sizes and pairings, layout grids, and motion curves.

3. Semantics = The meaning conveyed by your arrangements

This is where a design language’s true character emerges. Is your language meant to reflect a sense of speed and performance? Is it meant to be fun and irreverent? Calm and reassuring? The nuances here are what create languages that we resonate with on more personal levels. A language’s “vibe” lives in its semantics.

4. Pragmatics = The correct meaning at the correct time

The final step in our linguistic journey is knowing how to convey the right meaning at the right time. Pragmatics help us define this. User onboarding will likely use a different language compared to marketing. An error state will likely use a different language compared to a success state. The context of the conversation dictates the usage of your design language.

Much like a child’s language development, creating a design system can be a gradual process that requires patience, experimentation, and iteration before reaching a level of fluency and consistency.

Thanks for reading. ✌️