A curated list of links on component-driven development and design systems

• Articles
  • Components
    • React
  • Development tools
  • Styles
  • Testing
  • Design systems
  • Design
  • Whitespace
  • Color
  • Typography
  • Design tools
  • Misc
• Talks
• Books
• Courses
• Tools
  • Development workbenches
  • Misc
• Libraries and components
  • React
• Design system examples
  • Design system catalogs
• Misc
• Contributing
• Authors and license

• Cards and Composability in Design Systems
• Component Based Design System With Styled-System
• Defining Component APIs in React
• Designing Button States
• Handling spacing in a UI component library
• Hidden in plain site — the levels of component reuse. The path to portability for UI components
• Managing Heading Levels In Design Systems

• Patterns for Style Composition in React
• Presentational and Container Components

• Component-Driven Development
• Prefabricated components. The case for building UI components in isolation
• React Storybook: Develop Beautiful User Interfaces with Ease
• Storybook vs Styleguidist. A comparison of the top UI component explorers
• UI component explorers — your new favorite tool
• Using React within a Design System

• Creating truly universal React component systems. Announcing styled-components/primitives
• Designer-Oriented Styles

• Visual Testing — the pragmatic way to test UIs

• 4 Things I Know About Pattern Libraries
• Building a React Component Library
• Conducting an Interface Inventory
• Creating A Living Style Guide: A Case Study
• Design Systems Sprint 0: The Silver Bullet of Product Development
• Design systems, style guides, pattern libraries. What the hell is the difference?
• Designing Imaginative Style Guides
• From Pages to Patterns: An Exercise for Everyone
• How and why we built the Marvel Styleguide
• How to construct a design system. Tips for designing and building a consistent design system
• Interface Inventory
• Setup a design system. Build a system that provides a unified set of UX, design rules and patterns
• Taking The Pattern Library To The Next Level
• Tokens in Design Systems: 10 Tips to Architect & Implement Design Decisions for Everyone
• UI Component Playbook. A 5-step guide to designing and engineering frontends with components

• Dark Patterns are designed to trick you (and they’re all over the Web)
• Design System Grammar

• 8-Point Grid: Borders And Layouts
• Framework for creating a predictable & harmonious spacing system for faster design-dev handoff
• Intro to The 8-Point Grid System
• More Padding, Please! The power of white space in product design
• Role of White Space in User Interface Design
• Space in Design Systems. From Basics to Expanded Concepts to Apply Space with Intent
• Whitespace
• Why White Space Is Crucial To UX Design

• 10 Reasons to Use Color
• Polishing GitLab’s UI: A new color system

• Creating a type style guide
• Deep Dive on Typescales
• Framework to create an accessible & harmonious typography system for faster design-dev handoff
• Typographic scale
• Typography in Design Systems

• Component architecture in Figma
• Creating and Maintaining the Marvel Style Guide in Sketch
• Evolution of Tools. Closing the loop with Design Intelligence
• How to create a Design System in Sketch
• Painting with Code. Introducing our new open source library React Sketch.app
• Sketching in the Browser

• Pure UI
• Sketching Interfaces. Generating code from low fidelity wireframes
• Turning Design Mockups Into Code With Deep Learning
• Vue Design System
• Why designers and frond-end developers should talk more often

• Build Beautiful Interfaces Faster by Dominic Nguyen and Zhenya Savchenko (2016)
• Custom CSS is the path to inconsistent UI by Artem Sapegin (React Alicante 2017)
• Designing With React by Kristin Baumann (React Day Berlin 2017)
• Dream of Styleguide Driven Development by Sara Vieira (React Alicante 2017)
• Modular CSS by Andrey Okonetchnikov (React Alicante 2017)
• Nathan Curtis on Buttons in Design Systems
• Sketching in the Browser by Mark Dalgleish (JSHeroes 2018)

• Atomic Design by Brad Frost
• Design Systems: A practical guide to creating design languages for digital products by Alla Kholmatova
• Design Systems Handbook by InVision
• Elements of Typographic Style by Robert Bringhurst
• Front-end Style Guides: Creating and Maintaining Style Guides for Websites by Anna Debenham
• Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites by Micah Godbolt
• On Web Typography by Jason Santa Maria

• Advanced React Component Patterns

• React Cosmos
• React Styleguidist — isolated React component development environment with a living style guide
• Storybook

• Theo — generate design tokens for web, iOS and Android from single source

• Atomic layout — a single component to distribute a spacial relation in your layouts
• Grid Styled — responsive React grid system built with styled-components
• macro-components — create flexible layout and composite UI components without the need to define arbitrary custom props
• React Group — render React children with a separator
• React Spaceman — React component to manage whitespace

• styled-tools — useful interpolated functions for styled-components and other CSS in JS libraries
• styled-system — design system utilities for styled-components and other CSS in JS libraries

• Alfa Bank
• Ant Design
• Auth0 Design System
• Lightning Design System
• Material Design
• Office UI Fabric
• Pluralsight Design System
• Polaris by Shopify
• Rebass
• Seek Style Guide
• Vue Design System

• Adele
• Awesome Design Systems

• Dark Patterns
• Design Systems newsletter
• React Components Catalog — curated list of great React components
• User Interface Design Patterns
• Type Scale — a visual type scale calculator
• Website Style Guide Resources

Suggestions are welcome: send a pull request if you find something awesome about component-driven development.

• Andrey Okonetchnikov, a frontend engineer and UI & UX designer from Russia living in Vienna, Austria.
• Artem Sapegin, a frontend developer at Wayfair and the creator of React Styleguidist. He also writes about frontend at his blog.

CC0 1.0 Universal license, see the included License.md file.