Web Templates & Required Elements

The official UNT web design templates were designed to be used in Omni CMS, the university’s new, official Content Management System (CMS). The Omni CMS templates create a design system so that brand and website elements are located in consistent locations and look similar across all UNT websites. As university websites are migrated from Drupal CMS to Omni CMS, the new templates will be applied.

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 Omni CMS and the UNT templates as the foundation for new websites. If external vendors are hired to create a website, the finished product must be in Omni CMS and must meet the template requirements unless an exemption is granted. Requests for exemptions can be submitted to web@unt.edu.

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 web@unt.edu.

Required web header elements:

  • The UNT mark and brand elements must appear on the left side of the header. These elements must not be altered, resized or rearranged.
  • Your website’s name will appear on the left side of the header to the right of the UNT brand mark. 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.

Website header configurations:

UNT main website (www.unt.edu)

This 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.

UNT Main website header

Colleges, schools and divisions

Colleges, Schools, and Divisions header

Departments and subunits

When a department or unit 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. This helps our website visitors with wayfinding and understanding which parent units our websites belong to.

Departments Header

Student services and events

When a website provides a university-wide student service or exists to promote an event, the name of the college or division it belongs to or is sponsored by is optional to include in the header.

Student Services and Events header

Navigation

For ease of use, horizontal navigation is preferred for all websites. If there are too many links to fit in the horizontal area, left-side vertical navigation can be used.

Dynamic drop down menus are available in the provided official university Omni templates. If using custom or vendor-created drop down menus, they must be tested to assure a quality experience for targeted browsers and devices. The navigation must be designed so that navigation is not impacted when javascript is disabled.

Theme elements

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.

Fonts
  • Website title, large headings (h1,h2,h3,h4): Oswald, a free web-based font
    Font stack: "Oswald", sans-serif;
    Sass variable: $oswald
  • Small headings (h5,h6) and body copy (p): Source Sans Pro, a free web-based font
    Font stack: "Source Sans Pro",'Roboto', 'Helvetica', sans-serif;
    Sass variable: $source
  • News article headlines: Roboto Slab, a free web-based font
    Font stack: "Roboto Slab",'Georgia', 'Times', serif;
    Sass variable: $serif
  • Web-based font icons, for social and other icons: FontAwesome, a free web-based font icon pack
    Font stack: "FontAwesome";
    Sass variable: $fontawesome
OMNI CMS Web Colors
  • UNT green
    HEX:#276436
    RGB:39,100,54
    Sass: $unt-green
  • UNT green dark
    HEX:#005326
    RGB:0,83,38
    Sass: $unt-green-dark
  • UNT yellow
    HEX:#bbd236
    RGB:187,210,54
    Sass: $unt-yellow
  • UNT gray dark
    HEX:#333333
    RGB:51,51,51
    Sass: $unt-gray-dark
  • UNT gray medium
    HEX:#595959
    RGB:89,89,89
    Sass: $unt-gray-medium
  • UNT gray light
    HEX:#efefef
    RGB:239,239,239
    Sass: $unt-gray-light

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 Omni CMS template allows you to update the contact information as needed. Like the UNT header, the footer is required and the design cannot be changed.