Andrew's Digital Garden

What is a design system?

Exact terminology for design systems is a bit tricky. Although I could explain how to make a design system, explaining exactly what it is quickly becomes convoluted.

Here's a best attempt at some definitions.

Design System - a system made up of smaller systems. Including components, UI kits, standards, best practices, and patterns that are used to design and build digital interfaces. It reflects (is?) the visual language for the organisation.
- Design systems are systems of systems, but not all systems are part of the design system
- Think of it as the 'umbrella', which everything else is contained under.
- [[20211122112210-design-systems-are-for-user-interfaces]]
- [[20211122111728-design-system-multiple-systems]]
Component Library - a collection of UI components that can be reused across multiple products
- The code implementation for components, patterns, etc.
UI Kit - a collection of UI elements that can be reused to design products
- The design tool implementation for components, patterns, etc.
Style guide - agreed upon documentation that provides instructions for a design system's patterns and components. Rules and standards.
- When to use X colour, how to layout pages, dos and don'ts, etc.
Pattern - a recurring solution to common problems
- Can be implemented in various ways - e.g. a component can exist to satisfy a pattern, or it can just be represented by documentation that the user can optionally use

There's some confusing overlap here too. What is a style guide vs a pattern library, if the former is documenting patterns? What is a documentation site vs a style guide? Is it just an all-encompassing version of a bunch of different documentation artifacts?

These terms can differ from person to person. It's important that you're on the same page, as there's generally not any standard definitions. After all, these are just terms used to communicate ideas. Make sure your team is on the same page, and you're golden.