Our favourite design systems and what makes them good

Product teams use design systems as guidance when creating their applications. Not only do they ensure that the product is visually consistent, but also to make sure that defined principals, behaviour patterns and company branding are all being recognised in the final product. At any point while using the product, your users interacting with it want a seamless journey. When a business or its user base grows, design systems are crucial to maintain a great user experience and assist product development teams. Design systems are that important, UX design teams now hire designers with their sole purpose being to maintain the design system.

Design systems can be used anywhere in the product design process. From the initial problem solving phase, right the way through to making design decisions and creating design solutions. If you are defining user flows to conduct user research, your design system will ensure that the feature maintains the same design patterns as the rest of the product. Once you're ready to create high level designs at the interface design phase, your prebuilt library of components will save you a lot of time and again maintain consistency. When you start collecting user feedback, you can focus the testers valuable time on the experience of the feature you're releasing, rather than wasting time getting feedback on the visual aspect; you already know this has been tested.

With that in mind, let's take a look at some of our favourite design systems.

Gov UK

Screen shot of Gov Uk's design system

A design system for a countries government, sounds daunting! However, the team behind Gov UK's design system nailed it. The UK Government website is used for a huge amount of different reasons and a lot of different tools. With 170+ million visits in the last 6 months, there will be a wide range of users with varying levels of technical ability, it's so important that anybody can use this website. The design system provides great UX for all of their components and is extremely consistent across the board.

Carbon by IBM

Screen shot of Carbon design system

IBM’s design system, Carbon, is a perfect example of a company wide design system. Not only do designers & developers use the system, but also their marketing team and offering managers. It goes into extreme depth including design tools & resources as well as human interface guidelines. Carbon should be inspiring for those looking to build a design system which unifies the entire business you’re building it for.

Audi UI

Screen shot of Audi's design system

Most of us only have to design for the typical devices, phones and computers. However, Audi have a much bigger task on their hands. Not only are they designing for the usual devices, but also technology within cars, and even smart watches! Audi have embedded a distinct style within their design system, which not only shows in the visual style but also their principles.

Orbit by Kiwi

Screen shot of Orbit design system

Kiwi.com is a product which finds the cheapest flight prices for you. We're sure you'll agree with us in saying that it's a beautiful website to use. Their design system, Orbit, not only maintains that appealing aesthetic across the Kiwi products, but also it's documentation. Orbit's website not only looks amazing, but also includes some really nice features such as a glossary and grammar guidelines. This made it a must include for our blog post.

Spectrum by Adobe

Screen shot of Spectrum design system

Most of you reading this article are more than likely digital creatives in one way or another. Therefore, we're sure you've all heard of Adobe and know how many products they have released. Although Adobe's products all serve a different purpose, if you learn the design behaviour patterns for one you expect it to be the same for another. Whether you're creating videos in After effects, or creating 3D scenes in Substance, Spectrum makes it easier to use any Adobe product.

React95

Screen shot of React95 design system

To finish the article, we've included this wholesome design system. React95 allows you to create nostalgic products which resemble Windows 95. What a blast to the past!