Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Vue Store Force

H1 - Red Hat Display; font-weight: bold; font-size: 64px; line-height: 70px

MOBILE H1 - Red Hat Display; font-weight: bold; font-size: 28px; line-height: 32px

Vue Store Force

h2 - Red Hat Display; font-weight: bold; font-size: 36px; line-height: 40px

Mobile - Red Hat Display; font-weight: bold; font-size: 24px; line-height: 30px

Vue Store Force & 800,000+

H3 & NUMBERS - Red Hat Display; font-weight: 500; font-size: 24px; line-height: 32px

MOBILE Red Hat Display; font-weight: 500; font-size: 20px; line-height: 26px

Vue Store Force

H4 - Red Hat Display; font-weight: bold; font-size: 16px; line-height: 20px; 
letter-spacing: 0.0125em; text-transform: uppercase;

MOBILE SAME
Red Hat Text; font-weight: 500; font-size: 16px; line-height: 20px
Red Hat Text; font-weight: 500; font-size: 16px; line-height: 20px
Vue Store Force
H6

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.

PARAGRAPH - body-base-normal
Red Hat Text; font-size: 16px; line-height: 24px

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.

Paragraph #2 - body-sm-normal
Red Hat Text; font-size: 14px; line-height: 20px
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
View Project
Button
View Project
Dark BUTTON

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Text colors

VSF BLACK - font color (HEADINGS)
#1d1f22
VSF DARK GREY - FONT COLOR (PRIMARY)
#72757E

Main colors

VSF GREEN
#60D47E
VSF LAST GREEN
#98e6ac
VSF DARK GREEN
#53C174
STOREFRONT CLOUD BLUE
#21C0FA

Neutral colors

SFUI LIGHT GREY 1
#F1F2F3
SFUI DARK GREY 1
#636363
SFUI LIGHT GREY 2
#BEBFC4
SFUI DARK GREY 2
#1D1F22

Logo

These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD

Components

These are a few example components.

Name
Email
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.