Style Guide


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.

This is the global font used on the site


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

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


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

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


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

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


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

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


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

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.


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

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


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

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.


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

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


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.


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


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


  • 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
Background Colors

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

Light Color



Blue Gradient Color

Orange Gradient Color


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


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

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


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.


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


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


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