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.
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.
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.
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.
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 email@example.com.
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.
Official Tufts University 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).
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
Orange (HEX D17100): Hue
Grey (HEX BDAEAC): Tint
Tan (HEX BFA87C): Tint
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
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.
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.
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.
A fat footer provides additional opportunities for branding and space for links to related web pages.
Use of icons for social media, RSS feeds and different content formats should be consistent across websites.