Web Style Guides

Design and Brand Standards

Layout and Composition

(Include wireframes, show different column configurations, etc.)

Typography

Use illustrations to show examples for the main text, the headline styles and their hierarchy, list styles, etc. Suggest alternate fonts.

Color Palette

This reference should include exact color codes (you can list hex color values or RGB values). It is good to show where these colors are used. For example, you can include a screenshot that shows the color used for links.

Images

Define the standard image sizes that may be used throughout the interface. This should include any graphic banners (such as promotional banner advertisements) as well as images that are used within content. Show how they may be styled and aligned, and how captions should appear (if used). You can also include what type of imagery that may be used (such as illustration or photography, as well as allowable styles or “mood”). Finally, if you use any icons in the site, set standards for them, such as how they look, where they are used, how they are styled, etc.

Brand Guidelines

Front-end Development Standards

(X)HTML, CSS, and Javascript

DOCTYPEs, id/class naming conventions, namespaces, widgets, framework info, spacing, code style, etc.

Accessibility and Usability

Identify the accessibility guidelines that must be followed, and include any usability mandates. Document any localization and internationalization standards that exist.

Files and Directories

Define how the directory structure is set up for files (images, style sheets, JavaScript files, etc.), and where these files go (according to their types or purpose). Explain file naming conventions and how they are used.

Quality Assurance Testing

Walk through the steps that should be taken for quality assurance: validation, link checking, accessibility testing, proofreading, etc. Include a graded support chart for browsers and devices.