University of Southern California

USC Identity Guidelines

Mobile Web

For university-supported mobile apps and websites built specifically for mobile devices, a more compact version of the USC logo should be placed in the upper right corner. The logo should link to the USC homepage, or in the case of Mobile USC services, to the Mobile USC menu page. The size, position, color, and spacing of the logo should be as specified below.

USC logo graphic

The mobile web logo uses the primary monogram (shield + monogram). Its dimensions in the browser are 80 x 27 pixels, and the required minimum clear space surrounding it is 11 pixels on the top, bottom, and left sides, and 6 pixels on the right. The graphic size is 300 x 100 pixels, so when it is resized in the page, higher-resolution devices (e.g. retina display) can show more detail.

Download graphics

Approved colors

The background color behind the USC logo should be USC cardinal, black, or white. Note that the color specifications are different for printed materials, and only the screen versions should be used. Here are approved color combinations:

The background color behind the graphic may also be a subtle gradient of an approved color. In this case, the hue should remain constant and brightness should transition smoothly and no more than 20% from one end of the gradient to the other. For example, a gradient using a cardinal background could transition from #CC0000 to #990000 or from #990000 to #660000, but not from #CC0000 to #660000 (which is 50%).

For the sake of legibility, the USC logo should never be placed on photographic or patterned backgrounds.

Code sample



You may reuse the following Mobile USC header code to make your header look similar to the Photo Gallery screen above.

<link rel="stylesheet" href="http://mobile.usc.edu/shared.css" >
<div id="site_header">
<a href="http://www.usc.edu" id="usc_logo">USC</a>
<!--the following line is only necessary if you're displaying an icon-->
<a href="[URL]" id="app_icon"><img src="[ICON LOCATION]" alt="[SITE NAME]" /></a>
<h1 class="site_title"><a href="[URL]">[SITE NAME]</a></h1>
</div>

If you have questions, need help implementing the web identity standards or have special circumstances that prevent the identity standards from working on your mobile website, please contact USC Web Services at webhelp@usc.edu.

  • Reference links