Any web designers or graphic designers know that style guide somehow is a bit contrast compared to any traditional static web design layout, like Photoshop. Style guide is a set of elements and components that when used together can form a complete layout or parts of that layout. In fact, because of its scalable and flexible, Style Guide is a perfect tool for building responsive designs. Besides, you can also use the terms ‘style guide’ and ‘design system’ interchangeably, since style guide works best when they form a system for managing existing designs and allowing the production of new ones with ease.

So why should we change from traditional design into style guide? Well, with style guide you will be able to get into the browser quicker and spend less time in desktop design tools. Moreover, with traditional approach, all of clients complain about the static layout will be dismissed. Even though you already try your best to make the final product sometimes type rendering and spacing may change which will make the client feels like they have been misled by the Photoshop.

By having style guides as a design deliverable eradicates these difficult discussions with a client which will automatically speed up your workflow. Here are some elements that make a good style guide.

Type

You can do a lot with style guide typographic hierarchy through covering headings, lists, block quotes and paragraph text. It should also cover any variations within these categories, such as captions, drop caps and any other special typographic treatments, and UI contexts like buttons, navigation and form fields.

Grids and Spacing

The grid systems include both horizontal and vertical layout. It even allows you to rapidly prototype and build layouts without the need to take a lot of time of adjustments to spacing and margins.

Color

Your primary color palette, including the main link colors, actions and element colors (for example, buttons, labels and icons). There will also be colors outside of this palette for circumstances outside of the ideal design state, like error and system messages, and validation.

Modules

Your modules should contain elements such as buttons, form fields, tabs and navigation, as well as collections of elements such as captioned images and blog post meta data. They also include combinations of elements working together – for example an article heading, date and introduction paragraph, a tooltip with a small heading and text, and so on. Ideally your style guide should give you everything you need to design and build a page at a moment’s notice, without having to open up Photoshop or Sketch. In regards to the format, a style guide should be live HTML, categorized in a manner that is easily maintainable for you and any other designers that might come into contact with it.