Design Systems
FREE
Figma’s design systems publication: create a design system, grid systems, spacing, iconography, and examples from Airbnb and more in the browser.
23 opens
A Curated Collection of Design Systems
Curated design systems from Apple, Ant Design, Shopify Polaris, and more—UX inspiration, component libraries, and best practices.
Design Systems
Help Us Improve
—
(—)
What is Design System Hub?
Design System Hub is a curated directory of design systems, UI kits, and component libraries from around the world. It helps designers and developers discover established UX systems, compare approaches, and find inspiration for building consistent, scalable interfaces.
What You Can Find Here
Design System Hub curates the best design systems and UX resources for designers and developers.
Enterprise Systems: Design systems from major companies like Apple HIG, Shopify Polaris, and Atlassian.
Open-Source Libraries: Component libraries such as Ant Design, Material Design, and Chakra UI.
Figma Integration: Use our Figma plugin to browse systems directly in your design files.
Curated & Updated: Regularly updated collection with links to official documentation and resources.
Great For Designers and Developers
Who benefits from a design system resource hub?
UX Designers
Discover patterns, components, and guidelines from leading design systems.
Frontend Developers
Find component libraries and design tokens for your tech stack.
Design Leads
Research approaches when building or evolving your own design system.
Product Teams
Align on consistency by referencing proven design system structures.
Sources & References
Authoritative references on design system methodology, design tokens, and the component library resources this hub curates.
“A design system is a complete set of standards, documentation, and reusable components intended to manage design at scale using reusable patterns and components.”
Design systems — principles and methodology: This hub curates design systems from companies such as Apple, Google, Shopify, and Atlassian, providing designers and developers with references for building and evolving their own consistent UI foundations. en.wikipedia.org/wiki/Design_system
“Design tokens are platform-agnostic variables that store visual design attributes such as color, typography, spacing, and shadow values for use across design tools and codebases.”
Design tokens for cross-platform consistency: Many systems in this directory use design tokens to maintain consistency across platforms. Tokens bridge design tools like Figma and code frameworks like React, ensuring shared visual language. w3.org/community/design-tokens/
“Component libraries package reusable interface elements with documented APIs, accessibility support, and theming capabilities. Popular examples include Ant Design, Material UI, and Chakra UI.”
Component libraries and UI kits: The hub indexes component libraries and UI kits from open-source projects and enterprise teams, making it easier to compare patterns, theming approaches, and accessibility support. ant.design/docs/react/introduce
Frequently Asked Questions
Quick answers about this tool—open a question to read more.
Related tools
More tools from Learn & References.
AI Prompts
FREEBrowse curated Design and Image Generation prompts. Copy or run them in ChatGPT, Claude, Cursor, and more with one click.
36 opens
Component Gallery
FREEBrowse webpage components and design system examples: carousel, tabs, accordion, dropdown, and color picker UI patterns in the browser.
50 opens
Design Systems Repo
PAIDDesign Systems Repo: tools, docs, and examples—top design systems, enterprise lists, React systems, and UX design system samples.
30 opens
Launch
FREECurated launch directories, post channels, and GitHub lists—with pricing, badge rules, review wait times, and SEO/backlink notes for free listing paths.
63 opens
Baseline HQ
FREEBaseline HQ design education: editorial design, types of logo, grid systems, HSV colour model, and graphic design movements in the browser.
20 opens