[Company Name] Brand Guide
Branding – Logo
Primary & Reversed
Branding – Colors
Primary
Division Specific Colors
#03783c
Good News Green
#3378cd
Story Submission Blue
#f73d37
Advertise Red
#ffe937
Accent Yellow
CROSS FUNCTIONAL COLORS
Black
WHITE
Branding – Colors
Secondary
Division Specific Colors
#41c578
Good News Light Green
#6da5ee
Story Submission Light Blue
#f69492
Advertise Light Red
#fcef84
Accent LIGHT Yellow
Typography – Fonts and Sizing
Heading Hierarchy
Heading 1 – h1
Font-Family: ivypresto-display, serif
Font-Weight: 400
Font-Size: 50px
Color: #000000 or #ffffff
Line-height: 1.25
Heading 2 – h2
Font-Family: ivypresto-display, serif
Font-Weight: 400
Font-Size: 40px
Color: #000000 or #ffffff
Line-height: 1.25
Heading 3 – h3
Font-Family: ivypresto-display, serif
Font-Weight: 400
Font-Size: 30px
Color: #000000 or #ffffff
Line-height: 1.25
Heading 4 – h4
Font-Family: ivypresto-display, serif
Font-Weight: 400
Font-Size: 20px
Color: #000000 or #ffffff
Line-height: 1.25
Body Copy and Callouts
Body Copy – p
Font-Family: proxima-nova, sans-serif
Font-Weight: variable
Font-Size: 18px
Color: #000000 or #ffffff
Line-height: 1.5
Pre-Header Callout – p
Font-Family: proxima-nova, sans-serif
Font-Weight: variable
Font-Size: 18px
Color: #000000 or #ffffff
Line-height: 1.5
Border-Bottom: 3px Solid #000000
Must be a text module with a bottom border and use with the border module. Example below:
CALL OUTS ALL CAPS TOO
Buttons
First – Main Button
First – Secondary Button
Second – Main Button
Second – Secondary Button
Components
Illustrations
Use illustrations with purpose and to give the page a little life. Do not overuse or use in areas where there is a background image. The illustrations should be used in the corners of page sections to “illustrate” what the context of the section is speaking to. Below are a few examples to get you started but please only use illustrations from this library: GWENS GRAPHIC STUDIO
