I’ve been researching design systems a bunch lately and am finding a need for a place to store my favorite resources – rather than continuing to copy and paste the same set of links, here’s a blog post of a few of my favorite resources around design systems, etc. , refactoring, and front-end architecture.
One thing to note about design systems: I think in many cases, and possibly for the purposes of what I am doing on at work, pattern or component library might be more accurate terms than design system. At this point, though, it seems like design system is used in a pretty general sense, so I’m not going to get too caught up in the semantics.
I hope to build out this list over time, and I welcome recommendations!
🍭 Denotes the resources I’ve found myself referencing multiple times.
- Atomic Web Design, Brad Frost
- The Language of Modular Design, Alla Kholmatova 🍭
- BEM 101, Robin Rendle
- Thoughtful CSS Architecture, Nathan Rambeck
Design Systems, etc.
- Refactoring Your Way to A Design System, Mina Markham 🍭
- Taking Pattern Libraries to the Next Level, Smashing Magazine
- Styling Hillary: A Design System for All Americans, Mina Markham 🍭
- Design Systems at Github, Diana Mounter
- Design Systems Handbook, Invision
- CSS Architecture for Design Systems, Brad Frost 🍭
- Front-End Architecture Resources, Micah Godbolt
- Front-End Architect, Elyse Holladay
- Refactoring CSS, The 3 I’s, Harry Roberts
- More Transparent UI Code with Namespaces, Harry Roberts 🍭
- Why Design Systems Fail, Una Kravetz
- Promoting a Design System Across Products, Nathan Curtis
- When Patterns Get Weird, Ethan Marcotte
- From Pages to Patterns: An Exercise for Everyone, Charlotte Jackson
- Design Systems as Facilitators, Claudina Sarahe [talk]
Examples & Resources
- Design Systems News, curated newsletter 🍭
- Styleguides.io, style guides from many companies
- List of Styleguide Generators, David Hund
- DesignSystems.com, Figma
- Herman, a SassDoc theme, Oddbird 🍭
- Design Systems Thinking, EightShapes
I haven’t purchased these yet, but I want to!
What did I miss?
Are there any articles about design systems, etc. and front-end architecture you’d found particularly helpful? I’ll continue to update this list, so please leave a comment or send me a Tweet with anything you think I should add!