Visual Identity Basics

Tufts University Logos

The Tufts University logo should appear in the upper left corner of official Tufts websites and link back to the Tufts homepage at www.tufts.edu.

Example:

Top Nav.v2

Executive sites:

The example above shows how the Tufts logo appears on the Executive template. This template is designed for use by the offices of the President, the Provost and Senior Vice President, the Executive Vice President and the Trustees websites only.

The logo is white on a Tufts blue (HEX 6699cc) background. The site name is 100% black in Univers 59 Ultra Condensed 28/26 pt. typeface and aligns with the bottom of the word "University" in the Tufts logo. The logo and site name are separated by a .5 pt. 100% black rule.

Example:

Tufts Logo-Executive 

Division or Office sites:

For all other sites, the logo should be in Tufts blue (HEX 6699cc) on a white or tinted background followed by the school, department or office name in 80%  black Univers 59 Ultra Condensed 28/26 pt. typeface and aligns with the bottom of the word "University" in the Tufts logo. The logo and site name are separated by a .5 pt. 100% black rule.

Example:

Tufts Logo-Info Rich 

School sites:

A special horizontal version of the Tufts logo and school name was created for use on the school homepages. This logo treatment is used exclusively by the schools at Tufts. The school name appears on 2 lines in 100% black Caslon 540 25.5/24 pt. typeface and aligns with the bottom of the word "University" in the Tufts logo. The logo and site name are separated by a .5 pt. 100% black rule.

Example:

 Tufts Logo-School.v2 

It is very important that designers or desktop publishers do not attempt to construct the logo themselves, as the lettering in the logo has been sculpted especially for Tufts. To request a logo for use on your website, please email wccontact@tufts.edu.  


Download School Logos for Web Use

School logos for web use are available for download. All the files below are in the .png (portable network graphics) bitmap image file format and are created specifically for use on the web.

School of Arts and Sciences

Graduate School of Arts and Sciences 

Cummings School

School of Dental Medicine

School of Engineering

The Fletcher School

Friedman School

School of Medicine

Sackler School

Tisch College


Official Tufts University Seal

Tufts Seal
Use of the official Tufts University seal should be limited to formal documents, i.e., on diplomas or other official administrative communications emanating from the Office of the President or the Board of Trustees. The seal may also be used for official ceremonial functions and appear on approved plaques, flags, or furniture.

It should never be used on print or web marketing materials in lieu of the Tufts logo.


Tufts University Colors

The official Tufts colors are a dark brown (HEX 300F00) and a sky blue (HEX 6699CC) as prescribed by the Pantone color specification system (or the Pantone Matching System of “PMS” numbers).

Tufts BrownTufts Blue

One or both colors should be used frequently on official Tufts websites. The official Tufts brown and blue may not be replaced with another brown or blue.

Other colors include accent colors (bright and vibrant), hues (medium tones) and tints (pale colors). The main consideration when choosing color is that it should be sufficiently distinct from the official Tufts colors of brown and blue.

We have created a limited color palette for use on official Tufts websites. This is particularly useful if you are not working with a professional web designer, since it is difficult for non-designers to expertly mix and match colors. The colors that you may use include:

Green (HEX 66660): Accent color

Green 

Orange (HEX D17100): Hue

Orange 

Grey (HEX BDAEAC): Tint 

Grey 

Tan (HEX BFA87C): Tint

Tan 

The colors above are meant to coordinate well with the Tufts school colors. When using more than two colors, try to choose one accent, one hue and one or two tints.

If you are working with a professional web designer to create your site, you may choose from a range of colors available in the Tufts Visual Identity System, p. 24.


Tufts University Typefaces

Serif typefaces:

Georgia is resident on most computers and has been designed to render well on a computer monitor. It should be used in electronic environments such as HTML-encoded emails and websites.

Sans-serif typefaces:

Ariel and Verdana are the designated typefaces for electronic environments such as HTML-encoded emails and websites.


Basic Website Navigation

Navigation & search:

Navigation on a website’s homepage should always be across the top of the page. The search box should always appear in the top right corner of all pages on a website.

Example:

Top Nav.v2
 

On a website’s secondary pages, top-level navigation should be across the top of the page with secondary and tertiary navigation down the left-hand side of the page.

Example:

Nav-Left 

Fat footer:

A fat footer provides additional opportunities for branding and space for links to related web pages. 

Example:

Fat Footer.v3
 


Iconography

Use of icons for social media, RSS feeds and different content formats should be consistent across websites.

Facebook:

Facebook Icon 

Flickr:

Flickr Icon 

FourSquare:

FourSquare Icon 

LinkedIn:

LinkedIn Icon 

RSS/Blogs:

RSS Icon 

Twitter:

 Twitter Icon

YouTube:

YouTube Icon