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.
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.
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
Most "B" simply
bolds the font.
In the case of h3, this turns the font grey.
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
* for Hubspot we should maybe have some sort of BG on this (subtle grey)
Depicted here is the custom "play button" for videos.
— Peanut (medium-brown)
— Jam (red)
— Bread (beige)
Index Section Fun
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
diagtop1white <- top left
diagtop2white <- top right
diagbottom1white <- bottom left
diagbottom2white <- bottom right