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.

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

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