Branding for Websites

ÌÒÉ«ÊÓÆµâ€™s web standards help us ensure a seamless user experience across sites and devices. These guidelines promote compatibility and accessibility on university websites, enhancing our overall reputation. Learn how to use your header, footer, font, colors, URLs and more to make our web brand consistent, predictable and user-friendly.

Ìý

Overview

The following guidelines provide an overview of the ÌÒÉ«ÊÓÆµ web brand identity standards. The new web identity standards for ÌÒÉ«ÊÓÆµ are part of an overarching refresh to the CU system’s brand standards for each campus. It is important to note:

  • The update to the web identity standards does not affect the use of print-specific, unit-based campus logos and type treatments on printed materials and communications.

All print-based brand standards can be reviewed atÌýDesigning on Brand.

Use the web brand identity standards on all official university websites. These include the following types of sites/organizations:

  • ÌÒÉ«ÊÓÆµ colleges and schools
  • Campus departments, units, labs
  • Campus-recognized affiliates conducting official university business
  • ÌÒÉ«ÊÓÆµ faculty research and/or professional websites
  • Officially sanctioned ÌÒÉ«ÊÓÆµ student groups who want to use the ÌÒÉ«ÊÓÆµ brand (student groups approved by the Center for Student Involvement).

Do not use the ÌÒÉ«ÊÓÆµ web brand identity on personal websites.


Web Brand Identity Standards

The web brand identity standards comprise four key areas:

  • Elements of the Web Brand Header
  • Elements of the Web Brand Footer
  • Web Brand Font
  • Web Color Palette

The following provides more details of each:

Elements of the Updated Web Brand Header

  • Campus header: This is where the interlocking CU logo will display beside the campus-specific wordmark.
  • Site name header:ÌýThis is where your site name will display along with theÌýaffiliated major unit the site falls under (e.g., College of Arts and Sciences).Ìý
Campus Header

About the Affiliated Major Units

A new element of the brand web header is the inclusion of the website’s affiliation to a ÌÒÉ«ÊÓÆµ major unit organization. Apply affiliated major units to the following types of websites:

  • Department/unit (academic, program, certificate, residential)
  • Academic support
  • Faculty (professional)
  • Research group/lab
  • Support services
  • Center
  • Institute
  • Service/resource/support department
  • Events (college/department specific)
  • Museum
  • Publication
  • Official student groups
  • Official club sports

The following are considered ÌÒÉ«ÊÓÆµ major units. Major unitsÌýwill notÌýhave a senior executive-level affiliation applied to their site:

  • Chancellor (executive level)
    • Advancement (major unit)
  • Academic Affairs (senior executive level—Russ Moore)
    • Colleges
      • Arts & Sciences, College of (major unit)
      • Engineering & Applied Science, College of (major unit)
      • Media, Communication and Information, College of (major unit)
      • Music, College of (major unit)
    • Schools
      • Business, Leeds School of (major unit)
      • Education, School of (major unit)
      • Law, School ofÌý (major unit)
      • Graduate School (major unit)
    • Academic Support Units
      • Continuing Education, Division of (major unit)
      • University Libraries (major unit)
    • Academic Resource Management (major unit)
    • Academic Planning & Assessment (major unit)
    • Diversity, Equity & Community Engagement (ODECE) (major unit)
    • Faculty Affairs (major unit)
    • Research & Innovation (major unit)
    • Strategic Initiatives (major unit)
    • Student Affairs (major unit)
    • Undergraduate Education (major unit)
  • Strategic Resources and Support (senior executive level—Kelly Fox)
    • Enrollment Management (major unit)
    • Finance & Business Strategy (major unit)
    • Human Resources (major unit)
    • Information Technology (major unit)
    • Infrastructure & Sustainability (major unit)
    • Institutional Equity and Compliance (major unit)
    • Integrity, Safety & Compliance (major unit)
    • Strategic Relations and Communications (major unit)

Elements of the Web Brand Footer

  • Link to your unit contact page, email address, phone number and/or address
  • Be Boulder image
  • University name: ÌÒÉ«ÊÓÆµ
  • Copyright statement: © ÌÒÉ«ÊÓÆµ

Privacy and trademark links:ÌýLegal & Trademarks |ÌýPrivacy

Footer elements

Brand Font

The approved brand web font isÌý (website use only).

Subdomain sites are encouraged, but not required, to implement Roboto for their web font. Roboto is a free font maintained by Google. ou can add the font to your site with the code below:

You can reference the font in your stylesheet like this:

font-family: 'Roboto', sans-serif; font-family: 'Roboto Condensed', sans-serif;

Web Brand Colors

As part of the web brand identity standards, we have outlined a suite of approved web colors. An important part of the color selection was the proper color contrast for accessibility and general readability. The combination of background, text and link colors have all been thoroughly tested and are in compliance with color contrast requirements outlined in our accessibility policy. It is important to follow the color guidelines exactly as they are outlined to meet the required color contrast.

Learn about the details of these colors on theÌý.


Co-branding

Units or organizations that have previously been eligible for co-branding exemptions are not exempt from following the above guidelines. These units are encouraged to use their logos in other ways on the site.

Other Considerations

Portals/Web Applications

Web applications, such as the campus portals, may add navigation or interactive elements to the local header to create a cleaner user interface and take advantage of design systems such as Google’s Material Design.

Examples of additional elements include hamburger menus, search, notifications and user account information.

We encourage you toÌýreach out to the ÌÒÉ«ÊÓÆµ Brand team if you are implementing a campus web application.

Third-party Web Applications

In most cases, units that need to use a third-party web application for student-facing transactions must comply with brand standards. We recognize that most third-party applications have limitations on how to apply the brand.

  • Option one (preferred): Work with the third-party vendor to comply with guidelines as stated.
  • Option two: If the third-party platform isn’t capable of following the guidelines as stated, you should reach out to the ÌÒÉ«ÊÓÆµ Brand team to help determine alternative solutions.

Note:ÌýIn addition to complying with the guidelines above, all websites and web applications should clearly describe the name of the site/application and its purpose, following web content and search engine optimization best practices.

Procurement of third-party platforms is subject to brand review (including naming) to ensure compliance and a cohesive overall user experience across university sites and web-based applications.

Mobile Application Branding

Applications branded with ÌÒÉ«ÊÓÆµâ€™s name in the app stores can either enhance or detract from the university’s reputation. Anyone creating an app for ÌÒÉ«ÊÓÆµ must comply with the visual identity and branding standards and seek approval before launch.

Anyone creating an app that represents ÌÒÉ«ÊÓÆµ must commit to supporting that app with content and necessary development for at least two years after publication of the app.

Specific Mobile App Brand Standards

Application icon graphics and default (initial) screens should feature the university logo. We created a special compact version of the ÌÒÉ«ÊÓÆµ logo for this purpose.
Sample icon graphic:

ÌÒÉ«ÊÓÆµ Application Icon

Sample default screen graphic:

Sample default screen graphic


Ìý

  • All graphics should primarily useÌýuniversity colors and fonts.
  • The provider (seller) of the app should be listed as "ÌÒÉ«ÊÓÆµ."
  • The app description should include that the app was: "Developed and provided by the ÌÒÉ«ÊÓÆµ."
  • The copyright for the app should be listed as "© ÌÒÉ«ÊÓÆµ."

Web Branding Exemptions

Some websites have received approved exemptions by the CU System Brand board. Units or campus affiliates will not receive exemptions until they have written approval from the CU System Brand Board. These exemptions are for the main sites only and do not extend to affiliated sites. Sites that have received exemptions include:

Named schools: Leeds School of Business, Colorado Law

Leeds
Law

Fiske Planetarium, CU Presents

Fiske Planetarium
CU Presents header example

Affiliated Major Unit exceptions

There are some exceptions to adding/displaying the affiliated major unit organization, which are:

  • Large campus events. For example, the Republican National Debate
  • Chancellor or campuswide initiatives. For example, Academic Futures and Financial Futures
  • Central applications. For example, MyCUInfo
  • Some vendor applications with limited brand space

You can submit questions to theÌýÌÒÉ«ÊÓÆµ brand team regarding other types of exceptions.