Web Guidelines
To maintain a consistent, legible visual identity across digital platforms, Colorado State University is introducing the responsive signature and unit identifier system. CSU Green is our strongest visual cue and should appear in the branded top bar and footer of all University websites.
Every website associated with Colorado State University must include the following:
- Green Header with a Colorado State University signature and unit identifier (when applicable)
- Green Footer with the Colorado State University word mark
Header
The official University Header features CSU Green, the signature with Ram’s Head, and unit identifier. As a responsive header, the text changes size in response to the width of the user’s screen: full header for computer screens, a condensed version for tablets, and an acronym-only version for mobile devices.
Regardless of size, all University Header signatures link to https://colostate.edu and the secondary identifier links to the appropriate departmental home page.
Technical Overview
The purpose of this section is to outline the guidelines to create a responsive Signature for website use. If you would like assistance in creating and implementing a responsive Signature, please contact Web Communications.
Signature mark sizes
One Line: 350-450px, Stacked: 172px-221px, Acronym: 113px-146px
The sizes for the different versions should remain proportional to whatever size you choose (the Ram’s Head should not change in size when the logos change widths at different breakpoints).
*These sizes do not take into account high-resolution displays. Most web browsers automatically compensate standard pixel size definitions to high resolution size conversions, but in cases where different sizes are requested, please contact Web Communications for exemptions.
Max-Width Example:
Min-Width Example:
Signature breakpoints definition
The screen width(s) at which the signature changes versions (ex: one-line version, stacked version, acronym version).
Typically these screen sizes correlate to a large (desktop), a medium (tablet), and a small (phone). For the University Signature, we recommend the single-line version for desktop sizes, the stacked version for tablet sizes, and the acronym version for phone sizes.
Breakpoint examples:
Fonts The secondary identifier should use the font Proxima Nova. Font Location:
Example signature secondary identifier style usage (smaller font):
.smaller-text {
font-family: 'prox-regular';
letter-spacing: .11em;
line-height: 1.1em;
font-size: 14px;
text-transform:uppercase;
}
Example signature secondary identifier style usage (larger font):
.larger-text {
font-family: 'prox-regular';
letter-spacing: .11em;
line-height: 1.1em;
font-size: 19px;
text-transform:uppercase;
}
Smaller text size (roughly 14px) should be used where the secondary identifier text is longer, and expected to wrap, and larger text size (roughly 19px) should be used when the secondary identifier text is shorter, and not expected to wrap. Use sizes within the 14-19px range to visually match the text to the examples given.
The signature secondary identifier should be horizontally centered, so that the horizontal middle of the secondary identifier aligns with the horizontal middle of the signature word mark.
Separator width The signature and unit identifier are separated by a 2px white line that is the height of the signature. The separator should be 15px from the left of the last letter in the signature. The secondary identifier text should be 15px from the left of the separator.
Links The signature should link to http://colostate.edu The secondary identifier should link to the corresponding identifier home page. There should be no visual underline of the links. Background bar The signature should be placed on a green background (HEX: #1E4D2B, or RGB: 30, 77, 43). Spacing around the signature should be consistent with the brand standards outlined in other sections on this website.
Top bar example:
Footer
Each website requires the final footer on the page to display the official CSU Green as the background color with an official CSU word mark linking to http://colostate.edu.
Existing sites with a green footer may remain unchanged. Upon redesign, all sites will incorporate the official University Footer.
Existing sites without a green footer must update pages immediately to include the University Footer.
Footer example using the official linear work mark:
Suggested typography:
The suggested typography for Web use is Factoria, the Web alternative to Vitesse, for headlines, and the Proxima Nova font for body copy.
Example code for typographic styles: