Website Colors

Primary

$pc Headers, card overlays

Secondary

$sc Callouts, CTA bands

Tertiary

$tc Buttons, accent stripe

Copy

$cc Body copy

Very Light Gray

$vlgy Near-white backgrounds

Light / Khaki

$lgy Section backgrounds

Medium Gray

$mgy Muted text, borders

Dark Gray

$dgy Near-black

White

$white True white

Black

$black True black

Website Fonts

Paragraph / Body

$pFont 300–800, no italics — italic text is synthesized

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

0123456789 & ? ! @ # $ %

300 — The quick brown fox

400 — The quick brown fox

500 — The quick brown fox

600 — The quick brown fox

700 — The quick brown fox

800 — The quick brown fox

Heading

$hFont 100–900, has italics

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

0123456789 & ? ! @ # $ %

100 — The quick brown fox

100 — The quick brown fox italic

200 — The quick brown fox

200 — The quick brown fox italic

300 — The quick brown fox

300 — The quick brown fox italic

400 — The quick brown fox

400 — The quick brown fox italic

500 — The quick brown fox

500 — The quick brown fox italic

600 — The quick brown fox

600 — The quick brown fox italic

700 — The quick brown fox

700 — The quick brown fox italic

800 — The quick brown fox

800 — The quick brown fox italic

900 — The quick brown fox

900 — The quick brown fox italic

Display

$dFont 100–900, has italics

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

0123456789 & ? ! @ # $ %

100 — The quick brown fox

100 — The quick brown fox italic

200 — The quick brown fox

200 — The quick brown fox italic

300 — The quick brown fox

300 — The quick brown fox italic

400 — The quick brown fox

400 — The quick brown fox italic

500 — The quick brown fox

500 — The quick brown fox italic

600 — The quick brown fox

600 — The quick brown fox italic

700 — The quick brown fox

700 — The quick brown fox italic

800 — The quick brown fox

800 — The quick brown fox italic

900 — The quick brown fox

900 — The quick brown fox italic

Every Page has 1 h1. For h2-h6, there can be many

Paragraph is at least 16px

a - Linked Text

strong - Bold Text

italic - Italic Text

This is a Primary Button This is a Secondary Button This is a Outline Button

Display sizes are purely decorative. They should be for heros or call to actions, but SHOULD NOT be used for headers, page titles, or anything important to the content

D1 - Display Heading
D2 - Display Heading
D3 - Display Heading
D4 - Display Heading
D5 - Display Heading
D6 - Display Heading

h1 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

This is a Link This is a Primary Button This is a Secondary Button

h2 - Nullam id dolor id nibh ultricies vehicula ut id elit.

This is a List.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Maecenas faucibus mollis interdum.
- Donec sed odio dui.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Maecenas sed diam eget risus varius blandit sit amet non magna.

h3 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Maecenas faucibus mollis interdum.
1. Donec sed odio dui.
2. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Maecenas sed diam eget risus varius blandit sit amet non magna.

h4 - Nullam id dolor id nibh ultricies vehicula ut id elit.

h5 - Nullam id dolor id nibh ultricies vehicula ut id elit.

h6 - Nullam id dolor id nibh ultricies vehicula ut id elit.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.