Style Guide Template PSD


By using UI Style Guides, we can separate the visual language of a website from the structure. Something which is often difficult for clients to do when they are presented with a complete mock-up. It becomes possible to make quick and easy changes to the layout without needing to worry about the styling. And likewise if the client wants to make changes to the visual language, it can be done without worrying about updating multiple elements across multiple pages.

This template is the perfect starting point for creating your own UI Style Guides and includes the following style types:

  • Backgrounds
  • Swatches
  • Text styles, including headings, paragraphs, and preformatted text
  • Buttons and Pagination
  • Alerts
  • Form Elements
  • Tables
  • Images and Lightboxes
  • and more

Easily edit this style guide template for your own projects in this Photoshop document.

get it here