Skip to content

Visual Requirements

These foundational visual template requirements may be updated periodically.

Individual colleges, departments, or units may establish additional branding and design requirements. However, additional requirements may not supersede the requirements outlined here.

Please note that if you are using the HTML templates or WordPress theme “out of the box,” this work has already been done for you. The detailed discussion of template requirements found here is primarily intended to clarify the areas of the template that may not be modified in the course of customizing or interpreting the templates for custom CMS, third-party, or other web applications.

In addition to the requirements outlined below, university websites must conform to the university’s brand standards.

Mobile

1. The UT Identifier

The Power T icon block must appear in the upper left corner of the display. It must link to www.utk.edu.

Note: This is a special case use for the icon block, which may not be used as a stand-alone image elsewhere on your website.

2. The Unit Identifier 

As on desktop view, the unit identifier must be sans serif and Smokey gray. For mobile display, the type must be 18px high.

3. Off-canvas Navigation

Top-level navigation and the type-ahead box (if used) must be off-canvas and accessible by a clearly identifiable button/icon in the upper right of the screen. The Hill Template uses a “Find Page” button for this purpose.

4. The Contact Bar

The contact bar should appear below the content of your site and be bounded on the top by a six-pixel UT Orange (#FF8200) bar. As on desktop, the contact bar will contain contact information for your unit (name, address, main phone number, etc.).

5. The UT Footer 

The UT footer is situated directly beneath the contact bar and may not be modified in any way. It contains the “Big Orange. Big Ideas.” campaign graphic, pertinent location information, system identification, and general information links. Its background color is #f6f6f6.

mobile


Desktop: The Hill Template

1. The Big Orange ID Line
A six-pixel UT Orange (#ff8200) horizontal line must appear at the top of the screen on every page.

2. The UT Identifier
The centered university logo should appear in the upper left of all web pages and must link to www.utk.edu. This logo may not be altered or modified in any way (e.g., by adding unit identification).

3. The Unit Identifier
Font: The unit identifier must be sans serif. See the university typography standards for more information.

Color: The unit identifier must be Smokey gray (#58595B) See the university color standards for more information.

Size: The unit identifier type must be 39px high.

4. The Side Rail
The side rail contains the UT identifier, the type-ahead search filter (if applicable), and the top-level navigation of the website (“Give to UT” link is optional). It should be 30 percent of the overall content area width. Its background color must be #f6f6f6.

5. The Contact Bar
The contact bar separates your site content from footer information. It has a six-pixel top border of UT Orange (#ff8200). It must contain contact information for your unit (name, address, main phone number, etc.).

6. The UT Footer
The UT footer is situated directly beneath the contact bar and may not be modified in any way. It contains the “Big Orange. Big Ideas.” campaign graphic, pertinent location information, system identification, and general information links. Its background color must be #f6f6f6.

Front Page Example


Desktop: Full-Width Option

1. The Big Orange ID Line
A six-pixel UT Orange (#ff8200) horizontal line must appear at the top of the screen on every page.

2. The UT Identifier
The left-aligned university logo should appear in the upper left of all web pages and must link to www.utk.edu. This logo may not be altered or modified in any way (e.g., by adding unit identification).

3. The Unit Identifier
Font: The unit identifier must be sans serif. See the university typography standards for more information.

Color: The unit identifier must be Smokey gray (#58595B) See the university color standards for more information.

Size: The unit identifier type must be 39px high.

4. The Contact Bar
The contact bar separates your site content from footer information. It has a six-pixel top border of UT Orange (#ff8200). It must contain contact information for your unit (name, address, main phone number, etc.).

5. The UT Footer
The UT footer is situated directly beneath the contact bar and may not be modified in any way. It contains the “Big Orange. Big Ideas.” campaign graphic, pertinent location information, system identification, and general information links. Its background color must be #f6f6f6.

Please Note:

The Full-Width Option is intended for reference and implementation by advanced campus web designer/developers only. In addition to allowing use of full-width images, the Full-Width Option allows designers to draw from a variety of primary navigational schemes: vertical, horizontal, or mixed.

The Office of Communications & Marketing (OCM) will not be issuing a downloadable template or WordPress theme that specifically meets these visual requirements. 

To ensure that your website continues to meet overall brand, accessibility, and mobile requirements, please build time into your project schedule to allow for review by OCM prior to launching your new website.

Full Width example


Updated: 10/25/2016

The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.

Report an accessibility barrier