Webflow Style Guide

Fitness is a Webflow Ecommerce Template created for GYMs and Fitness Coaches. It was designed & developed by the BRIX Templates team.

Colors

Primary Colors

Primary 1
#FF3F56

Secondary Colors

Secondary 1
#FFE1E6

Neutral Colors

Neutral 800
#19181B
Neutral 700
#56555C
Neutral 600
#7A7B85
Neutral 500
#ACACB2
Neutral 400
#E0E0E2
Neutral 300
#F2F3F3
Neutral 200
#F9F9F9
Neutral 100
#FFFFFF

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 60px/1.167em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 38px/1.289em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 24px/1.417em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/1.545em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/1.611em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/1.375em

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.

Paragraph Small - 15px/1.800em

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 - 18px/1.667em

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 Large - 24px/1.583em

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
“Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus vascilus.”
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List
Viverra urna imperdiet non malesuada. In massa id tellus
Figure and Figure Caption

Icons

Buttons

Small
Primary - Small
Default
Primary - Default
Large
Primary - Large
Small
Secondary - Small
Default
Secondary - Default
Large
Secondary - Large

Cards

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel quam donec sit tortor, nisl diam eget. Malesuada nisl diam.