Track Awesome Design Systems Updates Weekly
📒 A curated list of bookmarks, resources and articles about design systems focused on developers.
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 klaufel/awesome-design-systems · ⭐ 908 · 🏷️ Front-End Development
Nov 16 - Nov 22, 2026
Design systems of some "known" companies
- Firefox Acorn Design System - Launch recognizable, enjoyable Firefox products and features faster.
- Google Material Design - Create intuitive and beautiful products with Material Design.
Design systems articles
More resources
- Design system checklist - Build better design systems. An open-source checklist to help you plan, build and grow your design system.
- Design.system - Resources for the design systems community.
Design tools
- Penpot - The first Open Source design and prototyping platform meant for cross-domain teams.
Accessibility (a11y)
- The A11Y Project - A community-driven effort to make web accessibility easier. See resources section.
Design tokens
- Design Tokens Format Module 2025.10 - First stable version of the Design Tokens Community Group specification, with format, color and resolver modules.
Plugins
- Tokens Studio - Manage design tokens in Figma and keep them in sync with your code repository.
Tools
- Style Dictionary (⭐4.9k) - A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language.
- Terrazzo - Generate code for web, mobile and native apps from design tokens JSON in the Design Tokens Community Group format.
Develop isolated components / Storybook addons
- Accessibility - Test component compliance with web accessibility standards.
- Actions - Get UI feedback when an action is performed on an interactive element.
- Backgrounds - Switch backgrounds to view components in different settings.
- Docs - Document component usage and properties in Markdown.
- Links - Link stories together to build demos and prototypes with your UI components.
- Source - View a story's source code to see how it works and paste into your app.
- Viewport - Build responsive components by adjusting Storybook's viewport size and orientation.
- Vitest - Run every story as a Vitest test, with interaction, accessibility and visual checks.
Component patterns / Storybook addons
- ARIA Authoring Practices Guide patterns - Reference patterns from the W3C for building accessible components, with keyboard interaction and working examples.
- Open UI - W3C Community Group that researches how design systems name and build components, and proposes new native HTML controls.
- The Component Gallery - Up-to-date repository of interface components based on examples from real design systems.
Headless component libraries / Storybook addons
- Ark UI - Unstyled, accessible components for your design system that work in React, Vue, Solid and Svelte.
- Base UI - Unstyled components for building accessible design systems, from the creators of Radix, Floating UI and Material UI.
- Radix Primitives - Open-source component library for building high-quality, accessible design systems and web apps.
- React Aria - Accessible components and hooks with behavior, internationalization and no imposed styles, by Adobe.
- shadcn/ui - Composable, accessible components you copy into your codebase and own, distributed through a registry.
Pattern libraries articles / Storybook addons
AI and design systems / Storybook addons
- DESIGN.md (⭐29k) - Format specification for describing a visual identity and design system to coding agents.
- Figma Code Connect (⭐1.6k) - Connects design system components in code with their counterparts in Figma, so developers and agents get real snippets.
- Figma Console MCP (⭐3.3k) - MCP server that connects AI assistants to Figma for design system extraction, creation and debugging.
- Figma MCP server - Official server that gives AI agents the design context of your Figma files to generate code, and lets them write back to the canvas.
- Storybook MCP addon - Helps agents write and test stories for your UI components.
Unit & Regression test / Storybook addons
- Chromatic - Visual testing for React, Angular and Vue. Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.
Books / Storybook addons
- Building Design Systems - Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis.
- Frontend Architecture for Design Systems - A modern blueprint for scalable and sustainable websites by Micah Godbolt.
Talks / Storybook addons
- Design Processes & Systems in Craft - Design shouldn't be a siloed practice, but a collaborative effort rooted in process. How do we get there? In this session, we'll look at how we can reframe our design approach to be more human-centric and systems-minded by Courtney Bradford.
Apr 27 - May 03, 2026
Design tools
- Lunacy - A free graphic design tool with offline mode, built-in assets (icons, illustrations, photos), and real-time collaboration. Great alternative to Sketch and Figma (macOS, Windows, Linux).
Unit & Regression test / Storybook addons
- Sherlo - Visual testing platform for React Native Storybook. Captures screenshots on iOS and Android simulators in the cloud and detects visual changes automatically.
Oct 28 - Nov 03, 2024
Accessibility (a11y)
- InclusiveColors palette creator - Creates accessible custom Tailwind-style color palettes that pass WCAG contrast checks and can be exported to CSS/Figma/Adobe.
Jul 03 - Jul 09, 2023
Design tokens
- Design Tokens Validator - Validate your design tokens against the Design Token Community Group spec.
Jun 27 - Jul 03, 2022
More resources
- Design Systems Survey - Designers and developers from more than 20 industries tell us about their design systems and their uses.
Dec 13 - Dec 19, 2021
Develop isolated components
- Backlight - Collaborative platform to build Design Systems on the code side. Empower your front-end with an all-in-one solution to manage components. Quick start, speed-up collaboration.
Feb 15 - Feb 21, 2021
Books / Storybook addons
- Introduction to Design Systems - A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian.
Jan 25 - Jan 31, 2021
Design tools
- AdobeXD - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.
- Marvel - Everything you need to bring ideas to life and transform how you create digital products with your team. Placing the power of design in everyone’s hands.
- UXPin - Design and manage your entire UX/UI project in one tool.
Oct 12 - Oct 18, 2020
Accessibility (a11y)
- Stark - Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions.
Plugins
- Zeplin JSON export tokens - Design tokens Zeplin extension to generate your tokens in JSON format.
Tools
- Theo (⭐2k) - An abstraction for transforming and formatting Design Tokens (archived, superseded by Style Dictionary).
Oct 05 - Oct 11, 2020
Design systems of some "known" companies
- Atlassian Design Guidelines - End-to-end design language to create straightforward and beautiful experiences.
- GitHub Primer - Open-source it to allow the community to design and build their own projects.
- GitLab Design System - Pajamas - Resources, components, and design guidelines behind GitLab.
- IBM Carbon - Carbon is IBM's open-source design system for products and experiences.
- Shopify Polaris - Our design system helps us work together to build a great experience for all of Shopify's merchants.
Design systems articles
More resources
- Super friendly - We help in-house teams make better digital products with design systems.
Design tools
- Figma - Helps teams create, test, and ship better designs from start to finish (cross-platform).
- Sketch - A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS).
Integrations
- Abstract - Design collaboration without the chaos (for Sketch and XD on macOS).
- Zeplin - The better way to share, organize and collaborate on designs—built with developers in mind.
Design tokens
- Design Tokens W3C Community Group - View repository on GitHub here (⭐2.2k)!
- Diez - Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams (no longer maintained).
Plugins
- Abstract Connect (⭐7) - A Design tokens extractor for devs using Abstract & JavaScript.
Tools
- Figmagic (⭐863) - Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
- Superposition - Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have.
Articles
Styleguides and documentation
- Stencil - Toolchain for building reusable, scalable Design Systems.
- Zeroheight - Create beautiful living styleguides and document all your design system resources in one place. Learn about this.
Develop isolated components
- Pattern Lab - Helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.
- React Styleguidist - Isolated React component development environment with a living style guide.
- Storybook - Build bulletproof UI components faster. 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.
- Styled System - A collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object.
Pattern libraries articles / Storybook addons
Unit & Regression test / Storybook addons
- Testing library - Simple and complete testing utilities that encourage good testing practices.
Books / Storybook addons
- Atomic Design - Methodology for creating design systems by Brad Frost.
- Design systems - A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine).
- Front-End Style Guides - Creating and maintaining style guides for websites by Anna Debenham.
- Modular Web Design - Creating Reusable Components for user experience design and documentation by Nathan Curtis.
Talks / Storybook addons
- Building Accessible Interfaces: Patterns And Techniques - Will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind by Sara Soueidan.
- Design Systems - The State of the Web - Conversation about the role of design systems in modern web development and how they can change the dynamics between designer and developer by Adam Argyle (Design Advocate at Google).
- Design Systems - Women of React conf by Neha Sharma.
- Introducing Design Systems Into Chaos - Shares practical examples on where to begin to set up a design system, what to prioritize, and how to make a big impact to customers and colleagues, to help you introduce systems that bring order to chaos by Diana Mounter (Design Systems Lead at GitHub).
- Jina Anne - Designing a Design System - Will share strategies for how to approach, design and build an effective design system; how to successfully maintain the system to ensure ongoing usefulness by Jina (Lead Designer on the Design Systems team at Salesforce UX).
- Level up your Design System with styled-system - Women of React conf by Taley'a Mirza.
Apr 27 - May 03, 2020
Design systems articles
Design tools articles
Articles
Pattern libraries articles / Storybook addons