Design Systems
A design system is a hierarchy of styles, components, and patterns that can be used by designers and engineers to build any number of applications.
Styles are the atoms of the design system. They describe how the system should look, feel, and (in some cases) sound. These may include:
- Color
- Typography
- Iconography
- Motion
Components are the molecules of the design system. They follow your style guidelines and add interactivity and functionality specific to your app. Some common components you might find include:
- Buttons
- Cards
- Inputs
Lastly, patterns are the organisms of the design system. They are reusable groups of components that bring new meaning. Some common patterns may be:
- Forms
- Confirmation dialogs
- Navigation bars
Examples
Design systems are everywhere — you're looking at one right now on this website! Some popular examples include:
- Material Design (opens in a new tab) by Google
- Base (opens in a new tab) by Uber
- Spectrum (opens in a new tab) by Adobe
For more design system examples, check out Figma's Design Systems (opens in a new tab) publication.