Back to top

Brand Guidelines

Brand Guidelines

The beauty of Boston begins with a certain boldness. A boldness of opinion. Of thought. Of diversity. A boldness to be ourselves. Even though we’re all diverse, and come from different cultures and backgrounds, we are connected through our boldness. And through our City. We are Boston.

This guide is just that. A guide. It’s meant to help you understand our strategy and decisions, and provide a foundation to build upon. We will add to it as we bring Boston.gov to life over the coming months and years.

Still have questions? Contact:
Innovation and Technology
1 City Hall Square
Room 703
Boston, MA 02201-2021
United States

BRAND STRATEGY

CONFIDENT

Make strong statements, not questions. People come looking for answers so having a strong point of view is crucial. Be direct and get to the point quickly. Don’t use the subjunctive. The words “if, maybe, but, may, could” don’t live in our vocabulary. The fewer adjectives, the shorter the sentences, and the less fluff the better. If you’re about to add a comma, think if a punchy full stop wouldn’t be better.

HELPFUL

We are here to serve — to make things easier and simpler for our citizens. Anything we say or any information we give, should be useful, easy to understand, and relevant to that individual.

OPTIMISTIC

Anything is possible in our world. If there’s a problem, we can fix it with a little ingenuity. All copy and content should reflect this optimistic tone. Where there’s a will, there’s a way. And if there’s ever a problem being communicated, it’s accompanied by a plan of action to fix it. We may be dreamers, but  — more importantly  — we’re doers.

HUMBLE

We may be confident, but we are never arrogant. Be conscious of what adjectives you may be using. Never be too verbose, or exaggerate. While your grammar should always be superb, your words should be simple. If your words have multiple syllables, rethink those words. Be careful how you describe your actions and plans. Keep in mind the people they’re meant to help.

PERSONAL

Visiting a website is a personal affair often done alone. Use personal pronouns like “we” and “you." Be honest. Be real. Be approachable. Be accessible and inclusive. Boston is made up of thousands of individuals, and you are there for every single one of them. However, never be too personal — slang or conversational language sounds strange coming from an institute of authority.

Media screens

COLOR

The mix of reds, whites, and blues of the color palette are contrasted with a modern gray. This reflects the progressive nature of the City, while paying homage to its iconic past. The primary color of the site is white. The use of white space is a grounding mechanism for clearly delivered content. The primary colors are the bursts that direct the eye to important notifications and moments of functionality. The supporting colors are there when your design needs some variation in order to work.

COLOR RELATIONSHIPS

The primary color of the site is white. If we zoomed out of the site you would see white spaces as the grounding mechanism for clearly delivered content.

The primary colors are the bursts that direct the eye to important notifications and moments of functionality. Use the blues strongly and purposefully, and use the red sparingly for things that need to be eye-catching. Use the light grey liberally with white, while still keeping white dominant.

 

color ratios

PRIMARY COLORS

These are the core colors driving the personality of the site. They provide a modern take on our diverse past, and work well together to create the site’s visual brand.

red circle
FREEDOM TRAIL RED
hex: #FB4D42
Pantone: 1788C
RGB: 251,77,66

A brick-red, inspired by the Freedom Trail. Use this color to draw attention to something on the page, or for important links and buttons. Never use Optimistic Blue on top of Freedom Trail Red (and vise versa). They are too bright and vibrate when used on top of each other.

Dark blue
CHARLES BLUE
hex: #091F2F
Pantone:295C
RGB: 9,31,47

Use our dark blue for typographic headers, and as way to add contrast and weight to lighter pages. Use this color when you need something to look more official.

Blue circle
OPTIMISTIC BLUE
hex: #288BE4
Pantone: 2174C
RGB:40,139,228

Use this blue for normal links and buttons, and occasionally as a background color. You should also use this color for the overlays on photography. Use this color when you need to inject warmth into a layout (and can be a little less official). Don’t use this color on top of Freedom Trail Red.

SUPPORTING COLORS

In certain design situations, you may find the primary colors limiting, so we have created supporting colors that carry the same tone and personality but give you more freedom. For instance, in our site layouts, we are using the range of blues and greys shown below when the primary colors are not working for the design. Only use the following if the primary colors are not working.

 

color supporting blues
SUPPORTING BLUES
#061622, #0C2639, #45789C, #51ACFF

The darkest of these should be used very rarely – when you need something that resembles black. The next darkest-blue is used for our footer background color, so that it can bump up against our primary dark blue without issue. The desaturated blue can be used when you need text to visually recede. The brightest blue is used as a substitute for our primary bright blue when it needs to appear on a dark background.

Color supporting greys
SUPPORTING GREYS
#58585B, #D2D2D2, #E0E0E0, #F2F2F2

The darkest grey is used for the body copy, and the lightest grey is used as a background color. The two medium greys can be used for a variety of things, like horizontal rules and miscellaneous borders.

City seal sketch

Logo and Seals

Logo and Seals
Contact: Digital Team
Boston B
City of Boston Logo

The new mark for Boston is not just the letter B but a bold letter B. Underlined. When something matters, we underline it. We use the B as a way to strike a friendly tone. While the seal is a symbol of authority, the B and the longer City of Boston logo is our way of showing we are human.

Boston digital seal
Digital seal

Boston's digital seal is used in place of the official seal on all digital properties and communications. The seal was created to work better at small sizes and on screens. There will also be times when a cleaner, more modern interpretation of the traditional seal is needed for print pieces. 

City Seal of Boston white
City of Boston official seal

This seal should be used when the City needs to be the symbol of authority, such as on bills and non-digital forms. The City Seal was adopted in 1823. The first image of the seal was published in 1827. It became the official seal in 1914. We have more information on symbolism and Boston.  

Logo mockup billboard

TYPOGRAPHY

There are three typefaces that make up Boston.gov’s typographic language. They have been chosen for their contrast, as well as their boldness. Two of these typefaces (Lora and Monteserrat) are used to guide content while the other typeface (Berthold Akzidenz Grotesk) will only be used for the rare occasion that headlines are printed. Lora and Montserrat are both Google Web Fonts.

MONTSERRAT

With its design inspired by urban streets and the posters found there, Montserrat is bold, strong, and official. Yet, it has a few small quirks that give it a friendliness and warmth that you don’t usually find in such sturdy sans-serifs. Use it small for navigation, links, and buttons, and use it large for primary headers. Always use it in UPPERCASE bold. Download it.

 

MONTSERRAT

LORA

Lora is a well-balanced contemporary serif typeface with roots in calligraphy. It is polite, poetic, and warm as a typeface and is well suited for body text. Technically, Lora is optimized for screen appearance, but works equally well in print. Use it small for body text, or large and italic for quotes or other special secondary text. Pair with Montserrat whenever possible to reflect our bold, yet human voice. Download it

Lora typeface
Font installation guidance
Mac OS X

If you just need one font, double-click it and hit "Install Font." If there are multiple fonts, you can do the same thing for each. Another option is to open "Font Book" and select and drag all of the fonts to Font Book's center column.

To find Font Book on your Mac, open a Finder window, pick "Applications," and scroll down to Font Book.

Windows 7 / Windows 8

If you just need one font, double-click it and hit "Install." To choose more than one font, hit the "Start" button, then "Control Panel > Appearance and Personalization." From here, choose "Fonts." You can drag and drop the new fonts here.

Windows Vista

If you just need one font, right-click on the font file and then hit "Install." To choose more than one font, follow the directions above for Windows 7 / Windows 8.

Windows XP

You can drag and drop the font files you'd like to install into the "Fonts" folder on your computer. Hit the "Start" button and search for "C:\Windows\Fonts." One you have the folder open, drag and drop the fonts into it.

EMAIL TYPEFACES

If Google web fonts aren’t available and you need to replace your typefaces with system defaults, we recommend replacing Lora with Georgia and Montserrat with Arial. All of the same stylistic rules apply.

HTML TYPEFACE USAGE

html type info

ICONOGRAPHY

ICONOGRAPHY
EXPERIENTIAL ICONS
EXPERIENTIAL ICONS

These bold line icons should be used for specific actions a citizen may want to take (like paying a parking ticket). Use them for transactions that need to jump off the page quickly so citizens can get in, and get it done. These icons are built using 3-pixel-width strokes and usually (but not always) have hard edges. Avoid too many unnecessary rounded corners.

DEPARTMENTAL ICONS
DEPARTMENTAL ICONS

Departmental icons should be used for any content that has been created by specific departments. These icons indicate deeper content or may point you to the specific department pages. These icons are in no way meant to replace current departmental marks and logos — they are simply a wayfinding tool for people to see which department authored that specific content. With simple and solid shapes, they are meant to be recognized by a repeat user at a glance. They are filled with Charles Blue and underlined with Freedom Trail Red (see Color Palette).

SMALL CIRCULAR ICONS
SMALL CIRCULAR ICONS

For small in-line icons, we are using a similar style to the social media icons. They are surrounded by a 3 pixel circle and filled with our dark blue color. You will notice these being used on the homepage and on “Place” pages, but they could be used anywhere. The Noun Project or IconMonstr are great resources for downloading quick and easy icons in this style.

Photography

The site features three types of photos: people, skylines, and landmarks. We also have two different treatments: full color and blue overlay with type. This Google photos page is a great place to search for royalty-free photos that are free for city use. We’ve collected a few of our favorite shots, but there are lots of places to get free city photos.

Digital team stock photos     BPL flickr     library of congress     mayor's flickr page

PEOPLE CANDID PHOTOS

These should be images of citizens and City employees working, playing, and connecting with their community. These photos should take a candid and up-close look at the people of Boston as they go about their daily lives. Photos of people should  above all else  feel real and genuine, like something familiar that you see every day, but maybe don’t notice. Don’t use models. Don’t use stock. And don’t ask anyone to pose for a photo. There don’t even need to be people in the picture, just evidence of a strong human presence (like a half-eaten plate of delicious local food).

Rowing

Pool

Do find real people doing real things in the less “famous” areas of Boston. Find candid moments, where people don’t know you’re taking their photo.

 Public works truck mechanic

Do find moments where you can make a real Boston resident or employee feel a bit heroic in what they're doing. This is achieved here with the wide angle lens and a lower vantage point.

I voted photo

Do find interesting things in your composition to focus on – it might not always be people, and that’s ok. These type of photos are great because you can put text over the blurry part and still have it be legible. Imply human presence, even if there is no person in the picture.

Bad Stock Photo

Don’t use clip art – ever. But especially don’t use copyrighted clip art or other photography that we don’t have permission to use.

Bad Stock Photo

Don’t be cliché – find a different spin on Boston. Don’t photograph people from above eye level. It tends to look like stock photography and feel less real.

 
Bad Stock Photo
Those are some adorable citizens, but this photo is way too posed. Shoot a more candid photo. Also never use selfies.
HEADSHOTS

On the site, headshots of people should always be cropped to a circle. This helps distinguish and frame the more formal and official photos of elected officials from the candid photos. We know this will be difficult with so many City employees, but consider establishing a consistent headshot style that is easy to achieve when new people are hired. It should feel as though there is one team serving you.

Head Shots Grid

SKYLINES

There’s nothing more optimistic than a city’s skyline. It’s filled with potential, hope, and stories yet to be discovered. Shots should showcase the diversity of our City through unusual perspectives. Help people fall in love all over again with Boston by shooting skylines from a-typical locations. Find the view that will be new to people — not the one they’ve seen a thousand times in brochures and tour books. If it looks like it could be in a tour book, throw it away! If it looks like stock photography, throw it away!

Boston Tea Party Museum

LANDMARKS

These are photos that show the City itself in an iconic light. History is woven into the fabric of Boston, making it nearly impossible to walk down the street without seeing a historical landmark at every turn. Similar to our notes on shooting the Boston skyline, find unexpected perspectives to shoot familiar landmarks. Shoot from the human perspective, which is not necessarily the dramatic perspective. That means taking pictures of the Citgo sign from the ground, not from a helicopter over the Charles River. Zoom in and crop to create a bold statement.
 
The Granary Burying ground snow
Boston subway ads

GRID SYSTEM

This is an overview of the grid system we are using. Use this as a guide, not the final word – there will definitely be edge cases or special situations that are not covered here.

Web site Grid

There are some components that sit in a 12-column, Bootstrap-style guide grid, and there are other components that span the full width of the viewport (such as components with background photography).

components grid

The sidebar menu behaves a little differently depending on the viewport width. In a situation where the viewport is greater than 1200 pixels wide, the sidebar compresses the content in the content container, so that it is all still fully visible. When the viewport is less than 1200 pixels wide, the sidebar pushes the content container off the right edge of the viewport.

side drawer grid
12-COLUMN GRIDS

There are two types of 12-column grids we are using: a loose grid and a tight grid. The loose grid has 60 pixels of visual padding around each element: 30 pixels on the right and left and 60 pixels on the bottom.

loose grid

The sidebar menu behaves a little differently depending on the viewport width. In a situation where the viewport is greater than 1200 pixels wide, the sidebar compresses the content in the content container, so that it is all still fully visible. When the viewport is less than 1200 pixels wide, the sidebar pushes the content container off the right edge of the viewport.

tight grid