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.

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

H1

This is a H2 heading
right here hello

H2

This is a h3 heading
right here hello

H3

Lorem ipsum dolor sit amet

H4
Lorem ipsum dolor sit amet
H5
Lorem ipsum dolor sit amet
H6

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

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 bigger

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 quote
bold text
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
Other call to actionCall to action
Button 1
View Project
Button 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.

Symbols

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.

orange-highlight-text
highlighted-number-orange

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

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 quote
bold text
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
How does it work?Book a demo
Button 1
How does it work?
Button 1
Book a demo
deactivated

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.

circles

These are a few circles that can be used behind images to give depth

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.

this is orange highlight text used to highlight numbers in use cases

orange-highlight-text
35%
highlighted-number-orange

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

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 quote
bold text
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
How does it work?Book a demo
Button 1
How does it work?
Button 1
Book a demo
deactivated

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.

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.

this is orange highlight text used to highlight numbers in use cases

orange-highlight-text
35%
highlighted-number-orange

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

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 quote
bold text
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
How does it work?Book a demo
Button 1
How does it work?
Button 1
Book a demo
deactivated

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.

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
#3e4044
font color t - primary purple
#b1b1b1
font color - light
#b1b1b1

Oranges

Dark orange
#3898ec
orange-1
#ff9913
orange-2
#13b1e8
orange-3
#00a1b2

Purples

purple
#3898ec
pruple-2
#ff9913
purple-3
#13b1e8
purple-4
#00a1b2

Cyans

cyan
#3898ec
cyan-2
#ff9913
cyan-3
#13b1e8

Neutral colors

background grey
#d7d7d7
Background white
#f4f4f4

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.

MazeMap logo
MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD