Revisiting the anatomy of a design system
Over the years, a lot has evolved about what a design system is what it’s comprised of. An article from Brad Frost inspired me to revisit this earlier article from 2016 and update this idea with my current perspectives.
The most notable perspectives:
1. Design systems are for user interfaces
2. Design systems are a system of systems
Seeing as though an interface design system is a system comprised of other systems, I’ve decided to view a few of those systems separately. Some of these systems can exist independently from one another, but others are required aspects of another system.
Brand system
The brand system is the core identity of a brand. It encompasses a small set of specific colors, typefaces, logos, and defines the visual aesthetic and the voice and tone of the brand. While it may not be a direct part of the interface design system, its extensions are; and changes to the brand can affect the interface design system.
UI visual language system
This is the system by which you use elements of design to communicate meaning with users via the interface. Elements of the visual language system have basic meaning and relationships. This system is the foundational mechanism by which a brand translates to user interfaces.
Component system
The component system has the most visibility regarding user interface design systems. This system is where the visual language is applied to components. Design and development overlap, as this is a collaborative process. The design token system and API system are shared areas between design and development.
Documentation system
(for interface design system)
This is the system by which information is shared with the broader organization. It is specifically used by developers and designers who rely on the interface design system. Much of it is an extension of other systems, or only relies on them in part, however it is crucial in tying them all together for consumers.
Interface design system
Saving the best for last, each of the systems exampled above come together in some form to create an interface design system. By breaking out the sub-systems, we’re able to display a slightly more simplified view of an interface design system.
These diagrams are by no means complete or fully accurate to every interface design system or their parts. Venn diagrams themselves are not the best visualization for systems, however they help in illustrating generic relationships.
Every organization, brand, or agency has different ways to approach and construct these systems, or their user interface design system as a whole. While there are unique qualities to every interface design system, I believe that this encompasses broad and general structures that each have in some fashion.
