Amherst College Website Template 1

This is a basic template for College-affiliated standalone sites, providing starter styles for typography and colors, plus College visual identity resources. The templates are accessible, providing “skip” links, ARIA landmarks and labels, semantic elements, WCAG AAA-compliant contrast, focus outlines, sufficient target sizes, alt text for images, and specific link names. Using these templates does not guarantee accessibility, however, and all websites built for Amherst College must be checked for accessibility by the College.

Anyone using these templates should contact Willa Jarnagin in the Office of Communications BEFORE starting their project. Thank you!

Additional templates:

• Template with hero photo
• Template with plain banner (no menu)
• Grid template

Amherst College Visual Identity

Amherst College Logos

Please contact Willa Jarnagin for logo files and guidance. The Office of Communications generally provides an Amherst College wordmark for stand-alone sites affiliated with the College. We might also provide a seal, monogram, Mammoth, or custom Amherst identity wordmark (in compliance with our Visual Identity Toolkit), but not in all cases. Amherst College logos cannot be used without permission from the College.

Amherst Colors

View swatches, with hex and RGB values, in the Amherst College Color Palette. See the stylesheet for our colors as CSS custom properties.

Amherst Photos

The Amherst College Photography Library provides photos for use on College-affiliated websites.

Typography

The primary font used on College subdomain sites is Setimo (as shown in this template), via Adobe Typekit. If your site will be hosted on an Amherst subdomain, contact Willa Jarnagin for the Typekit code.

If your site will not be on an Amherst subdomain, please use our alternate font, Lato, available at Google fonts.

See more information about the College’s typefaces and usage guidlines.

Page Elements

Headings

Below is a set of suggested heading styles. You may modify the font size and letter case for the context of your website. You can also use different colors from our color palette, as long as you use high-contrast colors that pass the WCAG AAA standard for accessibility. Note that the Setimo typeface needs tighter letter-spacing at larger sizes (Lato does not).

Buttons

Icons

We use FontAwesome font icons, which you can add to your site following these instructions. If you need any of Amherst’s custom icons, contact Willa Jarnagin.

This Is a Callout

This callout holds an image, title, description, and a link styled as a button. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Collapsible Content