Foundation

The Notre Dame Web Theme has been reconsidered with branding and messaging at the forefront.

Utilizing a consistent design language, the theme enables campus communicators the flexibility to deliver a tailored message while keeping the consistency and strength of the Notre Dame brand.

Core Principles

The overall design concepts have been developed with these principles in mind:

• A consistent use of white space is used to create a clear separation between content.
• Typefaces and font weights are used to define content hierarchy.
• Colors and contrast are used for priority and readability.

Key Elements

As a component of the University’s brand, the Web Theme’s style was derived from Notre Dame’s main website. Although each site using the Web Theme will be unique, key elements will remain consistent across all sites. These include:

• The global header includes a Brand Blue background with a Brand Gold rule on top. The site title is located in the upper left corner with the academic mark in the upper right. The site’s main navigation and search bar overlaps the header, aligned to the right.
• The page body includes a white background with consistent fonts and colors for the body copy. Related sub-navigation, titles, and breadcrumbs are placed in standardized locations.
• The global footer includes a Brand Blue background, site information, and links located to the left, and the academic mark and nd.edu links to the right.

Accessibility Decisions

When developing the Web Theme, a key concern was to ensure that content would accessible by all. Keeping accessibility a priority affected multiple decisions in building the theme.

• We chose colors and font sizes that are WCAG 2.2 compliant.
• We created the template markup for compatibility with screen readers and other assistive methods.
• We opted to use on-page sub-navigation instead of drop-down menus to allow those with fine motor disabilities to access content.