Examples of High Quality Design Systems

Design systems have risen in popularity over the past few years, and their merits have been widely discussed throughout the product and web design industries. A design system brings all aspects of a company’s design into a documented format. This details everything from layouts and grids, to typography and colors. In doing so, it allows for a single point of reference for all designers within a company to achieve some high level of consistency across designs and products. In turn, this presents a more consistent user interface and experience for the end user.

In this article, we’re going to compile a selection of the highest quality and comprehensive design systems available to view, learn from, and use in your own projects.

 

Carbon Design System

Carbon Design is the design system for IBM. There’s been great consideration in devising this system and transforming IBM into a design-driven company. It encompasses wonderful design kit resources and fully-coded components.

 

Material Design

Probably the most well-known design system is Material Design. It was one of the first comprehensive design systems to attract designers and is still one of the most popular and referred-to sets of guidelines.

 

Photon Design System

Photon is the name for Mozilla’s Firefox design system. Is does away with much of the trendy design visuals and instead directs all of its focus toward generating the most optimal user experience.

 

Mailchimp UX

Mailchimp’s design system makes for an interesting read, not least because it applies to email templates. It provides detailed systems for everything from form elements to tables.

 

Lightning Design System

Devised by Salesforce, the Lightning Design System is used by the company to create rich enterprise experiences. It pays a great deal of attention to aspects such as accessibility and consistency across multiple platforms.

 

GOV.UK elements

The GOV.UK design system is one of the most data and research-driven examples. It’s a service that has to be used by everyone, from young people to old. It’s particularly interesting and worthwhile to follow their guidelines on elements such as forms, inputs, and handling of errors.

 

Purple

Heroku’s design system, nicknamed Purple, offers detailed styling and pattern guidelines alongside useful code snippets to implement elements of the system with ease.

 

Solid

Solid is BuzzFeed’s design system, utilizing SASS. It includes an excellent Sketch template and access to code snippets for the entire library of styles and components, making it a perfect starting point for building your product around.