What is a Design System?

A design system is a collection of reusable components and elements, such as materials, typography, logos or colors, that serve as the backbone behind the creation and promotion of a physical or digital product.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 08/17/2023 at 09:08
Last Updated on 08/17/2023 at 10:19
<p>A flower that represents Digital Craft with the text "What is a Design System?" beneath it.</p>

A design system is a collection of reusable components and elements, such as materials, typography, logos or colors, that serve as the backbone behind the creation and promotion of a physical or digital product.

SubscribeHow to create a Design System using Variables in Figma

Design systems reduce redundancy and empower organizations to create consistent, coherent designs by providing a shared and consistent visual language that can be used across channels.

Origin

The term design system was first mentioned in the 1968 NATO Software Engineering Conference by Christopher Alexander, who along with Sara Ishikawa and Murray Silverstein later published A Pattern Language.

A Pattern language: Towns, Buildings, Construction

Design systems are intended to serve as a framework of interconnected patterns that streamline and optimize design efforts ranging from architecture to digital products like websites and apps.

Atomic Design for Digital Design Systems

<p>Brad Frost's illustration of the five levels of Atomic Design. The illustration includes 5 icons which are labelled Atoms, Molecules, Organisms, Templates and Pages.</p>

Atomic Design was coined by Brad Frost in his book Atomic Design (November, 2016) and is a modern methodology that describes how to create digital design systems through 5 levels: Atoms, Molecules, Organisms, Templates & Pages.

What is Atomic Design ?

Why should I use a Design System ?

<p>An image that shows visual elements of a design system, intended to suggest that it serves as a toolkit or framework.</p>

Design systems aid a team, company or organization in:

  • Creating a unified language that can be used within cross-functional teams.
  • Creating a more cohesive and consistent brand and user experience.
  • Optimizing production of digital products and media.
  • Building products faster through reusable components and shared rationale.
  • Improving maintenance and scalability through the reduction of technical and design debt.
  • Empowering product teams to focus on tackling the problem itself rather than the mechanism that solves the problem.

What are the most notable Design Systems?

<p>A screenshot of Apple's Human Interface Guidelines website, August 17th 2023.</p>

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe