Color Palette

Each color below includes both the hex value and the SASS variable name for that color.

  • $navy
    #143250

  • $aqua
    #1dc2bb

  • $white
    #ffffff

  • $off-white
    #f5f5f5

  • $light-gray
    #e6e6e6

  • $gray
    #c2c2c2

  • $dark-gray
    #69747c

  • $black
    #000

  • $yellow
    #fced1e

Typography

All fonts are listed below along with their associated font-weights and/or styles.

Circular Medium
Circular Medium Italic (300)

Circular Bold
Circular Bold Italic (500)

Circular Black
Circular Black Italic (700)

Circular Book
Circular Book Italic (300)

PT Serif (300)

Each icon shows the icon itself, along with the CSS classname needed to access it.

.icon-chevron-down

.icon-chevron-left

.icon-chevron-right

.icon-facebook

.icon-reverse-facebook

.icon-glassdoor

.icon-linkedin

.icon-reverse-linkedin

.icon-reverse-twitter

.icon-magnifying-glass

.icon-instagram

Header classes are independent of the base element styles. This means that any of the styles below can be used with any text element depending on which you need to use based on semantic meaning. The numbers after are the font sizes in smaller viewports versus larger ones.

Level 1 Header (36px/72px)

Level 2 Header (28px/60px)

Level 3 Header (21px/36px)

Level 4 Header (18px/28px)

Level 5 Header (12px/14px)

Trailing Line

Underline

Full Width Level 5

Hanging Header

A standard paragraph element is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences or perhaps an inline link. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph with the class of large is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences or perhaps an inline link. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Buttons

Flexible Content Modules

This is a copy block.

You have full control to the which type style you’d like to use, how wide you’d like to copy to be (applies primarily to desktop view sizes), and what you’d like the color scheme to be.

This particular instance is only using the default options with no extra formatting.

Button

Inline Button

Columns Module

Often times, you may want to divide your content into multiple columns in wider viewports. In that case, you’ll want to use the columns module.

Four Column Option

This module will allow you to select between two, three, or four columns to organize your content. Outside of selecting how many columns you’d like, the options are same as the copy block module.

Third Column

Since the columns module requires you to have a minimum of two columns, there may be times where you’ll need to combine the standard copy block module with this one.

Fourth Column

SinceIn order to make this combination of modules appear seamless, you should select identical color schemes, and then remove the padding from the top of whichever module you select second.

This is a copy block.

 

You have full control to the which type style you’d like to use, how wide you’d like to copy to be (applies primarily to desktop view sizes), and what you’d like the color scheme to be.

This particular instance is using the aqua background color and it’s width set to 65%.

Columns Module

Whenever you’re unsure of how best to use a module, make sure to refer back to this style guide for examples.

Three Column Option

We’ve added multiple use cases of each module to this style guide using the same methods in WordPress that you’ll be using to manage your content.

Third Column Added

You can always edit the Style Guide page in WordPress to see how we’ve created this very page and each module within it.

Video Module

 

You can simply embed a full width video inline with controls (scroll down for example), have the video autoplay and overlay text (like this), or set the option for it to be the first module on the page. If set as the first module on the page, a negative margin is added so that the navigation will overlap the video.

coworkers laughing together
We're sure having a good time over here!

Large Image w/ Box (No Link)

circle icon with 1 in center

Repeatable Boxes Module

circle icon with 1 in center

Alternate Use Case

Alternate Settings

 

Split Width Image

 

You can also select which side you’d like the image to appear on. For example, if you have more than one of this module type back to back, you may want to alternate which side the image appears on. Additionally, you can change the color scheme if you’d like to mix things up.

PHILANTHROPY

 

Responsible for Ourselves —and to Others

 

The Big Climb
Communities in Schools
Seattle Children’s Hospital
George Pocock Rowing Foundation
Families of Color
Mary’s Place
Jubilee
Habitat for Humanity
Thrive

Module

Logo Soup

With this module, you’re given a WYSIWYG area for your content and an area to upload logos that will automatically rotate through.

Microsoft logo
Microsoft logo
Microsoft logo
Microsoft logo