Skip to main content

Web Brand Styles and Tips

Sample Font Hierarchy 

Brand Voice Header - WVU Shout
New Brand Alt Header (Testing)

Page name or generic Header - h1

In page Subheader - subtitle-2 + h3

Label or 3rd Header

NAME Person | Title or position

Big numbers 100%

Web body Copy - Helvetica Neue LT Roman

Print body Copy - Iowan Old Style


Messaging



Elements




CSS classes for this site

Font Styles

iowan-old-style
hnlt-roman
hnlt-light
hnlt-bold
hnlt-black
hnlt-black-italic
hnlt-black-cond
hnlt-cond

Component Styles

wvu-shout
subtitle-2
be-shout
be-label
caption
be-subhead

Text Colors

text-white
text-be-lite-gray
text-be-med-gray
text-be-dark-gray
text-be-darkest-gray
text-be-black
text-be-dark-green
text-be-navy
text-be-blue
text-be-cyan

Backgrounds

bg-white
bg-grey
bg-dark
bg-be-lite-gray
bg-be-med-gray
bg-be-dark-gray
bg-be-darkest-gray
bg-be-black
bg-be-dark-green
bg-be-navy
bg-be-blue
bg-be-cyan

Light-leaks

Should be placed on outer divs. Use 'unset' to remove background color.

light-leak-cyan
light-leak-magenta
light-leak-lemon
light-leak-magenta-gold

Gradients

You can use top, left, bottom, and right with any of the below colors. Combine with background colors or photos on an inner div.

gradient-wvu-blue-left
gradient-wvu-black-top
gradient-wvu-light-blue-right