Brand Guide: Visual Identity

The Logo

Logo Do's and Don'ts

General Design Tips

Typography (font)

Brand Colors

Files Types and Uses

The Libraries' logo is designed to be dynamic and flexible. It can, and should, appear in a wide variety of shapes and a range of colors. 

The logo is composed of two elements:

• The wordmark: the words "MIT Libraries" stacked as shown below. Customizations have been made to our typeface for the wordmark: Do not recreate the wordmark by typing out the name.
  
• The "network" graphic: the dynamic, angular shape that is algorithmically generated using the program Processing. The network can take any shape and be displayed in any of the brand colors.
  

The two elements together form the logo:

The wordmark can be aligned in one of two ways: 

• "Left": Aligned with the left edge of the "network" graphic (as seen in the red and green examples above)
• "Right": Aligned flush-left with the center of the "network" graphic (as seen in the magenta example above)

The Libraries' dynamic, code-generated logo is created with a custom stand-alone application. The application is available for Mac, PC, and Linux machines and generates logo assets and graphic motifs in various file formats (jpg, png, pdf, svg, and mov) at the touch of a button.

For quick access to a wide variety (in color and file type) of already generated logo files, see Downloads & Templates.

• DO use a variety of logo versions in different shapes and colors
   
• DO leave clear space around the logo. Do not place other logos, type, or graphic elements within the clear space indicated in the diagram below. The clear space for the MIT Libraries logo is determined by the width of the letter M in the MIT Libraries wordmark.
  
   
• DO NOT use colored backgrounds with the colored network graphic:
  
• DO use the logo against a photo background in areas that permit optimum legibility
  
• DO NOT use different colored typography, gradients, gradient backgrounds, or colors that have not been approved. DO NOT outline the text.
  

Whenever possible, we will provide templates for commonly used materials such as temporary signage and PowerPoint presentations. If you have needs beyond these, we strongly encourage you to reach out to the Marketing and Communications team for assistance.

However, we do recognize there will be situations where you need to create something quickly, such as a temporary sign. In these cases, we recommend following these general guidelines: 

• The logo should generally be placed on the left-hand side, top or bottom, of a page or screen
• Do not center the logo
• Do not center text 
• Use brand colors sparingly. They are very bright.
• Always use the brand typeface, Neue Haas Grotesk. If it's not available, use Arial or Helvetica.

The MIT Libraries' core typeface is called Neue Haas Grotesk. It has a long legacy of being used at MIT going back to the 1960s.

• There are two versions, a display and text version. Use the display version for titles or headers that are larger than 14 pts. The text version should be used for body text that is 14 pts or less.
   
• There may be cases where you are sending a document to or running a presentation from a computer that does not have this typeface installed. In these cases, Arial or Helvetica may be used as an alternative.

Instructions for installing the brand typeface:

Windows users:

• Click on Start
• Type Software Center and hit Enter
• Click on Neue Haas Grotesk Fonts, then click the Install button

Mac users:

• Open Finder and click on Applications
• Open Self-Service
• Log in with your Kerberos ID and password
• Click on Lib-Apps 
• Click on Neue Haas Grotesk Fonts, then click the Install button

A good rule of thumb is anything dealing with the web should be in RGB and printed material should be in CMYK.

RBG Colors

CMYK Colors

JPG
If a small- to medium-sized print asset is being made, a JPG should be generated. A JPG is a raster-based element, made up of pixels. A JPG can also be easily uploaded to the web. However, as JPGs are pixel-based, the larger the image is scaled, the more the image will degrade in quality. While all of the size options output at 300 dpi, keep in mind what kind of asset is being created, in order to keep the quality of the identity intact.

PNG
In order to generate a logo for the web, or to generate a logo with a transparent background, a PNG output should be chosen. A PNG is a raster-based asset as well, and is great for the web as it loads quickly. A PNG is useful because it can also be saved with a transparent background, and can overlap other background images.

PDF
A PDF is vector-based asset. Unlike a raster element, a vector is made up of paths, and will not lose image quality. PDFs are great for print as when they are stretched, they do not become pixIlated. If you need to print something (especially something very large), a PDF may be the appropriate output form.

SVG
An SVG is a scalable vector graphics file. SVGs are great for the web as they appear in high quality, they are scalable without pixIlation, and are generally small file sizes, which means they will load relatively quickly.