Inspired by David Clark's Scalable CSS Reading List.
Some people call them style guides, others call them pattern libraries. I've taken a cue from Nathan Curtis and named them design systems.
A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.
I want this list to provide resources that facilitate cross-functional collaboration within an organization, allowing stakeholders to focus on delivering the best possible user experience.
Mark Otto described a design system as “everything that makes up your product”.
Everything? Everything. From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build, and grow. *
A design system is a definition of the architecture, content, visual, and supporting assets and templates to produce and/or sustain a consistent and effective product experience.*
- A Maturity Model for Design Systems by Marcelo Summers (11/9/2015)
- The Salesforce Team Model for Scaling a Design System by Jina Bolton (10/13/2015)
- Finding Platform Balance in a Design System by Nathan Curtis (10/9/2015)
- Team Models for Scaling a Design System by Nathan Curtis (9/17/2015)
- Building an Enterprise CSS Framework by Stef. Sullivan Rewis (9/15/2015)
- How We Designed the New Salesforce at Scale by Craig Villamor (8/25/2015)
- An In-Depth Overview Of Living Style Guide Tools By Robert Haritonov (5/13/2015)
- Living Design System by Sönke Rohde (9/11/2014)
- A Maintainable Style Guide by Ian Feather (5/15/2014)
- Creating Style Guides by Susan Robertson (4/8/2014)
- Designing Products That Scale by Brad Haynes (12/9/2013)
- Breaking Development: Atomic Design by Luke Wroblewski (10/22/2013)
- Atomic Design by Brad Frost (6/10/2013)
- Reponsive Deliverables by Dave Rupert (4/2/2013)
- What is a Design System? by Nathan Curtis (5/10/2011)
- Front-end Style Guides
- From Pages to Patterns by Charlotte Jackson (11/3/2015)
- [The Component Cut-Up Workshop](The Component Cut-Up Workshop) by Nathan Curtis (11/3/2015)
- Framing a Design System’s Roadmap by Nathan Curtis (10/28/2015)
I'm trying my best to provide examples of systems that "establish a high-quality, brand-aligned experience across their product through human guidance and internal tools." *
These are examples of more engineering focused style guide systems.
- Buzzfeed
- Best Buy
- Buffer
- Code for America
- Github
- Gov.uk
- Lonely Planet
- Mailchimp
- Mapbox
- Pivotal
Salesforce- WooThemes
- Yelp
- Fight the Zombie Pattern Library by Marcelo Somers (10/26/2015)
- Designing a Design System by Jina Bolton (11/16/2015)
- Build Your Own Bootstrap by Mark Otto (10/25/2013)
- Atomic Design by Brad Frost (5/28/2013)
- Unifying Agile and UX with Live Style Guides by Steve Berry (1/26/2012)
- Styleguide & Boilerplate Patterns (Spreadsheet)
- UI Styleguides
- styleguides.io
- Avocode