Theme Styles
Symbols

FormX Styleguide

Colors

Primary Colors

FormX Green
#0FAC90
Green 100
#02382D
Green 80
#045C4C
Green 60
#14695A
Green 40
#0CA389
Green 20
#28D1B3

Secondary Colors

Neon Green
#1CD5C5
Navy
#073F56
Blue
#0664C8
Light Blue
#3892FF

Neutral Colors

Neutral 800
#FFFFFF
Neutral 700
#343434
Neutral 600
#626262
Neutral 500
#9C9C9C
Neutral 400
#D2D2D2
Neutral 300
#F5F5F5
Neutral 200
#FBFBFB
Neutral 100
#FFFFFF

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 68px/1.118em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 42px/1.238em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 32px/1.063em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 26px/1.308em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 22px/1.545em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 18px/1.889em

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 Small - 16px/1.625em

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 - 22px/1.545em

Bold - Lorem ipsum dolor sit amet

Bold Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum volutpat integer. Cursus est elementum maecenas ut.
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vel eu vulputate et. Egestas erat imperd.
  • Turpis egestas pretium aenean pharetra magna ac.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Turpis egestas pretium aenean pharetra magna ac.
  3. Augue neque gravida in fermentum et sollicitudin ac orci.
Numered List
Article - Saasly Webflow Template
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
Figure & Figure Caption

Icon Font

Line Icons Rounded

Line Icons Square

Filled Icons

Social Media Icons

Buttons

Text Here
Button Primary - Small
Text Here
Button Primary - Default
Text Here
Button Primary - Large
Text Here
Button Primary (Icon) - Small
Text Here
Button Primary(Icon)- Default
Text Here
Button Primary(Icon) - Large
Text Here
Button Secondary - Small
Text Here
Button Secondary - Default
Text Here
Button Secondary - Large
Text Here
Button Secondary(Icon) - Small
Text Here
Button Secondary(Icon) - Default
Text Here
Button Secondary(Icon) - Large