Everything I know
Interesting design systems
- Simple, Modular & Accessible UI Components for your React Applications. (
The road to Chakra 1.0 and all about Chakra UI
Awesome Chakra UI
- Style props for rapid UI development.
- React Component library implementing the Base design language. (
- React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
- Modern React UI library.
- Open source design system for your next travel project. (
- Accessible Foundation for React Apps and Design Systems. (
- Design guidelines, component documentation, styling instructions, and resources for building interfaces with Flexport’s design system. (
- Design, build, and create with GitHub’s design system. (
- Friendly, themeable, accessible React UI Kit built with Reakit.
- Themeable design system for the SEEK Group.
- React toolkit and design language for Airbnb open source and internal projects.
- JetBrains Web UI components. (
- Atomic design system inspired by the wonderful Tailwindcss. (
- Design System and Component Library for Modulz. (
- Open-source UI component library for building high-quality, accessible design systems and web apps. (
- Beautiful UI components, crafted by the creators of Tailwind CSS. (
- Design system built by IBM. (
React Zeit Design
Fluent UI React
- Set of React components for building Microsoft web experiences. (
Operational UI Components
- Contains simple, stateless UI building blocks - your typical input fields, buttons, cards, grids, and so on.
- Customisable components and primitives based on design tokens.
- Adobe’s design system. (
React Spectrum Libraries
- Stack Overflow’s Design System. (
Elastic UI framework
- Design library in use at Elastic to build internal products. (
- Design your service using GOV.UK styles, components and patterns.
- Design System Accelerator. (
- Design system for building faithful recreations of old UIs. (
- Design system & component library for SumUp web apps. (
- Artsy's design system. (
- VK design system.
Theme UI Sketchy Preset
- Lightweight and modular front-end framework for developing fast and powerful web interfaces.
Docker Design System
- Interface styles shaper. (
- Adaptive interface system for modern web experiences. (
Atlassian Design System
- Documented collection of UI components. (
- Dark-first collection of UI patterns and components.
- Responsive, theme-based design system for Expo + React Native Web.
Storybook Design System
- Codifies existing UI components into a central, well-maintained repository.
- Modern and minimalist React UI library, originating from Vercel's design. (
- React components you need in all your projects to focus on solving the problems and launch faster.
- React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.
- Contentful Design System. (
- React-based UI toolkit for the web. (
- Vue.js design-system for Web.
- Suite of React components, sensible UI design, and a friendly development experience. (
- World's second most popular React UI framework. (
- UI kit for decentralized apps. (
Salesforce Lightning Design System
Shopify Polaris design tokens
- Next stage for Material Design. (
- Set of React UI components that enforces Pinterest’s design language. (
Woly UI Dev Kit
- Modular design-system to build flexible UI.
Helsinki Design System
- Design System, Guidelines and Component Library for the family of Prisma projects and products. (
AWS UI Components
Amsterdam Styled Components (ASC)
- Component Library based on Amsterdam Design System.
- Design System for building Twilio customer experiences. (
- UI Design System for React JS. (
- Design system for doc-blocks UI components, built on @design-systems/cli.
- Mobile-first, accessible component library for building a consistent design system across android, iOS & web. (
- Позволяет реализовать Canvas App как часть экосистемы виртуальных ассистентов семейства "Салют". (
If you have 10 teams working independently, you're already maintaining 10 design systems—or even more. It's cheaper to do it once.
- Design with JSX, powered by your own component library.
Awesome React Design Systems
- Curated list of design systems made up of reusable React components.
Framer Session 6 — Framer Bridge
Introducing Base Web, Uber’s New Design System for Building Websites in React (2019)
- Web Component compiler for building fast, reusable UI components and Progressive Web Apps. (
- Build consistent, themeable React UIs based on design system constraints and design tokens.
Awesome component-driven development
- Design, develop, document and deploy your design system—without writing code.
Design System Playground
- Play with typography and colors to generate a design system theme you can use in your projects.
Curated list of design systems
ReactiveConf 2019 - Mark Dalgleish: Rethinking Design Practices
Emma Wedekind: Foundations of Design Systems (2019)
Design Systems Slack
Awesome Design Systems
- Create beautiful living styleguides and document all your design system resources in one place.
Laying the Foundations
- Book about design systems.
Designing with React - Mark Dalgleish (2019)
Design Systems Design System - Siddharth Kshetrapal (2019)
Karri Saarinen - Scaling design with systems (2017)
Design System Checklist
- Open-source checklist to help you plan, build and grow your design system. (
- Visual editor for Chakra UI. (
- Tool to help manage design systems by generating platform-specific files from a source file describing design tokens.
- Gett's Design System code generator. Use Zeplin Styleguides as your R&D's Single Source of Truth.
System UI Theme Specification
CSS Analytics for Design Systems
- Analyze your CSS and keep track of changes in complexity and branding..
- Design Token Framework. (
- Learn to develop UIs with components and design systems. (
- Build system for creating cross-platform styles.
Style Guide Guide
- For creating superb style guides. (
The design systems between us (2020)
Reimagining Design Systems at Spotify (2019)
Radius Design Kit - Figma
- Collection of open-source tools and libraries that allow you to accelerate your own design system.
Awesome Design Systems Jobs
Design System Kit
- Workbench for collaboratively creating Design Systems. (
Tips on making good design systems (2020)
Naming Tokens in Design Systems. Terms, Types, and Taxonomy to Describe (2020)
- Storybook addon that embed Figma, websites, PDF or images in the addon panel.
UI Guideline - Component Standardization
- Definitive guide to standardize the design/code of UI Components.
Design Systems Figma (2020)
Introduction to Design Systems for UX/UI Designers (2020)
Design Systems Benchmark
Storybook Playroom Addon
- Design with Playroom inside Storybook, using each story source as a starting point.
React Component Library
- Project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook.
Design Systems Are Bullsh*t (2020)
Where to start with design tokens (2020)
Design Systems Checklist
Creating a Style System (2020)
Hawkins: Diving into the Reasoning Behind our Design System (2021)
Design System Questionnaire
- Collection of interface components from real-world design systems.
Design Systems 101
- One Design API, for all your design system tools. (
Why I Build Design Systems with Stitches and Radix (2021)
Microsoft Inclusive Design
- Deploy your storybook as a static site.
Programming Design Systems Book
Design Systems List
- List of famous design systems, design languages and guidelines.
Designs Systems CLI
- CLI toolbox for creating design systems. (
- Super-simple way to build beautiful websites. Pre-built, customizable, stackable, UI components. (
A Design System Governance Process (2021)
A Content Model Is Not a Design System (2021)
- Library to easily consume your design tokens from a React component, meant to be used with vanilla-extract.
Variant-driven Components (2021)
Interesting design systems