Style Guide

Typography
Typeface 1
Satoshi
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Typeface 2
Limerick-Serial-Heavy
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Typeface 3
Montserrat
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Heading Tag
h1 tag

Heading 1

h2 tag

Heading 2

h3 tag

Heading 3

h4 tag

Heading 4

h5 tag
Heading 5
Heading Style Class
heading-style-h1
Heading 1
heading-style-h2
Heading 2
heading-style-h3
Heading 3
heading-style-h4
Heading 4
heading-style-h5
Heading 5
Body Text
text-size-regular
body 1
text-size-medium
body 2
text-size-small
body 3
text-size-tiny
body 4
small-text
body 5
button-text
button-text
Font Weight
500
font-weight-medium
700
font-weight-bold
900
font-weight-black
Tag Text
tag
Big Tag
tag_small
Small Tag
Line Style
text-style-1lines
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
text-style-2lines
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
text-style-3lines
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
Colors Style
Background Colors
background-color-black
background-color-orange
background-color-yellow
background-color-darkgreen
background-color-cream
background-color-ivory
background-color-pink
background-color-olive-green
background-color-offwhite
background-green-gradiant
Text colors
text-color-primary
Black
text-color-white
white
text-color-green
Green
Border Radius Style
Global Radius
Border-radius-8px
border-radius-10
border-radius-12
border-radius-18
border-radius-22
border-radius-24
border-radius-32
Spacing Style
Global Spacing
container-small
padding-bottom
padding-top
margin-top
margin-bottom
padding-global
padding-section-xxlarge
padding-section-xlarge-140
padding-section-large-120
Padding Style
padding-verticle
padding-horizontal
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-xxxhuge
padding-custom1
padding-custom2
Margin Style
margin-verticle
margin-horizontal
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
Components
Logo
Navbar
Button
Explore Local Businesses
Explore Local Businesses
Buy a Gift Card
Buy a Gift Card
Buy a Gift Card
Buy a Gift Card
Buy a Gift Card
Icons
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
linkedin
Tag
CTA
A black and white Bg
Cards
Hero Component
Footer