For companies with small teams, you are likely to think about something other than having a design system, like shipping products, interfacing with customers, and more. You can communicate style direction to everyone on your team, ensuring you are on the same page. However, when onboarding new members or creating new products, it can be challenging  to communicate design principles and code. This is why teams should consider implementing UI design systems because it ensures all groups adhere to standards and upkeep a high level of product consistency.  

Why do companies create design systems?

Design systems take the sweat from individual designers to think through recurring problems and prevent developers from reinventing the wheel whenever they design a new feature. Having an entire library of pre-approved elements will have teams focus on the more significant issues, like creating seamless, embedded goals and expectations that satisfy users. With greater consistency in a design system, your organization is protected from "design debt" because designers will no longer have to create their elements. On the other hand, this protects developers from “technical debt” because they are reusing component code instead of writing one-off instances of components, boosting innovation and consistency.  This creates harmony across screens within the same product and speeds up work by making the product team more efficient, reducing friction between design and engineering. Eventually, you will get the most out of higher product quality, faster shipping, better cross-department collaboration, empathy, transparency, and clear brand guidelines. 

‍

A design system has a structure behind it and elements subordinated to a central theme. Most concepts can look like pattern libraries with various components and a vision that can be assembled holistically that unifies the user experience. With a clear guide, all user experience elements will follow company expectations. We collected five best design system examples you can learn from that will inspire you to create your design system. 

‍

1. Google Material Design System

‍

‍

The Google we know is the leader of American technology specializing in Internet-related services and products, including online technology, advertising, search engine, cloud computing, software, and hardware. Google's Material Design System paves the way for many companies to follow. 

‍

First developed for the creation of android apps, the goal of Material Design was to have a system that was intuitive and uniform across every device. Google found opportunities to utilize material design in rebuilding its services to make them easily navigable and enhance the user experience. Now, Material Design is one of the most highly credited design systems companies use for inspiration. It's the #1 ready access to Google's UI/UX research, according to an award-winning software development firm, Arkenea. The design system receives high praise from corporate leaders, including the director of engineering at LastPass, remarking on Google's Material Design as making it easy for individual developers: "The customers benefit because they can learn the apps faster due to consistent navigation and behavior."

‍

Their goals for their design system: 

• Create a visual language that intersects principles of good design with innovation
• Develop a design system that unifies user experience across platforms and devices
• Expand the material's visual language and give a foundation that is flexible for innovation and branding 

‍

Design system features: 

• Layout
• Color
• Components
• Typography
• Material theming 
• Design Source Files
• Mobile Guidelines
• Starter Kits

‍

2. Atlassian Design System 

‍

‍

Atlassian Design System assists businesses all over the world by making teamwork easy. Their philosophy promises their tools, Tello and Jira, will help teams collaborate seamlessly in an open and scalable way. With their design system, they improve teams' productivity, development, and overall potential. 

‍

The company is nowhere from where it started 20 years ago, once supporting other companies' customer support teams to now developing the best business strategies and technologies. In 2012, the company hired a new head of design, which spurred the development of Atlassian Design Guidelines, or the ADG. This unique internal design system encountered many issues, including inconsistencies, insufficient tooling, and redundancy. Using Google as inspiration, Atlassian reconstructed its design system based on code while maintaining user-friendly tools. After many careful iterations of ADG, they launched the product to Bitbucket, Confluence, and Jira. Now, millions of users worldwide use their flagship product, JIRA, to plan, track and release killer software. 

‍

Their design system features: 

• Brand guidelines
• Design principles 
• Prototyping
• Marketing
• Personality
• Illustration

‍

3. Shopify Polaris Design System 

‍

‍

Shopify is an e-commerce platform that helps companies start, run, and grow their businesses. There are over 1,000,000 businesses that utilize this platform worldwide. Since their values are at the heart of the experiences they build, their design system, Polaris, demonstrates their philosophy of being considerate, empowering, crafted, efficient, trustworthy, and familiar. 

‍

When Shopify launched Polaris, the goal was to document and align the company's user experiences. Now, the system accepts third-party contributions and has added a growing set of patterns and guides for developers and designers to integrate their apps seamlessly. For many designers, Polaris is a valuable system that "powers many businesses' data-heavy experiences." 

‍

Their design system includes the following: 

• Colors
• Accessibility
• Resources
• Typography
• Illustrations
• Sounds
• Icons 
• Interaction States
• Spacing
• Data Visualizations 

‍

4. IBM Carbon Design System 

‍

‍

Since IBM's start, they have evolved from a personal computing game to focus on large enterprise IT needs. They offer everything from business consulting to software development services, IT hosting and management, products, and hardware. Given IBM's scale and scope, they believe good design is not just a requirement; it's a more profound responsibility to the people they serve. 

‍

Initially, IBM developed the Carbon Design System on June 10, 2015, with vanilla JS and CSS. Now, the design system has a complete set of visual, user experience, and code guidelines and standards for the IBM cloud platform and more than 120 services. Various designers and engineers call the system "an amazing collection of components and make it easy and fast to create designs."

‍

IBM's design features include: 

• Their Carbon Tools include design files for Sketch, Axure, and Adobe XD
• Tutorials 
• Guidelines
• Components
• Patterns 
• Data Visualization

‍

5. Salesforce Lightning Design System 

‍

Salesforce is a CRM software that helps thousands of companies run more effectively. They give personalized experiences to customers through CRM that helps your marketing, sales, commerce, and service needs. Their four values of trust, customer success, innovation, and equality are the foundation of their design decisions, actions, and communications. 

‍

The Lightning Design System evolved in response to the growth of Salesforce. With the changes in customer needs and technology, the company had to scale to keep up. Starting in 2013, after the company launched the first mobile version of salesforce1, designers, and developers recognized the need to streamline experiences across Salesforce apps. The team began documenting a pattern library and built an initial style guide, later combining a CSS framework to create a landmark design system. In 2015 Salesforce changed its design guidelines name to SLDS and adopted cloud services one by one, now reflecting 5x growth over three years of development.   

‍

Their design system features: 

• Platforms
• Design Guidelines
• Accessibility
• Components 

‍

Conclusion

You can learn from and implement these five design system choices in your business practice and apply them to your work. By viewing their design philosophy and features, you will see each company in a new light as resources to help you understand UI, UX, and product design better. At Wisiwig, our inspect element code can help designers steal inspiration from these design systems. Install our Chrome extension and try it for free. 

‍

If you want to learn more about product design, our blog shares 10 Things That Make a Great Product Designer.

‍