design-systems.md

Design systems

Design System Guide is nice intro.

Primer, Vercel, Radix Primitives, Polaris & Mantine are my favorite. Brand Site Design has a nice list. Utopia is nice guideline for responsive design. Reshaped is great too.

Component Gallery is great overview of different components.

Interesting design systems

• Tailwind UI - Beautiful UI components, crafted by the creators of Tailwind CSS. (HN) (HN 2)
• Radix - Design System and Component Library for Modulz. (Code) (Radix Primitives Cheat Sheet) (Primitives Cheat Sheet Code)
• Mantine UI - Set of more than 120 responsive components built with Mantine. (Code) (Reddit)
• GOV.UK - Design your service using GOV.UK styles, components and patterns. (Article) (HN) (GOV.UK in React)
• Hummingbot Design System (Code)
• 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) (Awesome Chakra UI) (Chakra UI For Beginners)
• Blade - Design System that powers Razorpay.
• Basis (Code)
• 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. (Beta) (Code)
• Reach UI - Accessible Foundation for React Apps and Design Systems. (Docs)
• Latitude - Design guidelines, component documentation, styling instructions, and resources for building interfaces with Flexport’s design system. (HN) (Code)
• Vercel (Code)
• Primer - Design, build, and create with GitHub’s design system. (Team) (Code) (Links) (Web Code)
• Primer Brand - React components for GitHub marketing websites.
• 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 UI - Open-source UI component library for building high-quality, accessible design systems and web apps. (Code) (Docs Code)
• 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)
• React Aria - Library of React Hooks that provides accessible UI primitives for your design system. (HN)
• Stacks - Stack Overflow’s Design System. (Code)
• Elastic UI - Component library for data-driven web apps. (Code) (HN)
• 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) (Tweet)
• 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)
• aragonUI - UI kit for decentralized apps. (Code)
• Salesforce Lightning Design System (Code)
• Shopify Polaris design tokens
• Material You - Next stage for Material Design. (HN)
• Gestalt - Set of React UI components that enforces Pinterest’s design language. (Web)
• Woly UI Dev Kit - Modular design-system to build flexible UI.
• Helsinki Design System
• Prisma Lens - Design System, Guidelines and Component Library for the family of Prisma projects and products. (Web)
• AWS UI Components
• Amsterdam Styled Components (ASC) - Component Library based on Amsterdam Design System.
• Paste - Design System for building Twilio customer experiences. (Code)
• Atomize Code - UI Design System for React JS. (Web)
• doc-blocks - Design system for doc-blocks UI components, built on @design-systems/cli.
• NativeBase - Mobile-first, accessible component library for building a consistent design system across android, iOS & web. (Web) (Docs) (Docs Code)
• Plasma UI - Позволяет реализовать Canvas App как часть экосистемы виртуальных ассистентов семейства "Салют". (Code)
• Apache Superset UI packages
• Mirror Design - Design system for Mirror.xyz built with React and vanilla-extract. (Code)
• Arco Design React
• Equinor Design System
• Style Guide of republik.ch - Exporting React components for typography, forms and various article elements. (Code)
• Orbit - Design system for ShareGate.
• Talend - Design system used to build accessible, consistent, customizable and high quality customer experiences at Talend. (Code)
• Moai UI Kit - React Component Library, Where Buttons Look Like Buttons. (Code)
• Tamagui - React Native + Web UI kit. (Code)
• Brix UI - Library of reusable UI components for React, made in minimalistic and light style.
• Marigold Design System - Design System based on emotion, react-aria & theme-ui. (Code)
• UI Kit Component library
• California Design System
• RevKit - Design System UI Kit. (Solid Code)
• Workday Canvas Kit
• AgnosticUI - UI primitives that start their lives in clean HTML and CSS. (Code)
• MUI X - Performant advanced components. (Code)
• Inkline - Paper - Unified interface for defining components for Vue and React using a single code base.
• USWDS: The United States Web Design System (HN)
• Mdash - Design system that fully embraces web standards. (Code)
• PIXIV Design System
• Europa Component Library (Code)
• Kaizen Design System (Code)
• Backpack - Skyscanner's Design System. (iOS Code) (Code)
• Horizon UI - Open Source Admin Template for Chakra UI & React.
• AriaKit - Toolkit for building accessible web apps with React. (Twitter)
• ENS Design System - Design system for ENS built with React and styled-components.
• NeoPOP - CRED's inbuilt library for using NeoPOP components in your web app.
• Baklava - Design system provided by Trendyol to create a consistent UI/UX for app users.
• Cloudscape (React Code)
• System.css - Design system for building retro Apple-inspired interfaces. (HN)
• JetBrains Ring UI (HN)
• Seed Design System

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.
• 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).

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) (Web Code)
• 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
• Component Gallery - Collection of interface components from real-world design systems. (Code)
• Design Systems 101
• Specify - One Design API, for all your design system tools. (Specify Parsers)
• Why I Build Design Systems with Stitches and Radix (2021) (Tweet)
• Microsoft Inclusive Design
• Storybook Deployer - Deploy your storybook as a static site.
• Programming Design Systems Book (Code)
• Design Systems List - List of famous design systems, design languages and guidelines.
• Designs Systems CLI - CLI toolbox for creating design systems. (Docs)
• Wedges - Super-simple way to build beautiful websites. Pre-built, customizable, stackable, UI components. (Twitter)
• A Design System Governance Process (2021)
• A Content Model Is Not a Design System (2021)
• Dessert Box - 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)
• Design-Systems-Resources
• HyperTheme Editor - Most advanced visual theme editor for Chakra-UI. (Code)
• Documenting Design Systems In NextJS
• Design Systems Demystified
• The Practical Guide to Naming Design Tokens (2022)
• Specify - Design Data Platform. (Twitter)
• Storybook Design Token Addon
• Brand Site Design - Collection of purpose-built, digital, accessible guidelines from global brands.
• Fluid Design Systems With Netlify On-demand Builders
• Multi-platform design system at Booking.com – Figma (2022)
• Design System in 90 Days
• Cobalt - Turns your design tokens into code. (Code)
• Awesome design language system
• Why most design systems implode (2022)
• Shopify Design Foundations - Prototype for a foundational design system at Shopify.
• Design Tokens Technical Reports (Code)
• Advanced Design Systems
• Naming conventions for design systems (2022)
• How to build a universal design system (2021)
• Design System Pipelines demo - Demo for E2E build piplelines in Design Systems using monorepo's and automation.
• Reshaped - Design system built for your scale with React and Figma. (Twitter)
• Design system tips
• Design system interviews
• The “dark yellow problem” in design system color palettes (HN)
• Open design systems from the Figma Community
• Design System Guide
• Layout & Grid in Design Systems (2022)
• Lighthouse - Continuous design system for integrating design with development workflows.
• Building conscious design systems (2022)
• Tips for naming design system things