What is Design Style Guide?

It is a document that contains design guidelines for each repeatedly used design element, such as visual identity elements, icons, interface components, and their states, headings, etc. Styleguides are often developed after the high-fidelity wireframes phase so that you could see what elements you’ll need, design them, and then refactor them into a style guide and later into a design system. In case you’re interested to learn more about the phases, check out this page on our design process.

As mentioned before, it is a part of the design system or its early version. In layman’s terms, style guides are a compilation of all design elements, while a design system is built on top of the style guide by describing the relationships among the elements and their use cases.

There are different approaches to when you should create a style guide. Atomic design is the approach that suggests that you should create all elements first and then build your products from these blocks. On the other hand, you could ignore unifying the design elements, if your goals are to purely validate the product or design idea.

Saving time
Style guides include all common design elements that are ready for use. That means that every time you need to use, say, a “sign up” button, you don’t have to design it from scratch or look for it on other screens but rather just copy it from the style guide.

The same is the case for development. Tools like Figma, Zeplin, Storybook, and InVision allow saving the code for each design element so that you have to code each element just once, and then copy it every time you need it.