Design system

A design system is a set of components used in a digital product to ensure a consistent look (e.g. different screens of a website or an app). Designers create a design system to guarantee a product's interface consistency in terms of visual appearance (e.g. colours, typography, buttons, or icons).

A design system consists of design patterns, reusable UI components, and guidelines on how to use each element to match the general style of the product.

Every digital product should have a design system; it is the key to a digital product's consistency. It also saves time and effort; if a website needs another subpage or the app needs another screen, designers and developers can take advantage of the reusable components and patterns from the design system. It's also a great help in collaboration between designers, developers, and other stakeholders, as everyone has the same understanding of the product's style and how different elements and components work.

If you're creating or using a design system, you should prioritise its consistency. Every element – typography, colours, icons – should be consistent. A good design system should also be flexible. Whether you want to create new products or devices, you should be able to use it to maintain a consistent look.

Remember not to make it too complex. It's best to keep design systems and avoid unnecessary components – they just make it harder to use. It's also crucial to gather feedback from other stakeholders (other designers and developers) to see whether it fulfils its function. If the feedback suggests change, adjust the design system to keep it relevant and effective.

A design system is a guarantee that the digital product's final look is consistent during the hand-off from design to development, on launch, and regardless of changes in your team.