Banner Styling

EDGE BLENDER — The subtle "edge" blender is a MUST on any solid section that meets image
(On SS there are several way to "install" these — ask Hilary, on Hubspot posts, this should be incorporated)

BANNER OVERLAY — there is a template PSD for this set up (ask Hilary if you need it)
OR #c39a6b @ 40% opacity should have a similar effect.

CUSTOM HEADLINES —  Exception applies for "Curated Portfolios" as this font allows us to craft pages quickly! Blog posts on Hubspot can also use this for similar reasons.


Copy Styling


DEFAULT
No Additional Formating

Side Notes font is accessed by selecting "code" from the style dropdown.

*Reminder to keep word-count of "side notes" to ~ six.

 

Headline 1

Headline 2

HEADLINE 3

Body Copy

Side Notes 

DEFAULT
Italic Styling

h1, h2, h3, side notes do not have a need to italics, so we've swapped this for "underline" in red.

Body is italicized.

* Side notes is missing styling

Headline 1

Headline 2

Headline 3

Body Copy

Side Notes 

DEFAULT
Bold Styling

Most "B" simply
bolds the font. 

In the case of h3, this turns the font grey.

 

 

Headline 1

Headline 2

HEADLINE 3

Body Copy

Side Notes 

Other Elements


BUTTONS

If a button is desired, use a button! But any of the heading linked to content may also work as a more subtle way to direct visitors to content.

* Large button will likely be some sort of paint swipe styling


Quote about Something
— Person's Name

* for Hubspot we should maybe have some sort of BG on this (subtle grey)


Depicted here is the custom "play button" for videos.


SOCIAL LINKS
Small, subtle. 


Color
Values

#CEB888
— Peanut (medium-brown)

#ED4424
— Jam (red)

#F5F0E5
— Bread (beige)

Index Section Fun

Swashes

To add a top and/or bottom swash to an index section just copy one of the options below into the URL Slug.
You can add both a top and a bottom to the same index section. 
You can use swashes in combination with float styles.
The last index section automatically has the bottom1grey swash added.
*More colours coming

 

Top

top1white
top2white
top3white
top4white
top5white
top6white

top1beige
top2beige
 

Bottom

bottom1white
bottom2white
bottom3white
bottom4white
bottom5white
bottom6white

bottom1beige
bottom2beige

bottom1grey

bottom1red

 

Diagonal

diagtop1white   <- top left
diagtop2white  <- top right

diagbottom1white  <- bottom left
diagbottom2white  <- bottom right

 


Float