Anatomy of a Design System

A brief summary

Design Systems are a culmination of people, processes, and shared assets that work together in an iterative cycle in order to unify products, negotiate and align cross-team communication, and increase efficiencies in building products from design to implementation. It is, in a way, an extension of the DevOps pipeline that puts design at the forefront of the process. In another article I clarified some of these resources a little more.

I’ve tried to show the relationships between all of these resources in the diagram below. As you can see, a Style Guide is it’s own entity, which overlaps the CSS framework, design principles, design assets, and documentation.

All the overlapping entities & resources that make up a design system.

Pattern Libraries are not captured in the illustration, because I believe those consist of UI kits, design assets, visual design language, and some representation of the CSS framework, but do not encapsulate the entirety of developments’ needs. Pattern Libraries also differ company-to-company; some may only consist of a UI Kit and some documentation.