Typography

Maintaining these variations of fonts, sizes, & colors on all branded items will ensure a consistent user experience and a strong visual hierarchy/flow.

If you edit styles here, they will change across the site

H1
Montserrat - Bold - 46px

Lorem ipsum dolor sit amet

H2
Montserrat - semi Bold - 38px

Lorem ipsum dolor sit amet

H3
Montserrat - normal - 28px

Lorem ipsum dolor sit amet

H4
Montserrat - Bold - 22px
Lorem ipsum dolor sit amet
H5
Montserrat - Bold - 15px
Lorem ipsum dolor sit amet
H6
Montserrat - normal - 11px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

PARAGRAPH
Karla - Normal - 16px - Black
Lorem ipsum dolor sit amet
BLOCK QUOTE
Karla - Normal - 20px - #184076
Lorem ipsum
TEXT LINK
Karla - Normal - 16px - #184076
Learn More
Learn More
BUTTONS
Navy #184076 - Pink ##ffa1b3

Color

These colors have been selected to create a tone that is a blend of fresh minimal(Whites & grays), professional (Navy), & fun/personal (pink).

Text colors

font color - dark
#333333
font color - Brand
#184076

Main colors

BRAND COLOR 1
#ffa1b3
BRAND COLOR 3
#f8f8ff
BRAND COLOR 2
#184076
BRAND COLOR 4
#ffffff

Neutral colors

LIGHT GREY 1
#f3f3f5
DARK GREY 1
#636363
LIGHT GREY 2
#aaaaaa
DARK GREY 2
#333333

Logo

These are the primary logos used on the whole site that can be downloaded at any time.

MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD

Components

These are a few example components.

Name
Email
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Tab 1
Tab 2
Tab 3

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.