diff --git a/src/assets/fonts/fontawesome-webfont.svg b/src/assets/fonts/fontawesome-webfont.svg
diff --git a/src/assets/fonts/fontawesome-webfont.ttf b/src/assets/fonts/fontawesome-webfont.ttf
diff --git a/src/assets/fonts/fontawesome-webfont.woff b/src/assets/fonts/fontawesome-webfont.woff
diff --git a/src/assets/fonts/fontawesome-webfont.woff2 b/src/assets/fonts/fontawesome-webfont.woff2
diff --git a/src/assets/img/favicon-32x32.png b/src/assets/img/favicon-32x32.png
diff --git a/src/assets/img/favicons.zip b/src/assets/img/favicons.zip
diff --git a/src/assets/img/handmade-paper.png b/src/assets/img/handmade-paper.png
diff --git a/src/core/styles/_components.scss b/src/core/styles/_components.scss
diff --git a/src/core/styles/base/_base.scss b/src/core/styles/base/_base.scss
@@ -5,7 +5,9 @@ html {
 }
 
 h1 {
-    font-size: $large-font-size;
+    font-size: $medium-font-size;
+    font-weight: bold;
+    text-align: center;
     line-height: $medium-header-height;
 }
 
@@ -18,7 +20,6 @@ h3 {
 }
 
 label {
-    @include header-text;
     font-size: $small-font-size;
 }
 

diff --git a/src/core/styles/base/_grid.scss b/src/core/styles/base/_grid.scss
@@ -1,13 +1,13 @@
 .row {
     @include clearfix;
+
+    padding-top: $gutter;
 }
 
 @for $i from 1 through 12 {
     .col-#{$i} {
         width: ($full / 12) * $i;
         float: left;
-        padding-top: $gutter;
-        padding-bottom: $gutter;
         box-sizing: border-box;
 
         &:not(:first-child) {
@@ -25,6 +25,11 @@
         &:last-child {
             padding-right: $gutter;
         }
+
+        .spacer {
+            content: 'spacer';
+            color: transparent;
+        }
     }
 }
 
diff --git a/src/core/styles/base/_skin.scss b/src/core/styles/base/_skin.scss
@@ -1,5 +1,6 @@
 @mixin skin-header {
-    background: $dark-mono;
+    background-color: $dark-mono;
+    background-image: url("/assets/img/az-subtle.png");
     color: $medium-light-mono;
 }
 
@@ -9,4 +10,5 @@
 
 @mixin skin-content {
     background: $light-mono;
+    background-image: url("/assets/img/handmade-paper.png");
 }
diff --git a/src/core/styles/base/_variables.scss b/src/core/styles/base/_variables.scss
@@ -4,7 +4,7 @@ $medium-light-mono: darken($light-mono, 20%);
 $medium-mono: darken($light-mono, 35%);
 $medium-dark-mono: darken($light-mono, 55%);
 $dark-mono: darken($light-mono, 75%);
-$accent: #19A319;
+$accent: #7cb442;
 $accent-pastel: lighten($accent, 40%);
 $warning: #E5E600;
 $warning-pastel: lighten($warning, 40%);

diff --git a/src/core/styles/components/_breadcrumbs.scss b/src/core/styles/components/_breadcrumbs.scss
@@ -1,42 +1,39 @@
 @mixin breadcrumbs-size($height, $border-width, $font-size) {
+    border-width: $border-width;
+    height: $height;
+
     .breadcrumbs__breadcrumb {
         font-size: $font-size;
-        height: $height;
-        border-top-width: $border-width;
-        border-bottom-width: $border-width;
 
         &:before, &:after {
             border-top-width: ($height / 2) - $border-width;
             border-bottom-width: ($height / 2) - $border-width;
             border-left-width: $height / 4;
         }
 
-        &:first-of-type {
-            border-left: $border-width solid;
-        }
-
-        &:last-of-type {
-            border-right: $border-width solid;
-        }
-
         &:not(:last-of-type) {
+            border-right-style: solid;
             border-right-width: $border-width;
         }
     }
 }
 
 @mixin breadcrumbs-color($border-color, $bg-color, $fg-color) {
+    border-style: solid;
+    border-color: $border-color;
+
     .breadcrumbs__breadcrumb {
-        border-style: solid;
-        border-color: $border-color;
         background: $bg-color;
         color: $fg-color;
+        border-right-color: $border-color;
 
         &:before {
+            border-style: solid;
             border-left-color: $border-color;
         }
 
         &:after {
+            border-style: solid;
             border-left-color: $bg-color;
         }
 
@@ -53,6 +50,7 @@
         }
 
         &.breadcrumbs__breadcrumb--active {
+            color: $border-color;
             background: lighten($bg-color, 15%);
 
             &:after {
@@ -61,7 +59,7 @@
         }
 
         &[disabled="disabled"] {
-            color: lighten($fg-color, 15%) !important;
+            color: lighten($fg-color, 20%) !important;
             background: $bg-color !important;
 
             &:after {
@@ -77,12 +75,14 @@
     width: 100%;
     table-layout: fixed;
     border-spacing: 0;
+    box-sizing: border-box;
 
     .breadcrumbs__breadcrumb {
         @include header-text;
 
         position: relative;
         width: 100%;
+        height: 100%;
         text-align: center;
         display: table-cell;
         vertical-align: middle;
@@ -125,5 +125,5 @@
 }
 
 .breadcrumbs--light {
-    @include breadcrumbs-color($medium-dark-mono, $medium-light-mono, $medium-dark-mono);
+    @include breadcrumbs-color($dark-mono, $medium-light-mono, $medium-dark-mono);
 }
diff --git a/src/core/styles/components/_button.scss b/src/core/styles/components/_button.scss
@@ -2,7 +2,7 @@
     color: $fg-color;
     background: $bg-color;
     border-style: solid;
-    border-color: darken($bg-color, 10%);
+    border-color: darken($bg-color, 15%);
 
     &:hover {
         background: lighten($bg-color, 10%);
@@ -28,8 +28,6 @@
 }
 
 .button {
-    @include header-text;
-
     position: relative;
     width: 100%;
     text-align: center;
@@ -53,9 +51,9 @@
 }
 
 .button--medium {
-    @include button-size($medium-header-height, $thin-border-width, $small-font-size);
+    @include button-size($medium-header-height, $thin-border-width, $medium-small-font-size);
 }
 
 .button--large {
-    @include button-size($large-header-height, $thin-border-width, $small-font-size);
+    @include button-size($large-header-height, $thin-border-width, $medium-font-size);
 }
diff --git a/src/core/styles/components/_card.scss b/src/core/styles/components/_card.scss
@@ -6,16 +6,20 @@
         padding: $gutter;
         border-style: solid;
         border-width: $thin-border-width;
+    }
+
+    .card__body {
         font-size: $small-font-size;
     }
 
     .card__header {
-        @include header-text;
         border-bottom: 0;
+        font-size: $medium-small-font-size;
     }
 
     .card__footer {
         border-top: 0;
+        font-size: $medium-small-font-size;
     }
 
     &:not(.card--selectable) {
@@ -40,15 +44,13 @@
     }
 
     .card__header {
-        font-weight: bold;
-        font-size: 3vh;
         background: $medium-light-mono;
-        color: $dark-mono;
+        color: $medium-dark-mono;
     }
 
     .card__body {
-        background: $medium-light-trans;
-        color: $dark-mono;
+        background: $light-mono;
+        color: $medium-dark-mono;
     }
 
     .card__footer {
@@ -70,7 +72,7 @@
     &:hover {
         .card__header {
             &:not(.card__header--selected) {
-                color: darken($medium-dark-mono, 15%);
+                color: darken($medium-dark-mono, 25%);
             }
         }
     }

diff --git a/src/core/styles/components/_text-field.scss b/src/core/styles/components/_text-field.scss
@@ -1,8 +1,9 @@
-@mixin text-field-size($height, $label-width) {
+@mixin text-field-size($height, $label-width, $font-size) {
     height: $height;
 
     .text-field__input {
         padding-left: $gutter + $label-width;
+        font-size: $font-size;
     }
 
     .text-field__label {
@@ -12,18 +13,23 @@
 }
 
 @mixin text-field-color($label-bg-color, $label-fg-color, $input-bg-color, $input-fg-color) {
-    border-color: $medium-light-mono;
+    border-color: $dark-mono;
     border-style: solid;
     border-width: $thin-border-width;
 
     .text-field__input {
-        background: $medium-light-trans;
+        @include input-placeholder {
+            color: lighten($input-fg-color, 15%);
+        }
+
+        background: $input-bg-color;
         color: $input-fg-color;
     }
 
     .text-field__label {
         background: $label-bg-color;
         color: $label-fg-color;
+        border-right: $dark-mono $thin-border-width solid;
     }
 }
 
@@ -53,6 +59,7 @@
         height: 100%;
         overflow: hidden;
         text-align: center;
+        font-size: $medium-small-font-size;
         z-index: 2;
     }
 
@@ -62,9 +69,9 @@
 }
 
 .text-field--light {
-    @include text-field-color($medium-light-mono, $dark-mono, $light-mono, $dark-mono);
+    @include text-field-color($medium-dark-mono, $medium-light-mono, $light-mono, $dark-mono);
 }
 
 .text-field--medium {
-    @include text-field-size($medium-header-height, 115px);
+    @include text-field-size($medium-header-height, 70px, $medium-small-font-size);
 }
diff --git a/src/core/styles/main.scss b/src/core/styles/main.scss
@@ -2,6 +2,7 @@
 @import 'compass/css3/box-shadow';
 @import 'compass/css3/border-radius';
 @import 'compass/css3/opacity';
+@import 'compass/css3/user-interface';
 
 @import 'base/variables';
 @import 'base/mixins';

diff --git a/src/index.html.template b/src/index.html.template
@@ -2,6 +2,8 @@
 <head>
     <title>Graduation Guide</title>
     <base href="/">
+    <link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png?v=2" sizes="32x32">
+    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.css" />
 </head>
 <body>
     <!-- build:css(src) /assets/css/build.css -->