Swing Blue Alliance Brand Guide

Messaging
Writing
Web

Web

Overview

The Swing Blue Alliance website is the central hub for all our content and communications. Placing content on the website helps volunteers keep in touch with us and all of our activities, guides new volunteers to find us, and makes it easy to scale our efforts.

Page Types

Our website has three types of pages (see below). You should choose the page type that best fits the type of content that will be on your page.

  • The two column page (example) splits the information into two vertical columns. The left column usually includes campaign/program descriptions, multimedia, and images and the right column usually includes call to actions (links) with short descriptions. This page type works best when you have a lot of activities to promote or a complex program to describe.
  • The one column page (example) lists all information in one column. This page works well for blogs and simple programs with single call to action. Make sure you keep an eye on word count when using this format since a long scroll may is challenging for readers. You should also use images to break up blocks of text.
  • The stacked page (example) separates information into bands stacked on top of each other. This format should only be used when you have a very complex program that covers multiple webpages. This page type doesn’t work well with long, complex blacks of text and requires imagery, so you should make sure you have a design partner before you get started.

Images Sizes

  • Most often it’s the aspect ratio that’s important, not the exact pixel sizes.
  • Example image as a background for a panel
    • 6000×2411
    • 2.5 x 1 aspect ratio
Swing Blue Alliance background panel image example
  • Foreground image taking ½ of a panel
    • 640×480
    • 4×3 aspect ratio
Swing Blue Alliance foreground image web example
  • Sizes below for images desktop and mobile
Swing Blue Alliance desktop and mobile image sizes
  • “Postage stamp” image shown should be approximately square. 
    • The one shown here is 1650×2164
Swing Blue Alliance postage stamp web image example

Fonts

H1 Header – Barlow Condensed sans-serif 48px

H2 Header – Bitter serif 40px

H3 Header – Bitter serif 28px color #066fc4

H4 Header – Bitter serif 30px

H5 Header – Bitter serif 26px color #b41a1f

Paragraph – Bitter serif 18px

Href style – Bitter serif 18px color #0095c2