diff --git a/scripts/build b/scripts/build
index e9fd4f5..82e1216 100755
--- a/scripts/build
+++ b/scripts/build
@@ -29,6 +29,8 @@ npm install
 
 mkdir -p static/build/js/lib static/build/fonts static/build/css static/build/img
 cp -R node_modules/font-awesome/fonts static/build/
+cp -R node_modules/bootstrap-sass/assets/fonts/* static/build/fonts
+cp -R static/src/img static/build
 
 npm run build
 
diff --git a/static/src/img/header.jpg b/static/src/img/header.jpg
new file mode 100644
index 0000000..764e19c
Binary files /dev/null and b/static/src/img/header.jpg differ
diff --git a/static/src/img/logo-transparent.png b/static/src/img/logo-transparent.png
new file mode 100644
index 0000000..602aded
Binary files /dev/null and b/static/src/img/logo-transparent.png differ
diff --git a/static/src/js/app.js b/static/src/js/app.js
old mode 100755
new mode 100644
index e69de29..adfebec
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -0,0 +1,17 @@
+import './creative';
+import ansi_up from 'ansi_up';
+
+
+$('.image').each(function () {  // setup div-image hybrids
+  const ele = $(this);
+  if (ele.data('image')) {
+    ele.css('background-image', 'url(' + ele.data('image') + ')');
+  } else {
+    ele.removeClass('image');
+  }
+});
+
+$('.ansi-up').each(function () {
+  const ele = $(this);
+  ele.html(ansi_up.ansi_to_html(ele.html()));
+});
diff --git a/static/src/js/creative.js b/static/src/js/creative.js
new file mode 100644
index 0000000..da1676c
--- /dev/null
+++ b/static/src/js/creative.js
@@ -0,0 +1,37 @@
+/*!
+ * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+// jQuery for page scrolling feature - requires jQuery Easing plugin
+$('a.page-scroll').bind('click', function(event) {
+  const anchor = $(this);
+  $('html, body').stop().animate(
+    {
+      scrollTop: ($(anchor.attr('href')).offset().top - 50)
+    },
+    1250,
+    'easeInOutExpo'
+  );
+  event.preventDefault();
+});
+
+// Highlight the top nav as scrolling occurs
+$('body').scrollspy({
+  target: '.navbar-fixed-top',
+  offset: 51
+});
+
+// Closes the Responsive Menu on Menu Item Click
+$('.navbar-collapse ul li a').click(function() {
+  $('.navbar-toggle:visible').click();
+});
+
+
+// Offset for Main Navigation
+$('#main-nav').affix({
+  offset: {
+    top: 50
+  }
+});
diff --git a/static/src/js/creative/creative.js b/static/src/js/creative/creative.js
new file mode 100644
index 0000000..da1676c
--- /dev/null
+++ b/static/src/js/creative/creative.js
@@ -0,0 +1,37 @@
+/*!
+ * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+// jQuery for page scrolling feature - requires jQuery Easing plugin
+$('a.page-scroll').bind('click', function(event) {
+  const anchor = $(this);
+  $('html, body').stop().animate(
+    {
+      scrollTop: ($(anchor.attr('href')).offset().top - 50)
+    },
+    1250,
+    'easeInOutExpo'
+  );
+  event.preventDefault();
+});
+
+// Highlight the top nav as scrolling occurs
+$('body').scrollspy({
+  target: '.navbar-fixed-top',
+  offset: 51
+});
+
+// Closes the Responsive Menu on Menu Item Click
+$('.navbar-collapse ul li a').click(function() {
+  $('.navbar-toggle:visible').click();
+});
+
+
+// Offset for Main Navigation
+$('#main-nav').affix({
+  offset: {
+    top: 50
+  }
+});
diff --git a/static/src/js/creative/index.js b/static/src/js/creative/index.js
new file mode 100644
index 0000000..43b0721
--- /dev/null
+++ b/static/src/js/creative/index.js
@@ -0,0 +1,6 @@
+import 'jquery.easing';
+import './creative';
+
+import WOW from 'wow.js';
+
+new WOW().init();
diff --git a/static/src/js/index.js b/static/src/js/index.js
new file mode 100644
index 0000000..43b0721
--- /dev/null
+++ b/static/src/js/index.js
@@ -0,0 +1,6 @@
+import 'jquery.easing';
+import './creative';
+
+import WOW from 'wow.js';
+
+new WOW().init();
diff --git a/static/src/scss/creative.scss b/static/src/scss/creative.scss
new file mode 100644
index 0000000..d6b8b84
--- /dev/null
+++ b/static/src/scss/creative.scss
@@ -0,0 +1,344 @@
+@import "mixins";
+
+// Global Components
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-family: $font-family-base;
+}
+
+hr {
+  border-width: 3px;
+  border-color: $brand-orange;
+  max-width: 50px;
+
+  &.light {
+    border-color: $white;
+  }
+}
+
+a {
+  transition: all 0.35s;
+  color: $brand-orange;
+
+  &:hover,
+  &:focus {
+    color: $brand-orange-dark;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-heading;
+}
+
+p {
+  margin-bottom: 20px;
+  line-height: 1.5;
+  font-size: 16px;
+}
+
+.bg-primary {
+  background-color: $brand-orange;
+}
+
+.bg-dark {
+  background-color: $brand-grey-dark;
+  color: $white;
+}
+
+section {
+  padding: 100px 0;
+}
+
+aside {
+  padding: 50px 0;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+// Navigation
+
+.navbar-default {
+  transition: all 0.35s;
+  border-color: opacify($brand-grey-dark, 0.05);
+  background-color: $white;
+  font-family: $font-family-heading;
+
+  .navbar-header .navbar-brand {
+    text-transform: uppercase;
+    color: $brand-orange;
+    font-family: $font-family-heading;
+    font-weight: 700;
+
+    &:hover, &:focus {
+      color: darken($brand-orange, 10%);
+    }
+  }
+
+  .nav {
+    & > li {
+      & > a,
+      & > a:focus {
+        text-transform: uppercase;
+        color: $brand-grey-dark;
+        font-size: 13px;
+        font-weight: 700;
+
+        &:hover {
+          color: $brand-orange;
+        }
+      }
+
+      &.active {
+        & > a,
+        & > a:focus {
+          background-color: transparent;
+          color: $brand-orange !important;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+  @media (min-width: 768px) {
+    border-color: opacify($white, 0.3);
+    background-color: transparent;
+
+    .navbar-header .navbar-brand {
+      color: opacify($white, 0.7);
+
+      &:hover, &:focus {
+        color: $white;
+      }
+    }
+
+    .nav > li > a,
+    .nav > li > a:focus {
+      color: opacify($white, 0.7);
+
+      &:hover {
+        color: $white;
+      }
+    }
+
+    &.affix {
+      border-color: opacify($brand-grey-dark, 0.05);
+      background-color: $white;
+
+      .navbar-header .navbar-brand {
+        color: $brand-orange;
+        font-size: 14px;
+
+        &:hover, &:focus {
+          color: darken($brand-orange, 10%);
+        }
+      }
+
+      .nav > li > a,
+      .nav > li > a:focus {
+        color: $brand-grey-dark;
+
+        &:hover {
+          color: $brand-orange;
+        }
+      }
+    }
+  }
+}
+
+// Homepage Header
+
+header {
+  position: relative;
+  background-image: url("../img/header.jpg");
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  min-height: auto;
+  text-align: center;
+  color: $white;
+
+  .header-content {
+    position: relative;
+    padding: 100px 15px;
+    width: 100%;
+    text-align: center;
+
+    .header-content-inner {
+      h1 {
+        margin-top: 0;
+        margin-bottom: 0;
+        text-transform: uppercase;
+        font-weight: 700;
+      }
+
+      hr {
+        margin: 30px auto;
+      }
+
+      p {
+        margin-bottom: 50px;
+        color: opacify($white, 0.7);
+        font-size: 16px;
+        font-weight: 300;
+      }
+    }
+  }
+  @media (min-width: 768px) {
+    min-height: 100%;
+
+    .header-content {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 0 50px;
+
+      .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 1000px;
+
+        p {
+          margin-right: auto;
+          margin-left: auto;
+          max-width: 80%;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+
+// Sections
+
+.section-heading {
+  margin-top: 0;
+}
+
+.service-box {
+  margin: 50px auto 0;
+  max-width: 400px;
+
+  @media (min-width: 992px) {
+    margin: 20px auto 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.portfolio-box {
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  max-width: 650px;
+
+  .portfolio-box-caption {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    transition: all 0.35s;
+    opacity: 0;
+    background: opacify($brand-orange, 0.9);
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: $white;
+
+    .portfolio-box-caption-content {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 100%;
+      text-align: center;
+
+      .project-category,
+      .project-name {
+        padding: 0 15px;
+        font-family: $font-family-heading;
+      }
+
+      .project-category {
+        text-transform: uppercase;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .project-name {
+        font-size: 18px;
+      }
+    }
+  }
+
+  &:hover {
+    .portfolio-box-caption {
+      opacity: 1;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .portfolio-box-caption {
+      .portfolio-box-caption-content {
+        .project-category {
+          font-size: 16px;
+        }
+
+        .project-name {
+          font-size: 22px;
+        }
+      }
+    }
+  }
+}
+
+.call-to-action h2 {
+  margin: 0 auto 20px;
+}
+
+.text-primary {
+  color: $brand-orange;
+}
+
+.no-gutter > [class*="col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.btn-default {
+  @include button-variant($brand-grey-dark, $white, $white);
+}
+
+.btn-primary {
+  @include button-variant($white, $brand-orange, $brand-orange);
+}
+
+.btn {
+  border: 0;
+  border-radius: 300px;
+  text-transform: uppercase;
+  font-family: $font-family-heading;
+  font-weight: 700;
+}
+
+.btn-xl {
+  padding: 15px 30px;
+}
+
+// Extras
+// -- Highlight Color Customization
+::selection {
+  background: $brand-grey-dark;
+  text-shadow: none;
+  color: $white;
+}
+
+img::selection {
+  background: transparent;
+  color: $white;
+}
diff --git a/static/src/scss/creative/creative.scss b/static/src/scss/creative/creative.scss
new file mode 100644
index 0000000..d6b8b84
--- /dev/null
+++ b/static/src/scss/creative/creative.scss
@@ -0,0 +1,344 @@
+@import "mixins";
+
+// Global Components
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-family: $font-family-base;
+}
+
+hr {
+  border-width: 3px;
+  border-color: $brand-orange;
+  max-width: 50px;
+
+  &.light {
+    border-color: $white;
+  }
+}
+
+a {
+  transition: all 0.35s;
+  color: $brand-orange;
+
+  &:hover,
+  &:focus {
+    color: $brand-orange-dark;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-heading;
+}
+
+p {
+  margin-bottom: 20px;
+  line-height: 1.5;
+  font-size: 16px;
+}
+
+.bg-primary {
+  background-color: $brand-orange;
+}
+
+.bg-dark {
+  background-color: $brand-grey-dark;
+  color: $white;
+}
+
+section {
+  padding: 100px 0;
+}
+
+aside {
+  padding: 50px 0;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+// Navigation
+
+.navbar-default {
+  transition: all 0.35s;
+  border-color: opacify($brand-grey-dark, 0.05);
+  background-color: $white;
+  font-family: $font-family-heading;
+
+  .navbar-header .navbar-brand {
+    text-transform: uppercase;
+    color: $brand-orange;
+    font-family: $font-family-heading;
+    font-weight: 700;
+
+    &:hover, &:focus {
+      color: darken($brand-orange, 10%);
+    }
+  }
+
+  .nav {
+    & > li {
+      & > a,
+      & > a:focus {
+        text-transform: uppercase;
+        color: $brand-grey-dark;
+        font-size: 13px;
+        font-weight: 700;
+
+        &:hover {
+          color: $brand-orange;
+        }
+      }
+
+      &.active {
+        & > a,
+        & > a:focus {
+          background-color: transparent;
+          color: $brand-orange !important;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+  @media (min-width: 768px) {
+    border-color: opacify($white, 0.3);
+    background-color: transparent;
+
+    .navbar-header .navbar-brand {
+      color: opacify($white, 0.7);
+
+      &:hover, &:focus {
+        color: $white;
+      }
+    }
+
+    .nav > li > a,
+    .nav > li > a:focus {
+      color: opacify($white, 0.7);
+
+      &:hover {
+        color: $white;
+      }
+    }
+
+    &.affix {
+      border-color: opacify($brand-grey-dark, 0.05);
+      background-color: $white;
+
+      .navbar-header .navbar-brand {
+        color: $brand-orange;
+        font-size: 14px;
+
+        &:hover, &:focus {
+          color: darken($brand-orange, 10%);
+        }
+      }
+
+      .nav > li > a,
+      .nav > li > a:focus {
+        color: $brand-grey-dark;
+
+        &:hover {
+          color: $brand-orange;
+        }
+      }
+    }
+  }
+}
+
+// Homepage Header
+
+header {
+  position: relative;
+  background-image: url("../img/header.jpg");
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  min-height: auto;
+  text-align: center;
+  color: $white;
+
+  .header-content {
+    position: relative;
+    padding: 100px 15px;
+    width: 100%;
+    text-align: center;
+
+    .header-content-inner {
+      h1 {
+        margin-top: 0;
+        margin-bottom: 0;
+        text-transform: uppercase;
+        font-weight: 700;
+      }
+
+      hr {
+        margin: 30px auto;
+      }
+
+      p {
+        margin-bottom: 50px;
+        color: opacify($white, 0.7);
+        font-size: 16px;
+        font-weight: 300;
+      }
+    }
+  }
+  @media (min-width: 768px) {
+    min-height: 100%;
+
+    .header-content {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 0 50px;
+
+      .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 1000px;
+
+        p {
+          margin-right: auto;
+          margin-left: auto;
+          max-width: 80%;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+
+// Sections
+
+.section-heading {
+  margin-top: 0;
+}
+
+.service-box {
+  margin: 50px auto 0;
+  max-width: 400px;
+
+  @media (min-width: 992px) {
+    margin: 20px auto 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.portfolio-box {
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  max-width: 650px;
+
+  .portfolio-box-caption {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    transition: all 0.35s;
+    opacity: 0;
+    background: opacify($brand-orange, 0.9);
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: $white;
+
+    .portfolio-box-caption-content {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 100%;
+      text-align: center;
+
+      .project-category,
+      .project-name {
+        padding: 0 15px;
+        font-family: $font-family-heading;
+      }
+
+      .project-category {
+        text-transform: uppercase;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .project-name {
+        font-size: 18px;
+      }
+    }
+  }
+
+  &:hover {
+    .portfolio-box-caption {
+      opacity: 1;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .portfolio-box-caption {
+      .portfolio-box-caption-content {
+        .project-category {
+          font-size: 16px;
+        }
+
+        .project-name {
+          font-size: 22px;
+        }
+      }
+    }
+  }
+}
+
+.call-to-action h2 {
+  margin: 0 auto 20px;
+}
+
+.text-primary {
+  color: $brand-orange;
+}
+
+.no-gutter > [class*="col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.btn-default {
+  @include button-variant($brand-grey-dark, $white, $white);
+}
+
+.btn-primary {
+  @include button-variant($white, $brand-orange, $brand-orange);
+}
+
+.btn {
+  border: 0;
+  border-radius: 300px;
+  text-transform: uppercase;
+  font-family: $font-family-heading;
+  font-weight: 700;
+}
+
+.btn-xl {
+  padding: 15px 30px;
+}
+
+// Extras
+// -- Highlight Color Customization
+::selection {
+  background: $brand-grey-dark;
+  text-shadow: none;
+  color: $white;
+}
+
+img::selection {
+  background: transparent;
+  color: $white;
+}
diff --git a/static/src/scss/creative/mixins.scss b/static/src/scss/creative/mixins.scss
new file mode 100644
index 0000000..e43e16a
--- /dev/null
+++ b/static/src/scss/creative/mixins.scss
@@ -0,0 +1,43 @@
+// Mixins
+
+@mixin button-variant($color, $background, $border) {
+  border-color: $border;
+  background-color: $background;
+  color: $color;
+
+  &:hover,
+  &:focus,
+  &.focus,
+  &:active,
+  &.active,
+  .open > .dropdown-toggle & {
+    border-color: darken($border, 7%);
+    background-color: darken($background, 5%);
+    color: $color;
+  }
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle & {
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      border-color: $border;
+      background-color: $background;
+    }
+  }
+
+  .badge {
+    background-color: $color;
+    color: $background;
+  }
+}
diff --git a/static/src/scss/footer.scss b/static/src/scss/footer.scss
new file mode 100644
index 0000000..7f97e9c
--- /dev/null
+++ b/static/src/scss/footer.scss
@@ -0,0 +1,49 @@
+footer {
+  background-color: $brand-grey-dark;
+  padding-top: 20px;
+  width: 100%;
+  height: $footer-height;
+  text-align: center;
+  color: $white;
+
+  a {
+    color: $brand-orange-light;
+
+    &:hover {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  .powered-by p {
+    font-size: $font-size-base;
+
+    a {
+      color: inherit;
+
+      &:hover {
+        color: $brand-orange;
+      }
+    }
+  }
+
+  .social {
+    margin: 0;
+    padding: 7px;
+    font-size: 23px;
+
+    a {
+      margin: 0 4px;
+      color: $white;
+
+      &:hover {
+        color: $brand-orange-light;
+      }
+    }
+  }
+
+  .ci-badge {
+    margin-top: 10px;
+    height: $font-size-h3;
+  }
+}
diff --git a/static/src/scss/functional.scss b/static/src/scss/functional.scss
new file mode 100644
index 0000000..d2e3b5a
--- /dev/null
+++ b/static/src/scss/functional.scss
@@ -0,0 +1,12 @@
+.margin {
+  margin: 15px;
+}
+
+.header-bg {
+  background-image: url("../img/header.jpg");
+  background-position: center;
+}
+
+.text-shadow {
+  text-shadow: 0 5px 3px $brand-grey-dark;
+}
diff --git a/static/src/scss/homepage.scss b/static/src/scss/homepage.scss
new file mode 100644
index 0000000..bfa2140
--- /dev/null
+++ b/static/src/scss/homepage.scss
@@ -0,0 +1,25 @@
+header {
+  background-image: url("../img/header.jpg");
+  min-height: 100%;
+
+  h1 {
+    @extend .text-shadow;
+    font-size: $font-size-h1 * 1.5;
+  }
+
+  .page-scroll {
+    position: absolute;
+    bottom: 10%;
+    color: $white;
+
+    & > i {
+      font-size: $font-size-h1;
+    }
+  }
+
+  .header-content-inner p {
+    @extend .text-shadow;
+    font-size: $font-size-h3 !important;
+    font-weight: 400 !important;
+  }
+}
diff --git a/static/src/scss/index.scss b/static/src/scss/index.scss
old mode 100755
new mode 100644
index 777fe93..2e68d1a
--- a/static/src/scss/index.scss
+++ b/static/src/scss/index.scss
@@ -1 +1,101 @@
-@import 'pygment';
+@import "variables";  // Import variables before anything else
+
+
+/* @group Fonts */
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic");
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,400italic,700italic");
+/* @end Fonts */
+
+
+/* @group Libraries */
+@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
+@import "node_modules/animate.css/animate";
+
+$fa-font-path: "../fonts";
+@import "node_modules/font-awesome/scss/font-awesome";
+/* @end Libraries */
+
+
+/* @group Other Imports */
+@import "creative/creative";
+@import "pygment";
+@import "homepage";
+@import "footer";
+@import "library-overrides";
+@import "functional";
+/* @end Other Imports */
+
+
+hr.wide {
+  width: 100%;
+  max-width: initial;
+}
+
+p a {
+  text-decoration: underline;
+  color: inherit;
+}
+
+.btn i {
+  margin: 0 3px;
+}
+
+.image {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.container > img,
+.container p > img,
+.row > div > img {
+  margin: 10px 0;
+  width: 100%;
+}
+
+.portfolio-box {
+  background-color: $brand-grey-dark;
+  max-width: initial;
+  min-height: 300px;
+
+  &.show .portfolio-box-caption {
+    opacity: 1;
+  }
+
+  .portfolio-box-caption {
+    background-color: transparentize($brand-orange, 0.2);
+  }
+}
+
+.category-item {
+  padding: 1px 0;
+}
+
+#header {
+  display: flex;
+  align-items: center;
+
+  &.image .section-heading {
+    @extend .text-shadow;
+  }
+
+  @media screen and (min-height: $screen-xs-max) {
+    height: 40vh;
+  }
+}
+
+.highlight.ansi-up {
+  font-weight: 600;
+}
+
+.media.category {
+  .media-left {
+    min-width: 100px;
+    height: 100px;
+
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
diff --git a/static/src/scss/library-overrides.scss b/static/src/scss/library-overrides.scss
new file mode 100644
index 0000000..95ef8fb
--- /dev/null
+++ b/static/src/scss/library-overrides.scss
@@ -0,0 +1,60 @@
+.panel-green {
+  @include panel-variant(#139F5B, $white, #139F5B, #139F5B);
+}
+
+.panel-blue {
+  @include panel-variant(#337AB7, $white, #337AB7, #337AB7);
+}
+
+.btn {
+  border-radius: 0;
+  text-decoration: none;
+}
+
+.btn.btn-github {
+  @include button-variant(#333, #F5F5F5, #D8D8D8);
+}
+
+$btn-srobo-bg: #253571;
+$btn-srobo-border: darken($btn-srobo-bg, 5%);
+
+.btn-srobo {
+  @include button-variant(#DADADA, $btn-srobo-bg, $btn-srobo-border);
+}
+
+
+.highlight > pre {
+  font-size: $font-size-base;
+}
+
+.btn-primary-dark {
+  @include button-variant($white, $brand-orange-dark, $brand-orange-dark);
+}
+
+.bg-primary p {
+  a:hover {
+    color: $brand-grey-dark;
+  }
+}
+
+section {
+  padding: 75px 0;
+}
+
+hr {
+  max-width: 100px;
+}
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
diff --git a/static/src/scss/mixins.scss b/static/src/scss/mixins.scss
new file mode 100644
index 0000000..e43e16a
--- /dev/null
+++ b/static/src/scss/mixins.scss
@@ -0,0 +1,43 @@
+// Mixins
+
+@mixin button-variant($color, $background, $border) {
+  border-color: $border;
+  background-color: $background;
+  color: $color;
+
+  &:hover,
+  &:focus,
+  &.focus,
+  &:active,
+  &.active,
+  .open > .dropdown-toggle & {
+    border-color: darken($border, 7%);
+    background-color: darken($background, 5%);
+    color: $color;
+  }
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle & {
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      border-color: $border;
+      background-color: $background;
+    }
+  }
+
+  .badge {
+    background-color: $color;
+    color: $background;
+  }
+}
diff --git a/static/src/scss/variables.scss b/static/src/scss/variables.scss
new file mode 100644
index 0000000..7734011
--- /dev/null
+++ b/static/src/scss/variables.scss
@@ -0,0 +1,19 @@
+$brand-orange-light: #FF7F00;
+$brand-orange: #F05F40;
+$brand-orange-dark: darken($brand-orange, 10%);
+$brand-grey-dark: #333;
+
+
+/* @group General Colours */
+$white: #FFF;
+/* @end General Colours */
+
+
+$footer-height: 175px;
+$font-family-heading: "Open Sans", "Helvetica Neue", Arial, sans-serif;
+
+
+/* @group Bootstrap Overrides */
+$font-family-base: "Roboto", "Helvetica Neue", Arial, sans-serif;
+$brand-primary: $brand-orange;
+/* @end Bootstrap Overrides */