University of Iowa
It is important to create a seamless user experience for our audiences as they navigate university websites. The following guidelines should be followed when developing official university web pages

Accessibility

University of Iowa requires that all websites and content published after Oct. 31, 2011 conform to the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG), version 2.0, Level AA.

See the full policy.

Brand bar

All official university web pages—including college, departmental, and unit pages—are required to use the official branding bar, which links back to uiowa.edu and includes the logo in gold on black, a site search, and space for one or two optional links. The brand bar is 40px high and has been developed with responsive styling. It is implemented on this site.

Drupal

For Drupal-based websites, a module is available that will place the branding bar on your site with no need to input code manually. More information about this module can be found on the Github README.

Other sites/applications

A Github repo is available with assets and instructions on how to implement the brand bar in web applications and non-Drupal sites.

Brand bar
Brand bar elements: the University of Iowa logo links to uiowa.edu, one or two optional links, site search

Title format

Unit names should display below the brand bar as plain text and be styled using CSS/HTML.

Logo lockups should not appear in the header of a website or be used for web page titles. (It is acceptable to use a unit-level logo lockup in the footer of a website instead.) Unique wordmark styling of unit names is not permitted. 

Title format options
Plain text titles, styled using CSS/HTML

Fonts

Gotham, Whitney, Sentinel, and Archer are available through a university-wide web license. At this time, the Office of Strategic Communication is able to provide a university-wide license for these fonts (for web use only). There is no charge to use them on any site or application under uiowa.edu.

  • For information about how to implement the fonts on your site/application, visit the Using the Shared Fonts page.
  • The brand site Typography page provides additional font guidelines.

 

Icons

Font Awesome is an open-source library of 600+ vector icons that are easily deployed in website design. They can be sized and colored with CSS just like typographic fonts. To search and view all of the available icons, review the Font Awesome icon library. Don’t forget to use Font Awesome’s accessibility features so your icons work for as many people as possible. 

Frequently used icons

Font Awesome icon examples
​​​​​

Color palette

Use of color must be consistent across all university websites. Websites should use the University of Iowa primary colors—black and gold, supported by gray tones, ranging in value from dark to light gray.

  • The primary gold for the University of Iowa is the spot color PMS 116 C. For web and digital platforms, use the recommended HEX value of #FFCD00.
  • Consider using gold for rules, borders, backgrounds with black text, and as text on black backgrounds.
  • Do not use gold text on a white background because it does not pass color-contrast recommendations for accessibility.

Secondary colors

The official secondary color palette is currently under review. During this process, university communications may use colors that complement the official black and gold, provided that combined secondary values do not exceed 20 percent of the total color palette of any design.

Secondary colors should also provide sufficient contrast between background and foreground elements to ensure accessibility for low-vision and color-blind users. Tools such as WebAim Color Contrast Checker are available for confirming color accessibility. 

Hyperlinks should be recognizable and stand out from the body content of the page. The Office of Strategic Communication recommends hyperlink text, when displayed on a white background, use HEX #378093 in a slightly increased font weight.

    HEX ffcd00 swatch
    HEX #FFCD00
    HEX 000000 swatch
    HEX #000000
    HEX 333333 swatch
    HEX #333333
    HEX 7F7F7F swatch
    HEX #7F7F7F
    HEX #F8F8F8 swatch
    HEX #F8F8F8
    HEX #378093 swatch
    HEX #378093

    Footer

    The following components are recommended in every footer and shown in the examples below: UI logo or unit-specific lockup, address block, additional links that are relevant to most users, and social media icons. 

    Footer sample
    Footer sample with UI logo, address block, links, and social media icons
    Footer sample with lockup
    Footer sample with unit-specific lockup, address block, links, and social media icons

    Questions? Contact osc-brand@uiowa.edu.