Pasadena City College, Home of the PCC Lancers

Style Guide

Typefaces & Colors






PCC fonts for printed or published documents include Optima® (used in headings, logo etc.).
You can purchase Optima® from the Adobe Web site.This website link creates another browser windowClick here to purchase Optima® from Adobe.

The Pasadena City College web site will use a san serif font (Verdana, Arial, Helvetica, Georgia ) for body. These fonts are universal in almost all operating systems. If you do not have these typefaces, your machine will look at the nearest type family. A cascading style sheet (.css) for PCC default pages has been created.


Make sure your color choices have good value contract. Many visually impaired do not see all colors or see colors differently. For instance, red is often not easily recognized and our campus color is a deep red. We switched from using red in our background and link color to more visible colors like navy blue, black and dark green on a white background.

Don't use color as the only element to determine navigation or button choices. Make sure your link and visited link colors can be differentiated to a color impaired viewer. Make sure that you don't rely on color alone to indicate links. Some sites use the "decoration: none" style classification to remove the underline on links for a cleaner look- don't! The underline denoting links is important to inexperienced users and those with cognitive impairments.

This website link creates another browser window(Checkpoint 2.2 [Priority 3] - [WCAG 1.0]) - Tests the color attributes of elements for visibility
This website link creates another browser windowVischeck Software - checking how a website or images would look like to people with color-blindness.

Where it's used: RGB Color Combination Hex Color Combo
PCC Cardinal
Heading Level 3
Link hovers
R:153  G:0  B:0


Nav Arrows
Active links
R:255  G:204  B:0 #FFCC00
Department Banner R:255 G:255 B:255 #FFCC66
Sub Title

R:200 G:136 B:19


Department Title

R:123 G:0 B:204


Heading Level 1

R:78  G:122  B:204


Body Text

R:0  G:0  B:0


Navigation Head

R:51  G:51  B:51



R:55 G:55 B:55



R:102  G:102  B:102



R:153  G:153  B:153



R:204  G:204  B:204


  R:238  G:238  B:238 #EEEEEE

R:245 G:245 B:245


Background R:253 G:253 B:253 #FDFDFD

R:255  G:255  B:255



Acrobat PDF logoThis information is in PDF format. The freely available Adobe® Acrobat® Reader is required. To download a free copy click here.