Design System

A design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company.

Examples:

Snippet from Wikipedia: Design system

A Design System is a set of interconnected patterns and shared practices coherently organized to aid in digital product design and development of products such as apps or websites. It may contain, but is not limited to, pattern libraries and design language, style guides, coded components, brand language and documentation for use of these.

It serves as a reference or source of truth that helps the different teams involved (such as designers, developers, copywriters and project managers) to design and build digital products.

Some of the advantages of a design system are:

  • Faster builds, through reusable components and shared rationale.
  • Better products, through more cohesive user experiences and a consistent design language.
  • Improved maintenance and scalability, through the reduction of design and technical debt.
  • Stronger focus for product teams, through tackling common problems so teams can concentrate on solving user needs.

Notable design systems include Lightning Design System (by Salesforce) and Carbon Design System (by IBM).

Atomic Design