designsystem.tools logo

designsystem

.tools

Everything you need to know about design systems, and the tools to build them.

Our philosophy

This resource is maintained to help explain what design systems are, what value they provide, and the features that can compose one.

There are many possible constructs for a design system, and many tools available to support the effort. This site will describe the most common features and recommend the best tools available. Your design system may not need every feature described here. Use this information to help you compose the right design system for your organization.

Want to contribute? Consider making a pull request.

What is a design system?

A design system is a collection of resources used to standardize design throughout an organization. It acts as a single source of truth by documenting a design language, which is used to create reusable resources.

There are many possible features that can compose a design system. In addition to resources like design guidelines and a component library, there are meta features like infrastructure and governance.

Why invest in a design system?

The aspiration of a design system is to standardize design. When design is standardized in an organization it enables designers to work with an aligned vision, ensuring products look and feel harmonious.

A standardized design also means reusable resources can be built—utilizing those design standards—that drastically increases the velocity of design and development.

Features of a design system

Not all design systems are built the same

The perfect design system for your organization might not require every feature described here. It may need more than what is described here. It's important to learn about the features that could be part of your design system to determine what construct provides the most value to your organization.

The design language system is the foundation of a design system. It helps designers to create harmonious designs resulting in an organization's products having a consistent look and feel.

It's an important foundation because every additional resource included in your design system will be designed utilizing the design language.

Features

Tools

Articles

Design resources is a collection of resources that can be used during the design and development processes. Providing these resources in a centralized location makes it easier to find resources when needed, and helps establish the design system as the single source of truth.

Features

Tools

The documentation system is a centralized hub where anyone in the organization can gain access to the resources.

Documentation is the key to a successful design system. It removes friction, creates excitement, and provides the information necessary to use the design system properly.

Features

Tools

Articles

Code infrastructure refers to the ecosystem that makes code available throughout an organization. If you decide to roll your own component library, or just provide a theme, you'll need a way for engineers to pull that code into their projects.

Features

Tools

Articles

The governance system is the protocol for maintaining and updating the design system. Design systems are living artifacts and will grow and evolve over time.

The governance system should answer questions like:

  • who maintains the design system?
  • how do others contribute?
  • how is quality assessed and assured?

Features

Tools

Articles