1. Include enough to build out a site, more or less

It's a set of guidelines and coded UI patterns that, in context of template pages, exemplify the site. Your style guide should have enough components to build a page from scratch — within reason. While accounting for every possible scenario is difficult at best, having many pre-built components, written in HTML and CSS, on hand helps keep a product consistent.

Above: A sample style guide page that shows the official color palette, .

2. Include code samples

To facilitate consistency and — let's be honest — avoiding extra work, we recommend adding actual code samples to the style guide. One sample per item in the guide, including HTML and CSS, will let designers copy/paste approved components with ease.

3. Start your guide after you have a fully-coded content page

Designs change over the course of development, so constantly updating your guide is extra work. We recommend writing the style guide after your team and your client have given final approval of the site's look and function. In fact, we base our style guides on a content page to give clients a complete — and accurate — point from which to start.

Above: A sample style guide page that shows many necessary components, including the code to create them.

4. Write for someone completely unfamiliar with the website

Assuming that you've covered every aspect of your site's design is easy. Too easy. We've found that people familiar with a design can miss the obvious. Be careful to copy code samples from every part of many pages throughout the site (see the boilerplate below for examples).

5. Organize your guide

To help with that, we've designed a boilerplate/checklist of items to include in most style guides. Each project may need its own unique parts, but in general you'll need:

• Grid
• Code Structure
• Colors
• Typography
• Buttons
• Forms
• Patterns

Follow this boilerplate to get started building a thorough, helpful style guide.

---