Top 5 recommended design systems (2022 edition)

First, what exactly is a “design system”?
Simply put, it is a set of rules established to ensure consistency in design.

Why is it important to aim for “consistent design”?

For example, if elements such as buttons vary inconsistently within a single website without any clear rationale, users may find it difficult to view or use. On the other hand, consistent design not only improves usability but also builds trust in the service.
In addition, for those involved in creating the site, having clearly defined design rules contributes to more efficient development. Furthermore, consistency between design and the service or product itself enhances overall brand value.

In this way, implementing a design system offers benefits to both users and developers.

From here, I will introduce several design systems that I found particularly compelling.

Link: https://www.audi.com/ci/en/renewed-brand.html

This is the corporate identity (CI) of Audi, a German automobile manufacturer. While it is not strictly a design system, it serves as a valuable reference in terms of visualizing a brand’s image.
For example, the animation curves used in web applications are based on the visualization of a car’s acceleration when starting and deceleration when stopping. This reflects a strong emphasis on the affinity and consistency between the product and its digital touchpoints, such as websites and applications, making it insightful from a branding perspective.

In addition, the site makes extensive use of images and videos, resulting in a visually rich and easy-to-understand composition. There are also detailed guidelines regarding photo casting and styling, demonstrating the level of attention paid to even the smallest details in expressing Audi’s brand world. The overall quality of the site itself is also very high.

Link: https://polaris.shopify.com/

This is Shopify’s design system. It gives the impression of being highly structured, with thorough and well-crafted explanations.
Each category, such as color and typography, clearly defines its own “Principles.” In addition, prohibited practices and points of caution are explained in detail with concrete examples, making the guidelines easy to understand. For instance, when writing “checkout,” the system specifies that “checkout” should be used instead of “check out” or “check-out,” demonstrating that even word usage is carefully standardized.

Providing concrete examples makes it easier to visualize, and helps make the content more accessible even for those who are not designers or engineers.

Link: https://smarthr.design/

This is the design system of the cloud-based HR software “SmartHR.” While most publicly available design systems are written in English, it is quite valuable to find one available in Japanese. This design system allows users to download templates for sales materials and color palettes, enabling even non-designers within the company to create consistent designs without confusion. In addition, detailed personas for illustrations used in business contexts are defined, suggesting a strong emphasis on expressing the unique “SmartHR-like” identity down to the smallest details.

This design system embodies the concept of enabling “anyone to create SmartHR-like expressions efficiently and without hesitation.” This mindset of “anyone, efficiently, and without confusion” is not only important for design systems, but is also a valuable principle in the broader context of making things. It achieves a design system that is easy to use not only for employees, but for everyone involved with the brand.

Link: https://spindle.ameba.design/

This is Ameba’s design system, which is also written in Japanese.
It includes sections on accessibility and performance, placing importance not only on design but also on improving UX (user experience).
In the accessibility section, original guidelines are defined with the goal of enabling “anyone to access it anytime, without confusion.”
In the performance section, a checklist is provided to improve site performance—such as reducing page load times—so that pages load quickly and users can navigate the site comfortably.

This design system clearly demonstrates a strong focus on a user-first approach.

Link: https://designsystem.line.me/

This is the design system for LINE’s overall services. It consists of design systems for both the LINE Messenger and its family of services.
Within the LINE Messenger design system, components are categorized in great detail and explained thoroughly using both images and text. In the “CASE STUDIES” section, it is easy to see at a glance which components are used for each service.

Each section is explained in detail, resulting in a well-structured and systematic design system.

In this article, we introduced five examples of design systems. What they all have in common is a clear consistency between the company or product’s brand philosophy, design principles, and the design system itself. To achieve this “consistency,” it is important to first clearly define and document the design principles that serve as the foundation of the system.

We have presented five recommended design systems, but there are many others worth exploring. We encourage you to research and discover more examples on your own.