Style Guide

NOTE: The following CSS selectors will not work in emails.


Colors

white

black

green

pale-green

footer-grey

mid-grey

light-grey

light-red

red

pale-red

blue

pale-blue

orange

pale-orange

yellow

pale-yellow

grey

teal

Usage

CSS Class

Description

.color--$color
.all--color--$color

Overrides text color of object

.background--$color

Applies specified background color to element


Headings

H1 - Page Header

The quick brown fox jumps over the lazy dog.

H2 - Section Header

The quick brown fox jumps over the lazy dog.

H3 - Page or Section Subheader

The quick brown fox jumps over the lazy dog.

H4 - Content Header

The quick brown fox jumps over the lazy dog.

H5 - Content Subheader

The quick brown fox jumps over the lazy dog.

H6 - Content Subheader

The quick brown fox jumps over the lazy dog.

P - Paragraph Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor ipsum, cursus vitae dapibus sit amet, tristique vitae mi. Mauris eros magna, aliquam a faucibus at, gravida vel dui. Quisque sit amet dapibus libero. Integer quis nisi non arcu lobortis sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor ipsum, cursus vitae dapibus sit amet, tristique vitae mi. Mauris eros magna, aliquam a faucibus at, gravida vel dui. Quisque sit amet dapibus libero. Integer quis nisi non arcu lobortis sodales.


Button Colors

white
btn btn--white
     white
btn btn--transparent--white

black
btn btn--black
     black
btn btn--transparent--black

green
btn btn--green
     green
btn btn--transparent--green

pale-green
btn btn--pale-green
     pale-green
btn btn--transparent--pale-green

footer-grey
btn btn--footer-grey
     footer-grey
btn btn--transparent--footer-grey

mid-grey
btn btn--mid-grey
     mid-grey
btn btn--transparent--mid-grey

light-grey
btn btn--light-grey
     light-grey
btn btn--transparent--light-grey

light-red
btn btn--light-red
     light-red
btn btn--transparent--light-red

red
btn btn--red
     red
btn btn--transparent--red

pale-red
btn btn--pale-red
     pale-red
btn btn--transparent--pale-red

blue
btn btn--blue
     blue
btn btn--transparent--blue

pale-blue
btn btn--pale-blue
     pale-blue
btn btn--transparent--pale-blue

orange
btn btn--orange
     orange
btn btn--transparent--orange

pale-orange
btn btn--pale-orange
     pale-orange
btn btn--transparent--pale-orange

yellow
btn btn--yellow
     yellow
btn btn--transparent--yellow

pale-yellow
btn btn--pale-yellow
     pale-yellow
btn btn--transparent--pale-yellow

grey
btn btn--grey
     grey
btn btn--transparent--grey

teal
btn btn--teal
     teal
btn btn--transparent--teal

Button Modifiers

Narrow Button btn btn--wide btn--$color

Wide Button btn btn--wide btn--$color

Large Button btn btn--large btn--$color

Small Button btn btn--small btn--$color

Pill Button btn btn--pill btn--$color

Additional Modifiers

CSS Class

Description

.all--$selector

Prepend any of the "btn" CSS clases with "all--" to apply their styles to HubSpot CTAs or HubSpot form submit buttons within the selector. Use this when CSS selectors cannot be directly applied to the desired element.

(Example: Apply class "all--btn all--btn--orange" to an element which contains a HubSpot form to make the form's submit button into an orange button.)

You're all set

Eager to get started now?

Start your 14-day fully-featured trial of Repsly.
There's no credit card needed and it takes seconds to get going.

Get Started for Free