The line between design and development is getting blurrier, and our approach to web design is becoming more modular. How do we keep track of it all?
Style guides to the rescue!
Using style guides that update as our projects progress, we can visually document our work and ensure that everything stays consistent. They may seem daunting and time-consuming at first, but they don’t have to be.
How do I get started with living style guides? What’s a living style guide anyway, and how do I know if mine is dead? Isn’t that going to slow me down? Why should I bother?
Let’s find out.
More about style guides
- Styleguides.io is basically the bible of style guides.
- Advanced techniques for SC5
- Living SC5 style guides, the next level
- Visual regression testing
- Designing imaginitive style guides
- The code side of colour
- Creating a living style guide
- Beyond the style guide
- Creating style guides
- Zombie style guide!
Style guide examples
- WooCommerce
- WCEU (uses KSS)
- Salesforce
- Mailchimp
- Awesome design systems
Tools to build a style guide
- Frontify styleguide
- Pattern primer
- Knyle Style Sheets (KSS)
- SC5 Style guide generator
- Fabricator
- Sassdown
- Living Style Guide
- Style guide guide
- Source
- Pattern lab
- Overview of pattern library generators
- React Sketchapp
- Catalog
- React Styleguidist