Style Guidebook: Design

We want our visitors to have the best experience possible, and to do that we need to ensure our designs are professional, consistent, and reach the level of excellence the College stands for. 

Our design objectives

CSU-Ram-357-617For all of our materials, from the most complex printed booklet to a simple webpage, we create clean designs and craft useful content. Good designs demonstrate accessibility, professionalism, and consistency, and tell our story in engaging ways. We have a number of objectives we keep in mind to create well-designed materials:

  • Consistent use of our brand standards, including logos, colors, typography, and writing styles
  • An understanding of the differences between print and web design requirements, including responsive design for both mobile and desktop experiences
  • Using the highest quality photography and images throughout our platforms
  • Good use of open/empty space to highlight content through the use of proper margins and padding
  • An understanding of different interface requirements for mobile, desktop, and accessibility differences
  • A consistently flatter, shadowless design based on modern design practices

Download the VISUAL BRAND LANGUAGE PDF

The Visual Brand Language (VBL) PDF file can be downloaded below. Along with our visual standards, the file also includes a number of design and image samples. 

Responsive Web design

Modern web experiences are based on the idea that the content will be responsive to whatever device it is being viewed with. The design adapts to different sizes immediately, changing the user’s experience no matter if they are on a small phone, a medium tablet, or a huge monitor.

Mobile responsiveness is especially important to both how our users interact with our websites and how Google ranks us. Users want a consistent, professional interface, and content that fails to respond to their needs will force them away from our websites. Google also ranks sites that are responsive higher than those that are not, often going so far as penalizing websites that do not offer mobile-friendly experiences. 

Our platforms utilize a responsive design for consistency, accessibility, and adaptability. All content on any of our platforms must be ready for a responsive environment, and have the ability to be viewed correctly at any size.

Accessible Web Design

Blue-yellow color blindness, tritanopia
Blue-yellow color blindness, tritanopia

It is important for our entire audience to be able to view our content, no matter what situation they are in. We want our content to be accessible, and this Guidebook sets standards for how we achieve those inclusive goals:

Cascading Style Sheets (CSS)

Cascading Style Sheets define the typography, colors, and designs of a particular page, and are set globally for an entire website. These default settings are based on our brand standards, and should not need to be overridden in most cases.

The standard requirements are set in CSS for any content requiring a style of some kind, and are based on current World Wide Web Consortium (W3C) standards and best practices.

  • CSS changes are made sitewide, only by the Web Operations or Communications teams.
  • Inline styles, defined as CSS added directly to text or other elements to change colors or other styles, are not allowed unless pre-approved by the Web Operations or Communications teams. Elementor styles, provided they follow our brand standards, are acceptable in most cases.
  • There are cases where, either for design or technological needs, the CSS does need to change. Please contact us for assistance.

Elementor Page Builder Plugin

elementor-full-logoOur WordPress websites use a plugin called Elementor, which allows us more flexibility when creating page designs. This very page is built using Elementor, allowing us to use rows and columns to place objects where we need them without the limits of the normal WordPress page grid. Each page and object within the design remain responsive, and are easily updated and added through the WordPress administration screens.

  • Layouts designed using Elementor must still adhere to our branding guidelines and web design best practices, and are subject to approval by the Web Operations or Communications teams.
  • Using Elementor for any page or content within our platforms requires training by the Web Operations team prior to any design work.

Web Typography

Header and Paragraph Styles

Design, content, and SEO best practices recommend breaking up longer portions of text with header text. HTML headlines are designed to work in descending order, from a larger H1 header at the top of the page down to H3 or H4 for smaller subheaders.

Our header text is also set to capitalize any content by default, for consistency. In any designs separate from standard header or paragraph elements, this concept must be maintained.

Header styles are different than paragraph text styles, in both how they look and how Google treats them. Paragraph text is not typically capitalized over entire sentences, only with acronyms. Google treats paragraph text as actual content, but treats headers as separators between content.

H1 Header

H2 Header

H3 Header

H4 Header

Paragraph text

Fonts & Links

The Proxima Nova family of fonts is the default font for all our websites, based on the Colorado State University Style Guide. All of our text, headers, and other typographical needs use Proxima Nova in various weights.

Based on our accessibility standards, we avoid using text embedded in images wherever possible. If embedded text is required, typography must continue to follow brand standards and alt tags must be used.

Links on our pages are indicated by dotted underlines, set in CSU Gold, and are not otherwise bolded or differently colored than other text. Link settings are written in our CSS, and can only be changed by Web Operations or Communications.

H1 Proxima Nova

H2 Proxima Nova

H3 Proxima Nova

H4 Proxima Nova

Proxima Nova paragraph text

Proxima Nova link text

Font size

For accessibility, our guidelines require clear readability when it comes to selecting a font size. WCAG standards require that font sizes should not be lower than 9 pixels, and in most cases should be higher.

The chart to the right represents different font sizes. As with our brand fonts above, we avoid using text embedded in images wherever possible. If embedded text is required, typography must continue to follow brand standards.

Paragraph text, brand default 16 px

Paragraph text, 12 px

Paragraph text, 10 px

Paragraph text, 9 px


Paragraph text, 8 px

Print Typography

WSCOE print typography sampleOur print typography standards are based on the Colorado State University Style Guide. Fonts work differently in print than they do in an online environment, and our print brand standards use both serif and sans-serif fonts.

  • Primary Headlines:
    Vitesse Bold

  • Secondary Headlines:
    Proxima Nova

  • Body Copy:
    Proxima Nova, Elena

Web Objects

Horizontal Rules/Lines

80% width
Color: CSU Gold
Weight: 1px
Centered

Border/Box

Border Color: CSU Gold
Border Weight: 1px
Background Color: #f7f7f7
3% Margin
3% Padding

Buttons

Width depends on usage
High visibility for accessibility
Squared edges
Background Color: CSU Green
Text/Icon Color: White (#ffffff)
Reversed color choices in some cases
Border: CSU Gold, 1px

Icons

The Elementor Page Builder plugin used by the College sets a default size for icons which is typically acceptable. Icon size should be consistent with the size of the content around it if a different size is needed.

Color choice varies by design and requirements, but should default to either CSU Gold or CSU Green.

Webpage Layout

screenshot landing page

Landing pages

Landing pages are those pages that are expected to get the most traffic, or are designated as portals for areas of further information. The layout for a landing page is typically a "one-page" design, with the content laid out in sections down the page.

These pages often have "parallax" image headers, which allow the background image to slightly shift while the viewer is scrolling. These header areas typically contain an H1 or H2 header, depending on page location, set in white (#ffffff) text. On some photo backgrounds, a slight black-to-transparent overlay is used to help the header text appear with more contrast.

The content is typically fairly light on these pages, so a good amount of padding is needed for each section. Landing pages typically are meant to lead elsewhere on the website, so a clean, clear design is required. Sections should be clearly differentiated from one another, through color, images, or objects.

screenshot engexpday

Secondary pages

Secondary pages, or content pages, contain more specific information about a particular topic. The design typically has a simple header with the content below. Depending on the page and its content, the layout might also include a sidebar area on the right. The content in this area is set by site administrators, except where the Elementor Page Builder plugin has been used to create a unique layout.

When content is text-heavy on secondary pages, content should be separated by headers. For readability and accessibility, headers should be used every 3-5 paragraphs of content, in descending order as needed. This makes them easier to read, and eases the heaviness of too much text on a page.