Graphic Standards for Web Sites

Overview

Web sites published by academic and administrative units must adhere to Pitt online graphic standards. These standards ensure our sites properly represent the University's brand to audiences and provide a consistent and familiar user experience.

In addition to the graphic requirements, sites must follow W3C Web standards and best practices. This includes consistent use of semantic HTML, accessibility compliance with ADA section 503c, and adherence to best practices regarding usability, including responsive design, for handheld devices.

University Web Themes

It is strongly recommended units leverage one of the approved University graphic themes. While custom designs may be produced, all sites must meet Pitt's basic Web standards. University graphic themes serve as a great foundation. University Communications will consult with you on how you may add custom elements to extend your design when circumstances require.

Online Graphic Standards

University Header

The official Pitt logo must appear at the top of each page in the header element. The header may not be edited, resized, or include additional elements. It must include the correct margins and spacing. No other marks may appear above, adjacent to, or on the same horizontal plane as the University seal and signature. Attributes of the header include:

  • Official Web version of University seal and signature justified left. The display width for the seal and signature is 290px by 42px. 
  • Text links, in the approved style, may appear justified to the right. Among these links should appear a link to the University top page at www.pitt.edu.

Site Title/Logos

The title of the site must appear in the font Roboto. Unique unit logos are not permitted in the header space without permission from University Communications. Contact us if you feel you need a unique mark for your site. The site title may include two lines of text in order to accommodate a stacked title or the name of a parent unit. These must follow the appropriate size and spacing. 

Examples

Blue header element with one-line title and navigation (view full page example):


Blue header element with two-line title and navigation (view full page example):


White header element with one-line title and navigation (view full page example):

Fonts & Sizes

Page width should be responsive with a maximum width of 1,140 pixels for the content container. Appropriate margins and padding must be used. The approved typeface for all headers and body text is also Roboto. Sizes below are indicated in pixels, but using em units is acceptable. 

Pay close attention to the margins and padding. The appropriate amount of padding is necessary for readability.

Header Size and Margins
H1

font-size: 36px;
line-height: 1;
font-weight: 400;

margin-bottom: 20px;

H2

font-size: 25px;
line-height: 1;
font-weight: 400;

margin-top: 45px;*
margin-bottom: 20px;

H3

font-size: 22px;
line-height: 1;
font-weight: 400;

margin-top: 20px;
margin-bottom: 20px;

H4

font-size: 18px;
line-height: 1;
font-weight: 400;

margin-top: 20px;
margin-bottom: 20px;

*If beginning a page with an H2, no top margin should be applied.

Colors

Examples of appropriate use of color are demonstrated in the official graphic themes. University academic and administrative sites should not arbitrarily incorporate unique color palettes.

Background Colors:

  • Pitt Blue: #1c2957
  • Pitt Gold: #cdb87c
  • White
  • Grey: #e8e9ee
  • Tan: #f5f1e5

Accent Colors:

  • Pitt Blue: #1c2957
  • Pitt Gold: #cdb87c
  • White
  • Orange: #ff6600

Text Color:

  • Pitt Blue: #1c2957

Link Color, Visited Link Color:

  • Blue: #096AC8 (light background)
  • Yellow: #ffff99 (dark background)
  • Text-decoration: none

 

Footer

Every page should include a footer element. The footer may be kept simple or include links to forms, popular resources, social media, and other destinations. When the use of a unique logo is required, it may appear in the footer. See examples of appropriate footer styles here.

At a minimum the footer should contain:

  • Official Unit name
  • Street address
  • E-mail address
  • Phone Number
  • Link to Web feedback form
  • Revision date