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 the Office of Communications at commassets@amherst.edu 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 commassets@amherst.edu for logo files and guidance using the Amherst College Visual Identity Toolkit. 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), 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 websites is Setimo. If your site will be hosted on an Amherst subdomain, contact commassets@amherst.edu to inquire about using Setimo.

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 commassets@amherst.edu.

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.

Example Link

Collapsible Content