A design system is a systematic library of how the visual aspects of a product is implemented. And it contains a collection of reusable components, code snippets and other assets. It also explains and guides the designer in how and when to use them.

A design system is a set of deliverables that will constantly grow and evolve with the product. Using a design system helps us maintain consistency and design faster. In the end we want to create the best experience possible for our customers, and design systems helps us achieve this.

It’s easy to confuse style guide and pattern library with design systems. But style guides and pattern libraries are actually a part of the design system. Think of the design system as the big umbrealla that covers everything.

A design system is:

• The source of truth that eliminates confusion and conflict
• Makes sure we are consistent on all platforms
• Lighter, faster loading products
• Faster design process
• Quicker development and testing
• Reduction in design debt when scaling up

So what do we include in a design system?

Imagine every part of an interface visually, and ask yourself: What makes up the product? What does it consist of?

A brand is most often based on certain principles, and they can be described as the look and feel of their product. Their design, or interface, often represents these principles but aren’t really visible. Instead they are expressed visually. These principles are often included in a design system.

Other things common design systems include sections on:

• Guiding principles
• Imagery and media (logo, photo, illustrations, icons, diagrams, sounds, video, animations etc)
• Color
• Navigation
• Spacing
• Copy
• Typography
• Accessibility

Typically how big or small, complex or simple, a design system is, depends on the product.

8 design systems to look to for inspiration: