Style Guide

Manage the look and feel of the entire website from our style guide. Style and components used on the site are documented here, and any changes made will be immediately visible across all pages.

Colors

The primary colors and shades of gray on the website are managed through the webflow's variable feature.

063B27

00854D

CFFF92

A7D87D

FFE7CB

F4FFE5

537567

C0CDC7

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 affect all the elements on the site.

Heading H1

Font-Family: Fraunces

Font-size: 64px ; line-height: 72px;

Heading 1

Heading H2

Font-Family: Fraunces

Font-size: 48px ; line-height: 48px;

Heading 2

Heading H3

Font-Family: Fraunces

Font-size: 36px ; line-height: 44px;

Heading 3

Heading H4

Font-Family: Fraunces

Font-size: 32px ; line-height: 40px;

Heading 4

Heading H5

Font-Family: Fraunces

Font-size: 28px ; line-height: 32px;

Heading 5

Heading H6

Font-Family: Fraunces

Font-size: 24px ; line-height: 32px;

Heading 6

Paragraph

Font-Family: Dm Sans

Font-size: 16px ; line-height: 24px;

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.

Body Text Large

Font-Family: Dm Sans

Font-size: 20px ; line-height: 28px;

Lorem ipsum dolor

Body Text Medium

Font-Family: Dm Sans

Font-size: 18px ; line-height: 24px;

Lorem ipsum dolor

Body Text Small

Font-Family: Dm Sans

Font-size: 16px ; line-height: 24px;

Lorem ipsum dolor

Buttons

A variety of button styles are available throughout the website.

Book a Demo

Learn more