Email Brand Guidelines

These guidelines help you spot and fix formatting, brand and accessibility errors before you send a test email. It does not cover every rule or every template.

Who This Applies To

This spec applies to all UMARK and UCOMM-managed email. Individual departments running one-off sends should follow the same rules. Color values pull directly from the W&M Brand Hub official palette.

A Note on Terminology

We send from more than one platform, and the platforms do not agree on what to call things. This guide uses one term consistently and notes the common alternatives. If your tool uses a different word, the concept is the same.

Before You Build

Start From a Template

Create each email by choosing an appropriate template. Templates make the design process smoother and reduce the number of changes you will get back from Web & Digital Design. Do not edit the templates themselves. Edit your copy of the email, never the underlying template. Editing a template changes it for everyone who uses it.

Paste as Plain Text

Pasting your text as plain text is a vital step in making sure fonts and colors do not change from your chosen template. If your copy is coming from a word processor, use the paste menu in the text editor and choose Paste as Plain Text (or Paste from Word).

Why this matters:

• Word processors assign their own font, size, color and weight to text. Those attributes travel with the text when you copy it.
• Email platforms use HTML to assign these attributes. Pasted word-processor styling conflicts with the HTML styling already built into the template.
• That conflict is the single most common source of formatting errors. We want to avoid mismatched fonts, stray colors and inconsistent sizes.
• Pasting as plain text strips the incoming styling so the template's own styling takes over. You can then apply any styling you need directly in the email editor.

Many formatting errors are prevented by this one step.

Check Desktop and Mobile Views

Most emails sent from William & Mary are opened on a phone. Check formatting and design in both views before you send a test. Most platforms provide a preview toggle.

• Desktop view - the full 600 px body width.
• Mobile view - a narrower single-column version. Multi-column layouts stack, images scale down, and line breaks fall in different places.

Images

Where To Get Photos

Everyone with a valid W&M email address can access university photography at wm.canto.com. Choose Login using SSO. You are free to use any of these photos.

Resize and Crop Before You Upload

Images must be resized and cropped to fit the space they will fill before you upload them. Images that are larger than their container can force the email wider than intended in some email clients, and they slow down load times on mobile.

For resizing options, see the university's list of recommended external image editors.

You do not need professional design software to resize an image. Pick a method that fits how you work, and expect it to take a little practice.

Determining Image Size

Many templates use placeholder images at a fixed size. When you need to work out a size yourself, use the 600 px body width as your starting point.

Example: For two images that are placed side by side and separated by 16 pixels on a 600 px wide email.

• 600px / 2 = 300px
• 300px - (16px / 2) = 292px wide each

Alt Text Is Required on Every Image

Write alt text that describes what the image shows or what it does. If an image is purely decorative and carries no information, give it empty alt text so screen readers skip it rather than announcing a filename. Never leave the alt attribute off entirely.

Image Don’ts

• Do not stretch or squash an image to fit. Changing width and height independently distorts the photo. Scale proportionally, then crop.
• Do not place images of different heights side by side. Columns end at different points and the layout looks broken. Crop both to identical width and height.
• Do not upload an image larger than its container and rely on the email to scale it down.
• Do not put essential information in an image alone. Many clients block images by default, and screen readers cannot read text baked into a picture.

Headers and Footers

Headers and footers must match the sender profile of your email and reflect who the recipient will be. Some templates come with a header already assigned. If you need a different one, additional approved headers are available in your platform's shared image library. Search by file name if you know it.

Choosing a Header

The header identifies the sending unit and, where relevant, the specific audience. Pick the most specific approved header that matches your send. A regional or affinity-group send should use that group's header rather than the generic university one.

Choosing a Footer

Two things have to line up:

• The footer matches the sender. An email from alumni engagement uses the alumni footer.
• The footer background matches the email background. If the email body sits on Lightest Silver, use the Lightest Silver version of the footer. A mismatched footer background creates a visible seam across the bottom of the email.

Links

Please reference our email link standards for more information about links in emails.

Email Link Standards

Color

From an accessibility standpoint, it is critical that we pair the correct brand colors to one another.

• Dark Gold is the approved link color on White, Lightest Silver, and Lightest Gold backgrounds
• Web Gold is the approved link color on Dark Green backgrounds only. It fails contrast on light backgrounds and W&M Green backgrounds.
• W&M Green is not approved as a background for inline text links. It may still be used as a section background when the only content is a gold button.

For questions regarding the accessibility of other W&M color combinations, please reference our color contrast checker.

Typography

Georgia and Arial are pre-installed on every major operating system and email client. Custom web fonts (Adobe Fonts, Google Fonts, self-hosted @font-face ) work in some clients but silently fall back to system defaults in Outlook desktop, Gmail app, and older clients, which means that an email can look correct in preview but broken to a third of recipients.

Don't use custom web fonts such as Adobe Fonts, Google Fonts, or self-hosted fonts. System font stacks -apple-system, BlinkMacSystemFont, "Segoe UI" render inconsistently across clients. Don't use Helvetica or Times New Roman as primary choices. They are fallbacks for Arial and Georgia, never the first choice.

Size and Hierarchy

Body copy is never smaller than 16 px. Sizes vary by template, so pasting as plain text should preserve the preset size. Where you are setting sizes yourself, this scale is a reliable starting point.

Layout and Spacing

Line Spacing

Line spacing is the vertical distance between lines of text within a paragraph. For most W&M email templates it is set to 1.5, or 1.15 in some cases. When in doubt, use 1.5.

Padding

Padding is the space between elements, blocks, and the edges of the email. Some tools call this spacing or margin.

To adjust it, select the block you want to change and open its settings, then increase or decrease the padding values. Most editors show a link or chain icon:

• Chain connected - all four sides adjust together, evenly.
• Chain broken - each side can be set independently

Text Alignment

• Short passages - a headline, a one-line invitation or a button label may be centered.
• Longer passages should be left-aligned. Centered text gives every line a different starting point, which forces the reader to hunt for the start of each line and measurably slows reading.
• Never justify body copy in email. Justification creates uneven word spacing and rivers of white space, and email clients handle it inconsistently.

Spacing Do's

White space around elements should be as even as possible. Proper spacing maintains a comfortable distance between lines, objects, and images, which optimizes readability. Use white space to separate sections of an email from one another.

• Keep the same amount of space above and below a repeated element, so a series of items reads as a series.
• When two images sit side by side, make them the same size, and keep the text blocks below them the same length.
• Let space do the separating between a block of text and an adjacent image, rather than a rule or border.
• Keep padding consistent between comparable blocks. Inconsistent padding reads as a mistake even when the reader cannot say why.

Spacing Dont's

• Elements crowding each other. A logo or cypher pressed against the header above it and the text below it needs padding added.
• Too much space. Excessive gaps make related content feel disconnected. Remove space so that related items read as a group.
• Text touching the edge of the email. There should always be padding between text and other objects, including the sides of the email.
• Mismatched columns. Images at different sizes make columns different lengths. Resize to the same pixel width and height.
• Uneven padding around an image. Padding should be even on all four sides unless there is a deliberate reason otherwise.

Other Common Mistakes

• Manual line breaks in headlines. If a headline breaks awkwardly, do not insert a line break to fix it. Email is read on a wide range of screen sizes, so there is no break point that works everywhere. Shorten the headline or reduce its size and let the text wrap naturally.
• Oversized headlines. A headline that fills three lines on mobile is too big.
• Inconsistent body sizes. If one paragraph is smaller than the one above it, they should be made consistent. This is almost always caused by pasting with formatting.
• Off-brand button colors. Buttons use approved fills only.
• Default blue links. Set every link color explicitly.

Code Snippets

These codes snippets are email-safe markup for the Traditional palette. Spirit and VIMS equivalents are in the appendices. They use inline styles because most email clients strip or ignore stylesheets.

Body Copy and Heading

<!-- Body copy -->
<p style="font-family:Georgia,'Times New Roman',Times,serif;
font-size:16px; line-height:1.6; color:#212220;">Body text.</p>

<!-- Heading -->
<h2 style="font-family:Arial,Helvetica,sans-serif;
font-size:22px; font-weight:700; color:#004E38;">Heading</h2>

Inline Body Link on White or Light Background

<a href="..." style="color:#846838; text-decoration:underline;
text-underline-offset:2px;">link text</a>

Inline Body Link on Dark Green Background

<a href="..." style="color:#B08F5A; text-decoration:underline;
text-underline-offset:2px;">link text</a>

CTA Text Link on White or Light Background

<a href="..." style="color:#846838; text-decoration:underline;
text-underline-offset:3px; font-weight:700;">Read more &rsaquo;</a>

Primary CTA Button

<table cellpadding="0" cellspacing="0" border="0"><tr><td
style="background:#004E38; border-radius:4px;">
<a href="..." style="display:inline-block; padding:12px 26px;
color:#ffffff; text-decoration:none; font-weight:700;
font-size:14px; text-transform:uppercase; letter-spacing:0.08em;
font-family:Arial,sans-serif;">Register now</a>
</td></tr></table>

Secondary CTA Button

<table cellpadding="0" cellspacing="0" border="0"><tr><td
style="background:#846838; border-radius:4px;">
<a href="..." style="display:inline-block; padding:12px 26px;
color:#ffffff; text-decoration:none; font-weight:700;
font-size:14px; text-transform:uppercase; letter-spacing:0.08em;
font-family:Arial,sans-serif;">Give today</a>
</td></tr></table>

Article Heading and Paired CTA

<a href="..." style="color:#004E38; text-decoration:none;
font-weight:700; font-size:22px; line-height:1.2;
display:block; margin-bottom:8px;">Article title here</a>
<p>One-line dek or summary of the story.</p>
<p><a href="..." style="color:#846838; text-decoration:underline;
font-weight:700;">Read the story &rsaquo;</a></p>

Email Client Compatibility

• Outlook desktop strips text-underline-offset. Plan for tight underlines on Windows. Consider border-bottom as a fallback for CTAs.

• Dark mode (Apple Mail, Outlook mobile) may invert colors. Web Gold on inverted backgrounds should be tested before critical sends.

• Font weight renders inconsistently. Outlook renders font-weight:700 lighter than most clients, so the contrast between bold and regular will look weaker there. Do not rely on weight alone to signal anything important.

• Buttons: always use table-based bulletproof buttons for Outlook compatibility. A styled <div> will not render as a button.

• Images are often blocked by default. The email must still make sense with every image turned off, which is another reason essential information never lives only inside a picture.

Governance

These rules apply to all UMARK and UCOMM-managed email including Marketing Cloud, Emma and Slate communications. Individual departments running one-off sends should follow the same protocol. Color values pull directly from the W&M Brand Hub official palette.

Questions can be sent via our web consult request form.