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.
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.
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.
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
<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.