The style guide has a dual purpose:

• To speed up the website development process. The developers can just use this guide to figure out all the css classes for colors, dimensions, fonts and repeated styles.
• To provide the client with a branding standard that they can follow when updating their site in order to maintain the unity of the design.

 

Template

Style Guide Template

 

What to do

 Style Guide Example

Divide the guide into four different sections:

 

1. Color Palette

 

Include main colors; not every single variation is necessary. The color palette should be arranged in order of relevance. For example, main colors should be listed first and accent colors should be last.

 

2. Typography

 

Set up a standard for how fonts are used throughout the site.

Include:

	Font Face	Font Size	Hex #	Additional
Page Title (H1)	x	x	x
Subtitle (H2)	x	x	x
Content Subheading (H3)	x	x	x
Body	x	x	x
Links and hover			x	Decor
Widget Heading	x	x	x	Bg Color
Widget Title	x	x	x
Small Text (Widget subtext)	x	x	x

 

Also, include a snippet of the interiors text (H1, H2 and body with link)

 

3. Buttons and Icons

Include:

• CTA’s (off state and hover): Font face, size, colors for the text and button background.
• Include the max number of lines for CTAs
• Include the requirements for the client to replace the buttons or icons. For example, the dimensions and color for the icons that they need to use.
• More Buttons (off state and hover): font face, size and color of the text and button. 

Note: there might be more than one More button on the homepage, if so, try to use the button style that matches the department widget's More button (this is supposed to be 60% of the home button)

 

4. Widgets

Show a collection of widgets just to show the feel for the website

Include

• The hero widget and news thumbnails (and any other images that they can update) in the Widget section and show the correct dimensions for these images.
• Left nav
• Table
• One Department Widget
• If a homepage content widget is shown, you might only need to show part of it (like in the Meetings and Events widget above) with an off and hover state.
• Please include a note about the max number of lines for items like the spotlight and events sections.

Note: Developers should be able to go into the psd to select those individual fonts and colors if needed, so don’t flatten the widgets.

 

Export 3 Versions

• Non-flattened psd file
• PDF without layers
• JPG

 

Exporting Instructions

 

Use the "Style Guide NEW" action for exporting the pdf

1. Save your psd and export a jpg first
2. Run the “resize for PDF” action
3. Select one layer group/page and run the "flatten layer group and convert to artboard” action. Repeat for all layer groups/pages. **IMPORTANT – this has to be done for each layer group separately or it will merge them together into one layer, and not export the pdf into pages.
4. Select all the layers and run the “export PDF” script

 

 

 

Icon Library

This should also be done during the style guide phase. Using our master template files, select the appropriate category and style of icons (solid or line), and export in the style matching the homepage design. If they are different for the hover style, please export two sets of the library. 

Additional specific icon libraries

Continue to use our regular master icon library for generic city, county, or intranet sites.

**Please note** We have an interiors button widget that also uses icons. These buttons will always be the color of our widget heading bar, so (usually) they will need white icons. Please also export a set of icons for this widget if the homepage set will not match.