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