Skip Navigation
OU Web CommunicationsThe University of Oklahoma home pagelink to Web Communications homepage
Web Communications

Design Considerations

Color

The University of Oklahoma’s official colors are Pantone 201 (#B30838) and Pantone 468 (#EEE1C5). The official colors look great in print; however, they do not translate well to the screen. Because of this, we recommend Crimson (#4F1315) and Cream (#FDF9D8) be used in their places.

 

Recommended Web Crimson and Cream    

#4F1315
 
#FDF9D8


Accent Colors

These colors work well as accents to Crimson and Cream.

Recommended Accent Colors      
 
#323232
#630D0D
 
#A47B4F
 
#9A9798
 
#7EAC41
 
#C69C6D
 
#96CDED
 
#E9E9E9


Colors to Avoid

Please refrain from using the color orange in your designs. Orange is one of the official colors of Oklahoma State University and burnt orange is one of the official colors of the University of Texas.

Colors to Avoid    

#FF9900
 
#FF6600
 
#CC6633


Font Recommendations

Recommended fonts should be purchased by departments and colleges as needed. While most systems come with substitutes, Georgia and Verdana, Garamond Pro and Helvetica can be purchased from http://www.adobe.com/type/


OU Marks for Web Use

When included, the official interlocking OU logo with inclusion of the registered mark ® should appear in all browser tabs and alone in URL address bars (favicons).


  • The OU logo may appear in crimson, black or white.
  • The logo should never be altered, animated or appear in any other color.
  • Any time an OU logo displayed on a page is equal or larger in font size than the department logo, it must link back to the OU home page.
ou logos not for use

The Seal

The OU seal, also a registered trademark of the University, is generally reserved for official University documents and is discouraged for use on most sites. It must be approved by the University’s Trademark Administration Committee before being used on pages. Care should always be taken when displaying the seal to maintain its integrity. The seal must never be animated or written over and should always be displayed at the highest quality. It must not be used as a background image for any website.


Global Navigation

All OU websites must include the global navigation bar with a link to OU’s home page at the top of every page.

 

The global navigation bar provides users an easy way to get to navigate selected  pages of the OU Website.

 

Any alterations to the Global Navigation bar must be approved by Web Communications, Marketing and New Media.

 

Installation Directions for OU Global Header

Step One

Download the zip file containing the OU global header and install it in your parent directory.

Step Two

Place the code snippet below on the line directly BELOW the opening <body> tag.

<div class="globalheader">
    <div class="globalheader-wrapper">
        <ul>
            <li><a class="tip home" href="http://www.ou.edu/web.html" alt="OU Home link"><span>OU Homepage</span></a></li>
            <li><a class="tip search" href="http://www.ou.edu/content/ousearch.html" alt="OU Search link"><span>Search OU</span></a></li>
            <li><a class="tip social" href="http://www.ou.edu/web/socialmediadirectory.html" alt="OU Social Media link"><span>OU Social Media</span></a></li>
            <li class="wordmark">The University of Oklahoma</li>
        </ul>
        <div style="clear:both;"></div>
     </div>
</div>

Step Three

Place the code snippet below on the line directly ABOVE the closing </head> tag.

<link rel="stylesheet" type="text/css" media="all" href="gloabalheader.css" />
<style type="text/css">.globalheader-wrapper { width:980px; }</style>

Step Four

The default width of the header is 980px. If your site's width is something other than that, edit the line below in your header section.

<style type="text/css">.globalheader-wrapper { width:980px; }</style>

Footer

The following information is required in the footer:

  • Last updated date with address, phone number and email address for the department.
  • Links to the accessibility, sustainability, HIPPA, OU job search, policies, legal notices, copyrights.
  • Optional: links to department social media accounts
  • Format and design should follow the design seen below (example: go2.ou.edu)

footer