The official UNT web design templates (UNT theme) were designed to be used in Drupal, the university’s official Content Management System (CMS). The Drupal templates create a design wrapper so that brand and website elements are located in consistent locations across all UNT websites.
The web design templates have been designed and tested according to industry best practices. The templates provide a common experience for visitors and meet all branding requirements.
All UNT units are required to use the Drupal CMS and the UNT templates as the foundation for new websites. If external vendors are hired to create websites for a campus entity, the finished product must be in Drupal and must meet the template requirements.
Required web elements
Official UNT branded header
The university has created standard branded headers for use on all websites conducting official business as part of UNT. The only exemptions to these requirements are the UNT main website and units on the brand exemption list. If you need assistance implementing the official UNT branded header on your website or have questions about how to format your unit’s name, please contact UBSC.
Required web header elements:
- Your website’s name will appear on the left side of the header. Some units are required to include the name of the division they belong to as an aid to usability (see requirements and examples below).
- Your website’s name may not be paired with other graphic elements, logos or unit marks in the header.
- The UNT mark and brand elements must appear on the right side of the header. These elements must not be altered, resized or rearranged. The UNT mark must link to the UNT homepage located at http://www.unt.edu.
- UNT global links are to be made via a link in the header on every page. The standard global links make common university resources available to visitors at all times. The standard global links distributed with the official UNT branded header may be customized to be more relevant to a specific audience such as faculty or alumni. The standard global links included in the official UNT branded header are:
Allowed web header configurations:
UNT main site
This web header should only be used on www.unt.edu and may not be replicated on other websites, such as department level college, school, division, center or faculty member websites.
Colleges, schools and divisions
On college, school and division websites, only the main unit’s name will be displayed and must be linked to the website’s homepage.
When a department is part of main unit, such as a college or school, the main unit’s name will be identified in smaller type above the department’s name. Both the main unit’s name and the department’s name must be linked to their respective website homepages.
Student services and events
If the website’s purpose is to provide student services or promote an event, only the name of the service or event should appear in the header. Examples include the Financial Aid & Scholarships, Pohl Recreation Center and Homecoming websites.
A search box should be available on every page in your website. The standard, expected location for the search box is in the top right corner of the page. The UNT web template includes a search box in the top right corner of the header.
The expected behavior of search is that it searches the current website, so make sure that your default search is limited to the content on your website. Advanced search options, such as limiting the search range to certain types of content on your website or expanding the search range to "search all UNT websites" should be made available on the search results page if your audience would benefit from them.
If you want assistance configuring search options on your website, contact Central Web Support or UBSC.
For ease of use, horizontal site navigation is preferred for all websites. If there are too many links to fit in the horizontal area, vertical navigation can be used. Additional styles are set up in the event that you would like your navigation elements to be two lines.
The UNT design templates have been created with Cascading Style Sheets (CSS) that serve the appropriate typography, colors and other thematic elements. These styles promote readability and establish an information hierarchy. The fonts selected are widely available for display in the most common targeted browsers. Colors have been selected to support the UNT brand identity.
NOTE: UNT web templates for campus use are being revised to incorporate the changes to our core style and a plan is being launched to bring existing Drupal sites into brand compliance. While this is in process, please continue to use the currently available web themes in Drupal and we will work to make the transition as seamless as possible.
- Site title, body text and smaller headings: Open Sans, a free web-based font
Font stack: "Open Sans", verdana, sans-serif;
Sass variable: $open-sans
- Large Headings: Open Sans Condensed, a free web-based font
Font stack: "Open Sans Condensed", verdana, sans-serif;
Sass variable: $open-condensed
- Decorative font: Montserrat, a free
Font stack: "Montserrat", sans-serif;
Sass variable: $mont
- Web-based font icons, for social and other icons: FontAwesome, a free web-based font icon pack
Font stack: "FontAwesome";
Sass variable: $fontawesome
Primary Web Color
- UNT green
Secondary Web Colors
These colors serve as colors that compliment UNT Green and can be used on other elements within your web pages. In regards to color contrast, not all of them conform to WCAG 2.0 AA accessibility standards. For accessibility compliance, please refer to the "Background Colors" below.
- UNT Light Green
- Dark Green
- Light Brown
- Dark Brown
- Light Blue
- Mellow Yellow
- Limey Yellow
Background Web Colors
These colors conform to WCAG 2.0 AA accessibility standards when used as background colors with white text on top of them. Please refer to the UNT color contrast grid for usage with other colors. Please note that the Sass variables are only available in the UNT Foundation 2 base theme.
- UNT green
- Dark Green
- UNT Lime Background
- UNT Aqua Background
- UNT Blue Background
- UNT Brown Background
- Dark Brown
- UNT Blackish Background
- UNT Dark Gray Background
- UNT Gray Background
Required footer elements:
The UNT footer must appear at the bottom of every UNT webpage and include website contact information and required links. The UNT Drupal template allows you to update the contact information as needed. Like the UNT header, the footer is required and the design cannot be changed.