This guide will introduce you to design practices used on colby.edu. Using these design elements will make adding content easier and will keep the look and functionality of the site consistent with Colby’s branding guidelines.


Typefaces and Text Elements

Typefaces Used on the Site

Two typefaces are used on colby.edu. Franklin Gothic is the primary font family and is used for most text and small headlines on the site. Open Sans is a clean, simple typeface, used for larger headlines and special projects.

Both typefaces appear similar when first viewed. However, where and how they are used on the page can noticeably change the appearance of the site. On colby.edu, various font weights and sizes of each typeface are used for different levels of headers, paragraphs of text, lists, captions, and so forth. Examples of typeface usage are shown in this guide.

Character samples of the two typefaces, in the same sizes, and similar weights:

Franklin Gothic URW
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*(

Open Sans
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*(

Location of Text Elements

Most pages on the site have four main areas: banner, content, sidebar, and footer.

Page elements

Styling Text Elements

Titles, Headers, and Captions in the Banner Area

Text in the banner area includes section titles class="section-title-inner", headers class="carousel-caption h4 a , and paragraph text for carousels
class="carousel-inner p".

banner-elements

Slideshows in the Banner Area

Sites often feature slideshows in the banner area. Text elements in these slideshows include titles #frontSlideshow h3.slide-title and captions #frontSlideshow p.slide-caption.
Slideshow text example

Headers in the Content Area

Header levels can be selected in the editor as part of the process of building a post in WordPress. The proper use of header levels is important for good search engine optimization (SEO) for the site. It is also one way of emphasizing the individual page’s keywords to search engines. Header level tags are given much more importance by search engines than regular body text. Screen readers also use the header levels to help make sense of the page. These are some of the available header styles:

Header Level 1

font-size: 1.5em; line-height: 1.1em;

Header Level 2

font-size: 1.35em; line-height: 1.2em;

Header Level 3

font-size: 1.05em; line-height: 1.4em;

Header Level 4

font-size: 1em; line-height: 1.2em;

 

Paragraph Text and Links

Basic paragraph and link text are automatically styled for you.

This is paragraph text. The typeface is always Franklin Gothic, 400 weight. font-family:"franklin-gothic-urw", Helvetica, Arial, sans-serif;font-weight:400;.

This is an example of text link styling. color: #2d4ea4;a:hover {color: #788bbb;}

 


Colors

The color palette for the Colby site is limited to the following colors. The palette is grounded in blue and balanced by a range of grays and light blue-grays. The colors are intentionally subdued in saturation and contrast, allowing imagery on the site to stand out and reducing visual noise.

Any colors not included in this palette will need to be approved by the web team in the Office of Communications.

HEX and RGB colors, and their areas of use are listed below.

 

#002878 #002878
rgb(0,40,120)
Colby blue: logo, special buttons
#2d4ea4 #2d4ea4
rgb(0,40,120)
Link text
#788bbb #788bbb
rgb(120,139,187)
Link text hover
#758195 #758195
rgb(117,129,149)
Section menu, primary buttons
#b4b9c2 #b4b9c2
rgb(180,185,194)
Custom color blocks
#a5a5a5 #a5a5a5
rgb(133,133,133)
Small custom headers, for sidebars and list
#858585 #858585
rgb(165,165,165)
Custom text color
#353535 #353535
rgb(53,53,53)
Darkest text color: paragraphs, custom headlines, footer background color

Images, Buttons, and More

We want to make consistent use of images and other graphic elements easy. Here are some recommendations.

Using the Colby Logotype

On the main site, a white Colby logotype is always used in the top header menu area. On dark backgrounds and dark images, a white logo is preferred. If the logo is used on a white background, a Colby blue logotype #002878; is always used. Download correctly sized and optimized logotype artwork here.

Please note: All Colby logos must link to the Colby homepage, http://www.colby.edu

Colby logo white

Colby logo hex: #002878

Working with Images

Working with images is easy on colby.edu. The location of images within the site determines how images are sized and formatted.

Banner Images

Banner images are used throughout the site. Banner height is variable, depending on the level of page and purpose of the banner. Colby.edu is fluid width and responds to various device viewing sizes. Actual viewable width and height can vary widely, for example, between a large, high-resolution desktop computer and a smartphone.

Image height is predetermined by the type of page. For example, department main pages automatically adjust in height depending on whether  a slideshow is in use. Images used for banners are typically precropped and sized to 1600 x 600 px. Banner images are chosen with all of these things in mind.

Banner images

Example: 1600 x 600 images uploaded to the site, used as banner images, showing variable view of the image height.

 

Content Images

WordPress has options for resizing and cropping images when they are placed in a post or page. File formats supported include .jpg and .png. Although large-size images can be uploaded, the optimum size for content images generally does not need to be larger than 900 x 600.

Sample for images used on site

Example: Full-size image, reduced to size-medium and set to align-right placed in a post.

image-sizes-and-alignment

Example: 900 x 600 image placed in a post, set to align-left and reduced to size-thumbnail, top, size-medium, center, and size-original.

Buttons

Buttons used on the site fall into three categories, and their use depends on where and how they are used on the page.

Primary buttons are used in the content area and sidebar. This is the default style. Primary buttons provide extra visual weight and identify the primary action in a set of buttons.

Secondary buttons are most often used when another button is needed in combination with the primary button on a page. Secondary buttons carry less visual weight on the page.

Special-use buttons are reserved for the banner, the footer, and important links in the sidebar. Any other use of special button colors needs to be approved by the web team in the Office of Communications.

Button styling can be easily accomplished by using the CSS classes below.

Primary class="btn btn-primary"
Secondary class="btn"
Special Use class="btn btn-special"
Default Button Size class="btn"
Large Button Size class="btn btn-large"

 

Combinations of button classes can be used to create various types and sizes of buttons. For example, here is a special button, in a large size.

Large Special Button class="btn btn-large btn-special"