Welcome to the Newlsetter Style Guide!

Logo and Preheader

  1. The Springbuk logo is a static templated item and cannot be edited or deleted (same applies to footer content).
  2. Background color for the entire email is #F0F3F3. This color is a templated element and cannot be edited.
  3. The preheader is hidden but can be edited in the HTML.
  4. All section headings are Georgia font, font color is #4D4557, and font size is 26px.

Feature Section

The feature or hero section calls out the latest resource of content piece we are promoting. This could include ebooks, whitepapers, blog posts, and webinars. A banner is always included to drive engagement and visual interest.

  1. Banner is 620x250px (height can fluctuate based on content). Banner should link to corresponding content.
  2. Headline font is Georgia (serif) and the font size is 28px (this can be changed based on length). Headline can wrap if necessary but the character count for the headling shown here is 43 characters.
  3. Paragraph text should be a maximum of two small paragraphs. The font is Arial (sans-serif) and the size is 18px.
  4. Font color is #242124.
  5. Button color is #CF582E. The font is Arial, the size is 18px and bold.
  6. Background color is white (#FFFFFF).

Blog Section

The blog section is designed to showcase our latest blog content. The posts included here can fluctuare but it's recommended to stay between 3-5 blog posts.

  1. The images are 200x200px and are optimized for retina displays (the actual size is 400x400px but the images are shrunk down to size by the code).
  2. Blog headlines are in bold and can wrap to 2 lines, but ideally would be one line. Character count for a single line headline is around 50.
  3. Headline font style is bold, color is #242124, and font size is 18px.
  4. Arial is the font for the entire section.
  5. Character count for the description 120 characters.
  6. Description font color is #242124, and font size is 18px.
  7. Call-to-action link style is bold, and the font color is #59BFED. The default underline is removed with the following style declaration: text-decoration:none.
  8. Call-to-action character count is around 50 for single line.

Event/Webinar Section

This section showcases upcoming events, webinars, or ondemand webinars. This example only includes one event, but more can be added if necessary.

  1. Headline font style is bold, color is #242124, and font size is 18px.
  2. Arial is the font for the entire section.
  3. Headline and body copy character count can fluctuate based on content.
  4. Body copy font color is #242124, and font size is 18px.
  5. Button color is #FF9933. The font is Arial (sans-serif), the size is 18px and bold.

Promo Section

This section is reserved for promotional content. For example, the prospect version includes Request a Demo content (seen here) and the customer version is typically product content.

  1. Headline font style is bold, color is #242124, and font size is 18px.
  2. Arial is the font for the entire section.
  3. Headline and body copy character count can fluctuate based on content.
  4. Body copy font color is #242124, and font size is 18px.
  5. Button color is #FF9933. The font is Arial (sans-serif), the size is 18px and bold.

Industry News & Articles

  1. The images are 80x80px and are optimized for retina displays (the actual size is 160x160px but the images are shrunk down to size by the code).
  2. Call-to-action link style is bold, and the font color is #59BFED. The default underline is removed with the following style declaration — text-decoration:none.
  3. The font is Arial.
  4. The entire line of text should be a link to the article.