Brand

Apply the UTD brand to your website header, fonts, colors and buttons.

Go To Section

UTD Brand Standards

Brand standards unify an organization through a cohesive visual identity that includes logos, colors and messaging. The Office of Communications and Marketing developed guidelines to help achieve consistency across print and digital platforms and throughout academic and departmental units.

brand.utdallas.edu

UTD Web Design System

Consider the web design system as a digital toolkit for the University’s brand standards. It serves as a growing library of web components and best practices for UTD’s web developers and designers.

Top Bar

The top bar is the first brand element of the University’s websites. Place it above the header of your microsite.

The green bar is full-width, 40px height with #154734 background color.
Display the UTD+wordmark SVG with 300px width.
Link the SVG to https://www.utdallas.edu.
Left-align the monogram with the main heading or content of the website.
Vertically center the SVG inside the top bar.

Top Bar Example

Copy and adjust the following HTML and CSS to add the top bar to your website.

HTML example

<div class="top-bar">
  <div class="wrapper">
    <div class="utd-wordmark">
    <a href="https://www.utdallas.edu/"><img src="https://websvcs.utdallas.edu/shared/svg/utd-wordmark-1line-white-web.svg" alt="The University of Texas at Dallas"></a>
    </div>
  </div>
</div>

CSS example

body { margin: 0; }

.top-bar {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0;
  width: 100%;
  background: #154734; }

/* Adjust the .wrapper so the monogram+wordmark
left-aligns with the website's main content. */
.wrapper { padding: 0 2%; }

.utd-wordmark img { width: 300px; }

UTD+Wordmark SVG

This version of the UTD logo is intended for the top bar only. Its Modesto font is slightly larger in relation to the monogram to improve legibility.

<a href="https://www.utdallas.edu/"><img src="https://websvcs.utdallas.edu/shared/svg/utd-wordmark-1line-white-web.svg" alt="The University of Texas at Dallas"></a>

Logos

Add an SVG version of the UTD monogram to your website. See UTD’s Brand Standards for usage guidelines.

Get SVGs from the Icon Library

Fonts

The University’s official web fonts are DIN 2014, Minion Pro, and Modesto. They require Adobe Fonts to display on a page.

See UTD’s Brand Standards for typography guidelines.

Font	HTML+CSS
DIN 2014	Copy this into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/roc5fuc.css">` CSS: font weights `400` `700` and font styles `normal` and `italic` are available. `font-family: din-2014, sans-serif;`
Minion Pro	Copy this into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/yhp6itx.css">` CSS: font weights `400` `700` and font styles `normal` and `italic` are available. `font-family: minion-pro, serif;`
Modesto	Copy this into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/kzv7mny.css">` CSS: font weight `300` and font styles `normal` and `italic` are available. A bit of letter spacing also increases Modesto’s legibility. `font-family: modesto-text, serif; letter-spacing: .015em;`

Below are commonly used font combinations with the University’s official fonts. Please note that using more fonts will take longer to load and may noticeably affect your website’s performance.

Fonts	HTML+CSS
DIN 2014 + Minion Pro	Copy this into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/dye4ijr.css">`
Minion Pro + Modesto	Copy this code into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/utu0nov.css">`
DIN 2014 + Modesto	Copy this into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/wde3gwf.css">`
DIN 2014 + Minion Pro + Modesto	Copy this into the `<head>` tag of your HTML page: `<link rel="stylesheet" href="https://use.typekit.net/pta5iek.css">`

Colors

Hex Codes

Use the following hex codes to apply UTD’s color palette to your website.

Color Name	Hex Code	Notes
UTD Orange	`#e87500`	Primary color
UTD Green	`#154734`	Primary color
Secondary Color	`#5fe0b7`	Use the secondary color sparingly to accent the primary colors.
Neutrals	`#000000 #333333 #767676 #eeeeee #f4f4f4`	Silver or tints of black can be used to complement the color palette. When combined with white, `#767676` is the lightest gray that passes WCAG AA contrast requirements.
Web Accessible Orange	`#c95100`	`#c95100` is a darker tint of UTD Orange. This exception meets web accessibility requirements for smaller text. Use it only for fonts under 18pt (under 14pt if bold). Test with a color contrast checker to ensure usage meets accessibility requirements. Do not use this color for backgrounds, shapes or icons.

Red Color Usage

Do not use red on your site content. This includes headings, background color, body text and icons. UTD solely uses red for urgent, life-threatening messages and announcements.

Sass Options

Add the UTD color palette as Sass variables to your style sheets.

.scss example

// UTD Color Palette
$utd-orange: #e87500;
$utd-green: #154734;
$secondary-green: #5fe0b7;
$web-accessible-orange: #c95100;

// Color Usage
$embedded-text-links: $web-accessible-orange;
$hover-text-links: $utd-green;

.sass example

// UTD Color Palette
$utd-orange: #e87500
$utd-green: #154734
$secondary-green: #5fe0b7
$web-accessible-orange: #c95100

// Color Usage
$embedded-text-links: $web-accessible-orange
$hover-text-links: $utd-green

Buttons

Apply the UTD brand using official fonts and colors to buttons and CTA links. For orange buttons, ensure the text is at least 18pt (or 14pt when bold) to meet web accessibility requirements.

Bootstrap Buttons

If your site uses Bootstrap, you can add the .btn-orange, .btn-green, .btn-outline-orange and .btn-outline-green classes to apply UTD’s colors and fonts to your buttons.

/* Add UTD fonts and colors to Bootstrap buttons */

.btn {
  font-family: din-2014, sans-serif;
  padding: .375rem .75rem .5rem .75rem; }

.btn-green {
  border: 1px solid transparent !important;
  color: #fff !important; 
  background: #154734; }
.btn-green:hover { background: #222; }

.btn-orange {
  border: 1px solid transparent !important;
  font-size: 18pt; /* required to meet WCAG 2.1 AA */
  color: #fff !important;
  background: #e87500; }
.btn-orange:hover { background: #222; }

.btn-outline-green {
  border: 1px solid #154734 !important;
  color: #154734 !important;
  background: none; }
.btn-outline-green:hover {
  border: 1px solid #eee !important;
  background: #f6f6f6; }

.btn-outline-orange {
  border: 1px solid #e87500 !important;
  font-size: 18pt; /* required to meet WCAG 2.1 AA */
  color: #e87500 !important;
  background: none; }
.btn-outline-orange:hover {
  border: 1px solid #eee !important;
  color: #c95100 !important;
  background: #f6f6f6; }

/* Add an icon inside a Bootstrap button */

.btn-simple-icon {
  width: 1.25em;
  height: 1.25em;
  padding: .05em .05em .25em .3em; }