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.
All members of the USC family are welcome to explore the USC Graphic Identity Program.
Only USC faculty and staff (including student staff) with a USC-provided email account may download assets. The use of those assets is restricted to official university business in accordance with brand guidelines. Contact firstname.lastname@example.org for any questions.
How-to download our assets:
• Click to download the asset.
• You will be prompted to sign in to continue to Google Drive.
• Enter your USC email account (@usc.edu).
• You will then be prompted to login with your USC NetID (username) and password on USC Shibboleth.
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.
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.
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="https://mobile.usc.edu/shared.css" > <div id="site_header"> <a href="https://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 email@example.com.