Design systems

Search…
Design systems
Interesting design systems
​Chakra UI - Simple, Modular & Accessible UI Components for your React Applications. (HN) (Docs) (Web) (The road to Chakra 1.0 and all about Chakra UI)
​Styled system - Style props for rapid UI development.
​Base Web - React Component library implementing the Base design language. (Code) (Figma)
​Grommet - React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
​smooth UI - Modern React UI library.
​Orbit - Open source design system for your next travel project.
​Reach UI - Accessible Foundation for React Apps and Design Systems.
​Latitude - Design guidelines, component documentation, styling instructions, and resources for building interfaces with Flexport’s design system. (HN) (Code)
​Vercel​
​Primer - Design, build, and create with GitHub’s design system. (Team) (Code)
​Fannypack - Friendly, themeable, accessible React UI Kit built with Reakit.
​Braid - Themeable design system for the SEEK Group.
​Lunar - React toolkit and design language for Airbnb open source and internal projects.
​Welcome UI​
​Ring UI - JetBrains Web UI components. (Code)
​Classy-UI - Atomic design system inspired by the wonderful Tailwindcss. (Code)
​Radix - Design System and Component Library for Modulz. (Code)
​Radix UI - Open-source UI component library for building high-quality, accessible design systems and web apps. (Code) (Docs Code)
​Tailwind UI - Beautiful UI components, crafted by the creators of Tailwind CSS. (HN) (HN 2)
​Carbon - Design system built by IBM. (Web)
​React Zeit Design​
​Fluent UI React - Set of React components for building Microsoft web experiences. (Figma) (Web)
​Operational UI Components - Contains simple, stateless UI building blocks - your typical input fields, buttons, cards, grids, and so on.
​react-ui - Customisable components and primitives based on design tokens.
​Spectrum - Adobe’s design system. (Code) (Version 3) (HN) (React Spectrum Libraries) (Docs)
​Stacks - Stack Overflow’s Design System. (Code)
​Elastic UI framework - Design library in use at Elastic to build internal products. (Code)
​gov.uk - Design your service using GOV.UK styles, components and patterns.
​Radius - Design System Accelerator. (Code)
​98.css - Design system for building faithful recreations of old UIs. (Code) (HN)
​Circuit UI - Design system & component library for SumUp web apps. (Code)
​Palette - Artsy's design system. (Code)
​Guardian Source (Code)
​VKUI - VK design system.
​Theme UI Sketchy Preset​
​UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.
​Docker Design System​
​SHAPER - Interface styles shaper. (Code)
​FAST - Adaptive interface system for modern web experiences. (Docs) (HN)
​Material Design (Code)
​Atlassian Design System​
​UI Playbook - Documented collection of UI components. (Code)
​Dracula UI - Dark-first collection of UI patterns and components.
​@polkadot/ui (Web)
​Dripsy - Responsive, theme-based design system for Expo + React Native Web.
​Storybook Design System - Codifies existing UI components into a central, well-maintained repository.
​Geist - Modern and minimalist React UI library, originating from Vercel's design. (Docs)
​Arcade Design - React components you need in all your projects to focus on solving the problems and launch faster.
​ui-neumorphism - React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.
​Forma 36 - Contentful Design System. (Code)
​Blueprint - React-based UI toolkit for the web. (Code)
​Qui - Vue.js design-system for Web.
​React Suite - Suite of React components, sensible UI design, and a friendly development experience. (Code)
​Ant Design - World's second most popular React UI framework. (Code)
Notes
​If you have 10 teams working independently, you're already maintaining 10 design systems—or even more. It's cheaper to do it once.​
Links
​Playroom - 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)​
​Stencil - Web Component compiler for building fast, reusable UI components and Progressive Web Apps. (Web)
​Theme UI - Build consistent, themeable React UIs based on design system constraints and design tokens.
​Awesome component-driven development​
​Modulz - 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​
​Zeroheight - 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. (Code)
​OpenChakra - Visual editor for Chakra UI. (Code) (HN)
​Chromatic - Tool to help manage design systems by generating platform-specific files from a source file describing design tokens.
​Prism - 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..
​Diez - Design Token Framework. (Code)
​Learn Storybook - Learn to develop UIs with components and design systems. (Code)
​Style Dictionary - Build system for creating cross-platform styles.
​Style Guide Guide - For creating superb style guides. (Code)
​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. (Web)
​Tips on making good design systems (2020)​
​Naming Tokens in Design Systems. Terms, Types, and Taxonomy to Describe (2020)​
​storybook-addon-designs - 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​
3D modeling
Industrial Design
Last modified 5mo ago
Copy link
Contents
Interesting design systems
Notes
Links