Style Guide | UCLA School of Theater, Film and Television

This guide is a resource for anyone involved with official communications at the UCLA School of Theater, Film and Television, especially in regards to web, advertising, print collateral, marketing, e-mail and customer service.

In this area of the site, you will find official logos, style guidelines and standards, examples of common design elements (color, typography, etc.), downloadable code templates, and — over time — other additional resources.

About this Style Guide

This guide was created by Marketing Communications within UCLA School of Theater, Film and Television. For assistance regarding these resources, website development, and video production issues, contact:

Logos

Need our logo? Please help yourself, but we encourage you to also refer to UCLA's graphic identity usage guidelines.

Download All 8 Logo Options (PDF)

WIDE: Option 1 (300dpi JPG / Vector EPS), Option 2 (300dpi JPG / Vector EPS), Option 3 (300dpi JPG / Vector EPS), Option 4 (300dpi JPG / Vector EPS)
NARROW: Option 5 (300dpi JPG / Vector EPS), Option 6 (300dpi JPG / Vector EPS), Option 7 (300dpi JPG / Vector EPS), Option 8 (300dpi JPG / Vector EPS)

Colors

Tired of black and white? Please help yourself, but we encourage you to also refer to UCLA's color usage guidelines.

UCLA Blue
CMYK: 75-35-0-7
RGB: 83-104-149
Hex: #536895

UCLA Blue (inverse)
CMYK: 75-35-0-7
RGB: 83-104-149
Hex: #536895

UCLA / TFT Green with Black
CMYK: 42-0-75-0
RGB: 148-207-76
Hex: #ac6

UCLA / TFT Green with Black (inverse)
CMYK: 42-0-75-0
RGB: 148-207-76
Hex: #ac6

UCLA Gold
CMYK: 0-29-91-0
RGB: 254-187-54
Hex: #ffb300

UCLA Gold (inverse)
CMYK: 0-29-91-0
RGB: 254-187-54
Hex: #ffb300

UCLA / TFT Green with White
CMYK: 56-0-100-20
RGB: 89-150-25
Hex: #793

UCLA / TFT Green with White (inverse)
CMYK: 56-0-100-20
RGB: 89-150-25
Hex: #793

Code Template

Web sites developed for the School, departments, programs or other units are considered official web sites and should conform to these overall style guidelines. Using the official templates is recommended but not mandatory.

Last Modified: Thu Aug 20, 2009

Structural and User Interface Elements

Header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>[ Title Goes Here ] | UCLA School of Theater, Film and Television</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="robots" content="all" />
<meta name="copyright" content="2009" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="At UCLA the study of theater, film, television and digital media is integrated within a single professional school." />
<meta name="keywords" content="UCLA, UCLA Theater, UCLA Film, UCLA Television, UCLA Digital Media, UCLA Theater Department, UCLA Film Department, UCLA Theater School, UCLA Film School, theater, film, television, digital media, Los Angeles, California" />

<link rel="stylesheet" type="text/css" media="all" href="/css/grid.1219163150.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/design.1236375503.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/table.1210782218.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/navigation.1228261737.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/form.1236359682.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.1235502625.css" />

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/AC_OETags.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/toggle.js"></script>
<script type="text/javascript" src="/js/external.js"></script>

<script type="text/javascript" src="/js/hoverIntent.js"></script>
<script type="text/javascript" src="/js/bigIframe.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("ul.nav").superfish({
		hoverClass	: "sfHover",
		delay		: null,
		animation	: null,
		speed		: 1
	});
});
</script>

<link rel="shortcut icon" type="image/ico" href="http://www.tft.ucla.edu/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.xml" title="UCLA Theater, Film and Television" />
<link rel="alternate" type="application/rss+xml" title="News | UCLA School of Theater, Film and Television" href="http://www.tft.ucla.edu/feed/news" />
<link rel="alternate" type="application/rss+xml" title="Calendar | UCLA School of Theater, Film and Television" href="http://www.tft.ucla.edu/feed/calendar" />
<link rel="alternate" type="application/rss+xml" title="Profiles | UCLA School of Theater, Film and Television" href="http://www.tft.ucla.edu/feed/profiles" />
<link rel="alternate" type="application/rss+xml" title="Videos | UCLA School of Theater, Film and Television" href="http://www.tft.ucla.edu/feed/videos" />

</head>
<body>

<div id="doc" class="yui-t7">

<div id="searchbox"><form action="http://www.tft.ucla.edu/search/" id="cse-search-box"><div><input type="hidden" name="cx" value="012599643666343324422:apycu0himzm" /><input type="hidden" name="cof" value="FORID:9" /><input type="hidden" name="ie" value="UTF-8" /><input type="text" name="q" size="25" class="searchboxQuery" /><input type="image" name="sa" src="/img/action-search.1231353893.gif" value="Search" alt="Search" title="Search" /><a href="/contact/"><img src="/img/action-contact.1231353893.gif" title="Contact" alt="Contact" height="22" width="90" /></a></div></form><script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script></div>

<ul class="navigation"><li><a href="http://www.tft.ucla.edu/prospective">Prospective</a></li><li><a href="http://www.tft.ucla.edu/students">Students</a></li><li><a href="http://www.tft.ucla.edu/alumni">Alumni</a></li><li><a href="http://www.tft.ucla.edu/faculty">Faculty</a></li></ul></div>
<ul class="nav">
<li id="navSchool" ><a href="http://www.tft.ucla.edu/school/"><img src="http://www.tft.ucla.edu/img/area-school.gif" alt="School" width="180" height="48" /></a>
<ul>
<li><a href="http://www.tft.ucla.edu/calendar/">Calendar</a></li><li><a href="http://www.tft.ucla.edu/news/">News</a></li><li><a href="http://www.tft.ucla.edu/profiles/">Profiles</a></li><li><a href="http://www.tft.ucla.edu/videos/">Videos</a></li>
</ul></li><li id="navPrograms" ><a href="http://www.tft.ucla.edu/programs/"><img src="http://www.tft.ucla.edu/img/area-programs.gif" alt="Programs" width="180" height="48" /></a><ul style="width:160px; float:left;"><li class="highlight"><a class="highlight" href="#"><br/>Theater</a></li><li><a href="http://www.tft.ucla.edu/programs/acting/">Acting (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/design-production/">Design for Theater and Entertainment Media (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/theater-directing/">Directing (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/playwriting/">Playwriting (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/theater-studies/">Theater and Performance Studies (PhD)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/theater/">Theater (MA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/undergraduate-theater-minor/">Theater (Minor)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/undergraduate-theater/">Undergraduate Theater Program (BA)</a>
</li></ul><ul style="left:160px; width:160px; float:left;"><li class="highlight"><a class="highlight" href="#">Film, Television and<br/>Digital Media</a></li><li><a href="http://www.tft.ucla.edu/programs/animation/">Animation (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/cinema-media-studies/">Cinema &amp; Media Studies (MA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/cinema-media-studies-phd/">Cinema &amp; Media Studies (PhD)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/cinematography/">Cinematography (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/undergraduate-film-minor/">Film (Minor)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/mias/">Moving Image Archive Studies (MA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/producers/">Producers Program (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/film-production/">Production / Directing (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/filmprograms/">Non-Degree Professional Programs</a>
</li><li><a href="http://www.tft.ucla.edu/programs/screenwriting/">Screenwriting (MFA)</a>
</li><li><a href="http://www.tft.ucla.edu/programs/undergraduate-film/">Undergraduate Film, Television and Digital Media (BA)</a>
</li></ul><ul style="left:320px; width:160px; float:left;"><li class="highlight"><a class="highlight" href="#"><br/>Other</a></li><li><a href="http://www.tft.ucla.edu/programs/tft-courses-online/">Theater, Film and Television Courses Online</a>
</li><li><a href="http://www.tft.ucla.edu/programs/artsbridge/">ArtsBridge</a>
</li><li><a href="http://www.tft.ucla.edu/programs/summer-workshops/">TFT Summer Pre-College Workshops &amp; Conservatories</a>
</li><li><a href="http://www.tft.ucla.edu/programs/summer-institute/">Summer Acting and Performance Institute</a>
</li><li><a href="http://www.tft.ucla.edu/programs/filmprograms-summer/">Summer Non-Degree Professional Programs</a>
</li><li><a href="http://www.tft.ucla.edu/programs/summer-sessions-film/">Summer Sessions Film Courses</a>
</li><li><a href="http://www.tft.ucla.edu/programs/summer-sessions-theater/">Summer Sessions Theater Courses</a>
</li><li><a href="http://www.tft.ucla.edu/programs/summer-institute-producing/">Summer Institute in Motion Picture Producing</a>
</li></ul></li><li id="navInformation" ><a href="http://www.tft.ucla.edu/information/"><img src="http://www.tft.ucla.edu/img/area-information.gif" alt="Information" width="180" height="48" /></a><ul>
<li><a href="http://www.tft.ucla.edu/about/">About TFT</a></li>
<li><a href="http://www.tft.ucla.edu/admissions/">Admissions</a></li>
<li><a href="http://www.tft.ucla.edu/awards/">Awards</a></li>
<li><a href="http://www.tft.ucla.edu/contact/">Contact</a></li>
<li><a href="http://www.tft.ucla.edu/courses/">Courses</a></li>
<li><a href="http://www.tft.ucla.edu/departments/">Departments</a></li>
<li><a href="http://www.tft.ucla.edu/facilities/">Facilities</a></li>
<li><a href="http://www.tft.ucla.edu/faculty/">Faculty</a></li>
<li><a href="http://www.tft.ucla.edu/giving/">Giving</a></li>
<li><a href="http://www.tft.ucla.edu/internships/">Internships</a></li>
<li><a href="http://www.tft.ucla.edu/intranet/">Intranet</a></li>
</ul></li><li id="navDirectory" ><a href="http://www.tft.ucla.edu/directory/"><img src="http://www.tft.ucla.edu/img/area-directory.gif" alt="Creative Directory" width="180" height="48" /></a>
<ul>
<li><a href="http://www.tft.ucla.edu/directory/work/2009">This Year's Work</a></li>
<li><a href="http://www.tft.ucla.edu/directory/work/alumni">Select Alumni Work</a></li>
<li><a href="http://www.tft.ucla.edu/directory/work/faculty">Select Faculty Work</a></li>
<li><a href="http://www.tft.ucla.edu/directory/work/students">Select Student Work</a></li>
</ul></li></ul></div></div></div>

<div class="crumbs">
<ul class="navigation"><li><a href="http://www.tft.ucla.edu/" title="Home Page">HOME</a></li></ul>
</div>

H1 Header

Body

Footer

<div id="ft">

<div class="yui-gd">
<div class="yui-u first sidebar">
<div class="gutter">

<p><a href="http://www.tft.ucla.edu/" title="Back to Home Page"><strong>UCLA School of Theater, Film and Televison</strong></a><br/>
102 East Melnitz Hall, Los Angeles, CA, 90095<span class="amp"> | </span><a href="http://www.tft.ucla.edu/about/map/">Map</a><br/>
<a href="http://www.tft.ucla.edu/search/">Search</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/about/site/">About the Site</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/about/privacy/">Privacy Policy</a><br/>
&copy; 2009 UC Regents</p>

</div>

</div>
<div class="yui-u">
<div class="gutter">

<p><a href="http://www.tft.ucla.edu/school/" class="first">SCHOOL</a> &nbsp; <a href="http://www.tft.ucla.edu/calendar/">Calendar</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/profiles/">Profiles</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/news/">News</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/videos/">Videos</a><br/>

<a href="http://www.tft.ucla.edu/programs/" class="first">PROGRAMS</a> &nbsp; <a href="http://www.tft.ucla.edu/programs/tht">Programs in Theater</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/programs/ftvdm">Programs in Film, Television and Digital Media</a><br/>

<a href="http://www.tft.ucla.edu/information/" class="first">INFORMATION</a> &nbsp; <a href="http://www.tft.ucla.edu/about/">About TFT</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/admissions/">Admissions</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/contact/">Contact</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/courses/">Courses</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/facilities/">Facilities</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/faculty/">Faculty</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/giving/">Giving</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/intranet/">Intranet</a><br/>

<a href="http://www.tft.ucla.edu/directory/" class="first">CREATIVE DIRECTORY</a> &nbsp; <a href="http://www.tft.ucla.edu/directory/work/alumni/">Select Alumni Works</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/directory/work/faculty/">Select Faculty Works</a><span class="amp"> | </span><a href="http://www.tft.ucla.edu/directory/work/students/">Select Student Works</a><br/></p>

</div>

</div>
</div>
<br style="clear:both;" />

</div>

<br style="clear:both;" />
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2862055-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

</body>
</html>

Body Content with One Column

Example: One Column with Gutter

Column 1 Copy Goes Here.

Example: One Column without Gutter

Column 1 Copy Goes Here.

Body Content with Two Columns

Example: Two Column, Left Emphasis with Both Gutters

Example: Two Column, Left Emphasis with Left Gutter Only

Example: Two Column, Left Emphasis with Right Gutter Only

Example: Two Column, Right Emphasis with Both Gutter

Example: Two Column, Right Emphasis with Left Gutter Only

Example: Two Column, Right Emphasis with Right Gutter Only

Body Content with Three Columns

Example: Three Column with All Gutter

Example: Three Column with Left Gutter Only

Example: Three Column with Middle Gutter Only

Example: Three Column with Right Gutter Only

Body Content with Four Columns

Example: Four Column with First Left Gutter Only

Column 1 Copy Goes Here.

Column 2 Copy Goes Here.

Column 3 Copy Goes Here.

Example: Four Column with Second Left Gutter Only

Column 1 Copy Goes Here.

Column 2 Copy Goes Here.

Column 3 Copy Goes Here.

Example: Four Column with First Right Gutter Only

Column 1 Copy Goes Here.

Column 2 Copy Goes Here.

Column 3 Copy Goes Here.

Example: Four Column with Second Right Gutter Only

Column 1 Copy Goes Here.

Column 2 Copy Goes Here.

Column 3 Copy Goes Here.