Style Guide

On this Page you can find all the Elements that have been used across the Website. This allows you to make global changes to all forms of Typography, Colors, Forms & more.

Typography

Headings

Heading
XXL

Heading

Heading
XL

Heading

Heading
L

Heading

Heading
M

Heading

Heading
S

Heading

Heading
XS

Heading

Heading
XXS

Heading

Paragraphs

Paragraph
Small

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

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

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.

Lists

Unordered List
  • This is a List Item
  • This is a List Item
  • This is a List Item
Ordered List
  1. This is a List Item
  2. This is a List Item
  3. This is a List Item

Links

Rich Text

Heading
H1

Heading

Heading
H2

Heading

Heading
H3

Heading

Heading
H4

Heading

Heading
H5
Heading
Heading
H6
Heading
Paragraph

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.

Image
This is an Image Caption

Colors

Neutral Colors
Neutral 50
#f5f6f6
Neutral 100
#e5e7e8
Neutral 200
#cdd0d4
Neutral 300
#abafb5
Neutral 400
#808790
Neutral 500
#656b75
Neutral 600
#575b63
Neutral 700
#4a4d54
Neutral 800
#414349
Neutral 900
#3a3c3f
Neutral 950
#202124
Primary Colors
Primary 400
#e9a5f5
Primary 500
#ea80fc
Primary 600
#b74ec9
System Colors
Success 400
#3ec3ae
Success 500
#24a895
Success 600
#1b867a
Warning 400
#f9d626
Warning 500
#f3bb1a
Warning 600
#d78f08
Error 500
#fda4a4
Error 600
#de2425
Error 700
#bb1a1b

Layout Grids

1 Grid
2 Grid
3 Grid
4 Grid
1-2 Grid
2-1 Grid

Spacing System

To give Elements more breathing Room, you can apply the following Global Combo Classes to all Elements.
The Highlight can be replaced with where you want the Margin (MG) / Padding (PD) to be. Ex.: MG Top 4px, MG Left 8px, MG Right 12px, MG Bottom 16px

Margin:
  • MG Bottom 4px
  • MG Bottom 8px
  • MG Bottom 12px
  • MG Bottom 16px
  • MG Bottom 24px
  • MG Bottom 32px
  • MG Bottom 40px
  • MG Bottom 48px
  • MG Bottom 56px
  • MG Bottom 64px
  • MG Bottom 96px
  • MG Bottom 128px
Padding:
  • PD Bottom 4px
  • PD Bottom 8px
  • PD Bottom 12px
  • PD Bottom 16px
  • PD Bottom 24px
  • PD Bottom 32px
  • PD Bottom 40px
  • PD Bottom 48px
  • PD Bottom 56px
  • PD Bottom 64px
  • PD Bottom 96px
  • PD Bottom 128px
X/Y-Axis:
  • PD X-Axis 4px
  • PD X-Axis 8px
  • PD X-Axis 12px
  • PD X-Axis 16px
  • PD X-Axis 24px
  • PD X-Axis 32px
  • PD X-Axis 40px
  • PD X-Axis 48px
  • PD X-Axis 56px
  • PD X-Axis 64px
  • PD X-Axis 96px
  • PD X-Axis 128px
  • PD X-Axis 156px
  • PD X-Axis 196px

Buttons

Primary
Large
Button Text
Primary
Small
Button Text
Secondary
Large
Button Text
Secondary
Button Text
Secondary
Small
Button Text

Badges

Primary
Large
Badge
Primary
Badge
Primary
Small
Badge
Secondary
Large
Badge
Secondary
Badge
Secondary
Small
Badge
Outline
Large
Badge
Outline
Badge
Outline
Small
Badge

Tabs

Tabs Horizontal

Drop Shadows

Drop Shadow
Drop Shadow w/ Hover State

Icons

16x16
Elevation - Webflow Agency Dark Mode E-Commerce Template
24x24
Elevation - Webflow Agency Dark Mode E-Commerce Template
32x32
Elevation - Webflow Agency Dark Mode E-Commerce Template
48x48
Elevation - Webflow Agency Dark Mode E-Commerce Template
64x64
Elevation - Webflow Agency Dark Mode E-Commerce Template
96x96
Elevation - Webflow Agency Dark Mode E-Commerce Template
128x128
Elevation - Webflow Agency Dark Mode E-Commerce Template

Form Elements

Input Fields
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input Fields with Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Message Fields
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox / Radio Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.