Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/component-driven/awesome-list

Curated list of links on component-driven development and design systems
https://github.com/component-driven/awesome-list

List: awesome-list

awesome awesome-list component-driven components design-systems react reactjs

Last synced: about 1 month ago
JSON representation

Curated list of links on component-driven development and design systems

Awesome Lists containing this project

README 

        
# Awesome component-driven development [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)



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



## Contents



- [Articles](#articles)

  - [Components](#components)

    - [React](#react)

  - [Development tools](#development-tools)

  - [Styles](#styles)

  - [Testing](#testing)

  - [Design systems](#design-systems)

  - [Design](#design)

  - [Whitespace](#whitespace)

  - [Color](#color)

  - [Typography](#typography)

  - [Design tools](#design-tools)

  - [Misc](#misc)

- [Talks](#talks)

- [Books](#books)

- [Courses](#courses)

- [Tools](#tools)

  - [Development workbenches](#development-workbenches)

  - [Misc](#misc-1)

- [Libraries and components](#libraries-and-components)

  - [React](#react-1)

  - [Styles](#styles-1)

- [Design system examples](#design-system-examples)

  - [Design system catalogs](#design-system-catalogs)

- [Misc](#misc-2)

- [Contributing](#contributing)

- [Authors and license](#authors-and-license)



## Articles



### Components



- [Cards and Composability in Design Systems](https://medium.com/eightshapes-llc/cards-and-composability-in-design-systems-8845ecbee50e)

- [Component Based Design System With Styled-System](https://varun.ca/styled-system/)

- [Defining Component APIs in React](https://jxnblk.com/blog/defining-component-apis-in-react/)

- [Designing Button States](https://cloudfour.com/thinks/designing-button-states/)

- [Handling spacing in a UI component library](https://medium.com/fed-or-dead/handling-spacing-in-a-ui-component-library-70f3b22ec89)

- [Hidden in plain site — the levels of component reuse. The path to portability for UI components](https://blog.hichroma.com/hidden-in-plain-site-the-levels-of-component-reuse-ee9b0d7b1bd2)

- [Managing Heading Levels In Design Systems](https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3)



#### React



- [Patterns for Style Composition in React](https://jxnblk.com/blog/patterns-for-style-composition-in-react/)

- [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

- [The Three Tenets of Styled System](https://jxnblk.com/blog/the-three-tenets-of-styled-system/)



### Development tools



- [Component-Driven Development](https://blog.hichroma.com/component-driven-development-ce1109d56c8e#.ltre4c82b)

- [Prefabricated components. The case for building UI components in isolation](https://blog.hichroma.com/prefabricated-components-2932bfc992ba)

- [React Storybook: Develop Beautiful User Interfaces with Ease](https://www.sitepoint.com/react-storybook-develop-beautiful-user-interfaces-with-ease/)

- [Storybook vs Styleguidist. A comparison of the top UI component explorers](https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06)

- [UI component explorers — your new favorite tool](https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a#.ag31xppof)

- [Using React within a Design System](https://medium.com/buildit/using-react-within-a-design-system-73d4bb0cc822#.nix8am1gt)



### Styles



- [Creating truly universal React component systems. Announcing styled-components/primitives](https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7)

- [Designer-Oriented Styles](https://the-pastry-box-project.net/james-kyle/2018-january-22)

- [Styling themes](https://johno.com/styling-themes)

- [React SSR pitfalls in building adaptive layouts](https://nikitakirsanov.com/en/blog/adaptive-layout-in-react-apps-with-ssr/)



### Testing



- [Visual Testing — the pragmatic way to test UIs](https://blog.hichroma.com/visual-testing-the-pragmatic-way-to-test-uis-18c8da617ecf)



### Design systems



- [4 Things I Know About Pattern Libraries](http://daverupert.com/2017/06/what-i-know-about-pattern-libraries/)

- [Building a React Component Library](https://medium.com/@_alanbsmith/building-a-react-component-library-part-1-d8a1e248fe6c)

- [Conducting an Interface Inventory](http://bradfrost.com/blog/post/conducting-an-interface-inventory/)

- [Creating A Living Style Guide: A Case Study](https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/)

- [Design Systems Sprint 0: The Silver Bullet of Product Development](https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d)

- [Design systems, style guides, pattern libraries. What the hell is the difference?](https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc)

- [Designing Imaginative Style Guides](https://24ways.org/2016/designing-imaginative-style-guides/)

- [From Pages to Patterns: An Exercise for Everyone](http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone)

- [How and why we built the Marvel Styleguide](https://blog.marvelapp.com/the-marvel-styleguide/)

- [How to construct a design system. Tips for designing and building a consistent design system](https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117)

- [Interface Inventory](http://bradfrost.com/blog/post/interface-inventory/)

- [Setup a design system. Build a system that provides a unified set of UX, design rules and patterns](https://blog.prototypr.io/design-system-ac88c6740f53#.7teofr9rk)

- [Taking The Pattern Library To The Next Level](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/)

- [Tokens in Design Systems: 10 Tips to Architect & Implement Design Decisions for Everyone](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421)

- [UI Component Playbook. A 5-step guide to designing and engineering frontends with components](https://blog.hichroma.com/ui-component-playbook-fd3022d00590#.7yfxvqlqw)



### Design



- [Dark Patterns are designed to trick you (and they’re all over the Web)](https://arstechnica.com/information-technology/2016/07/dark-patterns-are-designed-to-trick-you-and-theyre-all-over-the-web/)

- [Design System Grammar](https://daneden.me/2017/07/12/a-design-system-grammar/)



### Whitespace



- [8-Point Grid: Borders And Layouts](https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091)

- [Framework for creating a predictable & harmonious spacing system for faster design-dev handoff](https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c)

- [Intro to The 8-Point Grid System](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)

- [More Padding, Please! The power of white space in product design](https://medium.com/wayfair-design/more-padding-please-b95e19422acc)

- [Role of White Space in User Interface Design](http://www.designorate.com/white-space-user-interface-design/)

- [Space in Design Systems. From Basics to Expanded Concepts to Apply Space with Intent](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)

- [Whitespace](http://alistapart.com/article/whitespace)

- [Why White Space Is Crucial To UX Design](https://www.fastcodesign.com/3046656/why-white-space-is-crucial-to-ux-design)



### Color



- [10 Reasons to Use Color](http://understandinggraphics.com/design/10-reasons-to-use-color/)

- [Polishing GitLab’s UI: A new color system](https://about.gitlab.com/2018/03/29/polishing-gitlabs-ui-a-new-color-system/)

- [Re-approaching Color](https://design.lyft.com/re-approaching-color-9e604ba22c88)

- [The Science of Color Contrast — An Expert Designer’s Guide](https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156)

- [Designing accessible color systems](https://stripe.com/en-de/blog/accessible-color-systems)



### Typography



- [Creating a type style guide](https://blog.typekit.com/2014/10/22/creating-a-type-style-guide/)

- [Deep Dive on Typescales](https://medium.com/design-ibm/a-deep-dive-on-typescales-16c7b1473d83)

- [Framework to create an accessible & harmonious typography system for faster design-dev handoff](https://blog.prototypr.io/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd)

- [Typographic scale](http://spencermortensen.com/articles/typographic-scale/)

- [Typography in Design Systems](https://medium.com/@ethersystem/typography-in-design-systems-d61bf5d8a333)



### Design tools



- [Component architecture in Figma](https://blog.figma.com/component-architecture-in-figma-f16ae9cc4481)

- [Creating and Maintaining the Marvel Style Guide in Sketch](https://blog.marvelapp.com/creating-maintaining-marvel-style-guide-sketch/)

- [Evolution of Tools. Closing the loop with Design Intelligence](https://airbnb.design/the-evolution-of-tools/)

- [How to create a Design System in Sketch](https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-one-fd450dccab10)

- [Painting with Code. Introducing our new open source library React Sketch.app](https://airbnb.design/painting-with-code/)

- [Sketching in the Browser](https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526)



### Misc



- [Pure UI](https://rauchg.com/2015/pure-ui)

- [Sketching Interfaces. Generating code from low fidelity wireframes](https://airbnb.design/sketching-interfaces/)

- [Turning Design Mockups Into Code With Deep Learning](https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/)

- [Vue Design System](https://viljamis.com/2018/vue-design-system/)

- [Why designers and frond-end developers should talk more often](http://janpersiel.com/why-designers-and-frond-end-developers-should-talk-more-often/)



## Talks



- [Build Beautiful Interfaces Faster](https://youtu.be/dlMe7u02m50) by Dominic Nguyen and Zhenya Savchenko (2016)

- [Custom CSS is the path to inconsistent UI](https://youtu.be/Cdtwz3PbW7M) by Artem Sapegin (React Alicante 2017)

- [Designing With React](https://youtu.be/ixIuMs3aDCI) by Kristin Baumann (React Day Berlin 2017)

- [Dream of Styleguide Driven Development](https://youtu.be/JjXnmhNW8Cs) by Sara Vieira (React Alicante 2017)

- [Modular CSS](https://youtu.be/dYD058pQ8vg) by Andrey Okonetchnikov (React Alicante 2017)

- [Nathan Curtis on Buttons in Design Systems](https://vimeo.com/223433031)

- [Sketching in the Browser](https://youtu.be/ohw6AgPbJoE) by Mark Dalgleish (JSHeroes 2018)



## Books



- [Atomic Design](https://shop.bradfrost.com/) by Brad Frost

- [Design Systems: A practical guide to creating design languages for digital products](https://www.smashingmagazine.com/printed-books/design-systems/) by Alla Kholmatova

- [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) by InVision

- [Elements of Typographic Style](https://www.amazon.com/gp/product/0881792128/?tag=artesapesphot-20) by Robert Bringhurst

- [Front-end Style Guides: Creating and Maintaining Style Guides for Websites](http://www.maban.co.uk/projects/front-end-style-guides/) by Anna Debenham

- [Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites](https://www.amazon.com/gp/product/B01B6WS868/?tag=artesapesphot-20) by Micah Godbolt

- [Inclusive Components](http://book.inclusive-components.design/) by Heydon Pickering

- [On Web Typography](https://abookapart.com/products/on-web-typography) by Jason Santa Maria



## Courses



- [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns)



## Tools



### Development workbenches



- [Bit](https://github.com/teambit/bit) - A tool for isolating, developing and sharing components between projects and applications, with 2-way collaboartion over components.

- [React Cosmos](https://github.com/react-cosmos/react-cosmos)

- [React Styleguidist](https://react-styleguidist.js.org/) — isolated React component development environment with a living style guide

- [Storybook](https://storybook.js.org/)



### Misc



- [Cupper](https://github.com/ThePacielloGroup/cupper) — documentation builder for inclusive designers

- [Theo](https://github.com/salesforce-ux/theo) — generate design tokens for web, iOS and Android from single source

- [ColorBox](https://www.colorbox.io) - a new way to building color systems for accessible UIs that scale

- [Color](https://cloudflare.design/color/) - Color palette generator with aria and other interesting features



## Libraries and components



### React



- [Atomic layout](https://github.com/kettanaito/atomic-layout) — a single component to distribute a spacial relation in your layouts

- [macro-components](https://github.com/jxnblk/macro-components) — create flexible layout and composite UI components without the need to define arbitrary custom props

- [React Group](https://sapegin.github.io/react-group/) — render React children with a separator

- [React Spaceman](https://github.com/sapegin/react-spaceman) — React component to manage whitespace

- [Rebass](https://rebassjs.org/) — Flexible & functional React design system, built with styled-system

- [Rebass Grid](https://rebassjs.org/grid/) — responsive React grid system built with styled-components

- [Reach UI](https://ui.reach.tech/) — accessible foundation of your React-based design system

- [Stack Styled](https://sapegin.github.io/stack-styled/) — make stack layouts easy



### Styles



- [styled-tools](https://github.com/diegohaz/styled-tools) — useful interpolated functions for styled-components and other CSS in JS libraries

- [styled-system](https://github.com/jxnblk/styled-system) — design system utilities for styled-components and other CSS in JS libraries



### Colors



- [coloralgorithm](https://github.com/lyft/coloralgorithm) – Javacript function to produce color sets



## Design system examples



- [Alfa Bank](http://design.alfabank.ru/)

- [Ant Design](https://ant.design)

- [Aragon UI](https://ui.aragon.org/)

- [Audi](https://www.audi.com/ci/en/guides/user-interface/introduction.html)

- [Auth0 Design System](https://github.com/auth0/cosmos)

- [Backpack](https://backpack.github.io/) by Skyscanner

- [Carbon Design System](https://www.carbondesignsystem.com) by IBM

- [Circuit UI](https://circuit.sumup.com/#/) by SumUp 

- [cf-design](https://cloudflare.github.io/cf-ui/) by Cloudflare

- [Lightning Design System](https://www.lightningdesignsystem.com)

- [Marvel](https://marvelapp.com/styleguide/)

- [Material Design](https://material.io/guidelines/)

- [Office UI Fabric](https://developer.microsoft.com/en-us/fabric)

- [Pivotal UI](https://styleguide.pivotal.io/)

- [Pluralsight Design System](https://design-system.pluralsight.com/)

- [Polaris](https://polaris.shopify.com/) by Shopify

- [Priceline One](https://pricelinelabs.github.io/design-system/)

- [Seek Style Guide](https://seek-oss.github.io/seek-style-guide/)

- [Semantic UI](https://react.semantic-ui.com)

- [Vue Design System](https://vueds.com/)

- [Elastic UI framework](https://elastic.github.io/eui/#/)



### Design system catalogs



- [Adele](https://adele.uxpin.com/)

- [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems)



## Misc



- [Dark Patterns](https://darkpatterns.org)

- [Design Systems newsletter](http://news.design.systems/)

- [React Components Catalog](https://github.com/sapegin/react-components) — curated list of great React components

- [User Interface Design Patterns](http://ui-patterns.com)

- [Type Scale](https://type-scale.com/) — a visual type scale calculator

- [Website Style Guide Resources](http://styleguides.io/)



## Contributing



Suggestions are welcome: [send a pull request](Contributing.md) if you find something awesome about component-driven development.



## Authors and license



- [Andrey Okonetchnikov](http://okonet.ru/), a frontend engineer and UI & UX designer from Russia living in Vienna, Austria.

- [Artem Sapegin](http://sapegin.me/), a frontend developer at [Wayfair](https://tech.wayfair.com/) and the creator of [React Styleguidist](https://github.com/styleguidist/react-styleguidist). He also writes about frontend at [his blog](http://blog.sapegin.me/).



CC0 1.0 Universal license, see the included [License.md](License.md) file.