While the benefit of allowing many people to communicate in a single voice is clear, one of the best functions of design systems is how they facilitate the transfer of knowledge across the industry. Many of the world’s top brands have made their design systems public, and in so doing, have allowed other designers (even ones outside their company) to grow from their experience and research.

Even if your goal is not to design in the style of Adobe, the Spectrum design system offers research into building color scales backed by the science of how we perceive color.

Even if you’re not designing for the Android ecosystem, Google’s Material Design demonstrates how to organize design tokens that scale to situations of near infinite size and complexity.

In addition, Design systems have a significant impact on accessibility. A great number of WCAG violations occur at the design stage, and while no design system can guarantee accessibility on its own, when a design system takes an intentional approach to color, animation, fonts, touch target size, and toolkit components, it offers a massive jump towards creating accessible content.

Many of the systems I link to in this article feature dedicated accessibility policies. Unfortunately the sites themselves often feature WCAG violations and accessibility barriers. While this is disappointing coming from companies with the size and influence of the ones mentioned, it does highlight how important it is to push for accessible design and implementation regardless of the size of your project.

I’ve learned a lot from poring over these systems’ documentation over the years. I’ve included a few of my favorites below:

Top Design Systems

Note: This is not meant an endorsement of the companies who own design systems on this list. This article is meant solely as a celebration of the shared knowledge design systems offer the community.

Carbon Design System

IBM’s Carbon Design system is an amazing source of guidance on everything from layout with their beautiful and structured 2x Grid system, to theming built on the logical and consistent Carbon Color System. I also appreciate the video introductions they have to foundational elements like color, grids, and motion.

The entire design system is based on the IBM Design Language which has its own website and is worth a read thanks to the fantastic documentation on decisions that led to their color, spacing, and typography.

In addition, their design team has written a number of blog posts about process. You can find them by digging through the archives of the Carbon Design System Medium Publication, but if you want a place to start, I’d recommend reading these three articles by Shixie, their design lead:

1. Because, colors are beautiful (talking about the process of updating their color strategy and the decisions that need to go into building effective palettes)
2. The Power to Serve (discussing the process and workflows of an effective design systems team)
3. Color palettes and accessibility features for data visualization (covering the special considerations required when defining colors and patterns for data visualization)

As a final plus, there is a dedicated section of the guide on Carbon’s approach to accessibility. There is also an accessibility tab included on each component page, outlining accessibility functions, testing, and best practices. This guidance is sound, and overall Carbon is one of the more accessibly-built guides on this list.

Spectrum

Adobe’s Spectrum design system does an amazing job of distilling an incredible amount of complicated information down into clean and easy-to-reference documentation.

Like the IBM team behind Carbon, Adobe writes a lot about design. They have their own dedicated site for it, adobe.design. However, that site leans more into corporate promotion of their app design, and since this is an article about exploring design systems, we need to dig bit deeper.

Nate Baldwin is a senior staff designer at Adobe, and he’s responsible for many amazing projects including leading Spectrum’s design token development, creating Leonardo (a fantastic tool for generating and analyzing responsive color systems), and writing Color & Contrast (an interactive reference book on color science and perception).

Baldwin’s Medium blog contains over two dozen posts detailing his approach to designing Spectrum, Leonardo, and other systems at scale. As a starting point, I’d recommend his three-part series on developing adaptive color systems:

1. Adaptive Color in Design Systems
2. Introducing Adaptive Color Palettes
3. Adaptive Color in Spectrum, Adobe’s Design System

In terms of accessibility, there is a dedicated page documenting Spectrum Inclusive Design practices, and components contain design checklists outlining whether each one passes certain WCAG criteria.

In my own testing with Apple VoiceOver, Spectrum’s navigation is problematic to use, but the pages themselves tend to be structured in an efficient way, and their many example images are coupled with clear and descriptive alt text.

Material Design

Google’s Material Design is one of the most influential design systems out there. Design systems tend to be built around the idea of establishing a specific brand identity, making any app or service that uses the system feel similar. This used to be a common criticism of Material, but in recent releases they’ve been working to include ways to personalize the essence of any Material project, while keeping the benefits of utilizing their robust toolkit.

Material documents accessibility as one of its core principles on the Accessibility & Material Design page, and they include multiple pages of guidance on how to build and utilize components in an accessible way.

Like Spectrum, I’ve run into difficulties navigating the site with a screen reader. The auto-expanding menus can make it challenging to explore, but the pages themselves have good structure and contain high quality guidance.

Bonus: While not directly related to Material, Google maintains a dedicated design site, design.google. Like Material’s site, it’s not without accessibility issues, but here Google’s designers write a lot about wonderful topics such as color theory, typography, and UX.

Ant Design

Speaking of systems designed to take on a massive amount of content, next up is Alibaba’s Ant Design. One thing that is striking about Ant Design is the sheer scope of the project. They not only supply toolkits for a wide range of platforms, but they also develop AntV, an entire network of solutions for handling complex data visualization scenarios.

Digging deeper, one of Ant’s designers Shan’er wrote a fascinating blog post in 2019 explaining how they approached building a effective palettes for data visualization: 数据可视化设计体系中的搭建（下）.

Data visualization, and data visualization color palettes are tricky to get right, since you need to formulate a set of colors that will render harmoniously with one another when shown against one another in a wide range of sizes and proportions. The task is made even harder when you take into account different types of color blindness, since color is such a primary characteristic in most charts and graphs.

The data visualization blog post, like much of the design system itself, is written in Chinese, and not every page has an official translation. It’s worth exploring though even if you have to run through a translator, since it’s great to see the world of design outside a western perspective.

In terms of accessibility, I could not find any specific guidance regarding designing with accessibility in mind, and the complexity of their site leads to a number of WCAG violations. While the other systems on this list may be more useful when designing from an accessibility perspective, I’d still recommend exploring Ant if you can. They have so much content, you’re almost guaranteed to discover something beneficial for your own work along the way.

Special Mention: Radix Colors

While not a full design system in the typical sense, WorkOS’s Radix UI platform offers a great set of tools to handle common design-related tasks. Radix Primitives is a great set of headless UI components, and Radix Icons are a nice and consistent set of UI icons. But what I want to focus on is the Radix Color System.

Radix Colors stands out from other color systems through its superb documentation. The site lays out in perfect detail what purpose each step in the scale serves, and includes examples of the colors layered on top their own Radix Primitives.

In earlier versions of Radix Colors, there was a page dedicated to showcasing contrast tests across all the colors. It appears that this page has been removed from version 3.0.0. In its place, selecting a given color swatch on the landing page will open a modal describing which colors and text types that color can pair with. The only issue here is that they provide contrast calculations solely in APCA, and not in the legally-binding WCAG formula.

Wrapping Up

There are many other amazing design systems out there beyond what I featured in this article. I combed through dozens of systems to come up with this short list, but this means that many great systems got left out. I may update this article in future to document additional systems with unique benefits, like TRMNL’s Framework, a design system built for e-ink displays.

If you’d like to explore more about design systems, the following sites are great hubs to find more components and systems:

• The Component Gallery
• Adele by UXPin
• Design Systems Repo
• Design Systems Surf

And to wrap up, here are 6 more design systems that I didn’t see sourced in the hubs above:

• GE Ethos Design System
• SAP Fiori
• Liferay Design
• Mineral UI
• Rakuten Design
• LINE Design System