Main Color

Edit

Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)

Green 100

Green 20

Green 40

Green 60

Green 80

Green 120

Accent colors

Edit

Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)

Pink 100

Pink 20

Pink 40

Pink 60

Pink 80

Pink 120

Purple 100

Purple 20

Purple 40

Purple 60

Purple 80

Purple 120

Orange 100

Orange 20

Orange 40

Orange 60

Orange 80

Orange 120

Grey scale

Edit

Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)

Black

White

Grey scale 5

Grey scale 10

Grey scale 20

Grey scale 40

Grey scale 60

Grey scale 80

Grey scale 95

Shadows

Edit

Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)

Popups

Edit

To edit the content of the popup, click the symbol and edit the texts / links from the Override panel

To edit the design of the popup, double-click the symbol to edit styling / elements

To use the popup on other pages, copy the Popup-Background-Wrap element from this page (including the symbol inside).

To edit the open animation, select the button below and edit the Open-Popup on the interactions panel.

Open Popup

Border Radius

Edit

Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)

Typography

Edit

To edit the font family and color used globally on all type elements edit, select the Body element and edit the Body (All Pages) class.

FONT
This is the global font used on the site

Edit

To edit the global H1 class edit the ALL H1 Heading class.

H1
This the main heading of the page, use only once, in the hero section.

Edit

To edit the global H2 class edit the ALL H2 Heading class.

H2
Use this as the heading for your different sections throughout the page.

Edit

To edit the global H3 class edit the ALL H3 Heading class.

H3
Use this for the titles for your different elements in your sections, like key benefits or services

Edit

To edit the global paragraph (P) class edit the ALL paragraphs class.

PARAGRAPHS
Use paragraphs any time that you have a text that more than just a few words, note that paragraphs need to be spaced between themselves clarify when one paragraph ends and another begins.

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Edit

To edit the Small Paragraph class edit the Large-P class.

LARGE PARAGRAPH
Some times you need to have a big paragraph, for example below your hero section to give context to the heading.

Edit

To edit the Small Paragraph class edit the Small-P class.

SMALL PARAGRAPH
Some times you want to have smaller text, for example when you mention terms and conditions, you can use this class whenever you need a low hierarchy text.

Edit

To edit the color of the light text class edit the Light-Text class.

LIGHT TEXT COLOR
Sometimes you'll need your text on a dark background, so you can apply this light text class to all your type elements

Edit

To edit the type elements nested inside a Rich Text element, select the text and edit the ALL Heading class nested inside Rich-Text

Make sure you enable the "Nest selector" option.

RICH TEXT

You'll be using Rich Text elements on dynamic content like blog posts. If you need to have headings and text styles different than the rest of your website, you can edit them here.

H1 Heading inside a Rich Text

H2 Heading inside a Rich Text

H3 Heading inside a Rich Text

This is a paragraph element inside a Rich Text

Edit

To make changes to the bullets size and left padding edit the List class.

LIST

When ever you have a list of points to make
It's best to use a list element
The SEO for your site will benefit

Buttons

Edit

To edit the size and padding of all buttons edit the Button class.

Specific changes to Ghost button, like background color & border should be made on the Ghost-Button class.

To edit the native text links, edit ALL Links class

Changes to the colors of inverse buttons can be done by editing the Inverse combo classes

Main Button

Text Link

FORMS

Edit

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Layout Elements

Edit

To edit the left-right padding on all sections, select the top section on this page and edit the Section-Padding class

SECTION PADDING

Each one of your sections should include the Section-Padding class, to make sure there's consistent padding and your elements are not touching the edges of the screen.

Edit

To edit the Max-Width of the container element, select the top container on this page, and edit the Container class

CONTAINER

Each section on the page should have a Container within keeping the main content centered within a maximum width to improve readability and consistency.

Style Guide

Green 100

Green 20

Green 40

Green 60

Green 80

Green 120

Pink 100

Pink 20

Pink 40

Pink 60

Pink 80

Pink 120

Purple 100

Purple 20

Purple 40

Purple 60

Purple 80

Purple 120

Orange 100

Orange 20

Orange 40

Orange 60

Orange 80

Orange 120

Black

White

Grey scale 5

Grey scale 10

Grey scale 20

Grey scale 40

Grey scale 60

Grey scale 80

Grey scale 95

This is your popup heading

FONTThis is the global font used on the site

H1This the main heading of the page, use only once, in the hero section.

H2Use this as the heading for your different sections throughout the page.

H3Use this for the titles for your different elements in your sections, like key benefits or services

LIGHT TEXT COLORSometimes you'll need your text on a dark background, so you can apply this light text class to all your type elements

RICH TEXT

H1 Heading inside a Rich Text

H2 Heading inside a Rich Text

H3 Heading inside a Rich Text

LIST

FONT
This is the global font used on the site

H1
This the main heading of the page, use only once, in the hero section.

H2
Use this as the heading for your different sections throughout the page.

H3
Use this for the titles for your different elements in your sections, like key benefits or services

LIGHT TEXT COLOR
Sometimes you'll need your text on a dark background, so you can apply this light text class to all your type elements