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.
For 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
Web design and layout
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. Hard and defined measures, like pixels for widths, do not work well in an adaptive environment.
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
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:
Web typography
Header and Paragraph Styles
- Design, content, and SEO best practices recommend breaking up longer portions of text with header text.
- HTML headers 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.
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 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
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.
Paragraph text, brand default 16 px
Paragraph text, 12 px
Paragraph text, 10 px
Paragraph text, 9 px
Paragraph text, 8 px
Print typography
Our 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 BoldSecondary Headlines:
Proxima NovaBody Copy:
Proxima Nova, Elena
Fonts can be purchased for use through University Communications.
Web objects
These general guidelines depend strongly on the individual design and layout of the page, and are suggested defaults. Generally speaking, objects should always adapt to their environments, instead of duplicating for different modes, using modern settings such as em/rem or viewport measurements (vh, vw, etc.).
Horizontal Rules/Lines
80% width
Color: CSU Gold
Weight: 1px
Centered
Border/Box
Border Color: CSU Gold
Border Weight: 1px
Background Color: #f7f7f7
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.