├── Contributing.md ├── License.md └── Readme.md /Contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution guidelines 2 | 3 | **The pull request should have a useful title. Pull requests with “Update readme.md” as title will be closed right away. Please carefully read everything in [Adding something to this list](#adding-something-to-this-list).** 4 | 5 | ## Table of contents 6 | 7 | - [Adding something to this list](#adding-something-to-this-list) 8 | - [Updating your pull request](#updating-your-pull-request) 9 | 10 | ## Adding something to an awesome list 11 | 12 | If you have something awesome to contribute to the list, this is how you do it. 13 | 14 | You’ll need a [GitHub account](https://github.com/join)! 15 | 16 | 1. Access [the awesome list’s GitHub page](https://github.com/component-driven/awesome-list). 17 | 2. Click on the `Readme.md` file: ![Step 2 Click on Readme.md](https://cloud.githubusercontent.com/assets/170270/9402920/53a7e3ea-480c-11e5-9d81-aecf64be55eb.png) 18 | 3. Now click on the edit icon. ![Step 3 - Click on Edit](https://cloud.githubusercontent.com/assets/170270/9402927/6506af22-480c-11e5-8c18-7ea823530099.png) 19 | 4. You can start editing the text of the file in the in-browser editor. Make sure you follow guidelines below. You can use [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). ![Step 4 - Edit the file](https://cloud.githubusercontent.com/assets/170270/9402932/7301c3a0-480c-11e5-81f5-7e343b71674f.png) 20 | 5. Say why you’re proposing the changes, and then click on “Propose file change”. ![Step 5 - Propose Changes](https://cloud.githubusercontent.com/assets/170270/9402937/7dd0652a-480c-11e5-9138-bd14244593d5.png) 21 | 6. Submit the [pull request](https://help.github.com/articles/using-pull-requests/)! 22 | 23 | **Please ensure your pull request adheres to the following guidelines:** 24 | 25 | - Search previous suggestions before making a new one, as yours may be a duplicate. 26 | - Make an individual pull request for each suggestion. 27 | - Use [sentence casing](http://www.onlinegrammar.com.au/title-and-sentence-case/). 28 | - Use the following format: `[Link title](link) — description`. 29 | - Drop “a”, “an” or “the” at the beginning. 30 | - All links are sorted alphabetically. 31 | - New categories or improvements to the existing categorization are welcome. 32 | - Check your spelling and grammar. 33 | - Make sure your text editor is set to remove trailing whitespace. 34 | - The pull request and commit should have a useful title. 35 | - The body of your commit message should contain a link you’re adding. 36 | 37 | ## Updating your pull request 38 | 39 | Sometimes, a maintainer of an awesome list will ask you to edit your pull request before it’s merged. This is normally due to spelling errors or because your pull request didn’t match the list guidelines. 40 | 41 | [Here](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) is a write up on how to change a pull request, and the different ways you can do that. -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Awesome component-driven development [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re) 2 | 3 | A curated list of links on component-driven development and design systems 4 | 5 | 6 | 7 | 8 | 9 | ## Contents 10 | 11 | 12 | 13 | - [Articles](#articles) 14 | - [Components](#components) 15 | - [React](#react) 16 | - [Development tools](#development-tools) 17 | - [Styles](#styles) 18 | - [Testing](#testing) 19 | - [Design systems](#design-systems) 20 | - [Design](#design) 21 | - [Whitespace](#whitespace) 22 | - [Color](#color) 23 | - [Typography](#typography) 24 | - [Design tools](#design-tools) 25 | - [Misc](#misc) 26 | - [Talks](#talks) 27 | - [Books](#books) 28 | - [Courses](#courses) 29 | - [Tools](#tools) 30 | - [Development workbenches](#development-workbenches) 31 | - [Misc](#misc-1) 32 | - [Libraries and components](#libraries-and-components) 33 | - [React](#react-1) 34 | - [Styles](#styles-1) 35 | - [Design system examples](#design-system-examples) 36 | - [Design system catalogs](#design-system-catalogs) 37 | - [Misc](#misc-2) 38 | - [Contributing](#contributing) 39 | - [Authors and license](#authors-and-license) 40 | 41 | 42 | 43 | ## Articles 44 | 45 | ### Components 46 | 47 | - [Cards and Composability in Design Systems](https://medium.com/eightshapes-llc/cards-and-composability-in-design-systems-8845ecbee50e) 48 | - [Component Based Design System With Styled-System](https://varun.ca/styled-system/) 49 | - [Defining Component APIs in React](https://jxnblk.com/blog/defining-component-apis-in-react/) 50 | - [Designing Button States](https://cloudfour.com/thinks/designing-button-states/) 51 | - [Handling spacing in a UI component library](https://medium.com/fed-or-dead/handling-spacing-in-a-ui-component-library-70f3b22ec89) 52 | - [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) 53 | - [Managing Heading Levels In Design Systems](https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3) 54 | 55 | #### React 56 | 57 | - [Patterns for Style Composition in React](https://jxnblk.com/blog/patterns-for-style-composition-in-react/) 58 | - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) 59 | - [The Three Tenets of Styled System](https://jxnblk.com/blog/the-three-tenets-of-styled-system/) 60 | 61 | ### Development tools 62 | 63 | - [Component-Driven Development](https://blog.hichroma.com/component-driven-development-ce1109d56c8e#.ltre4c82b) 64 | - [Prefabricated components. The case for building UI components in isolation](https://blog.hichroma.com/prefabricated-components-2932bfc992ba) 65 | - [React Storybook: Develop Beautiful User Interfaces with Ease](https://www.sitepoint.com/react-storybook-develop-beautiful-user-interfaces-with-ease/) 66 | - [Storybook vs Styleguidist. A comparison of the top UI component explorers](https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06) 67 | - [UI component explorers — your new favorite tool](https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a#.ag31xppof) 68 | - [Using React within a Design System](https://medium.com/buildit/using-react-within-a-design-system-73d4bb0cc822#.nix8am1gt) 69 | 70 | ### Styles 71 | 72 | - [Creating truly universal React component systems. Announcing styled-components/primitives](https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7) 73 | - [Designer-Oriented Styles](https://the-pastry-box-project.net/james-kyle/2018-january-22) 74 | - [Styling themes](https://johno.com/styling-themes) 75 | - [React SSR pitfalls in building adaptive layouts](https://nikitakirsanov.com/en/blog/adaptive-layout-in-react-apps-with-ssr/) 76 | 77 | ### Testing 78 | 79 | - [Visual Testing — the pragmatic way to test UIs](https://blog.hichroma.com/visual-testing-the-pragmatic-way-to-test-uis-18c8da617ecf) 80 | 81 | ### Design systems 82 | 83 | - [4 Things I Know About Pattern Libraries](http://daverupert.com/2017/06/what-i-know-about-pattern-libraries/) 84 | - [Building a React Component Library](https://medium.com/@_alanbsmith/building-a-react-component-library-part-1-d8a1e248fe6c) 85 | - [Conducting an Interface Inventory](http://bradfrost.com/blog/post/conducting-an-interface-inventory/) 86 | - [Creating A Living Style Guide: A Case Study](https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/) 87 | - [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) 88 | - [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) 89 | - [Designing Imaginative Style Guides](https://24ways.org/2016/designing-imaginative-style-guides/) 90 | - [From Pages to Patterns: An Exercise for Everyone](http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone) 91 | - [How and why we built the Marvel Styleguide](https://blog.marvelapp.com/the-marvel-styleguide/) 92 | - [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) 93 | - [Interface Inventory](http://bradfrost.com/blog/post/interface-inventory/) 94 | - [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) 95 | - [Taking The Pattern Library To The Next Level](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/) 96 | - [Tokens in Design Systems: 10 Tips to Architect & Implement Design Decisions for Everyone](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) 97 | - [UI Component Playbook. A 5-step guide to designing and engineering frontends with components](https://blog.hichroma.com/ui-component-playbook-fd3022d00590#.7yfxvqlqw) 98 | 99 | ### Design 100 | 101 | - [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/) 102 | - [Design System Grammar](https://daneden.me/2017/07/12/a-design-system-grammar/) 103 | 104 | ### Whitespace 105 | 106 | - [8-Point Grid: Borders And Layouts](https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091) 107 | - [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) 108 | - [Intro to The 8-Point Grid System](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632) 109 | - [More Padding, Please! The power of white space in product design](https://medium.com/wayfair-design/more-padding-please-b95e19422acc) 110 | - [Role of White Space in User Interface Design](http://www.designorate.com/white-space-user-interface-design/) 111 | - [Space in Design Systems. From Basics to Expanded Concepts to Apply Space with Intent](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62) 112 | - [Whitespace](http://alistapart.com/article/whitespace) 113 | - [Why White Space Is Crucial To UX Design](https://www.fastcodesign.com/3046656/why-white-space-is-crucial-to-ux-design) 114 | 115 | ### Color 116 | 117 | - [10 Reasons to Use Color](http://understandinggraphics.com/design/10-reasons-to-use-color/) 118 | - [Polishing GitLab’s UI: A new color system](https://about.gitlab.com/2018/03/29/polishing-gitlabs-ui-a-new-color-system/) 119 | - [Re-approaching Color](https://design.lyft.com/re-approaching-color-9e604ba22c88) 120 | - [The Science of Color Contrast — An Expert Designer’s Guide](https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156) 121 | - [Designing accessible color systems](https://stripe.com/en-de/blog/accessible-color-systems) 122 | 123 | ### Typography 124 | 125 | - [Creating a type style guide](https://blog.typekit.com/2014/10/22/creating-a-type-style-guide/) 126 | - [Deep Dive on Typescales](https://medium.com/design-ibm/a-deep-dive-on-typescales-16c7b1473d83) 127 | - [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) 128 | - [Typographic scale](http://spencermortensen.com/articles/typographic-scale/) 129 | - [Typography in Design Systems](https://medium.com/@ethersystem/typography-in-design-systems-d61bf5d8a333) 130 | 131 | ### Design tools 132 | 133 | - [Component architecture in Figma](https://blog.figma.com/component-architecture-in-figma-f16ae9cc4481) 134 | - [Creating and Maintaining the Marvel Style Guide in Sketch](https://blog.marvelapp.com/creating-maintaining-marvel-style-guide-sketch/) 135 | - [Evolution of Tools. Closing the loop with Design Intelligence](https://airbnb.design/the-evolution-of-tools/) 136 | - [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) 137 | - [Painting with Code. Introducing our new open source library React Sketch.app](https://airbnb.design/painting-with-code/) 138 | - [Sketching in the Browser](https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526) 139 | 140 | ### Misc 141 | 142 | - [Pure UI](https://rauchg.com/2015/pure-ui) 143 | - [Sketching Interfaces. Generating code from low fidelity wireframes](https://airbnb.design/sketching-interfaces/) 144 | - [Turning Design Mockups Into Code With Deep Learning](https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/) 145 | - [Vue Design System](https://viljamis.com/2018/vue-design-system/) 146 | - [Why designers and frond-end developers should talk more often](http://janpersiel.com/why-designers-and-frond-end-developers-should-talk-more-often/) 147 | 148 | ## Talks 149 | 150 | - [Build Beautiful Interfaces Faster](https://youtu.be/dlMe7u02m50) by Dominic Nguyen and Zhenya Savchenko (2016) 151 | - [Custom CSS is the path to inconsistent UI](https://youtu.be/Cdtwz3PbW7M) by Artem Sapegin (React Alicante 2017) 152 | - [Designing With React](https://youtu.be/ixIuMs3aDCI) by Kristin Baumann (React Day Berlin 2017) 153 | - [Dream of Styleguide Driven Development](https://youtu.be/JjXnmhNW8Cs) by Sara Vieira (React Alicante 2017) 154 | - [Modular CSS](https://youtu.be/dYD058pQ8vg) by Andrey Okonetchnikov (React Alicante 2017) 155 | - [Nathan Curtis on Buttons in Design Systems](https://vimeo.com/223433031) 156 | - [Sketching in the Browser](https://youtu.be/ohw6AgPbJoE) by Mark Dalgleish (JSHeroes 2018) 157 | 158 | ## Books 159 | 160 | - [Atomic Design](https://shop.bradfrost.com/) by Brad Frost 161 | - [Design Systems: A practical guide to creating design languages for digital products](https://www.smashingmagazine.com/printed-books/design-systems/) by Alla Kholmatova 162 | - [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) by InVision 163 | - [Elements of Typographic Style](https://www.amazon.com/gp/product/0881792128/?tag=artesapesphot-20) by Robert Bringhurst 164 | - [Front-end Style Guides: Creating and Maintaining Style Guides for Websites](http://www.maban.co.uk/projects/front-end-style-guides/) by Anna Debenham 165 | - [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 166 | - [Inclusive Components](http://book.inclusive-components.design/) by Heydon Pickering 167 | - [On Web Typography](https://abookapart.com/products/on-web-typography) by Jason Santa Maria 168 | 169 | ## Courses 170 | 171 | - [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns) 172 | 173 | ## Tools 174 | 175 | ### Development workbenches 176 | 177 | - [Bit](https://github.com/teambit/bit) - A tool for isolating, developing and sharing components between projects and applications, with 2-way collaboartion over components. 178 | - [React Cosmos](https://github.com/react-cosmos/react-cosmos) 179 | - [React Styleguidist](https://react-styleguidist.js.org/) — isolated React component development environment with a living style guide 180 | - [Storybook](https://storybook.js.org/) 181 | 182 | ### Misc 183 | 184 | - [Cupper](https://github.com/ThePacielloGroup/cupper) — documentation builder for inclusive designers 185 | - [Theo](https://github.com/salesforce-ux/theo) — generate design tokens for web, iOS and Android from single source 186 | - [ColorBox](https://www.colorbox.io) - a new way to building color systems for accessible UIs that scale 187 | - [Color](https://cloudflare.design/color/) - Color palette generator with aria and other interesting features 188 | 189 | ## Libraries and components 190 | 191 | ### React 192 | 193 | - [Atomic layout](https://github.com/kettanaito/atomic-layout) — a single component to distribute a spacial relation in your layouts 194 | - [macro-components](https://github.com/jxnblk/macro-components) — create flexible layout and composite UI components without the need to define arbitrary custom props 195 | - [React Group](https://sapegin.github.io/react-group/) — render React children with a separator 196 | - [React Spaceman](https://github.com/sapegin/react-spaceman) — React component to manage whitespace 197 | - [Rebass](https://rebassjs.org/) — Flexible & functional React design system, built with styled-system 198 | - [Rebass Grid](https://rebassjs.org/grid/) — responsive React grid system built with styled-components 199 | - [Reach UI](https://ui.reach.tech/) — accessible foundation of your React-based design system 200 | - [Stack Styled](https://sapegin.github.io/stack-styled/) — make stack layouts easy 201 | 202 | ### Styles 203 | 204 | - [styled-tools](https://github.com/diegohaz/styled-tools) — useful interpolated functions for styled-components and other CSS in JS libraries 205 | - [styled-system](https://github.com/jxnblk/styled-system) — design system utilities for styled-components and other CSS in JS libraries 206 | 207 | ### Colors 208 | 209 | - [coloralgorithm](https://github.com/lyft/coloralgorithm) – Javacript function to produce color sets 210 | 211 | ## Design system examples 212 | 213 | - [Alfa Bank](http://design.alfabank.ru/) 214 | - [Ant Design](https://ant.design) 215 | - [Aragon UI](https://ui.aragon.org/) 216 | - [Audi](https://www.audi.com/ci/en/guides/user-interface/introduction.html) 217 | - [Auth0 Design System](https://github.com/auth0/cosmos) 218 | - [Backpack](https://backpack.github.io/) by Skyscanner 219 | - [Carbon Design System](https://www.carbondesignsystem.com) by IBM 220 | - [Circuit UI](https://circuit.sumup.com/#/) by SumUp 221 | - [cf-design](https://cloudflare.github.io/cf-ui/) by Cloudflare 222 | - [Lightning Design System](https://www.lightningdesignsystem.com) 223 | - [Marvel](https://marvelapp.com/styleguide/) 224 | - [Material Design](https://material.io/guidelines/) 225 | - [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) 226 | - [Pivotal UI](https://styleguide.pivotal.io/) 227 | - [Pluralsight Design System](https://design-system.pluralsight.com/) 228 | - [Polaris](https://polaris.shopify.com/) by Shopify 229 | - [Priceline One](https://pricelinelabs.github.io/design-system/) 230 | - [Seek Style Guide](https://seek-oss.github.io/seek-style-guide/) 231 | - [Semantic UI](https://react.semantic-ui.com) 232 | - [Vue Design System](https://vueds.com/) 233 | - [Elastic UI framework](https://elastic.github.io/eui/#/) 234 | 235 | ### Design system catalogs 236 | 237 | - [Adele](https://adele.uxpin.com/) 238 | - [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems) 239 | 240 | ## Misc 241 | 242 | - [Dark Patterns](https://darkpatterns.org) 243 | - [Design Systems newsletter](http://news.design.systems/) 244 | - [React Components Catalog](https://github.com/sapegin/react-components) — curated list of great React components 245 | - [User Interface Design Patterns](http://ui-patterns.com) 246 | - [Type Scale](https://type-scale.com/) — a visual type scale calculator 247 | - [Website Style Guide Resources](http://styleguides.io/) 248 | 249 | ## Contributing 250 | 251 | Suggestions are welcome: [send a pull request](Contributing.md) if you find something awesome about component-driven development. 252 | 253 | ## Authors and license 254 | 255 | - [Andrey Okonetchnikov](http://okonet.ru/), a frontend engineer and UI & UX designer from Russia living in Vienna, Austria. 256 | - [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/). 257 | 258 | CC0 1.0 Universal license, see the included [License.md](License.md) file. 259 | --------------------------------------------------------------------------------