Style Guide

Color Palette

Primary BG
Accent 1 BG
Accent 2 BG
Accent 3 BG
Dark BG
Primary Light BG
Accent 1 Light BG
Accent 2 Light BG
Accent 3 Light BG
Hero Gradient BG

Default Headings

Heading 1

Font size: 38px; Font height: 44px; Font family: Outfit; Font weight: 700

Heading 2

Font size: 32px; Font height: 36px

Heading 3

Font size: 24px; Font height: 20px

Heading 4

Font size: 18px; Font height: 24px
Heading 5
Font size: 14; Font height: 20px
Heading 6
Font size: 12; Font height: 18; Letter spacing: 1

Custom Headings

Big Title Heading
Font size: 4.5 rem; Font height: 4.857 rem; Font family: Outfit; Font weight: 700
Page Title
Font size: 3 rem; Font height: 3.575 rem
H1
Font size: 4.5 rem; Font height: 4.857 rem
H2
Font size: 2.275 rem; Font height: 1.2 rem
H3
Font size: 1.75 rem; Font height: 1.2 rem
H4
Font size: 1.375 rem; Font height: 1.2 rem
H5
Font size: 1.1 rem; Font height: 1.2 rem
H6
Font size: 1 rem; Font height: 1.2 rem; Letter spacing: 1

Paragraphs

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.

Default Rich Text

Rich Text Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices in iaculis nunc sed augue lacus.
  • Amet volutpat consequat mauris nunc congue nisi vitae.

Rich Text Heading Two

Nunc faucibus a pellentesque sit amet porttitor eget dolor. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Ut sem nulla pharetra diam. Egestas diam in arcu cursus euismod quis viverra. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar.

  1. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices in iaculis nunc sed augue lacus.
  2. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices in iaculis nunc sed augue lacus.
Credit Card

Rich Text Heading Three

Enim neque volutpat ac tincidunt vitae semper quis. Id ornare arcu odio ut sem nulla. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Faucibus nisl tincidunt eget nullam non nisi est. Purus viverra accumsan in nisl nisi.

Rich Text Heading Four

Semper risus in hendrerit gravida rutrum. Duis ut diam quam nulla porttitor massa id neque aliquam. Aenean euismod elementum nisi quis eleifend quam adipiscing. Feugiat in fermentum posuere urna nec tincidunt. Turpis massa tincidunt dui ut ornare.

Rich Text Heading five

Diam ut venenatis tellus in metus vulputate eu scelerisque. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Pretium quam vulputate dignissim suspendisse in est.

Rich text Heading Six

Pulvinar mattis nunc sed blandit libero volutpat. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Eros donec ac odio tempor orci dapibus ultrices in. Diam maecenas sed enim ut sem viverra aliquet.

"Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Et netus et malesuada fames. Diam maecenas sed enim ut sem viverra aliquet. "

Commodo quis imperdiet massa tincidunt. Lacus luctus accumsan tortor posuere ac ut consequat semper. Maecenas sed enim ut sem viverra aliquet eget sit amet. Sagittis eu volutpat odio facilisis mauris sit.

Blog Post Rich Text

Blog Post Body Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices in iaculis nunc sed augue lacus.
  • Amet volutpat consequat mauris nunc congue nisi vitae.

Blog Post Body Heading Two

Nunc faucibus a pellentesque sit amet porttitor eget dolor. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Ut sem nulla pharetra diam. Egestas diam in arcu cursus euismod quis viverra. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar.

  1. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices in iaculis nunc sed augue lacus.
  2. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ultrices in iaculis nunc sed augue lacus.
Credit Card

Blog Post Body Heading Three

Enim neque volutpat ac tincidunt vitae semper quis. Id ornare arcu odio ut sem nulla. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Faucibus nisl tincidunt eget nullam non nisi est. Purus viverra accumsan in nisl nisi.

Blog Post Body Heading Four

Semper risus in hendrerit gravida rutrum. Duis ut diam quam nulla porttitor massa id neque aliquam. Aenean euismod elementum nisi quis eleifend quam adipiscing. Feugiat in fermentum posuere urna nec tincidunt. Turpis massa tincidunt dui ut ornare.

Blog Post Body Heading five

Diam ut venenatis tellus in metus vulputate eu scelerisque. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Pretium quam vulputate dignissim suspendisse in est.

Blog Post Body Heading Six

Pulvinar mattis nunc sed blandit libero volutpat. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Eros donec ac odio tempor orci dapibus ultrices in. Diam maecenas sed enim ut sem viverra aliquet.

Blog Post Body Quote
"Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Et netus et malesuada fames."

Commodo quis imperdiet massa tincidunt. Lacus luctus accumsan tortor posuere ac ut consequat semper. Maecenas sed enim ut sem viverra aliquet eget sit amet. Sagittis eu volutpat odio facilisis mauris sit.