Update:

We have resumed some on-campus services, including book pickup, virtual consultations, and fulfilling scanning/digitization requests. Many library materials are available online, but our buildings remain closed until further notice.

Harvard Library's Brand Guidelines

A guide to Harvard Library's brand and design patterns.

Overview

The campus library has always been at the heart of university life. For Harvard, the Library is core to its mission — ensuring Harvard’s leadership of education and inquiry in the pursuit of enduring truth. 

Here at Harvard Library, we connect students, faculty, and scholars with vast, useful resources to make their research richer, learning fun, and discovery delightful. 

These brand guidelines, together with our writing guide, are tools for library staff to use and share our work. We welcome you to explore, discover, and ask questions.

You can always reach us at harvard_library@harvard.edu.

2018 Open House Game Night

Brand Strategy

Establish a Culture of Use

A key initiative in our brand strategy is to establish a culture of use. To do this, we put the users at the center of everything we do so they can help shape how we evolve.

We want our users to understand that Harvard's libraries are not only centers for knowledge, but are sanctuaries for learning, collaborating, and discovering new ideas—and that everyone can tap into this shared knowledge. We develop and promote tools and resources that are accessible to all. We want every one who interacts with us to know they can take full advantage of our services. We strive to deliver a streamlined, useful, and cohesive experience—both in person and online.

We invite you to be part of the journey. We hope that by illuminating our process—the scaffolding that supports all of the different ways you use the library—we continuously evolve and improve together. 

Useful

We strive to have what our users need, when they need it. The information and resources we share should be clear, easy to understand, and meaningful to each person. 

Helpful

Our goal is to meet users where they are in their learning process, regardless of how they find us. Whether users interact with the library digitally or face-to-face, we want to set them up for success in their work.  

Accessible 

We believe that users should easily be able to find—and use—all of our resources. 

Open 

We strive to be transparent and share what we have as widely as possible, whenever we can. 

Color

Harvard Library’s palette of blue, red, and yellow are pops of primary color that draw your eye to important calls to action—like the experience of browsing for a book in our stacks. Our goal is to embrace Harvard’s signature crimson while introducing bright hues and bold accents. We hope to reflect the fresh energy of the library, as the traditional and the modern work together.   

Relationship

The base color of this site is white, bolstered by black, gray and blue, for optimal readability and a pleasing visual experience. The primary colors are intentionally bright to draw the eye to areas of importance, utility and action, and are often associated with pages geared towards specific audiences. Supporting colors and gradients in concert with the primary colors create aesthetic balance and offer room for creative expression of the brand.

Primary Colors

These are the colors that make up Harvard Library’s website. The primary color palette includes bright, vibrant colors to represent our dynamic library, while the Harvard crimson and a slate blue are used to illustrate the traditions of our iconic brand.

Color wheel

Breakthrough Blue
HEX: #0579B8
RGB: 5, 121, 184

Use this color for links, buttons, and as an accent element for content geared towards students at Harvard.
Cambridge Red
HEX: #EB001B
RGB: 235, 0, 27

Pair this color in a gradient with Crimson to brighten decorative background elements.
Harry's Crimson
HEX: #A51C30
RGB: 165, 28, 48

Harvard’s signature color. Use in
areas that call for a more familiar Harvard feel.

Bookmark Blue
HEX: #3E6F7D
RGB: 62, 111, 125

Use this muted hue to represent Harvard Library’s collections across 
the site.
Brilliant Yellow
HEX: #F8C21C
RGB: 248, 194, 28

Use this bright accent color to call attention to dates, hours, services
and tools.

Supporting Colors, Gradients, and Patterns

To support the design aesthetic, we introduced the colors and gradients below. Use these as directed.

Gray color swatches
f

Grays

#1E1E1E, #414141, #6C6C6C, #C0C0C0, #F3F3F3, #F9F9F9

#1E1E1E — Use for headings and prominent text
#414141 — Use for most body copy
#6C6C6C — Use for subtle text and some icons
#C0C0C0 — Use for dividers and borders
#F3F3F3 and #F9F9F9 — Use for background shading

Gradient color swatches
f

Gradients

Crimson to Cambridge Red (#A51C30 → #EB001B) — Use the Crimson to Cambridge Red gradient for some icons and as a background on filters and subnavigation.

Dark Blue to Breakthrough Blue (#2A5280 → #0579B8) — Use as a color wash over hero images for "How To" pages and as a background on filters for pages geared toward Harvard students.

Bookmark Blue to Light Bookmark Blue (#3E6F7D → #52757E) — Use as a background on any filters and blocks related to Harvard Library collections.

Brilliant Yellow to Light Yellow (#F8C21C → #FBE08E) — Use as a background on filters for services and tools.

Pattern swatches
f

Patterns

Use these patterns to add texture and dimension to backgrounds on some components and calls-to-action. Use discretion when applying patterns so as not to distract, overwhelm, or impact readability.

Typography

Harvard Library’s typographic language is made up with two typefaces — Trueno and Lora. We selected these fonts not only because they are clean and legible, but also because they are open source which supports one of our guiding principles.

Trueno

Trueno is the primary typeface used on Harvard Library’s website. It originated from Montserrat and therefore has a similar look and feel. Trueno is used for primary headers, navigation, links, buttons, and callout text. Download it.

Trueno Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Trueno Semibold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Trueno Regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Trueno Light

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Trueno Ultralight

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Lora

Lora is the secondary typeface used on Harvard Library’s website. It is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface with moderate contrast well suited for body text. Lora is used for body text, subtitles, and quotes. Download it.

Lora Regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Lora Italic

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Lora Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Lora Bold Italic

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
abcdefghijklmnopqrstuvwxyz1234567890

Font Styles

H1 Header Text

Desktop: Trueno Bold, #1E1E1E, 60px, line-height 74px
Mobile: 32px, line-height 40px

H2 Header Text

Desktop: Trueno Bold, #1E1E1E, 32px, line-height 42px, uppercase, 
letter-spacing: 2.4px
Mobile: 24px, line-height 31px

H3 Header Text

Desktop & Mobile: Trueno Bold, #1E1E1E, 20px, line-height 30px, 
uppercase, letter-spacing: 1.5px

H4 Header Text

Desktop & Mobile: Trueno SemiBold, #1E1E1E, 20px, line-height 30px, 
uppercase, letter-spacing: 2.14px

H5 Header Text

Desktop & Mobile: Trueno SemiBold, #1E1E1E, 19px, line-height 29px

H6 Header Text

Desktop & Mobile: Trueno SemiBold, #1E1E1E, 16px, line-height 28px

Subtitle Text

Desktop: Lora Italic, #1E1E1E, 26px, line-height 40px
Mobile: 22px, line-height 34px

Supporting large text

Desktop: Trueno Light, #1E1E1E, 25px, line-height 42px
Mobile: 22px, line-height 38px

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui nisi, congue sit amet mauris non, placerat tincidunt mauris. Maecenas sit amet nulla non sem rutrum tincidunt eget eget magna. Curabitur gravida blandit semper.

Desktop: Lora Regular, #414141, 19px, line-height 32px
Mobile: 17px, line-height 29px

Small paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui nisi, congue sit amet mauris non, placerat tincidunt mauris. Maecenas sit amet nulla non sem rutrum tincidunt eget eget magna. Curabitur gravida blandit semper.

Desktop & Mobile: Lora Regular, #414141, 15px, line-height 26px

Iconography

A thoughtful iconography system adds visual context and helps guide users successfully through a web experience. Iconography can be helpful to aid audiences who speak different languages, as the right icon can convey an idea in seconds and transcends language barriers.

We use the Google Material Icon Set as much as possible on the Harvard Library website. In cases where we need a specific icon that isn’t available by that set, we source icons from The Noun Project, or create a custom icon.

Large icons are used in some of our calls-to-action and appear in the Crimson to Cambridge Red gradient. Large icons are also used in the hero area of certain page types, displaying in 
light gray.
Icons are used to represent more common items such as external links, contact information, library features and amenities, library hours, and social media. Small icons are also often paired with text as a quick reference to provide context.
Icons are used to represent some of Harvard Library’s content types, including "How To" content types, service content types, and tool content types. These icons appear in yellow.

Photography

Harvard Library uses several different types of photography. Here are some guidelines around how to select photos for each.

Background Images

Background images provide visual interest, segment vertical sections of the website from others, and generally prevent the website from being a big, hard-to-read wall of text. They appear in many places on the Harvard Library website, including some page headers, featured content, full-width call-to-action components, and Harvard Library collections.

For hero background photos, use images without a central focal point (e.g. photos of scenery, landscapes, skylines, buildings, crowds), so text overlays aren’t difficult to read and they don’t distract users. Only use full-color images (i.e. no black-and-white, no sepia-tone, no filters). The recommended width is 1600px.

In-Context Images

In-context images are used to help support surrounding information on the page with visual context. Don’t add them unless they are relevant and improve the content. Extraneous imagery is distracting and can even confuse users.

Photo example
f

Photos of People

Photos of people should be candid and feel authentic. Avoid using posed photos or photos where people are looking directly into the camera, as these feel staged.

Photo example
f

Crediting Images

Include credits with the image if it is being sourced (with permission).

Portrait Images

Portraits of staff are used on certain pages, such as the staff directory. The recommended aspect ratio for portraits is 1:1. Always use a well-lit portrait with the subject’s face in the center of the image and nothing distracting in the background. Avoid using selfies!

General Guidelines and Sourcing

Here are some tips to follow when selecting and using imagery for the Harvard Library website:

  • Never use clip art.
  • Use large enough images so they appear sharp — not pixelated — at every breakpoint and on all devices.
  • Recommended file types are .jpgs and .pngs. Avoid .tifs and .gifs.
  • Make sure to follow proper accessibility guidelines for photography. 
  • Stock imagery should be used sparingly. Try not to use it at all, but if needed www.pixabay.com and www.pexels.com are good resources for royalty-free photos that are free to use.

Grid System

The desktop grid for the Harvard Library website is made up of 12 columns and is 1410px wide.

Pages can contain a number of layouts, as shown below. On smaller breakpoints, content begins to stack. At mobile sizes, all content is stacked and has a 20px gutter on the left and right side, with the exception of full-width bleed components, which touch the left and right edge.

Note that this is just a guide. Some components within our design system are edge cases and do not fit perfectly into the columns within the grid. See the grid in action on our Pattern Lab environment.

Grid System

Accessibility

Harvard Library must comply with the WCAG-AA web-standard. For design purposes, the following must be met at a minimum, though there may be other applicable guidelines.

Contrast

Here are some tips to follow when selecting and using imagery for the Harvard Library website:

  • For font sizes under 18 point (or 14 points if bold) contrast must be a minimum of 4.5:1
  • For font sizes greater than 18 points (or 14 points if bold) contrast must be a minimum of 3:1

Images and Other Non-Text Content

Here are some tips to follow when selecting and using imagery for the Harvard Library website:

  • All non-text content must have a text alternative on the page that displays the same information, for example:
    • Include alt tags or aria labels on all images that must describe what is happening within the image
    • In the event an image is purely decorative in nature, the alt tag must be present but should be left blank
    • Note that items such as stock photography or landscapes are not considered purely decorative and must have the appropriate descriptors
  • Include transcriptions of video or closed captioning
ICONOGRAPHY

Note that iconography is a special type of image content. 

  • Current guidelines display all icons with a label underneath them
  • If this guideline is followed then the alt tag should be left empty (but it should still exist)
  • If the label is removed then an alt tag with proper information must be applied

Color

Color cannot be the only means of displaying information. Additional items such as a label, higher contrast or another visual cue must be used. 

Links

Here are some tips to follow when selecting and using links on the Harvard Library website:

  • The purpose of a link can be determined from the link text alone or or from the text combined with programmatically determined content
    • The largest errors usually found here are on article preview links or similar instances where there may be multiple links on a page stating “read more” or other similar repeatable text. This should be avoided. 
  • Additionally links that are not links but items such as files, e-mail to links and phone numbers should be clearly labeled as such
  • More about creating helpful hyperlinks can be found in the Harvard Library writing guide

Rich Text Editors

  • These should be used sparingly across the site. Rich text editors have the potential to easily break 508c compliance as many of the programmatic failsafes that exist will not happen within a rich text editor
  • If a rich text editor is used, the content author needs to be sure to follow good programming guidelines if using HTML (such as semantic markup and using appropriate labels)
  • Additional focus also needs to be taken on headings, labels and other items to guarantee an adherence to the page's navigability

Headings

Headings must be hierarchical and properly nested (all h2’s within an h1, etc.) so as to maintain proper navigability for low or non-sighted users.

Tables

The current tables as defined in components are accessible. However, these tables must be used appropriately in order to remain so. The following rules must be adhered to:

  • Only use tables for tabular data (don’t use tables for styling purposes)
  • All labels within a table must be next to the data they are labeling (the current examples adhere to this pattern)

Accessibility Checkers

Note that the following accessibility checkers will only catch programmatic issues such as missing alt tags or improper contrast ratios. Many accessibility errors can only be caught by humans and hence online checkers should only be one part of the confirmation process.

Resources and Guidelines

Generally speaking, the rules above do not encompass the entirety of all accessibility considerations on the site and additional information may be necessary. Further resources can be found here: