Introduction

Welcome to Shmoop's Style Guide! Here you will find many examples and tools used throughout the front end of Shmoop. This style guide was written with both designers and engineers in mind. Please use this tool as a guideline when designing and building new pages for Shmoop.

Click HERE to download a copy of the Brand Guidelines

Logo Types

Shmoop’s logo reflects our friendly and approachable style, while appearing clean and professional. It’s essential that it’s used consistently and appropriately. Older versions of the logo should never be used.

 
Use this logo when you have ample clearspace. The bubbles should be balanced with the rest of the design.
Use this logo when you need a small icon to represent our brand, with enough visual balance for the bubbles.
 
Use this logo when there isn’t space for the bubbles in the design. Example: the logo in the site’s top nav.
Use this logo when you need a small icon to represent our brand and don’t have visual allowance for the bubbles.
 
Use this logo if you want to include our tagline in promotional materials. Be sure it is visually balanced.
Use this logo when you need a small icon to represent our brand and want to include We Speak Student We Speak our tagline.

Logo Clearspace

There should be sufficient clearspace around the logos so our brand is represented clearly and cleanly.

 

Use this logo when you need a small icon to represent our brand, with enough visual balance for the bubbles.

Use this logo when you need a small icon to represent our brand, with enough visual balance for the bubbles.

Use this logo when you need a small icon to represent our brand, with enough visual balance for the bubbles.

Use this logo when you need a small icon to represent our brand, with enough visual balance for the bubbles.

Colors

Shmoop has a wide array of colors already established within its code base. Click on the variable link to copy the SASS variable and click on the color to copy the hex string of that color.

 
$sh-red-dark
#a8271c
$sh-red
#f43929
$sh-red-light
#f47c72
$sh-red-lighter
#f9d9d6
$sh-orange-dark
#9c320b
$sh-orange
#fc4c02
$sh-orange-light
#f88358
$sh-orange-lighter
#ffe0d4
$sh-orange-yellow-dark
#9a5e00
$sh-orange-yellow
#ed9100
$sh-orange-yellow-light
#f6ae3d
$sh-orange-yellow-pale
#f2efc2
$sh-ribbon
#f1f0c5
$sh-orange-yellow-lighter
#ffe8c3
$bs-redorange
#ff613b
$sh-green-dark
#2c7c58
$sh-green
#17a665
$sg-green-mid
#01a863
$sh-green-light
#4bd295
$sh-green-pale
#79ac71
$sh-green-lighter
#cef0e1
$sh-green-lightest
#e0efd8
$sh-green-medium
#21c681
$sh-blue-dark
#003da5
$sh-blue
#175eb1
$sh-blue-light
#267fe7
$sh-blue-lighter
#cfe2f7
$sh-blue-lightest
#d9edf8
$sh-mobile-blue-even
#094081
$sh-mobile-blue-odd
#0a4d9b
$sh-blue-pale
#6081d6
$sh-blue-with-text
#cfe3f5
$sh-blue-logo
#003da5
$sh-blue-danube
#6494cd
$sh-purple-dark
#330b6a
$sh-purple
#5823a3
$sh-purple-pink
#db61d7
$sh-purple-light
#8956d1
$sh-purple-midlight
#a982b0
$sh-purple-lighter
#e8d8ff
$sh-beige
#faf8f5
$sh-tan
#faf1e4
$sh-blue-gray
#6396cd
$white
#fff
$black
#000
$sh-gray-darker
#222
$sh-gray-dark
#333
$sh-gray
#666
$sh-gray-word-bg
#c7c7c7
$sh-gray-light
#999
$sh-gray-lightmed
#eee
$sh-gray-lighter
#f0f0f0
$sh-gray-even-lighter
#ccc
$sh-gray-white
#f9f9f9
$sh-ghost
#f9f0e3
$sh-offwhite
#fffcf8
$sh-offwhite-dark
#f3eec4
$sh-offwhite-body
#faf8f5
$sh-linen
#faf1e4
$sh-red-natural
#fff3f2
$sh-orange-natural
#fff5e5
$sh-pink-natural
#fff3ee
$sh-green-natural
#edf2da
$sh-green-natural-light
#f7f5de
$sh-blue-natural
#eaf0f7
$sh-teal-natural
#e4f0eb
$sh-purple-natural
#faeeed
$sh-violet-natural
#f8f2ff;
$brand-primary
#428bca
$brand-success
#5cb85c
$brand-info
#5bc0de
$brand-warning
#f0ad4e
$brand-danger
#d9534f

Imagery

Shmoopy imagery focuses on inanimate objects that are goofy. We are currently phasing out any images that contain famous people and they should not be used going forward.

 

Typography

Shmoop's procedure of arranging type or processing data and printing from it. Here you you will find the available font styles and sizes.

Font Families

Click a font to copy its class name.

Roboto Light

Roboto Regular

Roboto Medium

Roboto Bold

Roboto Italic

Roboto Medium Italic

Roboto Bold Italic

Gloria Hallelujah Light

Gloria Hallelujah Regular

Gloria Hallelujah Medium

Gloria Hallelujah Bold

Gloria Hallelujah Italic

Bitter Regular

Bitter Bold

Bitter Italic

Bitter Bold Italic

 

Font Sizes

tag

px

Actual size

<h6>
12
To Shmoop or NOT to Shmoop!
 
<h5>
14
To Shmoop or NOT to Shmoop!

<p>

16

To Shmoop or NOT to Shmoop!

<h4>

18

To Shmoop or NOT to Shmoop!

<h3>

24

To Shmoop or NOT to Shmoop!

<h2>

30

To Shmoop or NOT to Shmoop!

<h1>

36

To Shmoop or NOT to Shmoop!

 

Icons

We are currently using FontAwesome for our icons. Please see HERE for all available icons.

Simple iconography is used throughout the site. Icons should be used consistently for the following functions.


General Icons

Completed action

Incomplete

Search

Close

Edit

Print

Back

Next

Collapsed

Expanded

Locked

Unlocked

Sort ascending

Sort descending

Delete

Remove

Time

Description

Video

Ace/College Related

Students

Upload photo

Calendar

Add

Add (alt)

Info

Settings

Star

Buttons

Here are Shmoop's available button styles.

 
<button class="btn btn-lg btn-primary"></button>
 
<button class="btn btn-primary"></button>
 
<button class="btn btn-sm btn-primary"></button>