List of analyzed design systems
Below are the design systems which are often utilized by Open UI for research purposes.
Ant Designby AFX
A design system with values of Nature and Determinacy for better user experience of enterprise applications.
Atlassian's official UI library, built according to the Atlassian Design Guidelines.
Auth0 Styleguideby Auth0
Conjunction of design patterns, components and resources used across our products.
Orange Design System's official Web framework, built according to the Orange Design System Guidelines. It is a fork of Bootstrap with custom rendering and specific Orange components.
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Carbon Design Systemby IBM
Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
Chromiumby Open Source
Chromium is an open-source browser project that aims to build a safer, faster, and more stable way for all Internet users to experience the web.
Evergreen is a React UI Framework for building ambitious products on the web.
UI Fabricby Microsoft
Fabric’s robust, up-to-date web controls are built with the React framework. Look through the control list to see the building blocks that are available using Fabric React.
An unopinionated system to build adaptive web components.
GoodBarber Design Systemby GoodBarber
The GoodBarber Design System is a comprehensive solution that serves as a framework, toolbox, and graphic charter for designers and developers. It is a collection of evolving guidelines that provide a consistent and cohesive design language across the platform, that designers and developers can rely on to ensure consistency, efficiency, and scalability in their work. It is a guide that helps to establish a common understanding of the design principles and patterns, and also it allows for flexibility and customization when necessary. Overall, the GoodBarber Design System is a powerful tool that helps to streamline the app development process and create beautiful and functional apps.
KoliBriby Informationstechnik Zentrum Bund
KoliBri builds directly on the web standards of the W3C (framework-agnostic), is a generic reference implementation of the WCAG standard and the BITV for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transmission functionalities. This means that KoliBri can be reused for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.
Lightning Design Systemby Salesforce
The Salesforce Lightning Design System
White label accessible Web Components that can be extended and styled for your needs.
Material Components Webby Google
Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.
Material UIby MUI
Material UI is a library of React UI components that implements Google's Material Design.
Primer Design Systemby GitHub
GitHub's design system
Semantic UIby Semantic Org
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
Stardust UIby Stardust UI
Tailwind Elementsby MDBootstrap
Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities
This section demonstrates how to make common rich internet application patterns and widgets accessible by applying WAI-ARIA roles, states, and properties and implementing keyboard support.
Web Platformby WHATWG & W3C
This represents the components that ship by default in browsers and have been standardized.
Interested in adding another design system? Contribute.