facebook icon twitter icon youtube icon

Simpson.edu Style Guide

A quick reference for color, typography, icons, and website components

Color

The Simpson palette is designed to support a range of visual styles, using two primary colors, two accent colors, and four neutrals.

Primary Colors

Simpson College Red
#9f0129

Simpson College Gold
#f7af00

White
#ffffff

Accent Colors

Blue #204161

Bright Red #c52233

Neutrals

Dark Gray #1a1a1a

Gray #333333

Light Gray #e6e6e6

Off-White #f5f5f5

Typography

Typography is the core structure of any well-designed interface – used to create clear hierarchies and efficient organizations to guide users through their web experience. Simpson.edu uses three distinct type families.

Open Sans

Open Sans is considered the primary font for Simpson.edu and is used for the majority of headlines and subheadings.

Display of example letterforms available in Open Sans

Garamond

Garamond is used primarily for body copy and eyebrows, but can also be used for headlines when a serif font is desired.

Display of example letterforms available in Garamond

Barlow Condensed

Barlow is primarily used for CTA styling as well as some highly stylized headlines within components.

Display of example letterforms available in Barlow Condensed

Iconography

Iconography consists of images and symbols used to visually represent an object or subject. Icons should be used sparingly, only to provide clarity and reduce cognitive load on users.

It is recommended to use icons from Font Awesome when needed.

Icon Cheatsheet

Components

Simpson.edu has been built using flexible content blocks called components. These components can be used in various ways to create unique pages throughout the experience.

Below are examples of some of the most used components on the site. For the full listing of components and specifics on how to author, please download the authoring guide or contact Oscar Preis.

Download the authoring guide

This component is a content tout

It can have an introduction followed by multiple content tout sections. This component has variable background color.

Example call to action

Content tout section 1

Each content tout section has a content area.

Content tout section 2

Each content tout section has a content area.

Content tout section 3

Each content tout section has a content area.

Content tout section 4

Each content tout section has a content area.

Accordions are similar to tabs.

This is a 1 Column Image Tout

It should be used to breakup page layouts and provide a clear call to action for the user.

This is the Tab component. It is recommended to use 3 tab sections per component.

This component is an Icon Tout

Icon touts display key facts and figures about a topic

This is the Program Requirement Accordion

It is primarily used to showcase example courses for a particular major, but it can be used throughout the site in other ways.

Example call to action

Accordion section body copy goes here.

Example call to action
Students on stage

This is a Two Column Image Tout


It features an image alongside content. This helps to break up the layout of a page and guide the user.

You can choose whether the image goes to the right or the left of the content.

This is another Two Column Image Tout


But this time the image has been set to the right.

Students gathered at Simpson College
  • abc
Slide 1 of 3:

The wild

Embed