Style Guide

Color Palette

Primary

  • #0c273d
  • #0e6fa8
  • #1295d2
  • #7bcbf0

Secondary

  • #54d0ed
  • #8ec63f

Grays

  • #4b5c64
  • #708994
  • #adc1cc
  • #dae1e6
  • #f2f2f2

Icons

Examples

<i class="icon searchIcon"></i>
<i class="icon heartIcon active"></i>
<i class="icon star-fullIcon active"></i>
<i class="icon checkmarkIcon active"></i>

// Sabbatical icons with circular blue background
<i class="icon grad-hat-outlineIcon sabbaticalIcons"></i>

Notes

The icons have been generated in a font file for easier usage similiar to Bootstraps glyphicons. Just specify the class name to use. SVG files have also been included encase you want to omit the font file completely and just use the SVG's individually.

  • grad-hat-filledIcon
  • grad-hat-outlineIcon
  • pinterestIcon
  • twitterIcon
  • google-plusIcon
  • facebookIcon
  • linkedinIcon
  • searchIcon
  • locationIcon
  • heartIcon
  • appleIcon
  • five-dotsIcon
  • checkmarkIcon
  • checkmark-circleIcon
  • userIcon
  • play3Icon
  • infoIcon
  • comment-fillIcon
  • comment-outlineIcon
  • flowerIcon
  • star-fullIcon
  • two-peopleIcon
  • playIcon
  • you-tubeIcon

Buttons

Examples

<button class="btn med-blue-btn btn-icon">
<i class="icon star-fullIcon"></i> Blue</button>

<button class="btn green-btn btn-icon-2line">
<span><small>Lorem ipsum dolor sit </small> </span> Blue</button>

Notes

There are 2 separate classes for a button with an icon and a button with 2 lines of text; specified in examples to the left.

Typography

Examples

<h1 class="text-dark-gray">Heading</h1>
<h2 class="text-blue">Heading</h2>
<h3 class="text-med-gray">Heading</h3>

Notes

Site wide font being used is the Google font Lato. Utilizing Bootstrap's default sizing for paragraph.

Body

 #4b5c64 14px

h1 Sabbatical Heading

 #4b5c64 32px

h2 Sabbatical Heading

h3 Sabbatical Heading

#1295d2 22px

h4 Sabbatical Heading

#708994 18px

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 #4b5c64 14px
Link #1295d2

Forms

Examples

<input class="form-control" type="text" placeholder="Default">

Notes

Used Bootstrap's form class, ".form-control" to style the form elements.