Skip to main content

What I Learned about Style Guides

Author by Kianna DeByle

One of the first things I was asked to assist with here at Concurrency was a style guide, so naturally, to prepare for this, I looked up as much as I could about style guides to answer some of the questions I had. So, when I was asked to write my first blog as an intern, I knew exactly what to write about. My hopes for this blog post are to lay out for you what I gathered from learning about style guides and organize it in a simple way to highlight what is included as well as provide some good resources for further reading!

What is a Style Guide?

A style guide is essentially a resource that lays out a set of standards for the formatting and design of certain documents. These can range anywhere from user interfaces to books; however, this blog specifically focuses on user interfaces. A style guide helps to keep styling consistent throughout a project in order to provide a cohesive and well executed final product.

What is Included in a Style Guide?

I found that most style guides typically seem to include much of the same things but some of what you put in your style guide is based heavily on what your product needs. What you include in a style guide is going to be dependant upon what the final product should look like and provide. The style guide for a portfolio site might be very different than one for a company intranet portal. That being said, here are some of the typical things included in a style guide: 

  • Table of Contents
  • Logo guidelines
  • Typography
  • Image guidelines
  • Color Usage
  • Interactive Elements
    • Forms
    • Link Styles
    • Icons
    • Tables
    • Switches
    • Checkboxes
    • Alerts
    • Dropdown Menus
    • Sliders
    • Buttons

Helpful Links/Examples

Finally, here are some helpful links with examples or further reading if you are interested in learning more!