diff --git a/internal_packages/attachments/stylesheets/attachments.less b/internal_packages/attachments/stylesheets/attachments.less
index 4a881d810..4e0235f45 100644
--- a/internal_packages/attachments/stylesheets/attachments.less
+++ b/internal_packages/attachments/stylesheets/attachments.less
@@ -61,7 +61,7 @@
       width: 0; // Changed by React
       z-index: 3;
       display: block;
-      background: @progress-bar-fill;
+      background: @blue-light;
       border-bottom-left-radius:4px;
       transition: width .3s linear;
 
@@ -74,7 +74,7 @@
       width: 100%;
       z-index: 2;
       display: block;
-      background: @progress-bar-background;
+      background: @background-color-pending;
       border-bottom-left-radius:4px;
       border-bottom-right-radius:4px;
     }
diff --git a/internal_packages/composer-templates/stylesheets/message-templates.less b/internal_packages/composer-templates/stylesheets/message-templates.less
index 39b8d4d6d..e4919ad64 100755
--- a/internal_packages/composer-templates/stylesheets/message-templates.less
+++ b/internal_packages/composer-templates/stylesheets/message-templates.less
@@ -10,7 +10,7 @@
     overflow-y:scroll;
   }
   .footer-container {
-    border-top: 1px solid @border-secondary-bg;
+    border-top: 1px solid @border-color-secondary;
   }
 }
 
diff --git a/internal_packages/events/stylesheets/events.less b/internal_packages/events/stylesheets/events.less
index a73da41c3..8a4dea042 100644
--- a/internal_packages/events/stylesheets/events.less
+++ b/internal_packages/events/stylesheets/events.less
@@ -14,37 +14,37 @@
   border-radius: @border-radius-base;
   border: 1px solid @border-color-divider;
 
-  .event-header{
+  .event-header {
     border-bottom: 1px solid @border-color-divider;
     padding: 10px;
 
-    img{
+    img {
       margin-right: 20px;
     }
 
-    .event-title-text{
+    .event-title-text {
       color: @text-color-very-subtle;
     }
 
-    .event-title{
+    .event-title {
       color: @text-color;
     }
   }
 
-  .event-body{
+  .event-body {
     padding: @padding-small-horizontal;
 
-    .event-date{
+    .event-date {
       display: inline-block;
       width: 100%;
 
-      .event-day{
+      .event-day {
         display: block;
         font-size: @font-size-large;
-        color: @text-color-alert;
+        color: #e64d65;
       }
 
-      .event-time{
+      .event-time {
         display: inline-block;
         font-size: @font-size-h3;
         font-weight: @font-weight-blond;
@@ -60,7 +60,7 @@
 
       .btn-rsvp {
         float: left;
-        padding: @spacing-three-quarters @spacing-sub-double @spacing-three-quarters @spacing-sub-double;
+        padding: @spacing-three-quarters @spacing-standard * 1.75 @spacing-three-quarters @spacing-standard * 1.75;
         line-height: 10px;
         color: @text-color;
         border-radius: 3px;
@@ -69,17 +69,17 @@
         margin: 0 7.5px 0 7.5px;
         &:active {background: transparent;}
 
-        &.no{
-          background: @error-color;
+        &.no {
+          background: @color-error;
           color: @white;
         }
 
-        &.yes{
-          background: @success-color;
+        &.yes {
+          background: @color-success;
           color: @white;
         }
 
-        &.maybe{
+        &.maybe {
           background: @gray-light;
           color: @white;
         }
diff --git a/internal_packages/message-list/stylesheets/find-in-thread.less b/internal_packages/message-list/stylesheets/find-in-thread.less
index cc4aa7b63..071363b87 100644
--- a/internal_packages/message-list/stylesheets/find-in-thread.less
+++ b/internal_packages/message-list/stylesheets/find-in-thread.less
@@ -17,7 +17,7 @@ body.platform-win32 {
   &.enabled {
     padding: 4px 8px;
     height: 35px;
-    border-bottom: 1px solid @border-secondary-bg;
+    border-bottom: 1px solid @border-color-secondary;
   }
 
   .controls-wrap {
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index fe5e69853..64f0448ab 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -311,10 +311,10 @@ body.platform-win32 {
 
   .message-item-divider {
     border:0; // remove default hr border left, right
-    border-top: 2px solid @border-secondary-bg;
+    border-top: 2px solid @border-color-secondary;
     height: 3px;
     background: @background-secondary;
-    border-bottom: 1px solid @border-primary-bg;
+    border-bottom: 1px solid @border-color-primary;
     margin: 0;
 
     &.collapsed {
@@ -652,7 +652,7 @@ body.platform-win32 {
   opacity: 0;
   margin: 5px;
   cursor: default;
-  border: 1px solid @border-primary-bg;
+  border: 1px solid @border-color-primary;
   border-radius: @border-radius-large;
   background: @background-primary;
   padding: 15px;
diff --git a/internal_packages/notification-update-available/stylesheets/release-bar.less b/internal_packages/notification-update-available/stylesheets/release-bar.less
index c4eba7547..34f7f36f3 100644
--- a/internal_packages/notification-update-available/stylesheets/release-bar.less
+++ b/internal_packages/notification-update-available/stylesheets/release-bar.less
@@ -1,25 +1,25 @@
 @import "ui-variables";
 
 .release-bar {
-    order: -1;
+  order: -1;
 }
 .release-bar-inner {
-    height: 25px;
-    display:block;
-    padding-left:10px;
-    padding-top:2px;
-    color:@text-color-inverse;
-    background-color: @action-color;
-    border-bottom:1px solid darken(@action-color, 10%);
+  height: 25px;
+  display: block;
+  padding-left: 10px;
+  padding-top: 2px;
+  color: @text-color-inverse;
+  background-color: @background-color-success;
+  border-bottom: 1px solid darken(@background-color-success, 10%);
 
-    &:hover {
-      background-color: darken(@action-color, 10%);
-      border-bottom:1px solid darken(@action-color, 15%);
-      text-decoration:none;
-      color:white;
-    }
+  &:hover {
+    background-color: darken(@background-color-success, 10%);
+    border-bottom: 1px solid darken(@background-color-success, 15%);
+    text-decoration: none;
+    color: white;
+  }
 
-    i {
-      margin-right:8px;
-    }
+  i {
+    margin-right:8px;
+  }
 }
diff --git a/internal_packages/notifications/stylesheets/notifications.less b/internal_packages/notifications/stylesheets/notifications.less
index 5fcae39b6..2dc16f7ca 100644
--- a/internal_packages/notifications/stylesheets/notifications.less
+++ b/internal_packages/notifications/stylesheets/notifications.less
@@ -93,7 +93,7 @@
     }
 
     .complete .progress-track .progress {
-      background-color: @nylas-green;
+      background-color: @color-success;
     }
   }
 
@@ -101,7 +101,7 @@
   transition-delay: 2s;
   &.sidebar-activity-error {
     .progress {
-      background-color: @error-color;
+      background-color: @color-error;
     }
   }
 }
@@ -139,7 +139,7 @@
   .notification-error {
     background-color: @background-color-error;
     border-color: @background-color-error;
-    color: @error-color;
+    color: @color-error;
   }
   .notification-success {
     border-color: @background-color-success;
diff --git a/internal_packages/preferences/stylesheets/preferences-accounts.less b/internal_packages/preferences/stylesheets/preferences-accounts.less
index a3b67fc4d..2a1344936 100644
--- a/internal_packages/preferences/stylesheets/preferences-accounts.less
+++ b/internal_packages/preferences/stylesheets/preferences-accounts.less
@@ -19,7 +19,7 @@
         }
 
         .list-item:not(.selected) .sync-error {
-          color: @text-color-error;
+          color: @color-error;
         }
 
         .account-name {
@@ -46,8 +46,8 @@
       .account-details {
         width: 400px;
         padding-top: 20px;
-        padding-left: @spacing-super-double;
-        padding-right: @spacing-super-double;
+        padding-left: @spacing-standard * 2.25;
+        padding-right: @spacing-standard * 2.25;
         background-color: @gray-lighter;
         border-top: 1px solid @border-color-divider;
         border-right: 1px solid @border-color-divider;
diff --git a/internal_packages/preferences/stylesheets/preferences-mail-rules.less b/internal_packages/preferences/stylesheets/preferences-mail-rules.less
index 4b03429db..e3fb3f286 100644
--- a/internal_packages/preferences/stylesheets/preferences-mail-rules.less
+++ b/internal_packages/preferences/stylesheets/preferences-mail-rules.less
@@ -11,7 +11,7 @@
       height: 350px;
     }
     .item-rule-disabled {
-      color: @error-color;
+      color: @color-error;
       padding: 4px 10px;
       border-bottom: 1px solid @border-color-divider;
     }
diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less
index 4b2bf3cc2..08a3d5945 100644
--- a/internal_packages/preferences/stylesheets/preferences.less
+++ b/internal_packages/preferences/stylesheets/preferences.less
@@ -159,7 +159,7 @@
         font-weight: 600;
         color: @text-color;
         .then {
-          font-family: @font-family-base;
+          font-family: @font-family;
           color: @text-color-very-subtle;
           font-weight: 400;
           font-size: 0.9em;
@@ -179,11 +179,11 @@
   .platform-note {
     padding: @padding-base-vertical @padding-base-horizontal;
     background: fade(@black, 4%);
-    border-left:3px solid @info-color;
+    border-left:3px solid @color-info;
     margin:@padding-base-vertical 0;
     font-size:0.95em;
     &:before {
-      color: @info-color;
+      color: @color-info;
       font-weight:600;
       content: "NOTE: ";
     }
diff --git a/internal_packages/search-bar/stylesheets/search-bar.less b/internal_packages/search-bar/stylesheets/search-bar.less
index fd54c59cf..a2a505fe9 100644
--- a/internal_packages/search-bar/stylesheets/search-bar.less
+++ b/internal_packages/search-bar/stylesheets/search-bar.less
@@ -6,14 +6,14 @@
   order: -100;
   overflow: visible;
   z-index: 100;
-  width:450px;
+  width: 450px;
   margin-top: (38px - 23px) / 2;
 
   .menu .header-container {
-    padding:0;
-    height:23px;
+    padding: 0;
+    height: 23px;
     background-color: transparent;
-    border:none;
+    border: none;
 
     input {
       padding-left: 26px;
@@ -21,7 +21,7 @@
       width: 100%;
       height: 23px;
       border: 1px solid transparent;
-      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
+      box-shadow: @shadow-border;
     }
     input.empty {
       text-align: left;
@@ -54,7 +54,7 @@
     &.showing-suggestions {
       .suggestions { display: inherit; }
       .clear {
-        color: @input-accessory-color;
+        color: @text-color-subtle;
         display: inherit;
       }
     }
@@ -75,7 +75,7 @@
       position: absolute;
       top: 3px;
       right: 4px;
-      color: @input-accessory-color;
+      color: @text-color-subtle;
       display: none;
     }
   }
@@ -84,6 +84,6 @@
 body.is-blurred {
   .search-bar .menu .header-container input {
     background: none;
-    box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
+    box-shadow: @shadow-border;
   }
 }
diff --git a/internal_packages/ui-dark/styles/ui-variables.less b/internal_packages/ui-dark/styles/ui-variables.less
index df223bc9e..1b04be94a 100644
--- a/internal_packages/ui-dark/styles/ui-variables.less
+++ b/internal_packages/ui-dark/styles/ui-variables.less
@@ -1,20 +1,23 @@
 @gray-base:    #ffffff;
-@gray-darker:  darken(@gray-base, 13.5%); // #222
-@gray-dark:    darken(@gray-base, 20%);   // #333
-@gray:         darken(@gray-base, 33.5%); // #555
-@gray-light:   darken(@gray-base, 46.7%); // #777
-@gray-lighter: darken(@gray-base, 92.5%); // #eee
+@gray-darker:  darken(@gray-base, 13.5%);
+@gray-dark:    darken(@gray-base, 20%);
+@gray:         darken(@gray-base, 33.5%);
+@gray-light:   darken(@gray-base, 46.7%);
+@gray-lighter: darken(@gray-base, 92.5%);
 @white:        #0a0b0c;
 
+@accent-primary:            #5AA8FA;
+@accent-primary-dark:       lighten(#3087E1, 10%);
+
 @background-primary:     #313131;
 @background-off-primary: #282828;
 @background-secondary:   #222;
 @background-tertiary:    #6d7987;
 
-@btn-default-bg-color:      #404040;
-@dropdown-default-bg-color: #404040;
-@accent-primary:            #5AA8FA;
-@accent-primary-dark:       lighten(#3087E1, 10%);
+@border-color-primary:   lighten(@background-primary, 10%);
+@border-color-secondary: lighten(@background-secondary, 10%);
+@border-color-tertiary:  lighten(@background-tertiary, 10%);
+@border-color-divider:   @border-color-secondary;
 
 @text-color:                      #C2C2C2;
 @text-color-subtle:               fadeout(@text-color, 20%);
@@ -24,17 +27,14 @@
 @text-color-inverse-very-subtle:  fadeout(@text-color-inverse, 50%);
 @text-color-heading:              #FFF;
 
-@border-primary-bg:     lighten(@background-primary, 10%);
-@border-secondary-bg:   lighten(@background-secondary, 10%);
-@border-tertiary-bg:    lighten(@background-tertiary, 10%);
-@border-color-divider:  @border-secondary-bg;
+@btn-default-bg-color:      #404040;
+@dropdown-default-bg-color: #404040;
 
 @input-bg:              #242424;
 @input-border:          @border-color-divider;
 
 @list-bg:               #333;
 @list-border:           #383838;
-
 @list-selected-color:   @text-color-inverse;
 
 @toolbar-background-color: @background-secondary;
@@ -50,7 +50,7 @@ img.content-light {
 }
 
 .popover {
-  border: 1px solid @border-primary-bg;
+  border: 1px solid @border-color-primary;
 }
 
 .mail-label {
diff --git a/internal_packages/ui-ubuntu/styles/ui-variables.less b/internal_packages/ui-ubuntu/styles/ui-variables.less
index c9eab9246..481192331 100644
--- a/internal_packages/ui-ubuntu/styles/ui-variables.less
+++ b/internal_packages/ui-ubuntu/styles/ui-variables.less
@@ -5,7 +5,7 @@
 @accent-primary:            #f07746;
 @accent-primary-dark:       darken(#f07746, 1%);
 
-@border-secondary-bg:   lighten(@background-secondary, 10%);
+@border-color-secondary:   lighten(@background-secondary, 10%);
 
 @toolbar-background-color: #41403b;
 @light:  rgb(246, 246, 246);
diff --git a/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less b/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less
index 8038101a9..d4b1eb8eb 100755
--- a/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less
+++ b/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less
@@ -5,6 +5,6 @@ nylas-theme-wrap {
   padding-right: @component-padding;
   padding-bottom: @component-padding;
 
-  color: @input-background-color;
+  color: @input-bg;
   background-color: @spec-test-variable; // From the fallback variables, not overridden
 }
diff --git a/static/components/button-dropdown.less b/static/components/button-dropdown.less
index d5c9f83ba..d74bb3007 100644
--- a/static/components/button-dropdown.less
+++ b/static/components/button-dropdown.less
@@ -13,7 +13,7 @@
   &.open.open-up {
     .secondary-items {
       border-radius: @border-radius-base @border-radius-base 0 @border-radius-base;
-      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 -3px 12px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, 0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 -3px 12px @standard-shadow-color;
       top: -100%;
       transform:translate(0, -6px);
     }
@@ -24,7 +24,7 @@
   &.open.open-down {
     .secondary-items {
       border-radius: @border-radius-base 0 @border-radius-base @border-radius-base;
-      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 5px 12px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, 0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 5px 12px @standard-shadow-color;
       transform:translate(0, 1.5px);
     }
     .secondary-picker {
@@ -56,7 +56,7 @@
 
   .secondary-picker {
     .btn();
-    box-shadow: rgba(0, 0, 0, 0.15) 0 0.5px 0, rgba(0, 0, 0, 0.15) 0 -0.5px 0, rgba(0, 0, 0, 0.15) 0.5px 0 0, rgba(0, 0, 0, 0.15) 0 0.5px 1px;
+    box-shadow: @standard-shadow-color 0 0.5px 0, @standard-shadow-color 0 -0.5px 0, @standard-shadow-color 0.5px 0 0, @standard-shadow-color 0 0.5px 1px;
     border-radius: 0 @border-radius-base @border-radius-base 0;
     border-left: 0;
     padding: 0 6px;
diff --git a/static/components/editable-list.less b/static/components/editable-list.less
index f33deb1cf..d24122de9 100644
--- a/static/components/editable-list.less
+++ b/static/components/editable-list.less
@@ -11,7 +11,7 @@
   .items-wrapper {
     display: flex;
     flex-direction: column;
-    border: 1px solid @border-secondary-bg;
+    border: 1px solid @border-color-secondary;
     background-color: @background-primary;
     height: 90px;
     font-size: 0.9em;
@@ -97,7 +97,7 @@
 
   .buttons-wrapper {
     display: flex;
-    border: 1px solid @border-secondary-bg;
+    border: 1px solid @border-color-secondary;
     border-top: none;
     background-color: @background-secondary;
 
@@ -107,7 +107,7 @@
       height: 25px;
       width: 25px;
       line-height: 25px;
-      border-right: 1px solid @border-secondary-bg;
+      border-right: 1px solid @border-color-secondary;
       font-size: 1em;
       cursor: default;
       color: @text-color-subtle;
diff --git a/static/components/generated-form.less b/static/components/generated-form.less
index 02317c590..8c7a2925d 100644
--- a/static/components/generated-form.less
+++ b/static/components/generated-form.less
@@ -35,7 +35,7 @@
 
     .form-error {
       position: absolute;
-      color: @error-color;
+      color: @color-error;
       font-size: @font-size-smaller;
       margin-top: 0.3em;
     }
@@ -48,7 +48,7 @@
 
     textarea {
       width: 100%;
-      border: 1px solid @input-border;
+      border: 1px solid @input-border-color;
     }
   }
 
@@ -82,7 +82,7 @@
     font-size: @font-size-larger;
     background: #fff;
     border: 0;
-    border-bottom: 3px solid @input-border;
+    border-bottom: 3px solid @input-border-color;
     border-radius: 4px;
     padding: 7px 35px 2px 35px;
   }
diff --git a/static/components/menu.less b/static/components/menu.less
index 3e08e6948..a87044f72 100644
--- a/static/components/menu.less
+++ b/static/components/menu.less
@@ -8,7 +8,7 @@
   .header-container {
     flex-shrink: 0; // Don't squish the header! There may be a search box here
     background-color: @background-secondary;
-    border-bottom: 1px solid @base-border-color;
+    border-bottom: 1px solid @border-color-secondary;
     padding: 3px;
     position: relative;
   }
@@ -52,7 +52,7 @@
 
   .item.divider {
     font-weight:@headings-font-weight;
-    color: @menu-divider-color;
+    color: @border-color-divider;
     font-size: @font-size-small;
     text-transform: uppercase;
     margin-top: 10px;
diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less
index fb95b7141..b80985059 100644
--- a/static/components/tokenizing-text-field.less
+++ b/static/components/tokenizing-text-field.less
@@ -19,7 +19,7 @@
   position: relative;
 
   .content-container {
-    border: 1px solid @border-secondary-bg;
+    border: 1px solid @border-color-secondary;
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     border-radius: @border-radius-small;
     background-color: @background-primary;
diff --git a/static/inputs.less b/static/inputs.less
index 9e53f7e02..6bd1e0822 100644
--- a/static/inputs.less
+++ b/static/inputs.less
@@ -23,7 +23,7 @@ input[type="url"] {
   color: @text-color;
 
   border-radius: @border-radius-base;
-  border: 1px solid @input-border;
+  border: 1px solid @input-border-color;
 
   &:disabled {
     background: fadeout(@input-bg, 40%);
@@ -56,12 +56,12 @@ body.platform-win32 {
   input[type="url"] {
     border: 0;
     border-radius: 0;
-    box-shadow: 0 0 0 2px @input-border;
+    box-shadow: 0 0 0 2px @input-border-color;
 
     &:focus {
       border: 0;
       border-radius: 0;
-      box-shadow: 0 0 0 2px darken(@input-border, 20%);
+      box-shadow: 0 0 0 2px darken(@input-border-color, 20%);
     }
   }
 }
diff --git a/static/type.less b/static/type.less
index 55f215663..0a99681bf 100644
--- a/static/type.less
+++ b/static/type.less
@@ -87,7 +87,7 @@ small,
 
 mark,
 .mark {
-  background-color: @state-warning-bg;
+  background-color: #fcf8e3;
   padding: .2em;
 }
 
@@ -111,16 +111,16 @@ mark,
   .text-emphasis-variant(@accent-primary);
 }
 .text-success {
-  .text-emphasis-variant(@state-success-text);
+  .text-emphasis-variant(#3c763d);
 }
 .text-info {
-  .text-emphasis-variant(@state-info-text);
+  .text-emphasis-variant(#31708f);
 }
 .text-warning {
-  .text-emphasis-variant(@state-warning-text);
+  .text-emphasis-variant(#8a6d3b);
 }
 .text-danger {
-  .text-emphasis-variant(@state-danger-text);
+  .text-emphasis-variant(#a94442);
 }
 
 // Contextual backgrounds
@@ -133,16 +133,16 @@ mark,
   .bg-variant(@accent-primary);
 }
 .bg-success {
-  .bg-variant(@state-success-bg);
+  .bg-variant(#dff0d8);
 }
 .bg-info {
-  .bg-variant(@state-info-bg);
+  .bg-variant(#d9edf7);
 }
 .bg-warning {
-  .bg-variant(@state-warning-bg);
+  .bg-variant(#fcf8e3);
 }
 .bg-danger {
-  .bg-variant(@state-danger-bg);
+  .bg-variant(#f2dede);
 }
 
 
@@ -204,7 +204,7 @@ abbr[title],
 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted @abbr-border-color;
+  border-bottom: 1px dotted @gray-light;
 }
 .initialism {
   font-size: 90%;
@@ -215,7 +215,7 @@ abbr[data-original-title] {
 blockquote {
   padding: (@line-height-computed / 2) @line-height-computed;
   margin: 0 0 @line-height-computed;
-  border-left: 5px solid @blockquote-border-color;
+  border-left: 5px solid @gray-lighter;
 
   p,
   ul,
@@ -233,7 +233,7 @@ blockquote {
     display: block;
     font-size: 80%; // back to default font-size
     line-height: @line-height-base;
-    color: @blockquote-small-color;
+    color: @gray-light;
 
     &:before {
       content: '\2014 \00A0'; // em dash, nbsp
@@ -248,7 +248,7 @@ blockquote {
 blockquote.pull-right {
   padding-right: 15px;
   padding-left: 0;
-  border-right: 5px solid @blockquote-border-color;
+  border-right: 5px solid @gray-lighter;
   border-left: 0;
   text-align: right;
 
diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
index 7bc0d785e..1cf475275 100644
--- a/static/variables/ui-variables.less
+++ b/static/variables/ui-variables.less
@@ -14,19 +14,10 @@
 // 4. Generic usage descriptor (.btn-text, .p-body)
 // 5. Application-specific usage (.message-list-h1)
 
-//=============================== Colors ===============================//
-//== Brand colors
-@nylas-yellow:      #D5DC28;
-@nylas-yellow-dark: #A0C23A;
-@nylas-green:       #5CB346;
-@nylas-green-dark:  #078E46;
-@nylas-blue:        #11A1A2;
-@nylas-blue-dark:   #0F7982;
-@nylas-black:       #313435;
-@nylas-gray:        #434648;
 
-//== Generic colors
-@black:        @nylas-black;
+//=============================== Colors ===============================//
+//== Color Definitions
+@black:        #231f20;
 @gray-base:    #0a0b0c;
 @gray-darker:  lighten(@gray-base, 13.5%); // #222
 @gray-dark:    lighten(@gray-base, 20%);   // #333
@@ -35,57 +26,54 @@
 @gray-lighter: lighten(@gray-base, 92.5%); // #eee
 @white:        #ffffff;
 
-@blue:         #419bf9;
 @blue-dark:    #3187e1;
+@blue:         #419bf9;
+@blue-light:   #009ec4;
 
-//== Color descriptors
+//== Color Descriptors
 @accent-primary:      @blue;
 @accent-primary-dark: @blue-dark;
-@accent-secondary:    @nylas-yellow;
 
-@background-primary:     #ffffff;
+@background-primary:     @white;
 @background-off-primary: #fdfdfd;
 @background-secondary:   #f6f6f6;
 @background-tertiary:    #6d7987;
-@background-selected:    @light-blue;
 
-@border-primary-bg: darken(@background-primary, 10%);
-@border-secondary-bg: darken(@background-secondary, 10%);
-@border-tertiary-bg: darken(@background-tertiary, 10%);
-@border-color-divider: @border-secondary-bg;
+@color-info:    @blue-dark;
+@color-success: #5CB346;
+@color-warning: #f0ad4e;
+@color-error:   #d9534f;
+@color-danger:  #d9534f;
 
-@info-color:    @blue-dark;
-@success-color: @nylas-green;
-@warning-color: #f0ad4e;
-@error-color:   #d9534f;
-@danger-color:  #d9534f;
+@component-active-color: @accent-primary-dark;
+@component-active-bg:    @background-primary;
+
+@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
+rgba(253,253,253,0.75) 100%);
+
+@border-color-primary: darken(@background-primary, 10%);
+@border-color-secondary: darken(@background-secondary, 10%);
+@border-color-tertiary: darken(@background-tertiary, 10%);
+@border-color-divider: @border-color-secondary;
 
 
 //============================= Typography =============================//
 
 // ----- Colors -----
-@text-color:         @black;
-@text-color-subtle:  fadeout(@text-color, 20%);
-@text-color-very-subtle:  fadeout(@text-color, 50%);
-@text-color-inverse: @white;
-@text-color-inverse-subtle:  fadeout(@text-color-inverse, 20%);
-@text-color-inverse-very-subtle:  fadeout(@text-color-inverse, 50%);
-@text-color-alert:  #e64d65;
+@text-color:                     @black;
+@text-color-subtle:              fadeout(@text-color, 20%);
+@text-color-very-subtle:         fadeout(@text-color, 50%);
+@text-color-inverse:             @white;
+@text-color-inverse-subtle:      fadeout(@text-color-inverse, 20%);
+@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
 
-@text-color-heading: @nylas-gray;
+@text-color-heading: #434648;
 
 @text-color-link:        @blue;
 @text-color-link-hover:  @blue-dark;
 @text-color-link-active: @blue-dark;
 
 @text-color-selected:  @text-color-inverse;
-@text-color-highlight: @text-color;
-
-@text-color-info:        @info-color;
-@text-color-success:     @success-color;
-@text-color-warning:     @warning-color;
-@text-color-error:       @error-color;
-@text-color-destructive: @danger-color;
 
 @text-color-search-match: #fff000;
 @text-color-search-current-match: #ff8b1a;
@@ -94,8 +82,7 @@
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 
-@font-family-base:        @font-family-sans-serif;
-@font-family:             @font-family-base;
+@font-family:             @font-family-sans-serif;
 @font-family-heading:     @font-family-sans-serif;
 
 // ----- Font Weights -----
@@ -109,19 +96,19 @@
 // ----- Font Sizes -----
 @font-size-base:          14px;
 
-@font-size-tiny:          @font-size-base * 0.70; // 10.5px
-@font-size-smaller:       @font-size-base * 0.80; // 12px
-@font-size-small:         @font-size-base * 0.93; // 14px
-@font-size:               @font-size-base;        // 15px
-@font-size-large:         @font-size-base * 1.06; // 16px
-@font-size-larger:        @font-size-base * 1.20; // 18px
+@font-size-tiny:          @font-size-base * 0.75; // 10.5px
+@font-size-smaller:       @font-size-base * 0.86; // 12px
+@font-size-small:         @font-size-base * 0.93; // 13px
+@font-size:               @font-size-base;        // 14px
+@font-size-large:         @font-size-base * 1.14; // 16px
+@font-size-larger:        @font-size-base * 1.29; // 18px
 
-@font-size-h1:            @font-size-base * 1.6;  // 24px
-@font-size-h2:            @font-size-base * 1.6;  // 24px
-@font-size-h3:            @font-size-base * 1.4;  // 24px
-@font-size-h4:            @font-size-base * 1.25; // 18px
+@font-size-h1:            @font-size-base * 1.71;  // 24px
+@font-size-h2:            @font-size-base * 1.71;  // 24px
+@font-size-h3:            @font-size-base * 1.43;  // 20px
+@font-size-h4:            @font-size-base * 1.29;  // 18px
 @font-size-h5:            @font-size-base;
-@font-size-h6:            @font-size-base * 0.85; // 12px
+@font-size-h6:            @font-size-base * 0.86;  // 12px
 
 // ----- Line Height -----
 @line-height-base:         1.5; // 22.5/15
@@ -129,18 +116,6 @@
 @line-height-heading:      1.1;
 
 
-//============================ Iconography =============================//
-// Specify custom location and filename of the included Glyphicons icon
-// font. Useful for those including Bootstrap via Bower.
-
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
-//** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
 //============================== Spacing ===============================//
 // Define common padding and border radius sizes and more. Values based on
 // 14px text and 1.428 line-height (~20px to start).
@@ -150,11 +125,7 @@
 @spacing-quarter:           @spacing-standard * 0.25;
 @spacing-half:              @spacing-standard * 0.5;
 @spacing-three-quarters:    @spacing-standard * 0.75;
-
-@spacing-sub-double:        @spacing-standard * 1.75;
 @spacing-double:            @spacing-standard * 2;
-@spacing-super-double:      @spacing-standard * 2.25;
-
 
 @padding-base-vertical:     5px;
 @padding-base-horizontal:   12px;
@@ -177,9 +148,13 @@
 
 
 //============================== Shadows ===============================//
-@standard-shadow-color: rgba(0, 0, 0, 0.21);
+
+@standard-shadow-color: rgba(0, 0, 0, 0.15);
 @standard-shadow: 0 1px 4px 0 @standard-shadow-color;
 @standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
+@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
+0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color;
+
 
 //=============================== Buttons ==============================//
 
@@ -188,268 +163,77 @@
 @btn-default-bg-color:    darken(@background-primary, 0.5%);
 @btn-default-text-color:  @text-color;
 
-@btn-action-bg-color:     @success-color;
+@btn-action-bg-color:     @color-success;
 @btn-action-text-color:   @text-color;
 
 @btn-emphasis-bg-color:   #5b90fb;
 @btn-emphasis-text-color: @text-color-inverse;
 
-@btn-danger-bg-color:     @danger-color;
+@btn-danger-bg-color:     @color-danger;
 @btn-danger-text-color:   @text-color-inverse;
 
+
 //=============================== Dropdowns ============================//
 
 @dropdown-default-bg-color:     @background-primary;
 @dropdown-default-text-color:   @text-color;
-@dropdown-default-border-color: fadeout(@border-color, 10%);
+@dropdown-default-border-color: fadeout(@border-color-primary, 10%);
+
 
 //=============================== Inputs ===============================//
 
-//** `<input>` background color
-@input-bg:                       #fff;
-//** `<input disabled>` background color
+@input-bg:                       @white;
 @input-bg-disabled:              @gray-lighter;
 
-@input-background-color: white;
-
-@input-border-color: fadeout(@border-color, 10%);
+@input-border-color:         fadeout(@border-color-primary, 10%);
 @input-border-color-blurred: desaturate(@input-border-color, 100%);
 
-@input-tint-color: fade(@background-selected, 10%);
-@input-tint-color-hover: fade(@input-tint-color, 30%);
-@input-tint-color-blurred: desaturate(@input-tint-color, 100%);
-
-
-@input-accessory-color-hover: @light-blue;
-@input-accessory-color: @gray-light;
-@input-cancel-color: @red;
-
-//** Text color for `<input>`s
-@input-color:                    @gray;
-//** `<input>` border color
-@input-border:                   #ccc;
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-//** Default `.form-control` border radius
-@input-border-radius:            @border-radius-base;
-//** Large `.form-control` border radius
-@input-border-radius-large:      @border-radius-large;
-//** Small `.form-control` border radius
-@input-border-radius-small:      @border-radius-small;
-
-//** Border color for inputs on focus
-@input-border-focus:             #66afe9;
-
-//** Placeholder text color
-@input-color-placeholder:        #999;
-
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-//** Background color for textual input addons
-@input-group-addon-bg:           @gray-lighter;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-
-//=============================== Z-Index ==============================//
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye
-// view of components dependent on the z-axis and are designed to all work
-// together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar:            1000;
-@zindex-dropdown:          1000;
-@zindex-popover:           1060;
-@zindex-tooltip:           1070;
-@zindex-navbar-fixed:      1030;
-@zindex-modal:             1040;
-
-
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color:        @accent-primary-dark;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg:           @background-primary;
-
-@component-secondary-active-bg: @background-primary;
-
-//== Source List (used in Sidebar, iTunes-style)
-//
-// ##
-
-//** Background color on `.list-group-item`
-@source-list-bg:                 @panel-background-color;
-//** Background color of active list items
-@source-list-active-bg:          @panel-background-color;
-//** Text color of active list items
-@source-list-active-color:       @component-active-color;
-
-//== List
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-bg:                 #fff;
-//** `.list-item` border color
-@list-border:             #ddd;
-//** List group border radius
-@list-border-radius:      @border-radius-base;
-
-//** Background color of single list items on hover
-@list-hover-bg:           darken(@list-bg, 4%);
-
-//** Text color of active list items
-@list-focused-color:       @list-bg;
-//** Background color of active list items
-@list-focused-bg:          @component-active-color;
-//** Border color of active list elements
-@list-focused-border:      @list-focused-bg;
-//** Text color for content within active list items
-@list-focused-color-muted:  lighten(@list-focused-bg, 40%);
-
-//** Text color of active list items
-@list-selected-color:       inherit;
-//** Background color of active list items
-@list-selected-bg:          mix(@component-active-color, @list-bg, 17%);
-//** Border color of active list elements
-@list-selected-border:      mix(@component-active-color, @list-bg, 50%);
-//** Text color for content within active list items
-@list-selected-color-muted: lighten(@list-selected-bg, 40%);
-
-//** Text color of disabled list items
-@list-disabled-color:      @gray-light;
-//** Background color of disabled list items
-@list-disabled-bg:         @gray-lighter;
-//** Text color for content within disabled list items
-@list-disabled-text-color: @list-disabled-color;
-
-
-//** Abbreviations and acronyms border color
-@abbr-border-color:           @gray-light;
-//** Blockquote small color
-@blockquote-small-color:      @gray-light;
-//** Blockquote font size
-@blockquote-font-size:        (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color:     @gray-lighter;
-
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text:             #3c763d;
-@state-success-bg:               #dff0d8;
-@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
-
-@state-info-text:                #31708f;
-@state-info-bg:                  #d9edf7;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
-
-@state-warning-text:             #8a6d3b;
-@state-warning-bg:               #fcf8e3;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
-
-@state-danger-text:              #a94442;
-@state-danger-bg:                #f2dede;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
-
-/////
-
-// -------------
-// EVERYTHING BELOW THIS NEEDS TO BE DEPRECATED OR MOVED ABOVE THIS
-// old stuff
-// -------------
-
-// Private
-//
-// Do not use these colors outside of this file.
-// You should choose variables based on the role of your
-// interface elements. In other themes, @light-blue may
-// not be light or blue.
-
-@PANTONE-340-UP:     #00ac6f;
-@PANTONE-7704-UP:    #009ec4;
-@PANTONE-7547-UP:    #3c505f;
-@PANTONE-296-UP:     #003c56;
-@PANTONE-421-UP:     #b4babd;
-@PANTONE-Red-032-UP: #f15f4b;
-@PANTONE-326-UP:     #3bbeb4;
-@PANTONE-Process-Black-UP: #231f20;
-@PANTONE-Cool-Gray-1-UP:   #e1e0dc;
-
-@green:      @PANTONE-340-UP;
-@light-blue: @PANTONE-7704-UP;
-@blue-gray:  @PANTONE-7547-UP;
-@dark-blue:  @PANTONE-296-UP;
-@light-gray: @PANTONE-421-UP;
-@red:        @PANTONE-Red-032-UP;
-@teal:       @PANTONE-326-UP;
-@black:      @PANTONE-Process-Black-UP;
-@cool-gray:  @PANTONE-Cool-Gray-1-UP;
-
-@blue-grey:  @blue-gray;
-@light-grey: @light-gray;
-
-// Public
-//
-// Use these variables in your packages. Choose the variable
-// that best matches the role of the element you are styling.
-
-// TEXT
-
-@unread-color: @blue; //!
-@action-color: @green;
-
-@progress-bar-fill: @light-blue;
-@progress-bar-background: @light-gray;
-
-@background-color-info: @light-blue;
-@background-color-success: @green;
-@background-color-warning: #ff4800;
-@background-color-error: @red;
-@background-color-pending: @light-gray;
-
-@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
-rgba(253,253,253,0.75) 100%);
-
-@base-border-color: darken(@background-primary, 15%);
-@border-color: darken(@background-primary, 15%);
-@border-color-subtle: darken(@background-primary, 8%);
-
-// Inputs
-
-// Menus
-
-@menu-divider-color: @light-gray;
-@menu-item-color-hover: fade(@background-selected, 10%);
-@menu-item-color-selected: @background-selected;
-@menu-text-color-selected: @text-color-inverse;
-
-// Sizes
-
-@disclosure-arrow-size: 12px;
 @input-font-size: 14px;
 
-@component-padding: 10px;
-@component-icon-padding: 5px;
-@component-icon-size: 16px;
-@component-line-height: 25px;
+
+//=============================== Components ===========================//
+
+//== Toolbar
+@toolbar-background-color: darken(@white, 17.5%);
+
+//== Account Sidebar
+@panel-background-color:         @gray-lighter;
+@source-list-bg:                 @panel-background-color;
+@source-list-active-bg:          @panel-background-color;
+@source-list-active-color:       @component-active-color;
+
+//== Thread List (e.g, `.list-group-item`, `.list-item`)
+@list-bg:                  @white;
+@list-border:              #ddd;
+@list-hover-bg:            darken(@list-bg, 4%);
+@list-focused-color:       @list-bg;
+@list-focused-bg:          @component-active-color;
+@list-focused-border:      @list-focused-bg;
+@list-selected-color:      inherit;
+@list-selected-bg:         mix(@component-active-color, @list-bg, 17%);
+@list-selected-border:     mix(@component-active-color, @list-bg, 50%);
+
+//== Notifications
+@background-color-info:    @blue-light;
+@background-color-success: #009ec4;
+@background-color-warning: #ff4800;
+@background-color-error:   #f15f4b;
+@background-color-pending: #b4babd;
+
+//== Menus
+@menu-item-color-hover:    fade(@blue-light, 10%);
+@menu-item-color-selected: @blue-light;
+@menu-text-color-selected: @text-color-inverse;
+
+//== Sizes
+@disclosure-arrow-size: 12px;
+
+@component-padding:       10px;
+@component-icon-padding:  5px;
+@component-icon-size:     16px;
+@component-line-height:   25px;
 @component-border-radius: 2px;
 
 
-//== Panels and Sidebars
-@panel-background-color: @gray-lighter;
-@toolbar-background-color: darken(@white, 17.5%);
-
 // Helpers for Specs - Do Not Remove
 @spec-test-variable: rgb(152,123,0);