Style Guide
Headings and Text
Example of Heading One
Bold, 2.25em
This is a Heading Two
Semi-bold, 1.7em
What a Heading Three Looks Like
Semi-bold, 1.35em
And a Heading Four
Regular italic, 1.1em
Here is a paragraph text example. Your content goes here. This is what a text link looks like. When it is necessary, these are italics, and this is some bolded text.
Regular, 1em
Button
Blockquote
Here’s a fantastic quote from a great person. Arcu odio ut sem nulla pharetra diam sit amet nisl. At consectetur lorem donec massa sapien faucibus.
Name
Location
Fonts
Lato regular
Lato regular italic
Lato semi-bold
Lato semi-bold italic
Lato bold
Lato bold italic
Body = 20px
20px = 1em
Original Palette
Gray
#6e7287
Bright Green
#9ac45d
Yellow
#fcb94c
Blue
#24408e
Aqua Green
#00a99c
Light Blue
#33a3dc
Medium Blue
#0078b9
Orange
#f26522
Purple
#6d68af
(Dark Brown)
(#6a5e53)
(Light Brown)
(#a47054)
Red (topic card)
#a8333b
Dark Green (topic card)
#00652e
Revised Colors (for accessibility)
Black #000000
passes AAA
paragraphs
Aqua Green #01857b
passes AAA for headings (large)
h1, h3
Gray #4c4f5f
passes AAA
h2, h4, text link background hover state
Light Orange (peach) #ffebe2
passes AAA
text link and CTA background normal state