What is a Design System?

A Design System is a collection of reusable UI components with documented norms and standards.

This collection includes:

• Color Palettes
• Typography
• Imagery
• Iconography
• Motion
• Layouts
• UI components, including code snippets.
• Documentations

Examples

• Material Design
• Fluent Design
• Uber
• Spectrum

Benefits

Documentation

From typography to UI components, in a Design System everything is documented. It is considered to be the only truth that developers can refer to when creating new UI's.

User experience

Having a unified UI and UX concept for all the products of a company improves user experience. The things a user has learned about the interface of one product also apply to the other products.

Development speed

The strict guidelines and the shared library of reusable components improves development speed when building new products and interfaces.

Branding

Obviously, a Design System allows consistency in branding across all platforms of a company.

Scalability

A Design System allows a company to expand their products while maintaining a consistent concept.
It is a completely independent project with components and documentations that can be used in the conception and maintenance of different products of a same brand.

Should I use one?

A Design System is only useful for companies working on multiple products for single brand. When working on a single project that will never scale (e.g. a personal website) a Design System does only complicate the development process.

Tools

• Storybook (my favorite)
• Fractal
• Docz
• ...