Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Awesome component-driven development 
A curated list of links on component-driven development and design systems
Contents
- Articles
- Talks
- Books
- Courses
- Tools
- Libraries and components
- Design system examples
- Misc
- Contributing
- Authors and license
Articles
Components
- 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
React
- Patterns for Style Composition in React
- Presentational and Container Components
- The Three Tenets of Styled System
Development tools
- 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
Styles
- Creating truly universal React component systems. Announcing styled-components/primitives
- Designer-Oriented Styles
- Styling themes
- React SSR pitfalls in building adaptive layouts
Testing
Design systems
- 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
Design
Whitespace
- 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
Color
- 10 Reasons to Use Color
- Polishing GitLab’s UI: A new color system
- Re-approaching Color
- The Science of Color Contrast — An Expert Designer’s Guide
- Designing accessible color systems
Typography
- 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
Design tools
- 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
Misc
- 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
Talks
- 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)
Books
- 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
- Inclusive Components by Heydon Pickering
- On Web Typography by Jason Santa Maria
Courses
Tools
Development workbenches
- Bit - A tool for isolating, developing and sharing components between projects and applications, with 2-way collaboartion over components.
- React Cosmos
- React Styleguidist — isolated React component development environment with a living style guide
- Storybook
Misc
- Cupper — documentation builder for inclusive designers
- Theo — generate design tokens for web, iOS and Android from single source
- ColorBox - a new way to building color systems for accessible UIs that scale
- Color - Color palette generator with aria and other interesting features
Libraries and components
React
- Atomic layout — a single component to distribute a spacial relation in your layouts
- 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
- Rebass — Flexible & functional React design system, built with styled-system
- Rebass Grid — responsive React grid system built with styled-components
- Reach UI — accessible foundation of your React-based design system
- Stack Styled — make stack layouts easy
Styles
- 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
Colors
- coloralgorithm – Javacript function to produce color sets
Design system examples
- Alfa Bank
- Ant Design
- Aragon UI
- Audi
- Auth0 Design System
- Backpack by Skyscanner
- Carbon Design System by IBM
- Circuit UI by SumUp
- cf-design by Cloudflare
- Lightning Design System
- Marvel
- Material Design
- Office UI Fabric
- Pivotal UI
- Pluralsight Design System
- Polaris by Shopify
- Priceline One
- Seek Style Guide
- Semantic UI
- Vue Design System
- Elastic UI framework
Design system catalogs
Misc
- 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
Contributing
Suggestions are welcome: send a pull request if you find something awesome about component-driven development.
Authors and license
- 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.