Typography

Design & Class Naming System
heading 01
Class Name - this is a global class

The quick brown fox jumps over the lazy dog

Desktop
H1 Regular - Reckless Neue, Regular, 44px, 0px, 120%
Color - #333333

Tablet & Mobile
H1 Regular - Reckless Neue, Regular, 36px, 0px, 120%
Color - #333333
Class Name -
h1-is-wht

The quick brown fox jumps over the lazy dog

Desktop
H1 Regular - Reckless Neue, Regular, 44px, 0px, 120%
Color - #333333

Tablet & Mobile
H1 Regular - Reckless Neue, Regular, 36px, 0px, 120%
Color - #333333
heading 02
Class Name - this is a global class

Burbank, Anaheim, San Bernardino, Culver City, Pasadena

Desktop
H2 Regular - CircularXX, Regular, 36px, -0.25px, 110%
Color - #333333

Tablet
H2 Regular - CircularXX, Regular, 29px, -0.25, 110%
Color - #333333

Mobile
H2 Regular - CircularXX, Regular, 32px, -0.25, 110%
Color - #333333
Combo class
is--stone

Burbank, Anaheim, San Bernardino, Culver City, Pasadena

Desktop
H2 Regular - CircularXX, Regular, 36px, -0.25px, 110%
Color - #666666

Tablet
H2 Regular - CircularXX, Regular, 29px, -0.25, 110%
Color - #666666

Mobile
H2 Regular - CircularXX, Regular, 32px, -0.25, 110%
Color - #666666
heading 03
Class Name - this is a global class

Partner Portal & Custom Landing Page

Desktop, Tablet, Mobile
H3 Medium - Reckless Neue, Medium, 22px, 0px, 120%
Color - #333333
heading 04
Class Name - this is a global class

May not be needed, but also might be.

Desktop & Mobile
H4 Medium - CircularXX, Medium, 18px, 0.25px, 140%
Color - #333333

Tablet
H4 Medium - CircularXX, Medium, 16px, 0.25px, 140%
Color - #333333

Combo class
is--bold

May not be needed, but also might be.

Desktop & Mobile
H4 Medium - CircularXX, Bold, 18px, 0.25px, 140%
Color - #333333

Tablet
H4 Medium - CircularXX, Bold, 16px, 0.25px, 140%
Color - #333333
Combo class
is--center

May not be needed, but also might be.

Desktop & Mobile
H4 Medium - CircularXX, Bold, 18px, 0.25px, 140%
Color - #333333

Tablet
H4 Medium - CircularXX, Bold, 16px, 0.25px, 140%
Color - #333333
Combo class
is--bold-center

May not be needed, but also might be.

Desktop & Mobile
H4 Medium - CircularXX, Bold, 18px, 0.25px, 140%
Color - #333333

Tablet
H4 Medium - CircularXX, Bold, 16px, 0.25px, 140%
Color - #333333
heading 05
Class Name - this is a global class
May not be needed, but also might be.
Desktop, Tablet, Mobile
H5 Book - CircularXX, Regular, 14px, 0.25px, 130%
Combo class
h5-is--bold
May not be needed, but also might be.
Desktop, Tablet, Mobile
H5 Book - CircularXX, Bold, 14px, 0.25px, 130%
subheading
Class Name
subheading
This is some text inside of a div block.
Desktop & Mobile
SH Regular - CircularXX, Regular, 18px, 0.25px, 160%
Color - #666666

Tablet
SH Regular - CircularXX, Regular, 16px, 0.25px, 160%
Color - #666666
Combo class
subheading
is--shadow
This is some text inside of a div block.
Desktop & Mobile
SH Regular - CircularXX, Regular, 18px, 0.25px, 160%
Color - #333333

Tablet
SH Regular - CircularXX, Regular, 16px, 0.25px, 160%
Color - #333333
Combo class
subheading
is--bold-shadow
This is some text inside of a div block.
Desktop & Mobile
SH Regular - CircularXX, Bold, 18px, 0.25px, 160%
Color - #333333

Tablet
SH Regular - CircularXX, Bold, 16px, 0.25px, 160%
Color - #333333
Combo class
subheading
is--shadow-center
This is some text inside of a div block.
Desktop & Mobile
SH Regular - CircularXX, Regular, 18px, 0.25px, 160%
Color - #333333

Tablet
SH Regular - CircularXX, Regular, 16px, 0.25px, 160%
Color - #333333
Combo class
subheading
is--wht
This is some text inside of a div block.
Desktop & Mobile
SH Regular - CircularXX, Regular, 18px, 0.25px, 160%
Color - #333333

Tablet
SH Regular - CircularXX, Regular, 16px, 0.25px, 160%
Color - #333333
paragraph 01
Class Name - this is a global class

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P1 Regular - CircularXX, Regular, 16px, 0.25px, 150%
Color - #666666
class name
is--shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P1 Regular - CircularXX, Regular, 16px, 0.25px, 150%
Color - #666666
class name
is--bold-shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P1 Regular - CircularXX, Bold, 16px, 0.25px, 150%
Color - #333333
paragraph 02
class name
p2

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P2 Regular - CircularXX, Regular, 14px, 0.25px, 150%
Color - #666666
class name
p2__is--bold

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P2 Regular - CircularXX, Bold, 14px, 0.25px, 150%
Color - #666666
combo class
p2
is--shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P2 Regular - CircularXX, Regular, 14px, 0.25px, 150%
Color - #333333
combo class
p2
is--bold-shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P2 Regular - CircularXX, Bold, 14px, 0.25px, 150%
Color - #333333
paragraph 03
class name
p3

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P3 Regular - CircularXX, Regular, 13px, 0.25px, 130%
Color - #666666
combo class
p3
is--bold

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P3 Regular - CircularXX, Bold, 13px, 0.25px, 130%
Color - #666666
combo class
p3
is--shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P3 Regular - CircularXX, Regular, 13px, 0.25px, 130%
Color - #333333
combo class
p3
is--bold-shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
P3 Regular - CircularXX, Bold, 13px, 0.25px, 130%
Color - #333333
overline
class name
overline

book your at-home lab appointment

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 12px, 2px, 100%
Color - #333333
class name
overline
with-hover

book your at-home lab appointment

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 12px, 2px, 100%
Hover Stage - Underline
Color - #333333
class name
overline
is--pebble

book your at-home lab appointment

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 12px, 2px, 100%
Color - #999999
overline - SMALL
class name
overline-SML

book your at-home lab appointment

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 10px, 2px, 100%
Color - #666666
class name
overline-sml
is--pebble

book your at-home lab appointment

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 12px, 0.25px, 160%
Hover Stage - Underline
Color - #999999
small
class name
small

Book your at-home lab appointment.

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 12px, 0.25px, 160%
Color - #666666
combo class
small
is--bold

Book your at-home lab appointment.

Desktop, Tablet, Mobile
S Regular- CircularXX, Bold, 12px, 0.25px, 160%
Color - #666666
combo class
small
is--shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
S Regular- CircularXX, Regular, 12px, 0.25px, 160%
Color - #333333
combo class
small
is--bold-shadow

Book your at-home lab appointment.

Desktop, Tablet, Mobile
S Regular- CircularXX, Bold, 12px, 0.25px, 160%
Color - #333333
buttons
Class Name
btn-fill
for button style
Desktop, Tablet, Landscape Mobile
Size - w 219px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #ffffff
Color - #333333

Hover State - Inverted, outline & text #333333
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same
COMBO CLASS
btn-fill
large
check availability
apply now
Desktop, Tablet, Landscape Mobile
Size - w 219px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #ffffff
Color - #333333

Hover State - Inverted, outline & text #333333
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same

Existing Buttons
Check Availability, Apply Now
combo class
btn-fill
sml
button not visible on mobile
Book now
Desktop, Tablet
Size - w 132px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #ffffff
Color - #333333

Hover State - Inverted, outline & text #333333
Hover Transition - Background-Color: 600ms

*this button is located in the navbar and is not visible on mobile

Existing Buttons
Book Now
Combo class
btn-fill
med-1
get started
Desktop, Tablet, Landscape Mobile
Size - w 162px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #ffffff
Color - #333333

Hover State - Inverted, outline & text #333333
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same
combo class
btn-fill
med-2
submit
view careers
return to faq
*Form Button styling only

Desktop, Tablet, Landscape Mobile
Size - w 176px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #ffffff
Color - #333333

Hover State - Inverted, outline & text #333333
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same

Existing Buttons
Submit, View Careers, Return To FAQ
COMBO CLASS
btn-fill
large
is--wht
CONTACT US
Desktop, Tablet, Landscape Mobile
Size - w 219px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #333333
Color - #ffffff

Hover State - Inverted, outline & text #ffffff
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same

Existing Buttons
Contact Us, Check Availability
Class Name
btn-outline
FOR BUTTON STYLE
Desktop, Tablet, Landscape Mobile
Size - w 167px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #333333
Outline Color - #333333

Hover State - Inverted, background #333333, text #ffffff
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same
Class Name
btn-outline
large
see more questions
Desktop, Tablet, Landscape Mobile
Size - w 227px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #333333
Outline Color - #333333

Hover State - Inverted, background #333333, text #ffffff
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same

Existing Buttons
See More Questions
Combo class
btn-outline
med-1
424-438-5227
read api docs
Desktop, Tablet, Landscape Mobile
Size - w 167px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #333333
Outline Color - #333333

Hover State - Inverted, background #333333, text #ffffff
Hover Transition - Background-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same

Existing Buttons
424-438-5227, Read API Docs, For Partners
class name
inv-btn
for partners
Desktop, Tablet, Landscape Mobile
Size - w 167px, h 48px
Font - CircularXX, Bold, 12px, 2px, 100%, #333333

Hover State - Outline #333333
Hover Transition - Border-Color: 600ms

Mobile Portrait
Size - w 100%, h 60px
*all other specs are the same
rich text block
Class Name
rich-text-blcok
services

H1

H2

H3

H4

Paragraph

This is Bold and this isn't.

afdsadfsfsda

  • Unordered
  • List
  1. Ordered
  2. List
RICH text area

Colors

Linen - #faf0e6
White - #ffffff
Cloud - eff3f4
Slate - 6a7175
Shadow - #333333
Pebble - #999999
Stone - #666666
Fog - e6e6e6