Style Guide

Fonts

Titles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

If the text is short, you can use only "Underlined" class. You will need a container with the "Heading Wrapper" class to get an inline underline effect under a larger text, and also if you want to add margin between the title and what's following.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Big paragraph

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

Paragraph (default)

Small paragraph

Add "Small" class to any Paragraph.

Underlined titles

Quote

Add "Quote" class to any Paragraph. Don't forget to copy/paste the special quote marks. Click inside the Paragraph and use the brush to give the "Quote Mark" class to the quote marks. The orange border is added with Custom Code (see Settings > Custom Code).

❝ 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. ❞

Colors

They're registered as Global Colors, so you can access them directly in the Style settings of any element. There's also a Global Class associated to each one to use as background-color (ex: "Light Cream BG")

Jowrange

#F55943

White

#FFFFFF

Charcoal

#1E1E1E

Cream

#FFF2E2

Light Cream

#fdf4e7

Dark Cream

#F4C890

Yolk

#FFD470

Kale

#215345

Beet

#A52B2A

Radish

#F9C8CC

Powder

#C1DEE8

Cobalt

#0064D1

Buttons

Default buttons

Primary Primary Small

Outlined buttons

Add "Outlined" class to any Button.

Primary Outlined Primary Small Outlined

Secondary buttons (for dark backgrounds)

Add "Secondary" class to any Button.

Secondary

Secondary Small

Seconday outlined buttons (for dark backgrounds)

Add "Outlined" class to any Secondary Button.

Secondary Outlined

Secondary Small Outlined

Links

Default links

Fusce et fermentum tortor.

Links ON dark Backgrounds

Add "Primary" or "Secondary "class to any Button (only changes Hover color).

Link Primary on dark background.Link Secondary on dark background.

Form Fields

Select elements are styled with Custom Code (see Settings > Custom Code).

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich text (styled with custom code, only visible on published page)

Rich text elements are styled with Custom Code (see Settings > Custom Code).

Bold text

Heading 5

Heading 1

Heading 2

Heading 3

Heading 4

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript