Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

noto-4xl-500

H1

noto-3xl-500

H2

noto-2xl-500

H3

noto-xl-500

H4
noto-large-500
H5
noto-base-500
H6
DM Sans-xl-300
H7
DM Sans-large-300
H8
DM Sans-base-500
H9
DM Mono-base-500
H9
DM MONO-small-500
H9

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 1

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 2

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 3
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
Text Here
Text Here
Button 1 - Light Backgrounds
Text Here
Text Here
Button 2 - Light Backgrounds
Text Here
Text Here
Button 3 - Dark Backgrounds
Text Here
Text Here
Button 4 - Dark Backgrounds
Text Here
Text Here
Button 4 - Dark Backgrounds
Text Here
Text Here
Button 4 - Dark Backgrounds

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Text colors

font color - dark
#1A2339
font color - Light
#FBF6ED
font color - Green
#4E5C4F

Main colors

BRAND COLOR - Linen
#FBF6ED
Brand Color - Iron Wood
#245e3b
BRAND COLOR - Field Stone
#4E5C4F
BRAND COLOR - Breakwater
#FBF6ED
BRAND COLOR - Deep Harbor
#1A2339
BRAND COLOR - Coastal Haze
#25507c
Brand Color - Gilded Grain
#c28e34

Neutral colors

White
#FFFFFF
DARK GREY
#9A9A9A
LIGHT GREY
#E9E9E9
Black
#1F2226

Blue Breakdown

BLUE - 100
#C5CFD7
Blue - 300
#587896
Blue - 500 (Deep Harbor)
#1A2339
Blue - 200 (Breakwater)
#8B9FAF
Blue - 400 (Coastal Haze)
#25507C

Warm Breakdown

Warm - 100 (LInen)
#FBF6ED
Warm - 300
#D7BE91
Warm - 500 (Gilded grain)
#A16908
Warm - 200
#E9DABF
Warm - 400
#C28E34

Green Breakdown

Green - 100
#B6C9BE
Green - 300 (Iron wood)
#245E3B
Green - 500
#1B2D22
Green - 200
#6D947C
Green - 400 (FIeld stone)
#274332
Text Here

Logo

These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

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.