Web Style Guide

These guidelines are designed to provide a consistent visual brand experience to users by providing similar elements and styles — including fonts, icons, colors and logos — across all digital media. The style guide should be used as a resource when creating websites, digital signs and other online elements.

Web Fonts


Archivo is a free web font used for styling headers, navigation and other elements within the Purdue web templates. It was designed to be used simultaneously in print and online platforms and supports over 200 world languages.


Champion is a web font used for styling various elements within the Purdue templates that is part of the central Purdue brand. The Champion series was created to help designers deal subtly with headlines of different lengths by offering a gentle and nearly undetectable change in font width. To use Champion, please contact online@purdue.edu.

Web and Social Icons

An icon is a small picture or symbol that serves as an intuitive representation of the content of a website. Because of their condensed size and versatility, icons are a simple, effective way to transmit information to the user in an abbreviated pictorial form.

One of the easiest ways to make your website stand out is to incorporate great visuals. We want to make it as easy as possible for you, so we've created this quick guide to audience and generic icons. You'll find these listed as options in Cascade for the blocks on your audience pages. We suggest that you try out several to see which ones work the best for you.

Font Awesome

Font Awesome is a free-to-use icon font containing a large number of icons used throughout the Purdue web templates. These icons can be styled similarly to regular fonts, thus granting a large amount of flexibility.

Font Awesome html example code <i class="fa fa-address-book" aria-hidden="true"></i>







View the master list of icons available from the Cascade interface for the Purdue Templates.


A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is the little icon that browsers display next to a page's title on a browser tab, or in the address bar next to its URL. It also is used when you bookmark a page. Measuring 16x16 pixels, it is tiny, but it can play a big part in unifying Purdue sites.

Favicon Example

Download the official Purdue favicon.

Colors and Logos

For the specifics on using colors and logos on the web, please refer to these main sections within the guide.