diff --git a/core/client/assets/sass/patterns/_shame.scss b/core/client/assets/sass/patterns/_shame.scss
index 929522812afa..1d351fab4fbe 100644
--- a/core/client/assets/sass/patterns/_shame.scss
+++ b/core/client/assets/sass/patterns/_shame.scss
@@ -1,3 +1,15 @@
+// ------------------------------------------------------------
+// Shame
+//
+// A home for Styles that need to die in a fire, but are used
+// in lots of places.
+//
+// * Utilities
+// * Floating Header
+// * Scroll Shadows
+// ------------------------------------------------------------
+
+
 //
 // Utilities
 // --------------------------------------------------
@@ -44,10 +56,8 @@
     font-size: 1.3rem;
     text-transform: uppercase;
     color: $brown;
-    //Transparent gradient to make bg fade out as it goes out the top.
-    background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%);
+    background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%); //Transparent gradient to make bg fade out as it goes out the top
 
-    // button,
     .button {
         display: inline-block;
         font-size: 10px;
@@ -76,7 +86,7 @@
                 display: inline-block;
             }
         }
-    }
+    }//.button
 
     small {
         font-size: 0.85em;
@@ -85,11 +95,11 @@
     a,
     button {
         color: $brown;
+
         &:hover {
             color: $darkgrey;
         }
     }
-
 } // .floatingheader
 
 
@@ -115,7 +125,5 @@
             background-size: 100% 200%;
             z-index: -1;
         }
-
-    } // .floatingheader
-
-}//.scrolling
\ No newline at end of file
+    }
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/patterns/buttons.scss b/core/client/assets/sass/patterns/buttons.scss
index 21f13df15932..ba1b0b97959c 100644
--- a/core/client/assets/sass/patterns/buttons.scss
+++ b/core/client/assets/sass/patterns/buttons.scss
@@ -1,15 +1,26 @@
-//
+// ------------------------------------------------------------
 // Buttons
-// --------------------------------------------------
+//
+// Default button Styles, including sizes & colours
+//
+// * Default styles
+// * Coloured buttons
+// * Link buttons
+// * Minor buttons
+// * Button Sizes
+// * Block button
+// ------------------------------------------------------------
 
 
-// Base styles
+//
+// Default styles
 // --------------------------------------------------
 
-%button {
+.btn {
     display: inline-block;
-    margin-bottom: 0; // For input.btn
+    margin-bottom: 0;
     padding: 9px 14px;
+
     font-size: 1.1rem;
     line-height: 1.428571429;
     font-weight: 300;
@@ -17,13 +28,15 @@
     text-transform: uppercase;
     text-shadow: none;
     letter-spacing: 1px;
-    vertical-align: middle;
-    cursor: pointer;
+    white-space: nowrap;
+
     background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+
     border: 1px solid transparent;
-    white-space: nowrap;
     border-radius: $border-radius;
+
     user-select: none;
+    cursor: pointer;
 
     &,
     &:active,
@@ -54,13 +67,11 @@
         opacity: 0.65;
         box-shadow: none;
     }
-}
-.btn {
-    @extend %button;
-}
+}//.btn
 
 
-// Alternate buttons
+//
+// Coloured buttons
 // --------------------------------------------------
 
 @mixin button-style($color, $background, $border) {
@@ -78,14 +89,17 @@
         background-color: darken($background, 10%);
         border-color: darken($border, 12%);
     }
+
     &:active,
     &.active,
     .open > &.dropdown-toggle {
         background-image: none;
     }
+
     &.disabled,
     &[disabled],
     fieldset[disabled] & {
+
         &,
         &:hover,
         &:focus,
@@ -101,28 +115,31 @@
         background-color: $color;
         box-shadow: 0 0 0 1px $color;
     }
-}
+}//@mixin button-style
 
 .btn-default {
-    font-weight: normal;
+    font-weight: normal; // Increases the font-weight to make text more legible for white BG button
     @include button-style(#666, #fff, lighten($midgrey, 40%));
 }
+
 .btn-alt {
     @include button-style(#fff, #A1ADB3, darken(#A1ADB3, 5%));
 }
+
 .btn-blue {
     @include button-style(#fff, $blue, darken($blue, 5%));
 }
-// Success appears as green
+
 .btn-green {
     @include button-style(#fff, $green, darken($green, 5%));
 }
-// Danger and error appear as red
+
 .btn-red {
     @include button-style(#fff, $red, darken($red, 5%));
 }
 
 
+//
 // Link buttons
 // -------------------------
 
@@ -140,6 +157,7 @@
         background-color: transparent;
         box-shadow: none;
     }
+
     &,
     &:hover,
     &:focus,
@@ -147,22 +165,26 @@
         color: $blue;
         border-color: transparent;
     }
+
     &:hover,
     &:focus {
         text-decoration: underline;
         background-color: transparent;
     }
+
     &[disabled],
     fieldset[disabled] & {
+
         &:hover,
         &:focus {
             color: $midgrey;
             text-decoration: none;
         }
     }
-}
+}//.btn-link
 
 
+//
 // Minor buttons
 // -------------------------
 
@@ -175,6 +197,7 @@
     padding: 8px 14px;
 }
 
+//
 // Button Sizes
 // --------------------------------------------------
 
@@ -193,6 +216,7 @@
 }
 
 
+//
 // Block button
 // --------------------------------------------------
 
@@ -210,6 +234,7 @@
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
+
     &.btn-block {
         width: 100%;
     }
diff --git a/core/client/assets/sass/patterns/forms.scss b/core/client/assets/sass/patterns/forms.scss
index 59f69a7c2983..5de5e09637c5 100644
--- a/core/client/assets/sass/patterns/forms.scss
+++ b/core/client/assets/sass/patterns/forms.scss
@@ -1,9 +1,24 @@
-//
+// ------------------------------------------------------------
 // Forms
-// --------------------------------------------------
+//
+// All things form, input, textarea, select, radio and checkbox
+//
+// * Form Wrapper
+// * Form Groups
+// * Input Icons
+// * Radio & Checkbox wrappers
+// * Fieldsets & Legends
+// * Inputs, selects, and textareas
+// * Checkboxes
+// * Radio Buttons
+// * Select Component
+// ------------------------------------------------------------
 
 
+//
 // Form Wrapper
+// --------------------------------------------------
+
 form {
 
     label {
@@ -12,16 +27,19 @@ form {
         font-size: 1.3rem;
         font-weight: bold;
     }
-
-} // form
+}
 
 
+//
 // Form Groups
+// --------------------------------------------------
+
 .form-group {
     position: relative;
     margin-bottom: 1.6em;
     width: 100%;
     max-width: 500px;
+
     p {
         margin: 4px 0 0 0;
         color: #B3B2A8;
@@ -36,12 +54,17 @@ form {
         max-width: 100%;
     }
 
-} // .form-group
+}//.form-group
+
+
+//
+// Input Icons
+// --------------------------------------------------
 
-// If the from group has an icon...
 .input-icon[class*='icon-'] {
     position: relative;
     display: block;
+
     input[type="email"],
     input[type="number"],
     input[type="password"],
@@ -52,11 +75,13 @@ form {
     input[type="date"] {
         padding-left: 3.2rem;
     }
+
     .gh-select {
         select {
             padding-left: 3.2rem;
         }
     }
+
     &:before {
         position: absolute;
         top: 50%;
@@ -65,9 +90,13 @@ form {
         transform: translateY(-52%);
         z-index: 100;
     }
-} // .thing[class*='icon-']
+}//.thing[class*='icon-']
+
+
+//
+// Radio & Checkbox wrappers
+// --------------------------------------------------
 
-// Wrapper for input[type="radio"] and input[type="checkbox"] elements
 .for-radio,
 .for-checkbox {
     @include clearfix;
@@ -75,11 +104,14 @@ form {
     label {
         display: block;
         padding-bottom: 4px;
+
         p {
             font-weight: normal;
             color: #000;
         }
+
         &:hover {
+
             input:not(:checked) + .input-toggle-component {
                 border-color: $midbrown;
             }
@@ -111,18 +143,18 @@ form {
         color: #B3B2A8;
         white-space: nowrap;
     }
-} // .for-radio, .for-checkbox
+}//.for-radio, .for-checkbox
 
+//
+// Fieldsets & Legends
+// --------------------------------------------------
 
-// Fieldsets
 fieldset {
     border: none;
     margin: 0 0 3em 0;
     padding: 0;
-} // fieldset
-
+}
 
-// Legends
 legend {
     display: block;
     width: 100%;
@@ -131,10 +163,13 @@ legend {
     font-size: 1.2em;
     line-height: 2.0em;
     color: $brown;
-} // legend
+}
 
 
-// Input, textarea & select
+//
+// Inputs, selects, and textareas
+// --------------------------------------------------
+
 .input,
 input[type="email"],
 input[type="number"],
@@ -163,7 +198,6 @@ select {
         border-color: $brown;
         outline: 0;
     }
-
 }
 
 textarea {
@@ -177,24 +211,21 @@ textarea {
 }
 
 
+//
 // Checkboxes
-// ---
-// <div class="form-group for-checkbox">
-//     <label for="permalinks">Dated Permalinks</label>
-//     <label class="checkbox" for="thing">
-//         <input id="thing" type="checkbox">
-//         <span class="input-toggle-component"></span>
-//         <p>Include the date in your post URLs</p>
-//     </label>
-//     <p>This is a label</p>
-// </div>
+// --------------------------------------------------
+
 .for-checkbox {
+
     .input-toggle-component {
         border-radius: $border-radius;
     }
+
     label {
+
         .input-toggle-component {
             transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
             &:before {
                 transition: opacity 0.15s ease-in-out;
                 content: '';
@@ -210,35 +241,34 @@ textarea {
                 opacity: 0;
             }
         }
+
         input:checked + .input-toggle-component {
             background: $green;
             border-color: darken($green, 10%);
+
             &:before {
                 opacity: 1;
             }
         }
-    }
-}
+    }//label
+}//.for-checkbox
 
 
+//
 // Radio Buttons
-// ---
-// <div class="form-group for-radio">
-//     <label>The Option Title</label>
-//     <label class="radio">
-//         <input name="testing" type="radio" value="no">
-//         <span class="input-toggle-component"></span>
-//         <p>No</p>
-//     </label>
-//     <p>What does this thing mean?</p>
-// </div>
+// --------------------------------------------------
+
 .for-radio {
+
     .input-toggle-component {
         border-radius: 100px; // Use px to prevent ovals
     }
+
     label {
+
         .input-toggle-component {
             transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
             &:before {
                 transition: opacity 0.15s ease-in-out;
                 content: '';
@@ -252,29 +282,23 @@ textarea {
                 opacity: 0;
             }
         }
+
         input:checked + .input-toggle-component {
             background: $green;
             border-color: darken($green, 10%);
+
             &:before {
                 opacity: 1;
             }
         }
-    }
-}
+    }//label
+}//.for-radio
 
 
+//
 // Select Component
-// ---
-// <span class="gh-select">
-//     {{view "select"
-//         id="activeTheme"
-//         name="general[activeTheme]"
-//         content=themes
-//         optionValuePath="content.name"
-//         optionLabelPath="content.label"
-//         value=activeTheme
-//         selection=selectedTheme}}
-// </span>
+// --------------------------------------------------
+
 .gh-select {
     position: relative;
     display: block;
@@ -313,21 +337,24 @@ textarea {
 
         // This hides focus around selected option in FF
         &:-moz-focusring {
-          color: transparent;
-          text-shadow: 0 0 0 #000;
+            color: transparent;
+            text-shadow: 0 0 0 #000;
         }
-    } // select
-} // .gh-select
+    }//select
+}//.gh-select
 
 // Firefox-specific size fixes
 @-moz-document url-prefix() {
+
     .gh-select {
         border-width: 1px;
+
         select {
             padding: 7px 10px 7px 8px;
         }
+
         &:focus {
             border-color: $brown;
         }
     }
-} // @-moz-document
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/patterns/global.scss b/core/client/assets/sass/patterns/global.scss
index 81334dd5ed21..7ca1789ab29a 100644
--- a/core/client/assets/sass/patterns/global.scss
+++ b/core/client/assets/sass/patterns/global.scss
@@ -1,5 +1,16 @@
-//
+// ------------------------------------------------------------
 // Globals
+//
+// Where most of the element-selector styling goes, which other
+// elements can inherit from. Sensible defaults.
+//
+// * Global Layout
+// * Text & Type
+// * Utility Classes
+// ------------------------------------------------------------
+
+//
+// Global Layout
 // --------------------------------------------------
 
 *, *:before, *:after {
@@ -28,14 +39,15 @@ body {
     overflow-x: hidden; // Never allow horizontal scrollbars
 }
 
-::-moz-selection {
-    background: lighten($blue, 20%);
-}
-
 ::selection {
     background: lighten($blue, 20%);
 }
 
+
+//
+// Text & Type
+// --------------------------------------------------
+
 h1, h2, h3,
 h4, h5, h6 {
     margin: 0 0 0.3em 0;
@@ -228,7 +240,7 @@ button {
 
 
 //
-// Utilities
+// Utility Classes
 // --------------------------------------------------
 
 .clearfix {
@@ -276,6 +288,7 @@ button {
 .right {
     float: right;
 }
+
 .left {
     float: left;
 }
diff --git a/core/client/assets/sass/patterns/labels.scss b/core/client/assets/sass/patterns/labels.scss
index c302e44c66e9..898d1d39f3f5 100644
--- a/core/client/assets/sass/patterns/labels.scss
+++ b/core/client/assets/sass/patterns/labels.scss
@@ -1,3 +1,14 @@
+// ------------------------------------------------------------
+// Labels
+//
+// Labels are little bubbles of info.
+// Imagine an unread email counter.
+//
+// * Labels
+// * Colours
+// ------------------------------------------------------------
+
+
 //
 // Labels
 // --------------------------------------------------
@@ -14,8 +25,6 @@
     vertical-align: baseline;
     border-radius: .25em;
 
-    // [converter] extracted a& to a.label
-
     // Empty labels collapse automatically (not available in IE8)
     &:empty {
         display: none;
@@ -49,7 +58,10 @@ a.label {
     }
 }
 
-// Colors
+
+//
+// Colours
+// --------------------------------------------------
 
 @mixin label-variant($text-color, $bg-color) {
     background-color: $bg-color;
@@ -67,15 +79,19 @@ a.label {
 .label-default {
     @include label-variant(#fff, #A1ADB3);
 }
+
 .label-alt {
     @include label-variant(#fff, #666);
 }
+
 .label-blue {
     @include label-variant(#fff, $blue);
 }
+
 .label-green {
     @include label-variant(#fff, $green);
 }
+
 .label-red {
     @include label-variant(#fff, $red);
 }
\ No newline at end of file
diff --git a/core/client/assets/sass/patterns/navlist.scss b/core/client/assets/sass/patterns/navlist.scss
index f4030cd221b0..6945eef553d2 100644
--- a/core/client/assets/sass/patterns/navlist.scss
+++ b/core/client/assets/sass/patterns/navlist.scss
@@ -1,7 +1,16 @@
-//
+// ------------------------------------------------------------
 // Navigation Lists
+//
+// Navigation component used in places like the settings menu
+//
+// * Wrapper
+// * Nav Item
+// ------------------------------------------------------------
+
+
+//
+// Wrapper
 // --------------------------------------------------
-// Mobile style groups of list of links with chevrons
 
 .nav-list {
     padding: 0;
@@ -14,6 +23,12 @@
         max-width: none;
     }
 }
+
+
+//
+// Nav Item
+// --------------------------------------------------
+
 .nav-list-item {
     @include icon($i-chevron, 1.4rem, $midbrown) {
         position: absolute;
@@ -21,6 +36,7 @@
         right: 10px;
         transform: translateY(-50%);
     }
+
     position: relative;
     display: block;
     padding: 8px 40px 8px 12px;
@@ -60,5 +76,4 @@
         color: $midgrey;
         line-height: 1.375;
     }
-
-}//.nav-list-item
+}//.nav-list-item
\ No newline at end of file
diff --git a/core/client/assets/sass/patterns/tables.scss b/core/client/assets/sass/patterns/tables.scss
index 4bb78c069536..4d85830a6b00 100644
--- a/core/client/assets/sass/patterns/tables.scss
+++ b/core/client/assets/sass/patterns/tables.scss
@@ -1,6 +1,16 @@
+// ------------------------------------------------------------
+// Tables
+//
+// Default Styles for HTML tables
+//
+// * Base Table
+// * Default Table
+// ------------------------------------------------------------
+
 //
 // Base Table
 // --------------------------------------------------
+// Minimal styling
 
 table,
 %table {
@@ -23,13 +33,14 @@ table,
 //
 // Default Table
 // --------------------------------------------------
+// Properly styled with colour, spacing, and borders
 
 .table {
 
-    @extend %table;    
+    @extend %table;
 
     th,
-    td {  
+    td {
         border-top: 1px solid $lightbrown;
     }
 
@@ -65,4 +76,4 @@ table,
             background: transparent;
         }
     }
-}
\ No newline at end of file
+}//.table
\ No newline at end of file