Page and Interface Style Guide

Layout and design

The website has been designed in such a way that the Content Management System (CMS) takes care of the heavy lifting of design. Do not attempt to design around the constraints of the CMS or you could break the way your audience experiences your content, particularly people with disabilities. Avoid complex styling and layout to make things look just so, because they often break down at different screen sizes. You will make gains by focusing on the needs of your audience and the order of your content, rather than clever layouts.

Headings

Headings should generally follow the guidelines provided by GMMB. The one exception is that headlines should never be set in all-caps. It conflicts with the way screen readers interact with the content and makes the page less accessible to people who are hard of seeing. Always use sentence case instead, but omit periods, exclamation points, and colons.

Headings should start at level 2 (h2), with subheadings using the next level down, as you would create in an outline. (H1 headings are restricted for use by the web team only.) Use the default style for all text.

They should be brief, usually not a complete sentence. As a rule of thumb, they should not take up more than two lines in the full screen desktop layout.

Links

Links should be clearly discernable when removed from the context of their paragraphs. Avoid making overly long spans of text into links. Never use the phrase “click here”.

Never use bare URLs in content.

However, email addresses should be plain links so that people can copy and paste them into the email editor of their choice. Email addresses are also automatically turned into properly formatted links by the CMS.

Calls to action

Calls to action must be written in the imperative mood, or in other words, as a direct command.

They must be written as succinctly as possible and should not be more than four words long.

They must be written in title case.

They must indicate the purpose of the action, not the literal action.

Avoid complicating the call to action. Separate out lead-ups, instructions, and legal text.

Avoid having more than one call to action. If you have more than three calls to action, seriously consider how your content can be broken up to provide stronger calls to action.

Intro sentences

Intro sentences should give users a brief expectation of what they can expect to find on the page. They are marketing tools, as well as wayfinding tools, so use appealing and conversational language. Don’t dryly describe every feature on the page. Never use them to welcome someone onto your site or thank them for visiting your site.

They should be brief, usually no more than one sentence. As a rule of thumb, they should not take up more than five lines in the full-screen desktop layout.

Use complete sentences. Do not use them to repeat headings or page titles.

Times

Write times as succinctly as possible. Avoid redundancy. Lowercase the period of the day (am or pm) and offset it from the number with a space (ideally, with a non-breaking space). Use the 12-hour clock.

Separate spans of time with an en dash surrounded by spaces (ideally, the first space is a non-breaking space), and consolidate the period of the day if they are the same. Don’t use a hyphen for the dash.

Use noon and midnight to disambiguate 12:00 hours where possible.

Log in vs login

“Log in” and “log out” (two words) are verbs, whereas “login” (one word) is the noun or adjective. There is no such thing as a logout.

“You can log in with the login. You can log out with the link.”

Forms

Reduce the data-to-ink ratio. In other words, if a label, input, border, or word doesn’t have to be there, get rid of it.

Set form labels in sentence case, capitalizing the first letter of the first word only (and proper nouns, like names, of course). Do not use punctuation except for question marks (and use question marks sparingly). End each label with a colon.

Ask only for as much information as you need and nothing more. All form fields should be assumed to be required unless explicitly marked. This is counter to the common convention where required fields are marked with an asterisk. Do not mark required fields with asterisks; instead mark optional fields as optional.

Don’t use placeholder text. Instead, put clarifying information in the label or description. Never use placeholder text as a form field label. It’s incredibly inaccessible.

Icons

Use bold, clear, flat icons. Icons should be presented in SVG format for transparency, crisp edges, and maximum scalability. (Print designs can use SVG or any other vector format.) Generally, they should be a single color, unless the color is communicating something specific.

New, custom icons should be designed on a 16×16 grid to match the existing icon set.