Branding

search

The CU Boulder web brand identity standards comprise of four key areas:

The University of Colorado and CU Boulder brand guidelines require that official websites be branded properly. To make branding a website easier, the following embeds are available for some of the required elements:

Campus header

The campus header adds the campus name and search link. The brand bar color can be either black or white by changing the data-color value.

search
search
<script type="text/javascript" src="https://cdn.colorado.edu/static/brand-assets/live/js/brand-bar.js" id="ucb-brand-bar-embed" data-color="black"></script>

Site Name Header

The website's name is located directly below the campus brand bar. The color of the bar can be set by changing the class on the header element. Allowed values are 'white', 'light', 'dark', and 'black'.

CSS Required
To make the header display properly, you should include either the complete styleguide css, or the branding css in your project.

Examples

Be Boulder/Campus Footer

The Be Boulder/Campus footer adds the Be Boulder images, a link to the campus website, the regent copyright information and the required links. The color of the Be Boulder image can be either black or white by changing the data-color value.

<script type="text/javascript" src="https://cdn.colorado.edu/static/brand-assets/live/js/footer.js" id="ucb-footer-embed" data-color="white"></script>

Web Fonts

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

Embedding Web Fonts

The CU Boulder styleguide CSS already includes the proper references to this webfont, but you can also define the fonts yourself with the following css:

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