Style Guide

Fonts

Titles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Underlined titles

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.

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).

Rich text heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo volutpat est nec porttitor. Phasellus quis nunc porttitor, tempus ex sit amet, tincidunt lorem. Pellentesque quis urna et dui mollis fermentum non nec nunc. Integer sed ipsum nec dui facilisis fermentum ut ut dolor. Vivamus fermentum nulla eu tellus elementum tincidunt. Nulla mattis est eu odio vulputate ornare. Morbi eu convallis mi, ut sollicitudin enim. Quisque malesuada metus non imperdiet vehicula. Nullam eget neque tristique, auctor lorem eu, congue nisl. Rich text link.

Rich text heading 2

Rich text heading 3

Rich text heading 4

Unordered list 1
Unordered list 2

Ordered list 1
Ordered list 2

Quote

❝ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo volutpat est nec porttitor. Phasellus quis nunc porttitor, tempus ex sit amet, tincidunt lorem. ❞

‍