A collection of useful resources for building and maintaining a Design System.
☝ Note that this list is meant to be used for learning and researching purposes and is not complete.
- Material UI - "MUI"
- Microsoft - "FluentUI"
- Storybook - "Storybook"
- Airbnb - "Lunar"
- Uber - "Baseweb"
- GitHub - "Primer"
- Digital Ocean - "Walrus"
- Khan Academy - "Wonder Blocks"
- Shopify - "Polaris"
- Adobe - "Spectrum"
- Ant - "Ant Design"
- Atlassian - Atlassian Design System
- SumUp - "Circuit UI"
- IBM - "Carbon Design System"
- Kiwi - "Orbit"
- Pinterest - "Gestalt"
- Twilio - "Paste"
- Segment - "Evergreen"
-
Storybook - is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
-
React Styleguidist - is a component development environment with a hot reloaded dev server and an isolated React component development environment with a living style guide. It lists component props, and editable usage examples based on Markdown files.
-
Ladle - develop and test your React stories faster
- Chromatic - chromatic automates gathering UI feedback, visual testing, and documentation, so developers can iterate faster with less manual work
- Percy - all-in-one visual review platform
- Loki - visual regression testing for Storybook
- Lost Pixel - holistic visual testing for your Frontend; first class integration with Storybook
- A11y - the A11Y Project is a community-driven effort to make digital accessibility easier.
- Web Content Accessibility Guidelines (WCAG)
- [Chrome Extension] WAVE Evaluation Tool
- MDN - Accessibility
- Accessible Palette - create color systems with consistent lightness and contrast
PRs are welcome. I love finding new awesome resources that would shed light on the topic of Design Systems. Create a PR if you think something is worth sharing.
A few qualities that are appealing the most for me when adding resources:
- Quality - should be well written
- Be up to date
I hope this list was helpful for you 🖤