Everything I know
's is my favorite.
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
- Library of React Hooks that provides accessible UI primitives for your design system. (
- 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 как часть экосистемы виртуальных ассистентов семейства "Салют". (
Apache Superset UI packages
- Design system for Mirror.xyz built with React and vanilla-extract. (
Arco Design React
Equinor Design System
Style Guide of republik.ch
- Exporting React components for typography, forms and various article elements. (
- Design system for ShareGate.
- Design system used to build accessible, consistent, customizable and high quality customer experiences at Talend. (
Moai UI Kit
- React Component Library, Where Buttons Look Like Buttons. (
- React Native + Web UI kit. (
- Library of reusable UI components for React, made in minimalistic and light style.
If you have 10 teams working independently, you're already maintaining 10 design systems—or even more. It's cheaper to do it once.
Making design system decisions in order to be tech agnostic is actually doing a disservice. Usually the tradeoff becomes less ability to codify the decisions into the system, way more process and effort to evolve and educate, ultimately more expensive.
If you're not a designer the easiest way to make your site look pro is to keep your Artist palette color palette VERY limited. Most sites have only: 1. brand color (red, blue, green, orange, purple). 2. main color (black). 3. secondary color (gray).
- 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)
Design systems and magic (2021)
Design Systems are for user interfaces (2021)
Design Systems London Online #1 (2021)
- Most advanced visual theme editor for Chakra-UI. (
Documenting Design Systems In NextJS
Interesting design systems