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:
- Google Material Design System - https://material.io/
- Atlassian Design
- Apple Human Interface Guidelines
- Lightning by Salesforce
- IBM Carbon Design System
- …
- Snippet from Wikipedia: Design system
A Design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications. Design systems aid in digital product design and development of products such as mobile applications or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.
It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.
Some of the advantages of a design system are:
- Streamlined design to production workflow.
- Creates a unified language between and within the cross-functional teams.
- 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), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft).