Style Guide

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

Images

Image Max File Size:
200kb for non hero images
300kb for hero images - set max width to 1500px

Use https://bulkresizephotos.com/.

If you have a ton of images on one page these file sizes will need to be reduced so that your pages doesn't load slow, use best judgement.

Image Dimension Size:

There is no set size (width, height) of images unless it calls for it in design. Most everything is ratio based.
Default: usually 2:1 ratio (example: 600 x 400)
Blog Featured Image: 3:1 ratio (example: 1500 x 500)

Colors

white

black

lighter-blue

light-blue

blue

yellow

grey

mid-grey

dark-grey

light-red

light-green

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.

Font Family	"Times New Roman"
Size	32px
Line Height	normal (~NaNem)
Style	normal
Weight	700
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

H2 - Section Header

The quick brown fox jumps over the lazy dog.

Font Family	"Times New Roman"
Size	24px
Line Height	normal (~NaNem)
Style	normal
Weight	700
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

H3 - Page or Section Subheader

The quick brown fox jumps over the lazy dog.

Font Family	"Times New Roman"
Size	18.72px
Line Height	normal (~NaNem)
Style	normal
Weight	700
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

H4 - Content Header

The quick brown fox jumps over the lazy dog.

Font Family	"Times New Roman"
Size	16px
Line Height	normal (~NaNem)
Style	normal
Weight	700
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

H5 - Content Subheader

The quick brown fox jumps over the lazy dog.

Font Family	"Times New Roman"
Size	13.28px
Line Height	normal (~NaNem)
Style	normal
Weight	700
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

H6 - Content Subheader

The quick brown fox jumps over the lazy dog.

Font Family	"Times New Roman"
Size	10.72px
Line Height	normal (~NaNem)
Style	normal
Weight	700
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

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.

Font Family	"Times New Roman"
Size	16px
Line Height	normal (~NaNem)
Style	normal
Weight	400
Capitalization	none
Letter Spacing	normal
Word Spacing	0px
Default Color	#000000

Button Colors

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

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

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

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

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

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

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

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

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

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

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

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