Understanding “Design Systems”

An historically-focused introduction for starting UI Designers

Maybe you’ve found yourself in the difficult position of needing to create a Design System - maybe it’s for a client, for work, or maybe it’s just a personal project. I encountered this term last year through a project.

And although there are many documents online, I felt there wasn’t anything too complete in helping me dive into the context and background needed understanding Design Systems. Most of the informationI have found was focused on helping designers get to know quickly most important aspects.

So… here’s my shot! - this article is meant to ease designers into the overwhelming task of understanding the context of design systems and why they matter in our day to day activities.

What is a “Design System”

A design system is a structured collection of tools, reusable components, and guidelines (documentation) crafted to help teams create (or adapt) digital products more efficiently and consistently.

It’s basically your ever expanding lore-keeping e-book: where you guard all the spicy details like what’s the specific HEX code for the disabled border of the second variant of your tertiary buttons. Or explain the process that explains why the final colors align with the best accessibility standards.

But I’m getting ahead of myself. First… I’ve made a basic context diagram to show where found I’ve noticed that the ever expanding lore-book (called Design System) is placed:

Right there on the top left, it’s where people count pixels and the ongoing debate between developers and designers carries on.

As you can see, Design Systems provide a framework to maintain digital uniformity in design and functionality across platforms, enabling smoother collaboration and faster workflows in organizations.

Rise of Design Systems

On early 2010s (when the idea of Design Systems was forming), there were these options for designing digital products:

1. In some teams, designers and developers had to be in very close communication to negotiate and agree on each design adjustment.
2. For some deliverables, designers had to create excruciatingly detailed documentation such as redlining, for the design to be ready for implementation.
3. In some roles, the expectation was to become a full-stack developer (which job was to design, create, and maintain the website).

Across the industry; these and many other situations made the workflows tedious, slow, or simply not very useful in the ever-updating digital world. This is why developing Design Systems have been slowly being positioned as one of the best practices for carefully positioning your brand.

History side-note: While the principles behind design systems (standardized processes, reusable components, and systematic design) emerged in software engineering during the late 20th century (e.g., modular programming, object-oriented design), the term “Design System” itself was not formally coined or widely used in that context until the 2010s. With his book “Atomic Design” by Brad Frost, published in 2016 helped cement the term “Design System” and alongside, his Atomic Design methodology. Earlier frameworks like Apple’s Human Interface Guidelines (1983) and NASA’s Graphics Standards Manual (1975) laid the groundwork by establishing foundational principles, but it was Google’s Material Design (2014) that brought public branding, technical rigor, and cross-functional tooling, solidifying “design system” as the standard term for scalable, component-driven design frameworks.

What makes a design system

Design systems are often confused with tools like style guides or ui kits. However, they serve distinct purposes in the design process:

• Style guides refer to guidelines about brand consistency. They focus on usually static visual elements like: color palettes, typography use cases, and logo placements. | Scope: Narrower than design systems; lacks interactive components or coding standards.
• UI Kits (or Component Libraries) are pre-designed interface elements packed together for rapid prototyping and development, usually with items like buttons, forms and icons. | Scope: Focused on UI building blocks without broader system governance.
• Pattern libraries are groups of UI elements that solve specific user interaction scenarios such as navigation flows, data visualization layout, templates. | Scope: Broader than component libraries but narrower than design systems.
• Design systems: all of the above.

Tech side note: When creating or implementing a UI kit or Pattern library, ensure that each tool is thoughtfully integrated, keeping in mind the development ecosystem and compatibility with your design tools. Currently, the most used application to design UI is Figma. This is mostly because of features like the ‘Inspect’ mode, which provides developers with precise details about the design - including pixel and spacing measurements, color values, and typography, alongside comprehensive documentation to facilitate the design to code transition. For designers, aside from having a relatively easy learning curve, it also offers design-oriented tools (like a presentation designer and a whiteboard platform for collaboration) in an inter-connected environment.

In conclusion, design systems are the most comprehensive because they can include static style guides or editable UI kits, while also offering dynamic capabilities such as auto-updating themes and multi-platform adaptation logic, or even more specific documentation. As the components grow and the environment for the brand to inhabit becomes more complex, more additional documentation is required.

How much to document?

All your defining characteristics as a brand, like what colors are acceptable or which design principles it follows. Everything that helps you standardise digital experiences and create a comprehensive brand. Ideally, design systems should also document and explain the reasonings and history for most of the decision made within the product ecosystem.

Mostly, a design system is still mostly about documentation, documentation and more documentation…

Some common documentations (or sections) include:

• Grid Systems
• Iconography library
• Color Palette / Schemes
• Breakpoint systems / parameters
• Implementation Guidelines
• Accessibility Guidelines

If you would like further guidance please click on each of the links. I’ve selected what I believe are some of the best guides online.

Also, Figma has this great article about documentation in Design Systems.

Design System examples

Real-world examples of design systems (that are a bit more modern than the ones found in the history side note):

How to organize design systems?

As you can probably guess: without the proper guidelines and a quick implementation, a brand can very easily lose its recognizability across multiple platforms. And without the proper systems to organize all of the elements, the designers and developers can very easily lose where the files are. Don’t worry, there are multiple principles already available and widely used. On the next article I’m going to delve a little deeper into the various ways you can organize your design systems (atomic design, component-driven architecture, modular design, etc.)

But in the meantime, please share bellow: what challenges have you faced with design systems? How have you felt they’ve changed the industry? Any anecdotes?

- Thanks, Marifer and José de Jesús Muñoz Bañuelos , for helping me put the finishing touches and improve this article!