Typography

Headings

Typeface

Merriweather

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.

Element - 3rem / 1.1 / Normal

H1

Element - 2.2rem / 1.1 / Normal

H2

Element - 1.2rem / 1.2 / Medium

H3

Element - 1rem / 1.1 / Medium

H4

Class

Body

Typeface

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Note: The body font should be set on the root 'Body (All Pages)' tag.

Paragraph Big (p-big) - 1.2rem / 1.7 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph - 1rem / 1.7 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph Small (text-small) - 0.8rem / 1.4 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ordered List - 1rem / 1.5 / Normal

Example Ordered List
Example Ordered List

Unordered List - 1rem / 1.5 / Normal

Example Unordered List
Example Unordered List

Color

Primary

Blue

Primary Accent Color

#3B7BB4

Color Base

Base Font Color

#3d3d3d

Gray

Mid Tone

#bbbbbb

Light Gray

Light Background Color

#f5f5f5

Secondary

Green

#33BA87

Purple

#6C68D0

Yellow

#FFD346

Buttons

Light Background

Default Primary Secondary

Default Small Primary Secondary

Text Link

Dark Background

Default Primary Secondary

Default Small Primary Secondary

Text Link

Cards

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

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.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Learn More

Style guide

Typography

Headings

H1

H2

H3

H4

Body

Color

Primary

Blue

Color Base

Gray

Light Gray

Secondary

Green

Purple

Yellow

Buttons

Light Background

Dark Background

Cards

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor