Brand Guidelines

Here you can find the objectives of our brand identity, tips on how to use our brand assets, as well as links to download each Competency icon along with its color code!
More info

Key Objectives

➔ Create a visual identity to help students and faculty develop a common understanding of the twelve Champlain College Competencies. 

➔ To visually break down dense, information-focused content into a design system catered toward unfamiliar users. 

Information-Centered Design

➔ This is a highly information-centered project which has a key focus on providing information to a user, and allowing them to find their desired information with minimal effort.

➔ Twelve distinct competency colors were selected as a method of information wayfinding; where a color can be used as an accent to draw the eye to information relating to a particular topic.

➔ A focus has been placed on making navigating this large quantity of information as seamless as possible, through alphabetization, color wayfinding, and the use of page-specific sticky navigation on the website.

Logomark

➔ The logomark should be placed on a white or light-neutral background whenever possible. If it is necessary to place the logomark on a dark background, encase the logo in a white rectangle with 10pt rounded corners.

➔ If possible, avoid using the logomark in black & white. If it is necessary, use grayscale for the icon. If that is not possible, use all black for the icon.

➔ The ascender of the Champlain College typography aligns with the top of the icon. The baseline of the Competencies aligns with the bottom of the icon.

➔ When centering the icon, base the center on the icon and ignore the descender of the “p” in competencies.

➔ Do not alter the logomark in any way. Don’t change the sizing, typography, color, perspective, rotation, or any other visual element.

➔ Give the logo proper space, and treat it similarly to a photo.

Fonts

Figtree Bold, used for headings H1 through H6, offers a friendly and inviting appearance coupled with exceptional readability. This makes it an excellent choice for complex multi-syllable words that often see its use to ensure legibility, such as “competencies”.

Figtree Semibold is used for the Competencies logomark.

Figtree combines it’s distinctive, friendly, and inviting appearance with excellent readability, ensuring easily legible body copy across all screen and print sizes.

Adobe Garamond Pro Semibold is used for the Champlain College logomark.

Color Usage

Reasoning
The decision to alphabetize the competencies and align them with color in an orderly gradient pattern was done to optimize information wayfinding. Twelve distinct colors which differ from Champlain College’s primary brand blue were chosen to visually differentiate each concept, allowing users to search for a particular color when reading word-heavy documents.

Usage
➔ The purpose of these colors is to be used as an accent rather than the primary focus of a particular composition or page layout.

➔ Don’t overuse colors in any design documents; remember to focus on the user in each design to ensure that color does not obstruct or overpower a user’s ability to locate and read information.

➔ All colors can appear alongside black, white, and Champlain Blue in any design.

➔ In a particular design, colors should appear one at a time if discussing one competency or all at once if discussing all competencies. Designs should not contain 2-11 colors of the twelve competency colors without a significant reason.

ANALYSIS

CMYK (Full Color Printing)  C: 7.54, M: 98.75, Y: 100, K: 1.19
RGB (Digital / On Screen)  R: 220, G: 30, B: 13
Hex (Web)  #DC1E0D

COLLABORATION

CMYK (Full Color Printing)  C: 0, M: 48.8, Y: 88.11, K: 0
RGB (Digital / On Screen)  R: 247, G: 150, B: 55
Hex (Web)  #F79637

COMMUNICATION

CMYK (Full Color Printing)  C: 3.88, M: 7.4, Y: 100, K: 0
RGB (Digital / On Screen)  R: 250, G: 222, B: 3
Hex (Web)  #FADE03

CREATIVITY

CMYK (Full Color Printing)  C: 25.96, M: 3.22, Y: 100, K: 0
RGB (Digital / On Screen)  R: 201, G: 212, B: 44
Hex (Web)  #C9D42C

DIVERSITY, EQUITY, & INCLUSION

CMYK (Full Color Printing)  C: 63.85, M: 5.67, Y: 81.53, K: 0
RGB (Digital / On Screen)  R: 103, G: 180, B: 100
Hex (Web)  #67B464

GLOBAL & CULTURAL UNDERSTANDING

CMYK (Full Color Printing)  C: 52.36, M: 0.16, Y: 37.62, K: 0
RGB (Digital / On Screen)  R: 120, G: 201, B: 178
Hex (Web)  #78C9B2

INFORMATION LITERACY

CMYK (Full Color Printing)  C: 74.51, M: 1.54, Y: 36.41, K: 0
RGB (Digital / On Screen)  R: 0, G: 103, B: 178
Hex (Web)  #00B7B2

INQUIRY

CMYK (Full Color Printing)  C: 81.7, M: 33.55, Y: 32.26, K: 2.53
RGB (Digital / On Screen)  R: 36, G: 134, B: 155
Hex (Web)  #24869B

INTEGRATION

CMYK (Full Color Printing)  C: 71.53, M: 81.84, Y: 0, K: 0
RGB (Digital / On Screen)  R: 108, G: 45, B: 211
Hex (Web)  #6C2DD3

QUANTITATIVE LITERACY

CMYK (Full Color Printing)  C: 23.61, M: 93.59, Y: 0, K: 0
RGB (Digital / On Screen)  R: 201, G: 28, B: 160
Hex (Web)  #FF73AF

TECHNOLOGY LITERACY

CMYK (Full Color Printing)  C: 21.63, M: 100, Y: 100, K: 15.31
RGB (Digital / On Screen)  R: 172, G: 3, B: 29
Hex (Web)  #AC031D