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 a n Image Caption

Colors

Neutral Colors
Neutral 50
#f7f7f8
Neutral 100
#eeeef0
Neutral 200
#d9d9de
Neutral 300
#b8b9c1
Neutral 400
#91939f
Neutral 500
#737584
Neutral 600
#5d5e6c
Neutral 700
#4c4d58
Neutral 800
#41414b
Neutral 900
#393941
Neutral 950
#101012
Primary Colors
Primary 50
#f1fcf9
Primary 100
#d1f6ed
Primary 200
#a2eddc
Primary 300
#64dac4
Primary 400
#3ec3ae
Primary 500
#24a895
Primary 600
#1b867a
Primary 700
#196c63
Primary 800
#195650
Primary 900
#194844
Primary 950
#082b29
System Colors
Success 50
#f1fcf9
Success 100
#d1f6ed
Success 200
#a2eddc
Success 300
#64dac4
Success 400
#3ec3ae
Success 500
#24a895
Success 600
#1b867a
Success 700
#196c63
Success 800
#1b602a
Success 900
#184f25
Primary 950
#072c10
Warning 50
#fffdeb
Warning 100
#fdf9c8
Warning 200
#fcf28b
Warning 300
#fae54f
Warning 400
#f9d626
Warning 500
#f3bb1a
Warning 600
#d78f08
Warning 700
#b2660b
Warning 800
#b2660b
Warning 900
#774110
Warning 950
#774110
Error 50
#fef2f2
Error 100
#fef2f2
Error 200
#fef2f2
Error 300
#fda4a4
Error 400
#fda4a4
Error 500
#fda4a4
Error 600
#de2425
Error 700
#bb1a1b
Error 800
#bb1a1b
Error 900
#801c1d
Error 950
#460909

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
Outline
Large
Button Text
Outline
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

Icons

16x16
Launchify - Webflow App Landing Page E-Commerce Website Template
24x24
Launchify - Webflow App Landing Page E-Commerce Website Template
32x32
Launchify - Webflow App Landing Page E-Commerce Website Template
48x48
Launchify - Webflow App Landing Page E-Commerce Website Template
64x64
Launchify - Webflow App Landing Page E-Commerce Website Template
96x96
Launchify - Webflow App Landing Page E-Commerce Website Template
128x128
Launchify - Webflow App Landing Page E-Commerce Website 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.