caderno-design-system

🌴 A collection of awesome resources to learn & build design systems

Know a resource that isn't listed below? Feel free to create a new pull request, or open an issue.

Foundational Reading

General Reading

• https://airbnb.design/building-a-visual-language/
• https://airbnb.design/painting-with-code/
• https://airbnb.design/the-evolution-of-tools/
• https://airbnb.design/sketching-interfaces/
• https://www.designbetter.co/design-systems-handbook

Videos

• https://www.youtube.com/watch?v=Eq0-Sz5S9iI
• https://www.youtube.com/watch?v=W3A33dmp17E
• https://www.youtube.com/watch?v=VVUpVVWZULw&t=2s

Developer Reading

• https://medium.com/buildit/using-react-within-a-design-system-73d4bb0cc822

Designer Reading

• https://www.goabstract.com/blog/the-designers-guide-to-sketch-libraries-in-abstract/

The Future

• https://medium.com/artists-and-machine-intelligence/rethinking-design-tools-in-the-age-of-machine-learning-369f3f07ab6c

Foundational Videos

• https://www.invisionapp.com/design-system-manager/expert-advice/heartache-design-scale

Design Patterns

• https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849

• http://getbem.com/naming/

• http://thesassway.com/advanced/modular-css-naming-conventions

• https://cssguidelin.es/#naming-conventions

• https://medium.com/@drublic/css-naming-conventions-less-rules-more-fun-12af220e949b

• https://medium.com/buildit/a-tale-of-two-buttons-e63185aefd5f

• https://medium.com/buildit/versioned-style-guides-with-react-storybook-aed6eebc585d

• https://medium.com/buildit/design-system-architecture-tl-dr-version-1c9d84f35df4

• https://medium.com/buildit/design-system-architecture-a10e7b3aa30f

• http://bradfrost.com/blog/post/css-architecture-for-design-systems/

Design System Examples

Great Design System Collections

• https://github.com/alexpate/awesome-design-systems
• https://www.duolingo.com/design/
• https://polaris.shopify.com/
• https://www.ibm.com/design/language/
• https://design.trello.com/
• https://material.io/design/

Storybook Examples

• https://wix-wix-style-react.surge.sh/?selectedKind=1.%20Foundation&selectedStory=1.2%20Typography&full=0&addons=0&stories=1&panelRight=0
• http://ics.carbondesignsystem.com/?selectedKind=Components%7CButtons&selectedStory=Primary%20Buttons&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel

Tools

Designer Tools

Developer Tools

• http://seek-oss.github.io/seek-style-guide/sandbox/
• https://compositor.io/iso/
• https://polypane.rocks/
• https://compositor.io/lab/
• https://github.com/c8r/kit
• https://github.com/airbnb/Lona
• https://airbnb.design/airshots-discovering-a-workflow-for-app-screenshots/
• https://cssstats.com/
• https://github.com/salesforce-ux/theo
• https://github.com/giakki/uncss
• https://github.com/addyosmani/critical-path-css-tools
• http://webpagetest.org/
• https://alistapart.com/article/more-meaningful-typography