What do you include in a web design style guide?

almost 7 years ago from , Digital Product Designer

Hello designers! I'm curious to know what elements you include when creating a style guide for a website. For example, I typically include at least the following:

  • Color scheme
  • Typography
  • Buttons
  • Borders
  • Shadows
  • Cards


  • Ash Pennington, almost 7 years ago

    It really depends how in depth you want to go with it.

    Here's a nice example: https://rizzo.lonelyplanet.com/styleguide/design-elements/colours

    I think Google are probably known for having the most in-depth in the industry: https://material.google.com/#

    If a website is form heavy you'd probably want to include things like: Default input state Focus state Validated state Error states Success messages

    Essentially the structure is crucial - these guides should be living, breathing documents that you update over time so they grow, develop and adapt.

    Good luck putting it together!

    1 point
  • Gene M, almost 7 years ago (edited almost 7 years ago )

    I use a sketch plugin to generate styles (borders, fonts, size, color etc..) and a separate layer for dimensions and spacing. Also export all image assets that are not CSS and usually place all the elements on their own artboard for easy preview. Hope that helps.

    0 points
  • Matt RothenbergMatt Rothenberg, almost 7 years ago

    From my experience at Pivotal Labs, where Designers play an active role in writing front-end code on client software projects, style guides have been helpful in communicating the following buckets of information through the languages of HTML/CSS:

    1. The foundational elements of a design system (colors, grid, typography, etc)
    2. UI components that have gone through the rigor of prototyping, testing, and validation with real users.

    Framed in this way, the style guide is meant to serve as a "source of truth" for the team and the UI itself. Engineers, tasked with implementing features, can simply pick code snippets from the style guide as needed. Designers, tasked with validating new design decisions, can continue their process of research/testing/implementation and ultimately add their decisions to the style guide (be that tweaking an existing component, or adding a new one altogether).

    At Pivotal Labs, lots of Designers use Hologram to build such "living" style guides. To facilitate getting started, we put together a boilerplate project that helps them see how a style guide gets built and maintained over time.

    0 points
  • Espen Getz HarstadEspen Getz Harstad, almost 7 years ago

    A grid or template/module overview is usually nice too.

    0 points
  • Mike AbbotMike Abbot, almost 7 years ago

    It depends. We usually include Color shemes + imagery guidelines, typography (with wrapping and truncating explained), elements (buttons, cards...), margins&paddings, date formating (a must for localized projects), navigation patterns, basic iconography rules, empty states.

    It's a lot, but it makes your life so much easier.

    0 points