Phoenix College Web Style Guide

Colors

 

Primary and Secondary Colors

 

Primary and Secondary Colors

PC Primary Color

Primary

PC Blue
#00305d

PC Secondary Color

Secondary

PC Gold
#ffc845

Neutrals

Neutrals

 

Gray 500

Gray 500

#666666

Gray 400

Gray 400

#999999

Gray 300

Gray 300

#cccccc

Gray 200

Gray 200

#e0e0e0

Gray 100

Gray 100

#f2f2f2

Other Colors

Other Colors

 

Text and Menus Gray

Text and Menus

Gray
#404040

Warm Gray

News and Events

Warm Gray
#7a756c

Fonts

Aa
Roboto

Light 300
Light 300 Italic
Regular 400
Regular 400 Italic
Medium 500
Medium 500 Italic
Bold 700
Bold 700 Italic
Black 900

 

FONT STYLES

Header 1

Roboto, Medium 500, 32px (2em)

Header 2

Roboto, Medium 500, 28px (1.75em)

Header 3

Roboto, Medium 500, 24px (1.5em)

Header 4

Roboto, Medium 500, 20px (1.25em)

Hero
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.

Title: Roboto, Bold 700, 4.75em      Subtitle: Roboto, Regular 400, 1.4em

 

Header 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing

 

Large Intro Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Roboto, Regular 400, 24px (1.5em)       Add class="lead" for large intro text under title

 

Paragraph Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Roboto, Regular 400, 16px (1em)

UI Elements

 

UI Elements

UTILITY NAVIGATION

UTILITY NAVIGATION

PC Utility Nav

Bar Color: college-secondary, light, dark
Text: Roboto, Regular 400, 13px (.750em), color: #ffffff
Buttons: college-primary, college-secondary, light, dark

 

 

MAIN NAVIGATION

MAIN NAVIGATION

PC Main Navigation

 

Bar Color: college-primary #00305d
Text: Roboto, Medium 500, 20px (1.120em), color: #ffffff
Hover: 15% more than #00305d
Dropdown Text: Roboto, Regular 400, 16px (1em), color: #404040
Dropdown Background Color: #f2f2f2
Dropdown Hover Background Color: #e0e0e0

 

 

Buttons

PRIMARY BUTTON

Text: Roboto, Regular 400, 16px (1em), color: #ffffff    
Button Color: #00305d
Button Hover: 15% more than #00305d

 

 

SECONDARY BUTTON

Text: Roboto, Regular 400, 16px (1em), color: #404040    
Button Color: #ffc845
Button Hover: 15% more than #ffc845

 

 

SHARED BUTTON

Text: Roboto, Regular 400, 16px (1em), color: #ffffff 
Button Color: #0171bc  
Button Hover: 20% more than #0171bc  

Used on Paragraph Bundles for Cards and Image and CTA

 

 

Secondary Navigation

SECONDARY NAVIGATION

 

  • Example Link 1
  • Example Link 2
  • Example Link 3
    • Sub Example Link 1
    • Sub Example Link 2
  • Example Link 4
  • Example Link 5
  • Example Link 6

Text: Roboto, Medium 500, 16 px (1.000em), color: #404040
Text Hover: Roboto, Medium 500, 16 px (1.000em), color: #0171bc, underline: 1px #0171bc
Text Active State: Roboto, Medium 500, 16 px (1.000em), color: #0171bc, underline: 1px #0171bc
Border-Bottom: 1px, #cccccc
Border-Left: 1px, #cccccc
Border-Right: 1px, #cccccc
Border-Top: 6px, #00305d

 

 

Page Elements

 

Page Elements

Frontpage Feature

FRONTPAGE FEATURE

Frontpage Feature

 

Home Feature Size: 1600px x 550px  
Home Large Text: Roboto, Bold 700, 4.75em, color: #ffffff, text-shadow: 0px 0.5px 5px #000000 (0, 0, 0, 0.25), character count: 25 max  
Home Smaller Text: Roboto, Regular 400, 1.4em, color: #ffffff, character count: 40 max  
Button: Roboto, Regular 400, 16px (1em), color: #ffffff, color: #0171bc, hover: 20% more than #0171bc

 

 

Landing Page

LANDING PAGE

Landing Page

 

Landing Page Hero Size: 1600px x 400px  
Large Text: Roboto, Bold 700, 4.75em, color: #ffffff, text-shadow: 0px 0.5px 5px #000000 (0, 0, 0, 0.25), character count: 25 max  
Smaller Text: Roboto, Regular 400, 1.4em, color: #ffffff, character count: 40 max  
Button: Roboto, Regular 400, 16px (1em), color: #ffffff, color: ##0171bc, hover: 20% more than ##0171bc

 

 

Banner Image

BANNER IMAGE

Banner Image Example

 

Banner Image Size: 1600px x 225px

 

 

Promo

PROMO / QUICK LINKS

Promo Links Menu Style: CFW3

Menu Style: CFW3

 

Promo Links Menu Style: CFW2

Menu Style: CFW2

 

 

Live Paragraph Bundles and Icon Library