Style Guide

Color: Bright 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 1

Paragraph 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Monospace. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

— Cicero

Button

Paragraph 2 description in a few words

Logos

LOGO BLUE #028BD4
LOGO GREEN #77C7B7

Site Colors

Logo black = #000, rgb(0,0,0)

Logo orange = #ff9a20, rgb(255,154,32)

Header and Body white background = #fff, rgb(255,255,255)

Footer dark background = #38383b, rgb(56,56,59)

Text links and buttons light blue = #008eff, rgb(0,140,255)

Blue

#0d76ca
rgb(13,118,202)

Green

#67bda8
rgb(103,189,168)

Orange

#ff9a20
rgb(255,154,32)

Dark Blue

#002060
rgb(0,33,96)

Fonts

Site-wide font = ITC-avant-garde-gothic-pro (use Avant Garde if this is not available)

px = pixels (96 per inch)

em = height of the letter “m” for that font

rem = height of the letter “m” relative to the root element for the browser

Read more about font sizes: https://www.w3schools.com/cssref/css_units.asp

**Margin top/bottom** = 1rem
**Margin left/right** = 0

**Border radius** = 10px
**Padding top/bottom** = 1em
**Padding left/right** = 1.67em

Style Guide

Color: Dark 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 1

Monospace. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

— Cicero

Button

Paragraph 2 description in a few words

Logos

LOGO BLUE #028BD4
LOGO GREEN #77C7B7

Site Colors

Logo black = #000, rgb(0,0,0)

Logo orange = #ff9a20, rgb(255,154,32)

Header and Body white background = #fff, rgb(255,255,255)

Footer dark background = #38383b, rgb(56,56,59)

Text links and buttons light blue = #008eff, rgb(0,140,255)

Blue

#0d76ca
rgb(13,118,202)

Green

#67bda8
rgb(103,189,168)

Orange

#ff9a20
rgb(255,154,32)

Dark Blue

#002060
rgb(0,33,96)

Fonts

Site-wide font = ITC-avant-garde-gothic-pro (use Avant Garde if this is not available)

px = pixels (96 per inch)

em = height of the letter “m” for that font

rem = height of the letter “m” relative to the root element for the browser

Read more about font sizes: https://www.w3schools.com/cssref/css_units.asp