diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less
index 3caa96074..0c86aeb81 100644
--- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less
+++ b/internal_packages/account-sidebar/stylesheets/account-sidebar.less
@@ -14,8 +14,7 @@
     color: @text-color-subtle;
     font-size: @font-size-small;
     font-weight: 400;
-    padding-left: @padding-base-horizontal;
-    padding-right: @padding-base-horizontal;
+    padding: 0 @spacing-standard;
     line-height: @line-height-large * 1.1;
   }
 
diff --git a/internal_packages/composer/lib/new-compose-button.cjsx b/internal_packages/composer/lib/new-compose-button.cjsx
index f925d4971..033a52e48 100644
--- a/internal_packages/composer/lib/new-compose-button.cjsx
+++ b/internal_packages/composer/lib/new-compose-button.cjsx
@@ -5,8 +5,10 @@ React = require 'react'
 module.exports =
 NewComposeButton = React.createClass
   render: ->
-    <button className="btn btn-compose" onClick={@_onNewCompose}>
-      <RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
-    </button>
+    <div id="new-compose-button">
+      <button className="btn btn-compose" onClick={@_onNewCompose}>
+        <RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
+      </button>
+    </div>
 
   _onNewCompose: -> Actions.composeNewBlankDraft()
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index 5a5573f0f..fe3a5b5b8 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -33,7 +33,34 @@
   }
 }
 
-.toolbar {
+.floating-toolbar {
+  z-index: 10;
+  position: absolute;
+  background: @background-color-accent;
+  border-radius: 2px;
+  color: @text-color-inverse;
+
+  .toolbar-pointer {
+    content: " ";
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: -13px;
+    left: 50%;
+    margin-left: -6px;
+    border: 7px solid transparent;
+    border-bottom-color: @background-color-accent;
+    border-bottom-width: 6px;
+  }
+
+  .floating-toolbar-input {
+    display: inline;
+    width: auto;
+    color: @text-color-inverse;
+    position: relative;
+    top: 1px;
+  }
+
   @padding: 0.5em;
   .btn {
     background: transparent;
@@ -61,7 +88,6 @@
     top: 1px;
     padding: 0 @padding;
   }
-
 }
 
 .composer-inner-wrap {
@@ -75,35 +101,6 @@
     cursor: pointer;
   }
 
-  .floating-toolbar {
-    z-index: 10;
-    position: absolute;
-    background: @background-color-accent;
-    border-radius: 2px;
-    color: @text-color-inverse;
-
-    .toolbar-pointer {
-      content: " ";
-      position: absolute;
-      width: 0;
-      height: 0;
-      top: -13px;
-      left: 50%;
-      margin-left: -6px;
-      border: 7px solid transparent;
-      border-bottom-color: @background-color-accent;
-      border-bottom-width: 6px;
-    }
-
-    .floating-toolbar-input {
-      display: inline;
-      width: auto;
-      color: @text-color-inverse;
-      position: relative;
-      top: 1px;
-    }
-  }
-
   .composer-header {
     padding: 11px 15px 5px 15px;
 
@@ -160,7 +157,7 @@
   }
 
   .btn-send {
-    .btn-variant(@action-color);
+    // .btn-variant(@action-color);
     margin-right: 15px;
   }
 
@@ -260,13 +257,8 @@
 }
 
 #new-compose-button {
-  order: 1;
-
-  background: @background-color-accent;
-  padding: 10px 15px 13px 15px;
-  text-align: center;
-
   .btn-compose {
-    .btn-variant(@action-color);
+    margin-top: @spacing-half;
+    margin-left: @spacing-standard;
   }
 }
diff --git a/internal_packages/inbox-activity-bar/stylesheets/activity-bar.less b/internal_packages/inbox-activity-bar/stylesheets/activity-bar.less
index 248637c20..e3b6e6ac6 100755
--- a/internal_packages/inbox-activity-bar/stylesheets/activity-bar.less
+++ b/internal_packages/inbox-activity-bar/stylesheets/activity-bar.less
@@ -52,7 +52,7 @@
   .btn:hover {
     background-color: #AAA;
   }
-  
+
   .fa-caret-square-o-down,
   .fa-caret-square-o-up {
     display:inline-block;
diff --git a/internal_packages/message-list/lib/message-list.cjsx b/internal_packages/message-list/lib/message-list.cjsx
index 7610062c3..48a1312cb 100755
--- a/internal_packages/message-list/lib/message-list.cjsx
+++ b/internal_packages/message-list/lib/message-list.cjsx
@@ -42,13 +42,7 @@ MessageList = React.createClass
 
     <div class="message-list" id="message-list">
       <div tabIndex=1 className="messages-wrap">
-        <div className="message-list-primary-actions">
-          {@_messageListPrimaryActions()}
-        </div>
-
-        <div className="message-list-notification-bars">
-          {@_messageListNotificationBars()}
-        </div>
+        {@_oldMessageListHeaders()}
 
         <div className="title-and-messages">
           {@_messageListHeaders()}
@@ -60,6 +54,17 @@ MessageList = React.createClass
       </div>
     </div>
 
+  # TODO Add actions and notifications back in.
+  _oldMessageListHeaders: ->
+    return <div></div>
+    <div className="message-list-primary-actions">
+      {@_messageListPrimaryActions()}
+    </div>
+
+    <div className="message-list-notification-bars">
+      {@_messageListNotificationBars()}
+    </div>
+
   _messageListPrimaryActions: ->
     MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction')
     <div className="primary-actions-bar">
diff --git a/internal_packages/thread-list/lib/thread-list-tabular.cjsx b/internal_packages/thread-list/lib/thread-list-tabular.cjsx
index 98b014e42..ffdb5d792 100644
--- a/internal_packages/thread-list/lib/thread-list-tabular.cjsx
+++ b/internal_packages/thread-list/lib/thread-list-tabular.cjsx
@@ -55,8 +55,10 @@ ThreadListTabular = React.createClass
       flex: 2
       resolver: (thread, parentComponent) =>
         Participants = @state.Participants
-        <Participants participants={thread.participants}
-                      context={'list'} clickable={false} />
+        <div className="participants">
+          <Participants participants={thread.participants}
+                        context={'list'} clickable={false} />
+        </div>
 
     subject = (thread) ->
       if (thread.subject ? "").trim().length is 0
@@ -68,9 +70,12 @@ ThreadListTabular = React.createClass
         LabelComponent = label.view
         <LabelComponent thread={thread} />
 
-    numMessages = (thread) ->
-      numMsg = thread.numMessages()
-      if numMsg < 1 then "" else numMsg
+    numUnread = (thread) ->
+      numMsg = thread.numUnread()
+      if numMsg < 2
+        <span></span>
+      else
+        <span className="message-count item-count-box">{numMsg}</span>
 
     c2 = new ThreadListColumn
       name: "Subject"
@@ -78,7 +83,7 @@ ThreadListTabular = React.createClass
       resolver: (thread) ->
         <span>
           <span className="subject">{subject(thread)}</span>
-          <span className="message-count item-count-box">{numMessages(thread)}</span>
+          {numUnread(thread)}
         </span>
 
     c3 = new ThreadListColumn
@@ -95,7 +100,7 @@ ThreadListTabular = React.createClass
           {parentComponent.threadTime()}
         </span>
 
-    return [c0, c1, c2, c3, c4]
+    return [c1, c2, c3, c4]
 
   _threadHeaders: ->
     return <div></div>
diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
index 7d1b54fca..f49878686 100644
--- a/internal_packages/thread-list/stylesheets/thread-list.less
+++ b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -16,6 +16,33 @@
   .message-count {
     color: @text-color-inverse;
     background: @background-tertiary;
+    padding: 4px 6px 2px 6px;
+    margin-left: 1em;
+  }
+
+  .participants {
+    font-size:   @font-size-large;
+    font-weight: @font-weight-semi-bold;
+  }
+  .subject {
+    font-size:   @font-size-small;
+    font-weight: @font-weight-normal;
+  }
+  .snippet, .timestamp {
+    font-size:   @font-size-small;
+    font-weight: @font-weight-normal;
+    color: @text-color-subtle;
+  }
+  .selected {
+    .participants {
+      color: @text-color-inverse;
+    }
+    .subject {
+      color: @text-color-inverse;
+    }
+    .snippet, .timestamp {
+      color: @text-color-inverse-subtle;
+    }
   }
 }
 
@@ -28,15 +55,6 @@
     color: @text-color;
     background: @list-bg;
 
-    .snippet, .timestamp {
-      font-size: @font-size-small;
-      color: @text-color-subtle;
-    }
-
-    .no-subject {
-      color: @text-color-subtle;
-    }
-
     .participants {
       font-weight: 500;
     }
@@ -58,7 +76,6 @@
 
       .subject {
         color: @unread-color;
-        font-weight: 400;
       }
 
     }
@@ -66,15 +83,6 @@
     &.selected {
       background: @list-active-bg;
       color: @list-active-color;
-      .snippet {
-        color: @list-active-color-muted;
-      }
-      .no-subject {
-        color: @list-active-color-muted;
-      }
-      .message-time {
-        color: @list-active-color-muted;
-      }
     }
   }
 
diff --git a/spec/fixtures/packages/theme-with-ui-variables/styles/ui-variables.less b/spec/fixtures/packages/theme-with-ui-variables/styles/ui-variables.less
deleted file mode 100644
index 9cefd6823..000000000
--- a/spec/fixtures/packages/theme-with-ui-variables/styles/ui-variables.less
+++ /dev/null
@@ -1,75 +0,0 @@
-// Variables different from the original are marked 'Changed'
-
-@text-color: #333;
-@text-color-subtle: #777;
-@text-color-highlight: #111;
-@text-color-selected: @text-color-highlight;
-
-@text-color-info: #5293d8;
-@text-color-success: #1fe977;
-@text-color-warning: #f78a46;
-@text-color-error: #c00;
-
-@background-color-info: #0098ff;
-@background-color-success: #17ca65;
-@background-color-warning: #ff4800;
-@background-color-error: #c00;
-@background-color-highlight: rgba(255, 255, 255, 0.10);
-@background-color-selected: @background-color-highlight;
-
-@app-background-color: #00f; // Changed
-
-@base-background-color: #fff;
-@base-border-color: #eee;
-
-@pane-item-background-color: @base-background-color;
-@pane-item-border-color: @base-border-color;
-
-@input-background-color: #f00; // Changed
-@input-border-color: @base-border-color;
-
-@tool-panel-background-color: #f4f4f4;
-@tool-panel-border-color: @base-border-color;
-
-@inset-panel-background-color: #eee;
-@inset-panel-border-color: @base-border-color;
-
-@panel-heading-background-color: #ddd;
-@panel-heading-border-color: transparent;
-
-@overlay-background-color: #f4f4f4;
-@overlay-border-color: @base-border-color;
-
-@button-background-color: #ccc;
-@button-background-color-hover: lighten(@button-background-color, 5%);
-@button-background-color-selected: @button-background-color-hover;
-@button-border-color: #aaa;
-
-@tab-bar-background-color: #fff;
-@tab-bar-border-color: darken(@tab-background-color-active, 10%);
-@tab-background-color: #f4f4f4;
-@tab-background-color-active: #fff;
-@tab-border-color: @base-border-color;
-
-@tree-view-background-color: @tool-panel-background-color;
-@tree-view-border-color: @tool-panel-border-color;
-
-@ui-site-color-1: @background-color-success; // green
-@ui-site-color-2: @background-color-info; // blue
-@ui-site-color-3: @background-color-warning; // orange
-@ui-site-color-4: #db2ff4; // purple
-@ui-site-color-5: #f5e11d; // yellow
-
-@font-size: 12px;
-
-@disclosure-arrow-size: 12px;
-
-@component-padding: 150px;
-@component-icon-padding: 5px;
-@component-icon-size: 16px;
-@component-line-height: 25px;
-@component-border-radius: 2px;
-
-@tab-height: 30px;
-
-@font-family: Arial;
diff --git a/src/flux/models/thread.coffee b/src/flux/models/thread.coffee
index 47d195dd4..9dab74a8c 100644
--- a/src/flux/models/thread.coffee
+++ b/src/flux/models/thread.coffee
@@ -42,7 +42,10 @@ class Thread extends Model
     Thread.attributes.lastMessageTimestamp.descending()
 
   # TODO Implement me
-  numMessages: -> Math.round(Math.random() * 5)
+  numUnread: ->
+    if @unread
+      Math.round(Math.random() * 5)
+    else 0
 
   fromJSON: (json) =>
     super(json)
diff --git a/static/buttons.less b/static/buttons.less
index 4ad9c760b..a4301d1c0 100644
--- a/static/buttons.less
+++ b/static/buttons.less
@@ -1,126 +1,135 @@
-@import "ui-variables";
-@import "ui-mixins";
-
-.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
-  @border-shadow: inset 0 0 0 1px @border-color;
-  @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-  color: @text-color;
-  box-shadow: 0 0 0;
-  background-color: @color;
-  // background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
-  // box-shadow: @border-shadow;
-
-  &:focus {
-    box-shadow: 0 0 10px rgba(255,255,255,0.7);
-    // color: @text-color-hover;
-    // background: lighten(@color, 4%);
-  }
-
-  &:hover {
-    color: @text-color-hover;
-    background: lighten(@color, 4%);
-    // background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
-  }
-  &:active,
-  &.selected:hover:active,
-  &.selected:focus:active {
-    // box-shadow: @active-shadow, @border-shadow;
-    box-shadow: 0 0 0;
-    background: @color;
-  }
-  &.selected,
-  &.selected:hover {
-    color: @text-color-selected;
-    // box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
-    // text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
-    // background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
-  }
-  &.selected:hover {
-    // box-shadow: @border-shadow;
-    // background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
-  }
-}
-
-.btn-variant (@color) {
-  @bg: @color;
-  @hover: @color;
-  @selected: @color;
-  // fadeout(darken(@color, 20%), 50%);
-  @border: @color; 
-  .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
-  outline: none;
-}
-
-
+// .btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
+//   @border-shadow: inset 0 0 0 1px @border-color;
+//   @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+//   color: @text-color;
+//   box-shadow: 0 0 0;
+//   background-color: @color;
+//   // background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
+//   // box-shadow: @border-shadow;
+//
+//   &:focus {
+//     box-shadow: 0 0 10px rgba(255,255,255,0.7);
+//     // color: @text-color-hover;
+//     // background: lighten(@color, 4%);
+//   }
+//
+//   &:hover {
+//     color: @text-color-hover;
+//     background: lighten(@color, 4%);
+//     // background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
+//   }
+//   &:active,
+//   &.selected:hover:active,
+//   &.selected:focus:active {
+//     // box-shadow: @active-shadow, @border-shadow;
+//     box-shadow: 0 0 0;
+//     background: @color;
+//   }
+//   &.selected,
+//   &.selected:hover {
+//     color: @text-color-selected;
+//     // box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
+//     // text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+//     // background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
+//   }
+//   &.selected:hover {
+//     // box-shadow: @border-shadow;
+//     // background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
+//   }
+// }
+//
+// .btn-variant (@color) {
+//   @bg: @color;
+//   @hover: @color;
+//   @selected: @color;
+//   // fadeout(darken(@color, 20%), 50%);
+//   @border: @color; 
+//   .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
+//   outline: none;
+// }
+//
+//
 .btn {
-  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
-  outline: none;
-  height: @component-line-height * 1.5;
 
-  border: none;
-  font-family: "Proxima Nova Regular Small Cap";
-  text-transform: lowercase;
-  letter-spacing: 1px;
-  padding: 0 15px;
-}
+  border:  0;
+  padding: 0.33em 1em;
+  border-radius: @border-radius-base;
 
-.btn:focus {
-  outline:none;
-}
-
-.btn-default {
-  border:1px solid #ccc;
-}
-
-.btn.btn-primary {
-  .btn-variant(@background-color-info);
-}
-.btn.btn-info {
-  .btn-variant(@background-color-info);
-}
-.btn.btn-success {
-  .btn-variant(@background-color-success);
-}
-.btn.btn-warning {
-  .btn-variant(@background-color-warning);
-}
-.btn.btn-error {
-  .btn-variant(@background-color-error);
-}
-
-.btn-group > .btn {
-  border: none;
-}
-
-.btn-icon {
-  background: transparent;
-  border: 0;
-  color: @text-color-subtle;
-  margin-right: 10px;
-  outline: none !important;
-  font-size: 20px;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &.inverse {
-    color: @text-color-inverse;
-
-    &:hover {
-      color: white;
-    }
-
-    &:active {
-      color: @text-color-inverse;
-    }
-  }
+  height: auto;
+  line-height: 1;
 
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
   &:hover {
     cursor: pointer;
-    color: @text-color-link;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
   }
   &:active {
-    color: darken(@text-color-link, 5%);
+    cursor: pointer;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.21);
+  }
+  &:focus {
+    outline: none
+  }
+
+  font-size: @font-size-base;
+  &.btn-smaller {
+    font-size: @font-size-smaller;
+  }
+  &.btn-small {
+    font-size: @font-size-small;
+  }
+  &.btn-large {
+    font-size: @font-size-large;
+  }
+  &.btn-larger {
+    font-size: @font-size-larger;
+  }
+
+  color:      @btn-default-text-color;
+  background: @btn-default-bg-color;
+  &.btn-action {
+    color:      @btn-action-text-color;
+    background: @btn-action-bg-color;
+  }
+  &.btn-emphasis {
+    color:      @btn-emphasis-text-color;
+    background: @btn-emphasis-bg-color;
+  }
+  &.btn-danger, .btn-destructive {
+    color:      @btn-danger-text-color;
+    background: @btn-danger-bg-color;
   }
 }
+
+// .btn-icon {
+//   background: transparent;
+//   border: 0;
+//   color: @text-color-subtle;
+//   margin-right: 10px;
+//   outline: none !important;
+//   font-size: 20px;
+//
+//   &:last-child {
+//     margin-right: 0;
+//   }
+//
+//   &.inverse {
+//     color: @text-color-inverse;
+//
+//     &:hover {
+//       color: white;
+//     }
+//
+//     &:active {
+//       color: @text-color-inverse;
+//     }
+//   }
+//
+//   &:hover {
+//     cursor: pointer;
+//     color: @text-color-link;
+//   }
+//   &:active {
+//     color: darken(@text-color-link, 5%);
+//   }
+// }
diff --git a/static/index.less b/static/index.less
index 5a8808cf9..4c03a5d27 100644
--- a/static/index.less
+++ b/static/index.less
@@ -1,8 +1,5 @@
-// Import from the ui theme's variables with a fallback to ./variables/ui-variables.less
-@import "./variables/ui-variables";
-@import "ui-variables";
-@import "./variables/ui-mixins";
-@import "ui-mixins";
+@import "variables/ui-variables";
+@import "variables/ui-mixins";
 
 @import (css) "font-awesome.min.css";
 
@@ -15,7 +12,7 @@
 @import "resizable";
 @import "utilities";
 
-@import "./components/popover";
-@import "./components/menu";
-@import "./components/tokenizing-text-field";
-@import "./components/extra";
+@import "components/popover";
+@import "components/menu";
+@import "components/tokenizing-text-field";
+@import "components/extra";
diff --git a/static/inputs.less b/static/inputs.less
index 2d496b291..41260aff5 100644
--- a/static/inputs.less
+++ b/static/inputs.less
@@ -1,7 +1,3 @@
-@import "ui-variables";
-@import "ui-mixins";
-
-
 input[type="text"] {
   width: 100%;
   padding-left: @padding-xs-horizontal;
@@ -11,4 +7,4 @@ input[type="text"] {
   border-radius: @border-radius-base;
   border: 1px solid @input-border;
   font-weight:400;
-}
\ No newline at end of file
+}
diff --git a/static/mixins/common-ui-elements.less b/static/mixins/common-ui-elements.less
index b55f2861e..b92247071 100644
--- a/static/mixins/common-ui-elements.less
+++ b/static/mixins/common-ui-elements.less
@@ -4,6 +4,7 @@
 // number of messages in a thread)
 .item-count-box {
   display: inline;
+  font-size: @font-size-smaller;
   padding: @padding-xs-vertical @padding-xs-horizontal @padding-xs-vertical @padding-xs-horizontal;
   margin-top: floor(@line-height-large - @line-height-small)/2;
   line-height: @line-height-small;
diff --git a/static/resizable.less b/static/resizable.less
index 547b01384..0904006cf 100644
--- a/static/resizable.less
+++ b/static/resizable.less
@@ -1,6 +1,3 @@
-@import "ui-variables";
-@import "ui-mixins";
-
 @resizableBorder: 1px solid #bbb;
 
 .resizable {
diff --git a/static/utilities.less b/static/utilities.less
index dd71b44dd..8ae28184f 100644
--- a/static/utilities.less
+++ b/static/utilities.less
@@ -1,5 +1,3 @@
-@import "ui-variables";
-
 :focus {
   outline: none;
 }
diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
index 5db7fc0b1..341a3f460 100644
--- a/static/variables/ui-variables.less
+++ b/static/variables/ui-variables.less
@@ -53,8 +53,11 @@
 
 // ----- 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-subtle:  fadeout(@text-color, 50%);
+@text-color-inverse-subtle:  fadeout(@text-color-inverse, 20%);
+@text-color-inverse-very-subtle:  fadeout(@text-color-inverse, 50%);
 
 @text-color-link:        @nilas-blue;
 @text-color-link-hover:  @nilas-blue-dark;
@@ -100,11 +103,19 @@
 @font-family:             @font-family-base;
 @font-family-heading:     @font-family-sans-serif;
 
+// ----- Font Weights -----
+@font-weight-normal:      400;
+@font-weight-medium:      500;
+@font-weight-semi-bold:   600;
+
 // ----- Font Sizes -----
 @font-size-base:          15px;
-@font-size:               @font-size-base;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+@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-h1:            floor((@font-size-base * 2.6)); // ~36px
 @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@@ -114,7 +125,7 @@
 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 
 // ----- Line Height -----
-@line-height-base:         1.428571429; // 20/14
+@line-height-base:         1.5; // 22.5/15
 @line-height-computed:     floor((@font-size-base * @line-height-base)); // ~20px
 @line-height-heading:      1.1;
 
@@ -137,6 +148,10 @@
 // Define common padding and border radius sizes and more. Values based on
 // 14px text and 1.428 line-height (~20px to start).
 
+@spacing-standard:          @font-size-base;
+@spacing-double:            @spacing-standard * 2;
+@spacing-half:              @spacing-standard * 0.5;
+
 @padding-base-vertical:     6px;
 @padding-base-horizontal:   12px;
 
@@ -185,38 +200,19 @@
 
 //=============================== Buttons ==============================//
 
-@btn-font-weight:                normal;
+@btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
 
-@btn-toolbar-color:              #333;
-@btn-toolbar-bg:                 #fff;
-@btn-toolbar-border:             transparent;
+@btn-default-bg-color:    @background-primary;
+@btn-default-text-color:  @text-color;
 
-@btn-default-color:              #333;
-@btn-default-bg:                 #fff;
-@btn-default-border:             #ccc;
+@btn-action-bg-color:     @success-color;
+@btn-action-text-color:   @text-color;
 
-@btn-primary-color:              #fff;
-@btn-primary-bg:                 @accent-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 5%);
-
-@btn-success-color:              #fff;
-@btn-success-bg:                 @success-color;
-@btn-success-border:             darken(@btn-success-bg, 5%);
-
-@btn-info-color:                 #fff;
-@btn-info-bg:                    @info-color;
-@btn-info-border:                darken(@btn-info-bg, 5%);
-
-@btn-warning-color:              #fff;
-@btn-warning-bg:                 @warning-color;
-@btn-warning-border:             darken(@btn-warning-bg, 5%);
-
-@btn-danger-color:               #fff;
-@btn-danger-bg:                  @danger-color;
-@btn-danger-border:              darken(@btn-danger-bg, 5%);
-
-@btn-link-disabled-color:        @gray-light;
+@btn-emphasis-bg-color:   @accent-primary;
+@btn-emphasis-text-color: @text-color-inverse;
 
+@btn-danger-bg-color:     @danger-color;
+@btn-danger-text-color:   @text-color-inverse;
 
 //================================ Forms ===============================//
 
@@ -442,13 +438,6 @@
 @input-accessory-color-hover: @light-blue;
 @input-accessory-color: @cool-gray;
 
-// Buttons
-
-@button-background-color: @white;
-@button-background-color-hover: white;
-@button-background-color-selected: white;
-@button-border-color: @border-color;
-
 // Menus
 
 @menu-color: white;
@@ -474,8 +463,6 @@
 @standard-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
 @standard-shadow-up: 0 -1px 2px 0 rgba(0, 0, 0, 0.22);
 
-@btn-shadow: 0 1px 0.5px 0 rgba(0, 0, 0, 0.20);
-
 @body-bg: @white;
 //== Panels and Sidebars
 @panel-background-color: @gray-lighter;
diff --git a/static/workspace.less b/static/workspace.less
index 493ee3f3d..25d90ca39 100644
--- a/static/workspace.less
+++ b/static/workspace.less
@@ -1,5 +1,3 @@
-@import "ui-variables";
-
 html,
 body {
   width: 100%;
@@ -55,39 +53,17 @@ atom-workspace {
   border-bottom: 1px solid @border-color-divider;
 
   .toolbar {
-    width:100%;
-    height:50px;
-
-    .btn {
-      height:30px;
-      margin-top: (50px - 30px) / 2;
-
-      background: @btn-toolbar-bg;
-      color: @btn-toolbar-color;
-      border: 1px solid @btn-toolbar-border;
-      border-radius: @border-radius-base;
-
-      box-shadow: @btn-shadow;
-      line-height: @line-height-computed;
-      padding-left: @padding-base-horizontal;
-      padding-right: @padding-base-horizontal;
-      margin-right: @padding-base-horizontal;
-      margin-left: @padding-base-horizontal;
-    }
-
-    .btn:active {
-      background: darken(@btn-toolbar-bg, 10%);
-      box-shadow: none;
-    }
+    width:  100%;
+    height: 50px;
   }
 }
 
 .flexbox-handle-horizontal {
-  width:6px;
-  top:0;
-  bottom:0;
-  z-index:2;
-  position:absolute;
+  width: 6px;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  position: absolute;
   cursor: col-resize;
   div {
     height:100%;