Web Templates & Required Elements

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:

  • The UNT mark and brand elements must appear on the left 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.
  • 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.

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.

UNT Main site header

Colleges, schools and divisions

On college, school and division websites, the main unit’s name will be displayed underneath the university's name and must be linked to the website’s homepage.

Colleges, Schools, & Divisions header


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.

Departments Header

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 underneath the university's name.

Student Services & Events header

Search box

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.

Dynamic drop down menus are available in the provided official university Drupal 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.

  • 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 web-based font
    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
    HEX: #00853E
    RGB: 0,133,62
    Sass: $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
    HEX: #72B844
    RGB: 114,184,62
    Sass: $lime
  • Dark Green
    HEX: #006A31
    RGB: 0,106,49
    Sass: $dark-green
  • Beige
    HEX: #E5DBAE
    RGB: 229,219,174
    Sass: $beige
  • Light Brown
    HEX: #887A68
    RGB: 136,122,104
    Sass: $light-brown
  • Dark Brown
    HEX: #52301B
    RGB: 82,48,27
    Sass: $dark-brown
  • Light Blue
    HEX: #84B1CD
    RGB: 132,177,205
    Sass: $blue
  • Aqua
    HEX: #008265
    RGB: 0,130,101
    Sass: $aqua
  • Mellow Yellow
    HEX: #C1D22D
    RGB: 193,210,45
    Sass: $mellow-yellow
  • Limey Yellow
    HEX: #C0DB37
    RGB: 192,219,55
    Sass: $mellow-limey
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
    HEX: #00853E
    RGB: 0,133,62
    Sass: $green
  • Dark Green
    HEX: #006A31
    RGB: 0,106,49
    Sass: $dark-green
  • UNT Lime Background
    HEX: #368403
    RGB: 54,132,3
    Sass: $bg-lime
  • UNT Aqua Background
    HEX: #016d51
    RGB: 1,109,81
    Sass: $bg-aqua
  • UNT Blue Background
    HEX: #31657a
    RGB: 49,101,122
    Sass: $bg-blue
  • UNT Brown Background
    HEX: #726556
    RGB: 114,101,86
    Sass: $bg-brown
  • Dark Brown
    HEX: #52301B
    RGB: 82,48,27
    Sass: $dark-brown
  • UNT Blackish Background
    HEX: #181818
    RGB: 24,24,24
    Sass: $bg-blackish
  • UNT Dark Gray Background
    HEX: #393939
    RGB: 57,57,57
    Sass: $bg-dark-gray
  • UNT Gray Background
    HEX: #6d6d6d
    RGB: 109,109,109
    Sass: $bg-gray

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.