UMass Boston Web Brand Manual

The UMass Boston Brand Manual for the Web should be considered a companion piece to the 2009 UMass Boston Brand Manual. It contains information on photography guidelines, social media branding, as well as acceptable colors and fonts for online applications.

The UMass Boston Visual Identifier

Other Visual Identifiers

The Type Palette

The Color Palette

Type Styles

The Sail Motif

Photographic Style


Social Media

Editorial Style

The UMass Boston Visual Identifier

The UMass Boston visual identifier is the only visual identifier that should appear in most UMass Boston communications. See page 6 of the Brand Manual.

Color Options for the Visual Identifier

The preferred color of the visual identifier is UMass Boston Blue, which matches PMS 7462C. The visual identifier may also be reversed out white from a solid color (preferably UMass Boston Blue), and it also may be rendered in black when black is the only option. The UMass Boston identifier should not be rendered in any other colors. See page 7 of the Brand Manual.

Minimum Size

The minimum width of the visual identifier is 35 pixels in online applications. See page 7 of the Brand Manual.

Incorrect Applications of the Visual Identifier

See page 8 of the Brand Manual for examples of correct and incorrect uses of the visual identifier.

Other Visual Identifiers

Identifiers for Individual University Units

When the UMass Boston visual identifier appears in communications of all kinds, its appearance will tend to connect the university’s achievements in people’s minds. The success of one UMass Boston activity – when the audience knows that it’s a UMass Boston activity – will make that audience all the more receptive to other, similarly identified UMass Boston activities; and repeated associations will eventually build a powerful idea of UMass Boston that serves every part of the university well.

As a rule, no organization that is fully an element of the university may use a visual identifier other than the UMass Boston visual identifier in external communications, including the website and social media platforms. Visual identifiers of student organizations are exceptions to this rule. So are those of the UMass Boston Athletics Department, GoKids Boston, IDEAS Boston, and WUMB Radio.

Partnering with Off-campus Organizations

Where an organization is affiliated equally with UMass Boston and an outside organization or organizations, the UMass Boston visual identifier should be given equal standing with the identifier(s) of the outside organization(s). This rule also applies to communications for projects that are equally sponsored by UMass Boston organizations and other organizations. If the visual identifier of a supporter of a project undertaken by a UMass Boston group should appear in a communication as an acknowledgement of support, the UMass Boston visual identifier should be given greater prominence. If the UMass Boston identifier must appear in a single area, such as a web page, the UMass Boston identifier should be separated from any others and treated in a way that clearly indicates that UMass Boston is the source of the communication.

The Type Palette

The specific typefaces selected for written communications are a subtle but effective way to communicate our visual identity and personality. See page 10 of the Brand Manual.

Fonts for Online Applications

UMass Boston realizes that in the case of some social media, like Facebook and Twitter, it may be impossible to use other fonts, but if given the option you should use Arial and Arial Bold font for headlines, and Georgia for longer text. See page 11 of the Brand Manual. Sizes below are in pixels, for base reference. Relative units of measure, such as ems, are encouraged.


Below is a general overview of fonts, basic colors, and styles used on the University of Massachusetts Boston website. Please see page 12 of the Brand Manual. and/or the source code and CSS for details. For web style assistance, please fill out a web request form to contact one of our web designers.

Download the UMass Boston logo bundle here: 2 EPS files, 2 JPEG files (blue and black), 1 PNG file. For designers, we provide a Photoshop layered file (logo in vector format and fully scalable)

The Color Palette

Basic Principles Regarding Use of Color

Color is an extremely important component of the UMass Boston visual identity. The most successful and memorable visual identity systems use color consistently – and even relentlessly – to “own” one color in their market. Think of IBM blue, UPS brown, and Nickelodeon orange. Among the Ivies, Harvard is crimson, Yale is blue, Dartmouth green, and Princeton orange. Among the public universities in our region, UMass Boston is blue.

Secondary colors are not used in this system to signal sub-brands (e.g., one secondary color for the College of Liberal Arts, another secondary color for the College of Management, etc.) or for any other semantic reason. To use colors this way would dilute the identity of UMass Boston overall. The secondary colors should be used only as an element to provide visual contrast or to harmonize with a dominant color photograph. There are no “rules” for the use of the secondary colors, except that they should never be used in a way that dilutes the overall effort to establish blue as the color of UMass Boston. See page 12 of the Brand Manual.

Primary Palette: Two Blues

UMass Boston Blue is a match to 7462 C
A second blue is UMass Boston Light Blue, matching PMS 291 C  
See page 12 of the
Brand Manual.

UMass Boston Blue
HEX: #005A8B
Pantone: 7462 C
R:0  G:90 B:139
C: 100 M: 45 Y:6  K:27 (coated)
umass blue

UMass Boston Light Blue
Pantone: 291 C
R:160 G:207 B:235
C:36 M:3 Y:0 K:0
umass light blue

Secondary Palette: Warm Complementary Colors

The secondary palette is deliberately limited to five hues that complement the primary palette: UMass Boston Red,  UMass Orange, UMass Boston Gold,   UMass Beige  and UMass Warm Gray. The colors in the secondary palette are all warm and somewhat earthy, to contrast with the cool colors in the primary palette. They should be applied sparingly and never should upstage or confuse the audience about the dominant color of the UMass Boston brand – blue. See page 12 of the Brand Manual.

UMass Boston Red
HEX: #A33F1F
Pantone: 1675 C
R:163 G:63 B:31  
umass red

UMass Orange
HEX: #D47600
Pantone: 1385 C 
R:212 G:118 B:0
Umass Orange

UMass Boston Gold
HEX: #C59217
Pantone: 1245 C  
R:197 G:146 B:23
Umass Gold

UMass Beige
HEX: #A79E70 
Pantone: 7503 C   
R:167 G:158 B:112
Umass beige

UMass Warm Gray
HEX: #988F86
Pantone: Warm Gray 7 C  
R:152 G:143 B:134
Umass warm gray

Type Styles

font=14px, line spacing=20px, Georgia, alternate gray,  #3A3A3A 

paragraph style


Link: #005A8B
Hover: #00334e


Headline 1 (PageTitle):
25px Georgia, UMass Orange, #D47600
heading 1

Headline 2:
20px Georgia, Alternate Blue,  #054669 
heading 2

Headline 3:
18px Arial bold,  UMass Warm Gray, #988F86 
heading 3

Headline 4: 
14px Georgia, UMass Gold, #C59217
heading 4

Headline 5:
14px Georgia italic, alternate gray, #3A3A3A
heading 5


Use this arrow below as the bullet:

Blue arrow


Table Header
12px Arial bold, #054669;
background: #DDEDF7;

Alternate rows with white border at bottom:
background: #F8F8F8;
background: #E5E6E6;
11px Arial, #3A3A3A;

table styles

Header Title Text:  
30px Arial bold, white
header title style

First Row:
12px Arial bold, light blue: #A0CFEB
sub nav style

Second Row:
15px Arial bold, white
sub nav style

Footer Navigation Left:
12px Arial light blue: #A0CFEB
footer style



No other colors are acceptable.

The Sail Motif

The sail motif is a graphic element that is used to give a distinctive and appropriate visual style to UMass Boston communications. The concept is a sweeping curvilinear form that is always positioned on the right edge and that bleeds off the bottom, right edge, and top of the space. It symbolizes the distinctive location of the UMass Boston campus on Boston Harbor, and the upward sweep connotes growth and upward movement. It is rendered in UMass Boston Blue and the gradient of UMass Boston Blue and Light Blue. See page 18 of the Brand Manual. On, it is used in front of the single photo used in the Centers & Institutes template.

footer graphic

Photographic Style

Photography that meets a high professional standard will play a critical role in creating a positive image of UMass Boston. Photography is a tool we use not merely to communicate information, but also to create an emotional connection with our audience. The photographic images used on the website should inspire prospective students and faculty and make a connection with the people and activities depicted and they should make alumni feel proud of their connection with UMass Boston. To achieve these goals, when posting photos on, avoid photos that are obviously posed or staged and select primarily documentary-style photography that captures the authentic and vibrant interactions among students and among students and faculty.

Some guidelines:

Don’t feel as if you have to have a photo on every page of your website. Use photography if it makes an editorial point. Photography should not be merely decorative or just a bunch of images – even if they are appealing images. Think hard about how your audience will perceive the specific photos you choose, making sure that they align with your overall goals and that they are being perceived as you intend.

It is also important to keep photos under 50KB to allow for quicker page load times.


Videos are an important component of telling the UMass Boston story, and like other materials that tell our stories – brochures, handbooks, web pages, etc. – they need to adhere to university brand standards and be consistent in style, tone, and message.


All videos that appear on the university website, and that promote university events and programs, must be properly branded.

Title Page

Videos of university events should feature a title page featuring the sail motif and the date of the event. This template is available upon request.

A marketing/promotional video should include a title page appropriate for its audience and subject matter. It should include at the very least, a title, the university’s name, and our logo.

IT Web Services, in conjunction with Creative Services and the Office of Communications, has developed a branded animated opening sequence compatible with iMovie, Premiere, and Final Cut. The final graphic in this opening sequence is a title page featuring the sail motif and the date of the event. It is highly recommended that you use this template, which is available upon request and at the Digital Learning Studio.

Copyright Page (Closing Graphic)

All university videos should use a branded copyright page. A template is available upon request and at the Digital Learning Studio.



If you are using the university’s logo in your video, the logo cannot be stretched in any way, and the colors cannot be changed. See: The UMass Boston Brand Identifier.


If you use a lower third (aka super/chyron) to identify University of Massachusetts Boston personnel, when possible, you should use Arial Bold on line 1 and Arial Regular on lines 2 and 3 (if applicable.) Templates using this font and the university’s logo and colors are available upon request and at the Digital Learning Studio.

Social Media


Before creating a social media account, think about what you hope to accomplish. Do you hope to increase enrollment or funding dollars? Do you hope to drive traffic to your website? Do you want a tool to directly interface with users? What actions do you want your visitors to take? How are you measuring results? Facebook, Flickr, Wordpress, and YouTube have analytical tools built into the account, where you can keep track of new “fans,” “likes,” and “views.” Submit a Web Services Request for help utilizing these analytical tools to meet your goals. For help creating a blog on the UMass Boston Blogs Network, email


When creating a shared Facebook, Flickr, Twitter, or YouTube account, please make sure that at least two people have access to the account. In the case of the latter, this will mean creating a shared password. In the case of Facebook, you should make more than one person an administrator, so if they leave the university, someone can still keep the account up and running. It can be very difficult to shut down an account that is no longer active.


Maintaining the university’s brand and your individual unit’s brand doesn’t end with printed materials and your website. For many, your social media sites will be the first introduction to your program. Therefore, consistency in written and visual messaging is key.


When creating a blog, Facebook account, Flickr account, Twitter account, or YouTube channel for a university department, college, or center, it is important to tie this account back to your department, college, or center and to the University of Massachusetts Boston, both to give the web visitor a sense of place and to drive traffic back to your website. Keep in mind that some people may find this page via searching and therefore this page may be their first introduction to your program. Therefore, you want to give them a chance to find out more about what you do.

Include web links back to your department, college, or center and to the university’s homepage, Make sure that if you are referring to the university, you use the appropriate name – UMass Boston or the University of Massachusetts Boston. See: What Not to Call the institution We Work For.

Key Messages

Social media accounts can be excellent marketing tools, so think about areas where you can convey key messages.

Messaging on Flickr

Messaging on YouTube


Make sure to check "allow comments with approval only."

Channel Landing Page
Individual Video Pages

Screen capture showing Natalia is separate from Bouyea under the Tags heading


Visual Identifiers on Social Media Pages


When possible, try to follow the photography guidelines above. See: Photography Style. It is recommended that, if possible, blogs and Facebook pages try to incorporate the look of the department banners on or appropriate print marketing materials. See: Branding Photo for Department Landing Pages. Don’t use copyrighted photos.


If using the university’s logo, make sure you are using the current logo. Don’t distort it in any way. See: The UMass Boston Brand Identifier. Each social media site can accommodate certain sizes before the logos/photos cut off. Because web visitors will associate your logo or identifier with you, you don’t want to only convey a portion of your message when it appears in news feeds and on wall posts. See: Image sizes for Facebook, Image size for Twitter, and Image size for YouTube.


If adding text to an image, you need to use the approved fonts. See: Fonts for Online Applications. If you need help adding text to an image using approved fonts, fill out a Web Services Request.

Image Sizes for Facebook

All Facebook accounts converted to the new Timeline look on March 30, 2012, meaning Facebook now showcases logos/photos in the following sizes:

Profile picture for Timeline pages: The profile picture you upload must be 180x180 pixels. Because Facebook will scale these pictures down to 32x32 pixels for your wall posts, it is extremely important to choose a picture that can be scaled down as the profile pictures that are displayed on timeline posts are really small. The best practice is to choose the UMass Boston logo, available in the approved colors here. (Right click on the image, click on "Save image as," save the image to a folder or your desktop, and then upload to Facebook.)

Big picture for Timeline: This is the big picture (also known as cover photo) for Facebook’s timeline. It is recommended that, if possible, you use the same photo being used for your college/department/center’s banner on

Width: 851px, 
Height: 315px

For help finding and sizing branded images, fill out a Web Services Request.

Image Sizes for Twitter

Profile pictures for Twitter need to be 400x400 pixels, or they will be cut off. Banner images for Twitter need to be 1500x500 pixels.

Sized versions of the UMass Boston logo in approved colors are available here, click on the links below:

For help finding and sizing branded images, and creating a custom branded background, fill out a Web Services Request.

Image Size for Instagram

Profile pictures on Instagram need to be 110x110 pixels.

Two versions of the UMass Boston logo, in approved colors, are available here. Click on the links below:

Image Sizes for YouTube

The “avatar” on YouTube needs to be 800x 800 pixels or the image will be cut off.

Two versions of the UMass Boston logo, in approved colors, are available here. Click on the links below:

You can change the avatar by clicking on “Settings,” and then looking under the “Appearance” tab.

The YouTube banner size is 2450x1440 pixels, which covers all possible display devices. It is important to work with a designer so that your image fits into the suggested guidelines for display on different devices.

For help finding and sizing branded avatars and creating a custom branded background, fill out a Web Services Request.

Last Updated: January 5, 2016