Best Design Systems in 2025
Julia Lee, Eike Töllner, Chiara Petersheim • 02.01.2025
A design system is a reusable set of elements and guidelines that streamline product development for designers and engineers. As competition grows, brands need to scale quickly while maintaining consistency. Everyone’s looking for the “best” one, but the right fit depends on your company’s needs, product goals, and audience. We’ll show you how we arrived at our top picks from multiple angles. Note: all systems in this article are licensed for commercial use.
Through our years of experience working with design systems, these few have stood out to us for their various strengths. Each has a different focus, and is best suited for a different scenario. In our later chapter “Top Scorers for Each Metric”, you can read exactly what each design system scored best in.
Ant
by Alibaba Group
Boasts a massive library of feature-rich components specifically aimed at business-facing products, and includes guidelines on its overarching UX philosophy.
Primer
by Github
Built for expert interfaces that are technically-oriented, yet not necessarily business-facing. It places emphasis on accessibility implementation, and comes with 9 different color blindness modes.
Blank
by Craftwork Design
A good blueprint for the classification of components, the creation of complex components and the efficient handling of variables with a modern look and feel.
Radix
by WorkOS
Uses a unique color system that takes care of accessibility and semantic color roles. Plus, it offers more themable aspects than usual.
Material
by Google
Has a huge ecosystem of resources, kits, plugins, and assets. Being widely used, it is easy to find good examples and support.
Evaluation Criteria for Judging Design Systems
So, how do you decide if a design system meets your needs? Before we dive into our reviews, let’s look at our criteria for evaluation, and why these aspects are important to consider.
Multidimensional Theming
Theming enables your interface to reflect your brand. If you intend to support multiple sub-brands or products under one design system, theming multiple aspects will help to distinguish them from each other.
Design-Code Parity
Alignment between design assets and coded components improves collaboration between designers and developers, speeds up workflows, and increases consistency.
Designer Experience
A clear structure and intuitive naming leads to less confusion and misuse of components. A positive experience also increases adoption, fostering alignment between teams and products.
Accessibility
Accessible design systems help meet legal standards like WCAG 2.1, and provide guidance for accessible implementation.
Library comprehensiveness
A comprehensive library that has specialised and configurable components will enable your team to build an optimised solution for a variety of specific use cases.
Level of systemization
Highly systemized design systems enhance consistency and speed by making design decisions programmatically, but may reduce flexibility and creativity.
Guidance
Design systems can offer different levels of guidance for components, layouts, UX patterns, motion, and copywriting. This ensures team alignment and consistent implementation.
Ecosystem
An ecosystem of official or community-made tools can simplify implementation and boost efficiency. These could be assets, tools, plugins, or support channels.
Ant Design
Originally made for building financial platforms, Ant Design (AntD) is a design system from Alibaba Group aimed at building web enterprise products. Components are available in React, Angular, and Vue.
Important to note: As AntD was originally built and released in Chinese, some parts of the documentation and code may not yet be fully translated, or not translated to a native level of english. Despite this, many have used Ant Design successfully.
Best for
- Business productivity tools.
- Data-heavy interfaces involving complex user flows.
- Projects that are optimised for desktop as the main use case.
- Projects requiring internationalisation
Not for
- Smaller projects that don’t require so many features or components, and want to avoid library bloat.
- Projects requiring a more expressive use of color and design freedom.
Feature Spotlight
- Optimisation for desktop: Desktop layouts given special focus, which is uncommon as a lot of recent design systems are mobile-first. This is useful because enterprise products often have desktop as their main use case.
- Rich component features: AntD covers some unique and specific use cases not seen in other design systems or libraries. It especially places heavy focus on the form input category.
- Internationalisation: Internationalisation is supported for 69 languages, plus the ability to add more.
Evaluation
Comment
Multidimensional Theming
Many aspects are themable, such as color, accent color, radius, spacing. Offers different densities for certain components.
Design-Code Parity
No official resources for Figma, only Sketch. We cannot comment on the state of the Sketch file. The third-party ‘Ant for Figma’ kit is kept up to date and includes a plugin that bridges design with code.
Designer Experience
No official resources for Figma, only Sketch. Ant recommends the third-party ‘Ant for Figma’, which is quite designer-friendly in terms of naming and structure.
Accessibility
Contrast levels meet WCAG AAA, but the components do not reliably meet requirements when it comes to supporting assistive devices and keyboard navigation.
Library comprehensiveness
Easily one of the richest libraries in terms of components and features.
Level of systemization
The color palette is generated according to contrast ratios. It uses a flattened color token structure that combines light/dark theming and semantic roles all at the primitive level. Overall, Ant is not meant for creative expression, and takes a very functional approach.
Guidance
Comprehensive high-level guidance with core values and philosophy inspired by nature, explanation of deeper UX principles, UX patterns, and even covers motion principles and copywriting. Lacks do’s and don’ts at the component level.
Ecosystem
Has an ecosystem of tools and resources like a palette generator, illustration library, react library for charts and data visualisation. There’s a third-party plugin to bridge design with code.
Pricing
The official Ant Design basic & pro are both free for devs, and the Sketch files are free for designers.
However, there are no official Figma resources, and the endorsed third party kit is costly.
Links
- Website & Docs
- Ant for Figma (Third party)
Primer
Primer is a set of components, guidelines, and tooling for building UI at Github. It was later made open-source for the community to use in their own projects. Primer stands out for its developer-first approach and delivers a robust foundation for consistency and functionality in code-focused platforms. It is available for Rails and React.
Best for
- Projects with a focus on accessibility
- Projects with higher priority on development speed than design creativity
- Web applications
- Tool interfaces for technical tasks and productivity
- Engineering-heavy projects
Not for
- Smaller projects that don’t require so many components, or not so many features in their components. Having so much extra can bloat the library.
- Projects with very specific branding requirements: Although Primer is customisable, it could be challenging for companies with very specific design specifications that deviate greatly from GitHub's aesthetic.
Feature Spotlight
- Accessibility modes: Primer has a strong focus on accessibility, offering a wide range (currently nine) of accessibility modes, in addition to the classic dark and light modes.
- Developer-centric: Primer is a developer-first design system that emphasizes granular control through CSS utilities and comprehensive documentation. It provides public access to its for interactive component exploration, alongside tools like React components and code examples to streamline application integration.
Evaluation
Comment
Multidimensional Theming
The token structure allows for colors, spacing, typography and radius to be themed. It also offers different space densities for certain components.
Design-Code Parity
The Figma library and codebase are not perfectly in sync, in terms of component coverage. However, there is an effort to bring the component structure and token structure closer to code, at the expense of designer-friendliness.
Designer Experience
Being a work in progress, some parts of the Figma file can be chaotic or lack detailed explanation. There are some inconsistencies in naming conventions (e.g. mixture of PascalCase and kebab-case). Their token names and component properties are not always easy to understand.
Accessibility
In addition to WCAG 2.1 AA compliance and the accessibility modes, a checklist for assessing the accessibility of designs is also provided. Every component has a description of the accessibility status.
Library comprehensiveness
With 80 components currently, it is one of the largest component libraries that we regularly reference.
Level of systemization
In the end, Primer is not intended to be highly customised for every brand language, or for visual expression. However, it makes use of a lot of component tokens to enable a more flexible approach to color usage.
Guidance
Has detailed guidelines on layout, content, writing, and do’s and don’ts for each component. Does not cover many UX patterns, or have any overarching core values.
Ecosystem
No plugins or resources or tools. But it does have its own set of icons (Octicons), a web library, and a mobile library.
Blank
Blank is a UI kit made for brands who want to build beautiful websites quickly, and need a design-driven and adaptable kit as a launching point. It places a special focus on empowering designers who shy away from coding.
It can be used both by established brands, and brands who are just starting out and creating a new identity. The tokenized structure allows the kit to be highly customisable, and it covers most of the needs of a modern web application.
Best for
- Designers with a need for consistency in building modern marketing websites or dashboards quickly.
- Designers wanting to publish websites using no-code development platforms like Framer and Webflow.
- Projects that require a clean and beautiful aesthetic with consideration given to the visual details
Not for
- Developers looking for a ready-made component library in code.
- Interfaces that are highly technical or information-dense.
Feature Spotlight
Visually detail-oriented: While most design systems are focused on systematization and consistency (even at the price of aesthetics), blank is more design driven. We can see this, for example, in the button architecture – while others would just define a simple horizontal padding, Blank ensures that the buttons are optically balanced depending on whether an icon is present or not.
Templates: Blank includes templates with ready-to-use layouts for desktop and mobile, which can help to accelerate workflows, ensure consistency, and contextualise the components in real-world use.
No-code approach: Blank is available on Figma, Framer and Webflow. This enables designers to build and publish sites without coding, and have a consistent experience across the entire process, from designing in Figma, to developing and publishing in Webflow or Framer.
Evaluation
Comment
Multidimensional Theming
Almost every design decision, except for radius, is tokenized. The system includes dark and light modes, and device-specific breakpoints for text and spacing, ensuring adaptability across various contexts.
Design-Code Parity
Although there are building blocks for Webflow and Framer, there is no repository for any of the common frameworks such as React, Vue or Angular.
Designer Experience
Despite the lack of documentation or guidelines, the structure is easy to understand and simple to use. Designers are able to take things into their own hands and publish sites without coding.
Accessibility
There is no statement about the level of accessibility of the components, so this is not prioritised, let alone guaranteed. The primary and secondary text colors pass WCAG AA contrast requirements, the placeholder and link colors do not.
Library comprehensivenes
Has more than 30 components with many variants and properties, enabling designers to address a wide range of design scenarios without reinventing the wheel.
Level of systemization
Blank uses a component-based token structure for their colors, allowing design decisions to be tailored to individual components rather than applied universally. This approach provides greater flexibility but can sometimes result in reduced consistency. Many components are also available in various shape styles, such as sharp, pill, or rounded.
Guidance
There is no design guidelines or documentation provided by Blank.
Ecosystem
Includes a UI Kit for Figma, Framer and Webflow. Also uses a set of open-source Icons from Remix Icons.
Radix UI & Radix Themes
Radix UI is an open-source React library for building web apps, suitable for product & tool interfaces. It is optimized for fast development, easy maintenance, and accessibility. It was made by Work OS. It is a respectable and reliable library that has been adopted by Linear, Supabase, Vercel, Teamflow, the University of Amsterdam, Node.js, and more.
Best for
- Interfaces with more focus on functionality than creative expression.
- Projects that have less budget to spend on hand-curating every visual detail, but still want a decent level of customizability and aesthetics.
- Projects that require speed in iterating and developing.
- Small to medium teams, startups.
Not for
- Projects that require creative freedom, such as marketing pages.
- Projects that require separation of primitive and semantic tokens due to more flexible usage by a larger team.
- Enterprise with multiple teams
Feature spotlight
Color system: Radix uses a color role system that is powerful yet easy to use, producing an accessible theme in both dark and light mode with minimal manual effort. Semantic roles and modes are assigned to primitive colors, which reduces decision-making effort and flattens the token structure.
Alpha scales: Every solid color has a translucent equivalent, which harmonises the hues of elements that are layered on top of colored backgrounds.
Developer-first: Radix is very developer friendly and has been praised for its clever component API and performance. The library also comes in an unstyled version that is focused on accessibility and developer experience, making it a base for your own design system.
Evaluation
Comment
Multidimensional Theming
Almost every aspect is themable. There's the usual ones, like color accent, light & dark modes, radius, and typography. But additionally, the token structure also enables spacing to be themed. And each component even comes in 4 different visual styles to pick from, plus solid and translucent styles for panels.
Design-Code Parity
Component API equivalent is documented in Figma. Status of each component in design VS code are clearly documented.
Designer Experience
Figma file is not 100% designer-oriented, but rather a compromise that aligns better with code. May cause the design experience to be initially unintuitive in some areas.
Accessibility
Compliant with WAI-ARIA interaction guidelines for screen reader support, typeahead support, and keyboard navigation. The palette generator also tries to meet WCAG AA contrast standards. However, it’s still possible for the algorithm to fail if you pick inaccessible colors like yellow to be your main accent.
Library comprehensiveness
Decent and thoughtful selection of components, but nothing super special.
Level of systemization
Due to flattened token structure, there is less flexibility for granular customisation or making exceptions to the assigned color roles. Tweaking one color may result in unintended effects throughout the library. However, exceptions can be made by creating special tokens for certain use cases. Radix itself uses these to control the background color of floating panels, for example.
Guidance
Radix is more of a UI Library, not a full design system. Does not include any UX or usage guidelines for designers. Is very atomic and does not include patterns or flows.
Ecosystem
No Figma plugins or third party tools, so the initial setup and customisation is a manual process. Radix does have its own palette generator though.
Material 3
Material 3 (M3) is an open-source design system from Google, for building mobile-first products in Android, Flutter, and Web. It is one of the most, if not the most, widely used design system to date, with a huge community and countless third party systems, products, and tools based on and inspired by it.
Best for
- Teams that want to borrow Google’s tried-and-tested design language.
- Teams looking for guidance on how to achieve a consistent UX standard.
- Projects wanting to appeal to end-consumers with expressive, colorful, personalisable interfaces.
- Projects with high accessibility standards
Not for
- Projects requiring a very specific or unique brand aesthetic that falls outside the range of Google’s look and feel.
- B2B products or internal tools requiring more complex functionalities.
Feature spotlight
Dynamic color system: Material You adjusts the UI to match a user’s wallpaper or theme preferences, creating a highly personalized and cohesive visual experience.
Broad platform support: M3 integrates seamlessly with tools like Jetpack Compose, Flutter, and third-party libraries for React and Angular, making it a versatile choice for developers across platforms.
Focus on Accessibility: Components meet or exceed accessibility standards. Compared to M2, M3 introduces design patterns like larger touch targets, enhanced contrast, and flexible layouts to ensure inclusivity.
Expressive Color: Unlike other design systems, M3’s expressive approach to color results in a much more impactful difference in look and feel when customising the palette, unlike design systems that take a more functional approach to color.
Evaluation
Comment
Multidimensional Theming
The Material Theme Builder supports light and dark modes and adaptive shapes. Color, radius, and typography, and light/dark modes are all themable. Note that spacing is not.
Design-Code Parity
Parallel designer & developer libraries, with bridging plugins. Despite this, component naming and structure is also fairly intuitive for designers.
Designer Experience
The Material color system relies on composite tokens and opacity values to generate states, which are not supported by Figma. The generated Figma variables only contain raw hex values and do not make use of aliasing capabilities.This makes maintenance harder, and the system less transparent.
Accessibility
The guidelines encourage designing for a variety of users, including those with low vision, hearing impairments, cognitive impairments, etc. The color algorithm ensures a minimum 3:1 contrast, but can also generate themes with 7:1 contrast for users with sight impairment.
Library comprehensiveness
The Material components are generic and simple, and cannot handle complex use cases. There are also fewer components than some other systems out there. You will have to pay for a third party library to get more components.
Level of systemization
The color system is dictated by the palette algorithm. This often returns some odd-looking results, including semantic colors that aren’t from the color scales. The animations and styles are pretty standard. In the end, it will look very android.
Guidance
Extensive UX guidance available in the documentation. Covers not only the components, but also patterns, adaptive layouts, and hierarchy.
Ecosystem
A lot of learning resources and plugins to help bridge the design-development gap, from both official and non-official sources. The google ecosystem includes assets such as icons and fonts.
Top Scorers for Each Metric
The systems we reviewed highlight a spectrum of strengths. From examining our top picks, we’ve learned that every design system has its own particular focus and priorities. Here we have gathered the top scores so that you can pick the one that best aligns with your own project goals.
System
Evaluation
Multidimensional Theming
Radix
Design-Code Parity
Radix
Designer Experience
Blank
Accessibility
Primer & Material 3
Library Comprehensiveness
Ant Design
Level of Systemisation
Material 3
Guidance
Material 3
Ecosystem
Material 3
Conclusion - Which is the best design system for you?
We have highlighted some of the best design systems in the market and reviewed our favorites. Selecting one will depend on your use cases, and your reasons for wanting to work with a design system in the first place. Alternatively, instead of adopting a third party design system, you could develop your own design system. If you cannot afford a custom design system, then we hope our review of the best third-party design systems has helped you to select the right one for your needs. Let us know your thoughts, share your favorite design systems with us, or reach out to discuss your project with us.
