City of Boston

For Published

Residents, City employees, businesses and visitors of every background and language

Problem Published

People come looking for answers to City tasks and need them fast and plainly

Promise Published

Make things easier and simpler for the people of Boston

Mission Published

We are here to serve: to make things easier and simpler for the people of Boston (paraphrase).

Proof behind each pillar

• Boldness. The logo is a bold B, underlined: when something matters, we underline it (paraphrase).
• Service. BOS:311 is the City's service request line, linked from the menu, homepage and footer.
• Service. The homepage opens with a daily status row (City Hall hours, trash, street cleaning, parking meters, tow lot) under the date.
• Plain language. The writing guide carries a plain-English word list (instead of / consider using).
• Access for everyone. The guide names replacement typefaces for Arabic, Chinese and Vietnamese; the site header switches language.

Story Our reading

Boston.gov's brand was built in 2016 with the redesign of the site: a bold underlined B, a red-white-and-blue palette with a modern gray, and Montserrat with Lora. The guide calls itself a foundation to build on, added to as the site comes to life.

Values

Category. Municipal government: the official website and communications of the City of Boston, Massachusetts Observed

Why them

1. The B and the City of Boston logo show the City is human; the seal is kept for authority (paraphrase). Published
2. A palette rooted in the City's past: Charles Blue, Freedom Trail Red, with a modern gray. Published
3. Photography of real people in the less famous parts of Boston, never models or stock. Published
4. An open-source pattern library (Fleet) shared across City web properties. Published

Instead of

The official City seal (adopted 1823) where authority is needed: bills and non-digital forms.

Boilerplate Observed

Boston.gov is the City of Boston's official website: services, public notices, news, events and the people who serve the City, built on the open-source Fleet pattern library.

Taglines

They never claim

• The digital seal replaces the official seal on all digital properties; the official seal is for bills and non-digital forms. Published
• Only use photos the City has the rights to. Published

The guide opens with a short manifesto about boldness, diversity and a shared City, closing on "We are Boston." The homepage carries no slogan: it leads with today's date, City services and people.

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelinesboston.gov

• Never use if, maybe, but, may or could; state it
• Make statements, not questions
• Prefer a full stop to a comma; short sentences, few adjectives
• Headlines at most 11 words
• Sentences of 15 to 20 words; paragraphs of two to three sentences
• Active voice (the "by zombies" test)
• Say we, not The City; say you, not residents or applicants
• Use contractions where they sound natural
• Use must, never may or shall, for required steps
• Spell out & and @
• Avoid acronyms and jargon; write for the person who knows least
• AP style for anything not covered
• Title case headlines
• Spell out one to nine; figures for 10 and up; percent, never %
• Times as 9 a.m. - 5 p.m.: no :00, hyphen for spans, a.m./p.m. lowercase
• Dates without st/nd/rd/th: September 5
• Always use the Oxford comma
• Capitalize City, City Council and Mayor when they mean Boston's
• Phone numbers with dashes: 617-635-4500
• Never use selfies, models or posed stock photos

ConfidentHelpfulOptimisticHumblePersonal

Five principles: Confident, Helpful, Optimistic, Humble, Personal. The writing guide turns them into plain-language rules: active voice, 11-word headlines, we and you, no may or shall, AP style with City exceptions.

• No subjunctive: if, maybe, but, may, could
• Headlines of 11 words or fewer
• Sentences 15-20 words; paragraphs two to three sentences
• Use we and you
• Must, not may or shall
• Spell out & and @; percent, not %
• Oxford comma; capitalize City, City Council and Mayor
• Phone numbers as 617-635-4500

• Strong statements, not questions; the guide wants a point of view and a quick route to the answer.
• Here to serve: every line should make a task easier for the person reading it.
• Optimistic doers: a problem always comes with the plan to fix it.
• Confident but never arrogant: few adjectives, short simple words, no exaggeration.
• Personal: we and you, honest and approachable, but no slang from an institution of authority.
• Two voices. The guide's brand voice (above) governs campaigns and editorial. The homepage is plainer and institutional: UPPERCASE Montserrat wayfinding labels (FEATURED RESOURCES, LATEST NEWS) and task-named links in title case (Pay a Parking Ticket). A landing page follows the homepage voice for labels and the brand voice for any sentence.

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelines

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelinesboston.gov/departments/boston-digital-service/city-boston-writing-guide

The mark is a bold B, underlined in red; the longer City of Boston logo sets CITY and BOSTON in Montserrat-like caps with a small italic "of", BOSTON underlined. Two seals sit beside it: a digital seal for all digital properties and the official 1823 seal for authority on bills and forms.

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelines%20(Logo%20and%20seals)

Red, white and blue against a modern gray. White is the primary color of the site; Charles Blue, Optimistic Blue and Freedom Trail Red are bursts that point at notices and functions; supporting blues and grays fill in only when the primaries do not work.

Not published: exact color ratios (the guide shows a proportion image, no numbers).

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelines%20(Color)github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_colors.styl

Two Google Web Fonts chosen for contrast and boldness: Montserrat, inspired by urban street posters, for navigation, buttons and primary headers, always uppercase bold; Lora, a calligraphic contemporary serif, for body text small and for quotes large and italic. Replacement faces are named for Arabic and Chinese.

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelines%20(Typography)github.com/CityOfBoston/patterns/blob/develop/stylesheets/variables/_fonts.styl

Boston underlines: the red bar under the B and BOSTON, 8px Charles Blue rules under every section header, the date set in a strikethrough. Square edges everywhere; circles only for headshots and icon frames; bookmark ribbons carry dates.

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelinesboston.gov

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelines%20(Iconography)

Three subjects (people, skylines, landmarks) and two treatments (full color, and Optimistic Blue overlay with type). People are candid and close, in the less famous parts of Boston, never models, stock or selfies; skylines and landmarks from unusual, human-level viewpoints. Headshots are always circles.

Source: boston.gov/government/cabinets/innovation-and-technology/brand-guidelines%20(Photography)

Source: github.com/CityOfBoston/patterns