Colors

Primary and Secondary Colors

Primary

GWCC Blue
#0032a1

Secondary

GWCC Red
#af282f

Neutrals

Gray 500

#666666

Gray 400

#999999

Gray 300

#cccccc

Gray 200

#e0e0e0

Gray 100

#f2f2f2

Other Colors

Text and Menus

Gray
#404040

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

UTILITY NAVIGATION

Utility Navigation

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

MAIN NAVIGATION

Main Navigation

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

PRIMARY BUTTON

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

SECONDARY BUTTON

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

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

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, #0032a1

Page Elements

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 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