The purpose of the style guide:

• 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 as well as use for a reference while QA-ing their developed website.

 

Template

The style guide template is now included inside of the interiors template here:

 Latest Interiors Template

When you get a Style Guide task, however, work from the latest revised project file, not the Interiors Template.

 

The style guide is set to automatically update during the design phase. This process is possible because of the symbols included in the style guide. All objects aren't symbols; so please pay close attention to all areas.     

 

What to do

Start from the most recent project file. The style guide is already divided into 5 different sections:

 

01. 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. Text colors and black/white are not necessary in this section.

 

02. Typography

 

Set up a standard for how fonts are used throughout the site. In the latest template, many of these are connected as symbols, so they should already be updated, just needing its respective label corrected. (Body, Widget title, Small text are the only ones that are not automatic)

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)

 

03. Buttons and Icons

Include:

• CTA’s (off state and hover): Font face, colors and size for the text, and button colors.
• 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 color. 

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)

 

04. Images

Please add the homepage and banner image to the images section. Adjust the dimensions' text to reflect the actual size of the image. If there is a default image for the news section, please add that along with the dimensions too.

 

05. Widgets

Add homepage widgets to the interior widgets that are already included. Adding widgets shows the style and 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.
• Side 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 text lines for items like the hero caption, CTAs, spotlight, news and events sections.

 

Export 2 Versions

• PDF
• JPG (multiple pages)

 

Exporting Instructions

• PDF - Export assets > PDF> Single PDF file > Export
• JPG (multiple pages) - Export assets > JPG > Design > Export

 

Where to Save

Save the XD file in the "Style Guides & Templates" folder. Save the exported JPGs and PDF in the subfolder: Style Guides & Templates > For Client > Style Guide

 

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, off and hover states.

Export the icons in 2x size.

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

 If you have a different type of project (ie. Library, Police, Airport, etc) you may find a more relevant icon library here to use instead of the master set: 

Additional specific icon libraries

 

**Please note** We have an interiors button widget that also uses icons. These buttons will typically 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.