Our web experience should be seamless for users, no matter where they find us.
From elements across pages to accessibility, content, and more, these guidelines help tell a consistent Northeastern story and ensure the best user experience possible.
University Marketing works in partnership with Information Technology Services and provides expertise in web strategy, user experience and design. Website templates, development and technical support are available through Information Technology Services.
Strategic guidance and brand review
Strategic guidance
When considering an update or launching a new site, please reach out to University Marketing for a review of the strategic need for your project in line with wider university strategy and best practices.
University Marketing approval is required for all digital and website contracts prior to the start of work.
Brand review and approval
- All new web projects, updates, and creative assets must be submitted to [email protected] for review prior to the intended launch date.
- All content will be reviewed for alignment with Northeastern’s brand messaging. This includes verifying that the language, tone, and key messages accurately reflect the university’s values and strategic goals.
- The University Marketing team will aim to provide feedback within two weeks.
- Be sure revisions align with provided guidance before seeking final approval and include time to implement.
- Final approval is required prior to the publication of any sites or changes.
Design elements
Color palette
Color use should align with core brand guidelines.
Use red as an accent color to add emphasis and highlight important elements within designs.
Typography
Primary typeface:
- Real Head Pro is the primary typeface for all digital platforms.
- It should be used for headings, major text elements, and areas requiring emphasis to maintain consistency and brand identity.
- University Marketing provides a license for use of Real Head Pro on websites.
Alternative typeface:
- Lato is an acceptable typeface for digital platforms when Real Head Pro cannot be used or if Lato is already in use within existing designs.
- While Real Head Pro is preferred for new projects, you may use Lato for both headings and body text in current implementations.
Information hierarchy
Ecosystem awareness
Avoid using organizational team structures as a way to structure website content. Instead, think about how your site and content fit within the overall northeastern.edu ecosystem.
Visitors often navigate across multiple sub-sites before and after visiting yours, so ensure your content contributes to a seamless and unified experience.
Avoid duplication
Link to Northeastern-owned sources or authoritative third-party sources, such as major news sites rather than copy existing content onto your website. This reduces redundancy, mitigates risk of plagiarizing, and promotes trust in the accuracy of the information.
Audience-centered approach
Prioritize the needs of users by guiding them intuitively toward their goals, such as finding programs, applying, or exploring opportunities. Keep their experience central to all decisions.
Clarity and flow
Structure your content so it’s easy to navigate, presenting key information first and following a logical progression from overviews to details. Use clear headings and concise text.
Headers and footers
Global header and footer
Standardization
- Websites for official university entities should use the global header and footer.
- Do not remove or alter the global navigation.
- You may remove the Northeastern Wordmark from the global header if using this in the local header.
- Do not remove or alter the Monogram.
- For help, please reach out to IT Services.
Local header and footer
Standardization
- Use the official Northeastern University in either the global header or local header. Do not use this logo in both locations.
- Do not use a Monogram Wordmark in the local header as the Monogram is already present in the global header.
- Do not use custom logos in the local header. If no official logo is available, a site identity logo may be created with our generator.
- Do not use abbreviations in local headers.
- Maximum line height for logos in local header is 13px for a one-line mark. For two lines, height is 38px.
Brand messaging
Alignment with values
All digital content should reflect Northeastern University’s core values, mission, and strategic goals. This includes the language, tone, and messaging used across websites, social media, email communications, and digital advertising.
Consistency
Ensure that all of your digital content conveys a coherent, consistent message that resonates with our target audiences and supports the university’s objectives. See our guidance on writing for specific channels.
Navigation
Consistency
Ensure navigation is intuitive and uniform across all sites, adhering to a common hierarchical structure that aligns with Northeastern’s overall digital strategy. This will be assessed during brand review.
Hierarchy
Use a clear hierarchy in navigation menus to guide users efficiently through the site’s content. Ensure easy access to primary navigation and ensure that secondary navigation supports the user journey.
Accessibility
Navigation must be accessible, following best practices for usability and WCAG standards. This includes clear labeling, keyboard navigation support, and proper semantic markup.
Headline guidance
Set off headlines with H tags, in decreasing size to guide the reader’s attention and maintain visual structure. Ensure font sizes are consistent across similar levels for a cohesive and balanced design:
- Eyebrows should be all caps, 14 pixels high, with a letter spacing of two pixels. The maximum number of characters is 70.
- Title-level headlines should be an H1 size, at least 90 pixels, with a standard height of 128 pixels. The maximum length for a title-level headline is 30 characters, including spaces.
- Subheads (also called “body headers”) should be H2, or 20 pixels high, with a maximum length of 300 characters, including spaces.
All headlines should be in Real Head Pro or Lato and use sentence case. Only eyebrows should use all capital letters.
Buttons and CTA
This includes color, shape, typography, and hover effects to ensure a cohesive user experience.
All buttons and call-to-action (CTA) elements should follow standards used on the main northeastern.edu sites.
Imagery and photo treatments
Consistency
- Use high-quality images that reflect the university’s dynamic community. Images should convey the vibrant atmosphere and cultural breadth that Northeastern embodies. See our photography guidelines for more information.
Photo style
- Squared corners: Images should have squared corners for a clean and professional appearance.
- Treatment: Any photo treatments, such as filters or overlays, should be consistent across sites for a unified look.
Subject matter
- Focus on innovation and academic excellence in imagery choices. Select subjects that resonate with the university’s values and include students and faculty of all backgrounds.
- Emphasize images that show people working together or being together, highlighting the collaborative and shared nature of the university experience.
- Limit the use of images of single individuals, as the Northeastern experience is best represented through community and collaboration.
User interfaces and applications
Technology platforms, user interfaces and software applications that can be customized to our brand should follow our guidelines wherever possible, including mark use, color, and typography.
For example, Northeastern’s Workday platform, which correctly applies brand standards to this service application.
Favicons
Please ensure all favicons for official Northeastern University sites use our Monogram in color red.
Please do not use any other monograms or icons in this location.
