Style Guide

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

Colors

white

black

darkgrey

midgrey

lightgrey

orange

blue

darkblue

muteblue

lightgray

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.

Button Colors

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

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

darkgrey
btn btn--darkgrey darkgrey
btn btn--transparent--darkgrey

midgrey
btn btn--midgrey midgrey
btn btn--transparent--midgrey

lightgrey
btn btn--lightgrey lightgrey
btn btn--transparent--lightgrey

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

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

darkblue
btn btn--darkblue darkblue
btn btn--transparent--darkblue

muteblue
btn btn--muteblue muteblue
btn btn--transparent--muteblue

lightgray
btn btn--lightgray lightgray
btn btn--transparent--lightgray

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.)