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