If my full-post about Design System Architecture is too long for your taste, then you might prefer this summarised version.


At Buildit we’ve done a fair amount of work on design systems. We’ve noticed certain types of tools and integrations between them recur and figured it would be useful to call them out.


This post covers the overall architecture for a design system’s infrastructure that we’ve observed and used. Not every design system will contain all of these parts. However, the ones they do have are likely connected in the same way.


Generic architecture of a design system’s infrastructure


UI Library

The UI library should be the “single source of truth” since it contains the actual implementations of the UI components. Note that in complex design systems you may have several of these (e.g. one for native iOS, one for native Android and one for Web). Likewise, you may (also) have hierarchies of them (e.g. a common CSS library for all web things, and then more specialised ones that extend it with components for a particular framework or CMS).


Style Guide Generator

Tools like Pattern LabFractal and StoryBook that generate a living style guide from the code in your UI library.


Package Managers & Repos

Tools like npmyarn and Nexus that take care of packaging and distributing your UI library.


Design Token Repository

Tools to store, manage and export design tokens. One example would be token data in JSON files exported via SalesForce Theo. Some larger tools like Brand.ai and Frontify incorporate design token repositories within them.


Visual Design Repository

Tools like CraftFolioZeroHeight etc., through which designers can sync and share their assets (e.g. Sketch symbols).


Visual Design Generator

Tools like React Sketch.app that generate visual design files (e.g. Sketch UI kits) from the code in your UI library.


Visual Design Tools

Tools like Sketch or PhotoShop that are used to produce visual designs of UI components.



When it comes to discussing or comparing these categories of tools and the connections between them, we’ve found it especially useful to identify them. Hopefully, you will too.


We’d love to hear your thoughts!


If this summary has whet your appetite, please check out the full-fat version of this post when you’ve got some more time. It contains a lot more detail.

James Nash

James Nash

Creative Technologist


Driven by his passion for design and technology, James aims to help colleagues and clients combine those disciplines effectively and produce great customer experiences. His work has led him into the world of design systems, which he firmly believes are a key enabler for such collaborations and, ultimately, digital transformations.

What you’ve read here? Tip of the iceberg. Are you ready to be part of the excitement?