Style guide

We've created a library of all web elements to maintain style consistency throughout the website

Typography

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
H1
Class
H2
Class
H3
Class
H4
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
  1. Example Ordered List
  2. Example Ordered List
Unordered List - 1rem / 1.5 / Normal
  • Example Unordered List
  • Example Unordered List

Color

Blue

Primary Accent Color
#3B7BB4

Color Base

Base Font Color
#3d3d3d

Gray

Mid Tone
#bbbbbb

Light Gray

Light Background Color
#f5f5f5

Green

#33BA87

Purple

#6C68D0

Yellow

#FFD346

Buttons

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

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