Examples of High Quality Design Systems
Jan 3rd, 2018
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 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.
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 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’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.
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.
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.
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 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.