Graphic Specs

Last updated 12 August 2022

Greetings, As the person responsible for making sure your brand is well presented, this guide contains instructions for the graphical assets (and related facts) your team will be asked to provide.

At the very bottom of the page is a quick list for you to copy/paste into your email sending the requested decisions and images to us.

Fonts

We allow you to pick any Google Web Fonts you would like.

1. Heading font - h1-h6

2. Body font - p, td, th, etc.

We have Merriweather and Copse (both serif) and Open Sans, Public Sans, Lato, and Roboto (all sans serif) already active.

The default is to use Open Sans for both.

Sitewide header

1. Background color

2. Logo image - a transparent background PNG, no more than 60px tall preferably no more tan a few hundred px wide. Choose a color scheme that works on your selected background color.

3. Logo alignment - left or center. TBH most go for center.

Landing page (revised 12-August-2022)

Hero images are expected to be provided in two sizes: 1900x300 and 768x200. All device screens < 768px will display the smaller image; anything larger will use the 1900 version.

Hero images can be set at the master event level (good for all orgs) and also selectively overridden at the Org level if/as desired. For example, for Columbia University's reunion, we would typically have separate hero images for Columbia College, the school of engineering and applied science, and the college of general studies. This is a roundabout way of warning you that you may be asked to provide several of them for any one event cycle.

1. Desktop hero image - 1900 x 300px jpg. Strongly recommend avoiding putting any text at all in the image itself, as the image will resize to maintain a full-width look down to 768px wide and small copy may become hard to read.

Keep the primary focus dead center, but know that the event's name can be automatically overlaid on it so you do not need to include it if you do not want to. The center of the image remains centered no matter what.

example:

1. Mobile hero image - 768 x 200px jpg. Same guidance as the desktop hero image re: words and placement.

Visible when the screen width is < 768px wide.

Panels and Bars (revised 28-February-2020)

Throughout the registration process there are areas where we use bars to separate areas of content.

1. Panel header background bottom border color

2. Panel header text color

The headings below (crimson bottom border with crimson text) are indicative of how this appears.

Confirmation Email

Two images, one required, one optional. And a color choice. The email is 600px wide (fixed) with half of the header reserved for your logo art and the other half for "Confirmation Email" identity text.

1. Confirmation email header background color

2. Logo image - 300x60px, transparent background, png. Pick color(s) that look decent on the selected background color.

3. Subhead image - totally optional, extremely rarely wanted. 600x150. tucks in immediately under the header, above the rest of the content.

(Optional) Social Tools

If your social/digital folks want to, they may choose to activate the Facebook OpenGraph content inclusion. If so, they may ask you for

1. OpenGraph story image - 600x600 png

Quick Reference

Copy this into an email, fill it out, attach the graphics, and send it to [e-mail]

Decisions:

Item	Decision
Heading font
Body font
Sitewide header background color
Sitewide header logo alignment
Panel header background bottom border color
Panel header text color

Files:

1. Sitewide header logo

2. Desktop hero image (1900x300 jpg)

3. Mobile hero image (768x200 jpg)

4. Confirmation header logo

5. Confirmation subheader (optional)

6. OpenGraph story image (optional)

Revision history

12 August 2022 - revised hero image guidance to reflect new mobile hero option 28 February 2020 - revised panel header config - no more background color, moved to bottom border color 24 November 2019 - initial release