Design Systems
Examples of the best design systems that focuses more on accessibility.
Article
Designing Components with Accessibility in Mind
If you’re working on a Design System, you want to create a library of code and visual assets that you can create once, edit in one place, and use everywhere throughout your system or product; and you also want to do it right.
Design System
Material Design
Accessibility in design allows users of diverse abilities to navigate, understand, and use your UI.
Design System
Web Experience Toolkit
An award-winning front-end framework for building websites that are accessible, usable, interoperable, mobile friendly and multilingual.
Design System
Reach UI
Reach UI seeks to become the accessible foundation of your React-based design system.
Design System
Assets Framework
Assets gives you Section 508 compliant, cross-browser compatible UI components that you can use in your accessible web site or web application. Assets is an accessible, responsive, and modern framework.
Design System
Australian Government Design System
The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily.
Design System
Rivet Design System
Rivet is Indiana University’s design system. A collection of code and visual assets used to create patterns across software titles, Rivet makes it easier to build and maintain consistent user interfaces. Rivet is a focused set of front end UI components, as well as a place for documenting good UX, accessibility, and design practices.
Design System
USWDS - The United States Web Design System
A design system for the federal government. We make it easier to build accessible, mobile-friendly government websites.
Design System
GOV.UK Design System
Design your service using GOV.UK styles, components and patterns.
Design System
Online Accessibility Toolkit
Everyone has a role to play in creating accessible online solutions.
Design System
Chakra UI
A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Design System
Lion
Lion is an ideal fundament with accessible components for building a Design System.
Design System
Lightning Design System
SLDS is a living open-source design system. Our UX team rolls out new UI updates with every release, expanding the design possibilities while keeping existing applications up to date and running seamlessly.
Design System
Introducing the Salesforce Color System
Color is a critical pillar in the foundation of any brand and experience. It is a core building block to any design system.
Design System
Building an Accessible Lookback - Color
We think all accessibility stories are interesting and unique, including our own! In this content series we’ll share how we’ve landed at our own guiding principles and what we’ve discovered about building and testing an accessible product for our customers.
Colors
Because, color is beautiful
Making an appealing and accessible palette for brands, products, and experiences.
Design System
Shopify Polaris
A new look and feel, with an updated color palette, icons, and more. A reduction to our bundle size and accessibility features to make sure that the experiences you create work for everyone.
Design System
Paste
Design System for creating high quality, inclusive customer engagement experiences.
Design System
Atlassian Design System
Use Atlassian’s end-to-end design language to create simple, intuitive and beautiful experiences.
Design System
BBC GEL
BBC and UX&D Design System that focuses on every day's stuff that makes things special, as well as the stuff that makes things happen.
Design System
Reakit
Toolkit for building accessible UIs.
Design System
Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
Design System
Accessibility Guidelines
This web accessibility guide includes best practices, resources, and practical advice about how to ensure all users have equal access to information and functionality.
Design System
Kyper Design System
An accessible design system built by design team at MX.
Design System
Using color - U.S. Web Design System (USWDS)
Color is a practical and emotional tool. It conveys personality, sets a tone, attracts attention, and indicates importance.
Design System
React Aria
A library of React Hooks that provides accessible UI primitives for your design system. React Aria provides accessibility and behavior according to https://www.w3.org/TR/wai-aria-practices-1.2/, including full screen reader and keyboard navigation support.
Case Study
Scaling accessibility with a design system
Geri Reid's case study about her experience of learning how to design accessible web components, then scale their impact through a design system.