Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Pre-Headline

Pill

Paragraph text looks like this. It might be short. It might be long. Paragraph text looks like this. It might be short. It might be long. Paragraph text looks like this. It might be short. It might be long. Paragraph text looks like this. It might be short. It might be long. Here is what a link looks like.

This is the blockquote.
Blockquote citation

Buttons

Primary Button Secondary Button

Colors

Text

Text Link

Link Hover

Text Lite

Text Lite Hover

Headline

Headline Hover

Button

Button Hover

Background Body

Background Dark

Background Lite

Primary Accent

Secondary Accent

White

Form

Color Combinations

Background Text	White Text #FFFFFF	Primary Accent #226A99	Link Hover #143E59	Secondary Accent #FFD52B	Light Text #525252	Light Text Hover #707070	Light Background #EBEBEB	Dark Background #333333	“Black” #020609
Background – Body #FFFFFF		Text AA 5.8	Text AAA 11.2	Text DNP 1.4	Text AAA 7.8	Text AA 4.9	Text DNP 1.1	Text AAA 12.6	Text AAA 20
Primary Accent #226A99	Text AA 5.8		Text DNP 1.9	Text AA18 4.1	Text DNP 1.3	Text DNP 1.1	Text AA 4.9	Text DNP 2.1	Text AA18 3.4
Secondary Accent #FFD52B	Text DNP 1.4	Text AA18 4.1	Text AAA 7.9		Text AA 5.5	Text AA18 3.4	Text DNP 1.1	Text AAA 8.9	Text AAA 14.3
Light Background #F2F2F2	Text DNP 1.1	Text AA 5.2	Text AAA 10	Text DNP 1.2	Text AA 6.9	Text AA18 4.4	Text DNP 1	Text AAA 11.2	Text AAA 18.1
Dark Background #363636	Text AAA 12	Text DNP 2	Text DNP 1	Text AAA 8.5	Text DNP 1.5	Text DNP 2.4	Text AAA 10	Text DNP 1	Text DNP 1.6
“Black” #020609	Text AAA 20	Text AA18 3.4	Text DNP 1.8	Text AAA 14.3	Text DNP 2.6	Text AA18 4.1	Text AAA 17	Text DNP 1.6
AAA Pass, AAA (7+) AA Pass, AA (4.5+) AA18 Pass, Large Text Only (3+) DNP Does Not Pass About WCAG 2.0 contrast

Style Guide