Typography

Exo Bold (700)
Used at the top of the page or on the home. Use sparingly.
class="header"

Subheader

Exo Bold (700)
Used underneath header text
class="subheader"

Title

Exo Bold (700)
Title of page or article
class="title"

Subtitle

Roboto Bold (700)
Used underneath the titles or introducing paragaph sections.
class="subtitle"

Paragraph Text

Roboto 1rem Regular (400)
Regular paragraph text.
p tag

Cutline

Roboto Regular (400)
Used for image captions or where small text is necessary.
class="cutline"

Colors

Brand Colors

Colors Associated with the Scylla Brand

Primary 1
#01371A
"-bg-primary1" or "-fg-primary1"

Primary 2
#123EB0
"-bg-primary2" or "-fg-primary2"

Accent 1
#005E2C
"-bg-accent1" or "-fg-accent1"

Accent 2
#F7F7F7
"-bg-accent2" or "-fg-accent2"

Secondary 1
#E7E7E7
"-bg-secondary1" or "-fg-secondary1"

Secondary 2
#F7F7F7
"-bg-secondary2" or "-fg-secondary2"

Text
#1B1B1B
"-bg-text" or "-fg-text"

Black
#000000
"-bg-black" or "-fg-black"

White
#FFFFFF
"-bg-white" or "-fg-white"

Social Colors

Various Social Media Brand Colors

Facebook
#3b5998
"-bg-facebook" or "-fg-facebook"

Flickr
#0063db
"-bg-flickr" or "-fg-flickr"

Github
#4183c4
"-bg-github" or "-fg-github"

Google Plus
#dd4b39
"-bg-googleplus" or "-fg-googleplus"

Instagram
#517fa4
"-bg-instagram" or "-fg-instagram"

LinkedIn
#007bb6
"-bg-linkedin" or "-fg-linkedin"

Pinterest
#cb2027
"-bg-pinterest" or "-fg-pinterest"

Twitter
#00aced
"-bg-twitter" or "-fg-twitter"

Vimeo
#aad450
"-bg-vimeo" or "-fg-vimeo"

Youtube
#b00
"-bg-youtube" or "-fg-youtube"

Buttons

Primary and Default Button State
Used as the main call-to-action
class="button -primary"

Secondary Button

Secondary White Button
White call-to-action to contrast a dark background
class="button -secondary"

Text Only Button

Tertiary Button with Text Only
Text button with Arrow Icon
class="button -text-only"

Icons

Brand Icons

Icons Associated with Shenandoah Fleet

calendar.svg

comments.svg

home.svg

mail.svg

map-pin.svg

pen-paper.svg

person.svg

search.svg

tools.svg

trash.svg

UI Icons

Carousel arrows, hamburgers, and close icons

arrow-down.svg

arrow-left.svg

arrow-right.svg

arrow-up.svg

arrow-down-thin.svg

arrow-left-thin.svg

arrow-right-thin.svg

arrow-up-thin.svg

close.svg

close-2.svg

close-thin.svg

down.svg

hamburger.svg

kabob.svg

plus.svg

plus-2.svg

plus-thin.svg

refresh.svg

share.svg

spinner.svg

up.svg

Social Icons

Social media icons

facebook.svg

facebook-logo.svg

github-logo.svg

github-mark.svg

linkedin.svg

linkedin-logo.svg

pinterest.svg

twitter.svg

you-tube.svg

you-tube-text.svg

Wrappers

Max width: 400 px

class="-wrap-400"

Max width: 600 px

class="-wrap-600"

Max width: 800 px

class="-wrap-800"

Max width: 1000 px

class="-wrap-1000"

Max width: 1200 px

class="-wrap-1200"

Max width: 1400 px

class="-wrap-1400"

Max width: 1600 px

class="-wrap-1600"

Max width: 1800 px

class="-wrap-1800"

Max width: 2000 px

class="-wrap-2000"

Max width: 2200 px

class="-wrap-2200"

Max width: 2400 px

class="-wrap-2400"

Spacers

Extra Small Spacer (1rem) div class="spacer-xs"

Small Spacer (2rem) div class="spacer-s"

Medium Spacer (3rem) div class="spacer-m"

Large Spacer (5rem) div class="spacer-l"

Extra Large Spacer (8rem) div class="spacer-xl"