📝
knowledge
  • links
  • 14-Pure-Education
    • My Knowledge Wiki 🌿
      • .github
        • ISSUE_TEMPLATE
          • Question 🤔
          • bug_report
          • Feature ✨
        • Summary
      • design
        • Animation
        • Fonts
        • Framer
        • Color
        • figma
          • Figma
          • Figma plugins
        • Inkscape
        • Blender
        • Design
        • Interior Design
        • Icons
        • Design inspiration
        • 3D modeling
        • Design systems
        • Industrial Design
        • User Experience
        • Logos
      • databases
        • Neo4j
        • Fauna
        • sql
          • SQL
        • blockchain
          • Cardano
          • Arweave
          • Tezos
          • Polkadot
          • Uniswap
          • Ethereum
          • Blockchain
        • Kdb+
        • Cassandra DB
        • PostgreSQL
        • FoundationDB
        • SQLite
        • Prometheus
        • Dgraph
        • Redis
        • DynamoDB
        • Databases
        • Memcached
        • MariaDB
        • Prisma
        • MongoDB
      • augmented-reality
        • Augmented Reality
        • ARKit
      • art
        • Art
        • Pen plotting
        • Drawing
        • Photography
        • Generative art
        • Sketching
        • Comics
        • Anime
        • Furniture
        • Dancing
        • Architecture
        • Clothes
        • Tattoos
      • computer-graphics
        • computer-vision
          • Optical character recognition
          • Computer vision
        • Procedural generation
        • Metal
        • SVG
        • WebGPU
        • [Ray tracing](https://en.wikipedia.org/wiki/Ray_tracing_(graphics))
        • Computer graphics
        • WebGL
        • CUDA
        • OpenGL
        • Vulkan API
        • Bézier curves
        • Shaders
        • Image processing
        • [Rendering](https://en.wikipedia.org/wiki/Rendering_(computer_graphics))
      • computer-science
        • Parsing
        • algorithms
          • Algorithms
          • Compression
        • Computer Science
        • Computer architecture
        • formal-verification
          • Formal verification
          • TLA+
        • Automata theory
        • data-structures
          • Data structures
      • business
        • startups
          • Marketplaces
          • Funding
          • Values
          • Onboarding
          • Venture capital
          • Startups
          • Payroll
        • Products
        • Business
        • Restaurants
        • Landing pages
        • Pricing
      • compilers
        • LLVM
        • Linters
        • build-systems
          • Build systems
          • Bazel
        • Compilers
      • books
        • Mind for numbers - Review
        • Thinking, fast and slow
        • Brave new world
        • Elements of programming interviews
        • Rich dad poor dad
        • Programming in Haskell
        • Code: hidden language of software
        • Surely you are joking Mr Feynman
        • Books
        • Mindstorms
        • Eloquent ruby
        • go-in-action
        • Crafting interpreters
        • Cracking the coding interview
        • Artificial Intelligence: A Modern Approach
      • devops
        • Observability
        • DevOps
        • Site Reliability Engineering
        • Terraform
      • cryptocurrencies
        • Nano
        • Cryptocurrencies
        • Bitcoin
        • Stellar
        • Libra
        • TON
      • backups
        • Backups
      • 3d-printing
        • 3D Printing
      • distributed-systems
        • message-queue
          • Message queue
          • ZeroMQ
          • MQTT
        • [Load balancing](https://en.wikipedia.org/wiki/Load_balancing_(computing))
        • rpcs
          • gRPC
          • Remote Procedure Calls
        • Distributed systems
        • Conflict-free replicated data type
      • cli
        • Command Line Tools
        • Tmux
        • Ngrok
        • Sed
      • automation
        • Home automation
        • Automation
      • biology
        • Computational biology
        • Biology
        • Evolution
        • genomics
          • DNA
          • Genomics
        • immunology
          • Immunotherapy
          • Immunology
        • Bionics
        • bioinformatics
          • Bioinformatics
        • Viruses
      • cloud-computing
        • serverless-computing
          • AWS Lambda
          • Serverless computing
          • Cloudflare workers
        • Cloud computing
        • gcp
          • Google Cloud
        • aws
          • AWS Amplify
          • AWS
        • azure
          • Azure
      • articles
        • Articles
      • anki
        • Anki
      • data-science
        • Data Science
        • Data Visualization
        • Data processing
        • Apache Kafka
      • consciousness
        • Consciousness
        • Ego
      • documentaries
        • Documentaries
      • Summary
      • api
        • API
      • animals
        • Birds
        • Animals
      • courses
        • Courses
      • analytics
        • Analytics
      • chemistry
        • Chemistry
Powered by GitBook
On this page
  • Interesting design systems
  • Notes
  • Links

Was this helpful?

  1. 14-Pure-Education
  2. My Knowledge Wiki 🌿
  3. design

Design systems

Previous3D modelingNextIndustrial Design

Last updated 4 years ago

Was this helpful?

Interesting design systems

  • - Simple, Modular & Accessible UI Components for your React Applications. () () () ()

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

  • - Set of React components for building Microsoft web experiences. () ()

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

  • - Stack Overflow’s Design System. ()

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

  • - Lightweight and modular front-end framework for developing fast and powerful web interfaces.

  • - Interface styles shaper. ()

  • - Adaptive interface system for modern web experiences. () ()

  • ()

  • - Documented collection of UI components. ()

  • - Dark-first collection of UI patterns and components.

  • ()

  • - Responsive, theme-based design system for Expo + React Native Web.

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

Notes

Links

- Design with JSX, powered by your own component library.

- Curated list of design systems made up of reusable React components.

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

- Design, develop, document and deploy your design system—without writing code.

- Play with typography and colors to generate a design system theme you can use in your projects.

- Create beautiful living styleguides and document all your design system resources in one place.

- Book about design systems.

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

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

- For creating superb style guides. ()

- Collection of open-source tools and libraries that allow you to accelerate your own design system.

- Workbench for collaboratively creating Design Systems. ()

- Storybook addon that embed Figma, websites, PDF or images in the addon panel.

- Definitive guide to standardize the design/code of UI Components.

- Design with Playroom inside Storybook, using each story source as a starting point.

- Project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook.

Chakra UI
HN
Docs
Web
The road to Chakra 1.0 and all about Chakra UI
Styled system
Base Web
Code
Figma
Grommet
smooth UI
Orbit
Reach UI
Latitude
HN
Code
Vercel
Primer
Team
Code
Fannypack
Braid
Lunar
Welcome UI
Ring UI
Code
Classy-UI
Code
Radix
Code
Radix UI
Code
Docs Code
Tailwind UI
HN
HN 2
Carbon
Web
React Zeit Design
Fluent UI React
Figma
Web
Operational UI Components
react-ui
Spectrum
Code
Version 3
HN
React Spectrum Libraries
Docs
Stacks
Code
Elastic UI framework
Code
gov.uk
Radius
Code
98.css
Code
HN
Circuit UI
Code
Palette
Code
Guardian Source
Code
VKUI
Theme UI Sketchy Preset
UIkit
Docker Design System
SHAPER
Code
FAST
Docs
HN
Material Design
Code
Atlassian Design System
UI Playbook
Code
Dracula UI
@polkadot/ui
Web
Dripsy
Storybook Design System
Geist
Docs
Arcade Design
ui-neumorphism
Forma 36
Code
Blueprint
Code
Qui
React Suite
Code
Ant Design
Code
If you have 10 teams working independently, you're already maintaining 10 design systems—or even more. It's cheaper to do it once.
Playroom
Awesome React Design Systems
Framer Session 6 — Framer Bridge
Introducing Base Web, Uber’s New Design System for Building Websites in React (2019)
Stencil
Web
Theme UI
Awesome component-driven development
Modulz
Design System Playground
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
Laying the Foundations
Designing with React - Mark Dalgleish (2019)
Design Systems Design System - Siddharth Kshetrapal (2019)
Karri Saarinen - Scaling design with systems (2017)
Design System Checklist
Code
OpenChakra
Code
HN
Chromatic
Prism
System UI Theme Specification
CSS Analytics for Design Systems
Diez
Code
Learn Storybook
Code
Style Dictionary
Style Guide Guide
Code
The design systems between us (2020)
Reimagining Design Systems at Spotify (2019)
Radius Design Kit - Figma
Awesome Design Systems Jobs
Design System Kit
Web
Tips on making good design systems (2020)
Naming Tokens in Design Systems. Terms, Types, and Taxonomy to Describe (2020)
storybook-addon-designs
UI Guideline - Component Standardization
Design Systems Figma (2020)
Introduction to Design Systems for UX/UI Designers (2020)
Design Systems Benchmark
Storybook Playroom Addon
React Component Library
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