Style Guide
Colors
Brand 1
vAuto Orange
#EF5713
--wp--preset--color--brand-1
Brand 2
vAuto Light Orange
#FF8022
--wp--preset--color--brand-2
Brand 3
Conquest Gold
#FFBE2C
--wp--preset--color--brand-3
Brand 4
Stockwave Blue
#0195D7
--wp--preset--color--brand-4
Brand 5
iRecon Red
#DB162C
--wp--preset--color--brand-5
Green
Light Green
#11AC3F
--wp--preset--color--light-green
Green
Dark Green
#005C5C
--wp--preset--color--dark-green
Black
Pure Black
#000000
--wp--preset--color--black
White
Pure White
#FFFFFF
--wp--preset--color--white
Gray 1
vAuto - Dark Gray
#5F717B
--wp--preset--color--gray-1
Gray 2
vAuto - Medium Gray
#C3C8CB
--wp--preset--color--gray-2
Gray 3
vAuto - Gray
#DCE3E6
--wp--preset--color--gray-3
Gray 4
vAuto - Light Gray
#F2F5F7
--wp--preset--color--gray-4
Gray 5
Secondary Button - Hover
#434D52
--wp--preset--color--gray-5
Gray 6
Extra Dark - BG
#242424
--wp--preset--color--gray-6
Error
Error Color
#B33831
--wp--preset--color--error
Gradients
Gradient
vAuto - Orange Gradient
#F4601E => #FF8205
--wp--preset--gradient--orange-gradient
Gradient
vAuto - Yellow Gradient
#FF9D2B => #FFB6112
--wp--preset--gradient--yellow-gradient
Gradient
vAuto - Blue Gradient
#009BE0 => #006FC1
--wp--preset--gradient--blue-gradient
Gradient
vAuto - Blue Reverse Gradient
#006FC1 => #009BE0
--wp--preset--gradient--blue-reverse-gradient
Gradient
vAuto - Green Gradient
#11AC3F => #005C5C
--wp--preset--gradient--green-gradient
Gradient
vAuto - Black Gradient
#3B3B3B => #212121
--wp--preset--gradient--black-gradient
Gradient
vAuto - Dark Gray Gradient
#3E3E3E => #242424
--wp--preset--gradient--dark-gray-gradient
Typography
Primary Font - Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
123456789 123456789
Text Elements
Hero Heading
Nulla lorem dolor sit amet
Body text...Lorem ipsum dolor sit, amet consectetur elit. Expedita dicta inventore officiis voluptates natus, conseq maxime porro explicabo dolor adipisci.
Other Heading
Nulla lorem dolor sit amet
Article body text...Lorem ipsum dolor sit, amet consectetur elit. Expedita dicta inventore officiis voluptates natus, conseq maxime porro explicabo dolor adipisci.
H1
Heading1 Nulla Lorem
H2
Heading2 Nam Fringilla
Heading2 Semibold Nam Fringilla
H3
Heading3 Consectetur adipiscing
H4
Heading4 Nunc interdum
Heading4 Semibold Nunc interdum
H5
Heading5 Lorem ipsum dolor
H6
Heading6 Natus conseq maxime
Body
Body text...Lorem ipsum dolor sit, amet consectetur elit. Expedita dicta inventore officiis voluptates natus, conseq maxime porro explicabo dolor adipisci.
Body Small
Body small text...Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita dicta inventore officiis voluptates natus, consequuntur maxime porro explicabo dolor adipisci.
Body Medium
Body medium text...Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita dicta inventore officiis voluptates natus, consequuntur maxime porro explicabo dolor adipisci.
Body Large
Body large text...Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita dicta inventore officiis voluptates natus, consequuntur maxime porro explicabo dolor adipisci.
Eyebrow Text
Estibulum
Caption
Label
Consectetur
Source
Voluptates maxime porro.
Feature Tag
Stat Number
Stat Text
Blockquote
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, minus.
Buttons & Links
Tertiary Button
(Transparent Background)
Play Button
Inline Text Link
Nulla lorem ipsum dolor sit amet lorem eget link text lacinia odio.
Nulla lorem ipsum dolor sit amet lorem eget link text here lacinia odio.