diff --git a/.scss-lint.yml b/.scss-lint.yml
index c90e7aa4..bdd26ad5 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -3,8 +3,6 @@ scss_files: 'lib/gui/scss/**/*.scss'
 linters:
   Comment:
     enabled: false
-  ColorVariable:
-    enabled: false
   ImportantRule:
     enabled: false
   PlaceholderInExtend:
diff --git a/build/css/main.css b/build/css/main.css
index 573b41e2..8edb0e7e 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -237,8 +237,9 @@ th {
     page-break-after: avoid; }
   .navbar {
     display: none; }
-  .btn > .caret, .progress-button > .caret,
+  .btn > .caret, .button > .caret, .progress-button > .caret,
   .dropup > .btn > .caret,
+  .dropup > .button > .caret,
   .dropup > .progress-button > .caret {
     border-top-color: #000 !important; }
   .label {
@@ -1074,8 +1075,8 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.42857;
-  color: #fff;
-  background-color: #535760; }
+  color: #333333;
+  background-color: #fff; }
 
 input,
 button,
@@ -1113,7 +1114,7 @@ img {
 .img-thumbnail {
   padding: 4px;
   line-height: 1.42857;
-  background-color: #535760;
+  background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -1175,7 +1176,7 @@ h1, h2, h3, h4, h5, h6,
   .h6 .small {
     font-weight: normal;
     line-height: 1;
-    color: #ddd; }
+    color: #777777; }
 
 h1, .h1,
 h2, .h2,
@@ -1251,10 +1252,10 @@ mark,
 .text-left {
   text-align: left; }
 
-.text-right, .section-header {
+.text-right {
   text-align: right; }
 
-.text-center, .alert, .alert-ribbon, .update-notifier-modal-body__content, .modal-tooltip-modal .modal-body, .section-footer {
+.text-center {
   text-align: center; }
 
 .text-justify {
@@ -1273,14 +1274,14 @@ mark,
   text-transform: capitalize; }
 
 .text-muted {
-  color: #ddd; }
+  color: #777777; }
 
 .text-primary {
-  color: #5793db; }
+  color: #337ab7; }
 
 a.text-primary:hover,
 a.text-primary:focus {
-  color: #2d78d2; }
+  color: #286090; }
 
 .text-success {
   color: #3c763d; }
@@ -1314,11 +1315,11 @@ a.text-danger:focus {
   color: #fff; }
 
 .bg-primary {
-  background-color: #5793db; }
+  background-color: #337ab7; }
 
 a.bg-primary:hover,
 a.bg-primary:focus {
-  background-color: #2d78d2; }
+  background-color: #286090; }
 
 .bg-success {
   background-color: #dff0d8; }
@@ -1412,7 +1413,7 @@ dd {
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted #ddd; }
+  border-bottom: 1px dotted #777777; }
 
 .initialism {
   font-size: 90%; }
@@ -1432,7 +1433,7 @@ blockquote {
     display: block;
     font-size: 80%;
     line-height: 1.42857;
-    color: #ddd; }
+    color: #777777; }
     blockquote footer:before,
     blockquote small:before,
     blockquote .small:before {
@@ -2041,7 +2042,7 @@ table {
 caption {
   padding-top: 8px;
   padding-bottom: 8px;
-  color: #ddd;
+  color: #777777;
   text-align: left; }
 
 th {
@@ -2074,7 +2075,7 @@ th {
   .table > tbody + tbody {
     border-top: 2px solid #ddd; }
   .table .table {
-    background-color: #535760; }
+    background-color: #fff; }
 
 .table-condensed > thead > tr > th,
 .table-condensed > thead > tr > td,
@@ -2374,12 +2375,14 @@ input[type="search"] {
   input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control,
   .input-group-sm > input[type="date"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="date"].btn,
+  .input-group-sm > .input-group-btn > input[type="date"].button,
   .input-group-sm > .input-group-btn > input[type="date"].progress-button,
   .input-group-sm input[type="date"],
   input[type="time"].input-sm,
   .input-group-sm > input[type="time"].form-control,
   .input-group-sm > input[type="time"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="time"].btn,
+  .input-group-sm > .input-group-btn > input[type="time"].button,
   .input-group-sm > .input-group-btn > input[type="time"].progress-button,
   .input-group-sm
   input[type="time"],
@@ -2387,6 +2390,7 @@ input[type="search"] {
   .input-group-sm > input[type="datetime-local"].form-control,
   .input-group-sm > input[type="datetime-local"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-sm > .input-group-btn > input[type="datetime-local"].button,
   .input-group-sm > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-sm
   input[type="datetime-local"],
@@ -2394,6 +2398,7 @@ input[type="search"] {
   .input-group-sm > input[type="month"].form-control,
   .input-group-sm > input[type="month"].input-group-addon,
   .input-group-sm > .input-group-btn > input[type="month"].btn,
+  .input-group-sm > .input-group-btn > input[type="month"].button,
   .input-group-sm > .input-group-btn > input[type="month"].progress-button,
   .input-group-sm
   input[type="month"] {
@@ -2401,12 +2406,14 @@ input[type="search"] {
   input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control,
   .input-group-lg > input[type="date"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="date"].btn,
+  .input-group-lg > .input-group-btn > input[type="date"].button,
   .input-group-lg > .input-group-btn > input[type="date"].progress-button,
   .input-group-lg input[type="date"],
   input[type="time"].input-lg,
   .input-group-lg > input[type="time"].form-control,
   .input-group-lg > input[type="time"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="time"].btn,
+  .input-group-lg > .input-group-btn > input[type="time"].button,
   .input-group-lg > .input-group-btn > input[type="time"].progress-button,
   .input-group-lg
   input[type="time"],
@@ -2414,6 +2421,7 @@ input[type="search"] {
   .input-group-lg > input[type="datetime-local"].form-control,
   .input-group-lg > input[type="datetime-local"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="datetime-local"].btn,
+  .input-group-lg > .input-group-btn > input[type="datetime-local"].button,
   .input-group-lg > .input-group-btn > input[type="datetime-local"].progress-button,
   .input-group-lg
   input[type="datetime-local"],
@@ -2421,6 +2429,7 @@ input[type="search"] {
   .input-group-lg > input[type="month"].form-control,
   .input-group-lg > input[type="month"].input-group-addon,
   .input-group-lg > .input-group-btn > input[type="month"].btn,
+  .input-group-lg > .input-group-btn > input[type="month"].button,
   .input-group-lg > .input-group-btn > input[type="month"].progress-button,
   .input-group-lg
   input[type="month"] {
@@ -2500,9 +2509,11 @@ fieldset[disabled]
   .form-control-static.input-lg, .input-group-lg > .form-control-static.form-control,
   .input-group-lg > .form-control-static.input-group-addon,
   .input-group-lg > .input-group-btn > .form-control-static.btn,
+  .input-group-lg > .input-group-btn > .form-control-static.button,
   .input-group-lg > .input-group-btn > .form-control-static.progress-button, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
   .input-group-sm > .form-control-static.input-group-addon,
   .input-group-sm > .input-group-btn > .form-control-static.btn,
+  .input-group-sm > .input-group-btn > .form-control-static.button,
   .input-group-sm > .input-group-btn > .form-control-static.progress-button {
     padding-left: 0;
     padding-right: 0; }
@@ -2510,6 +2521,7 @@ fieldset[disabled]
 .input-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn,
+.input-group-sm > .input-group-btn > .button,
 .input-group-sm > .input-group-btn > .progress-button {
   height: 30px;
   padding: 5px 10px;
@@ -2520,6 +2532,7 @@ fieldset[disabled]
 select.input-sm, .input-group-sm > select.form-control,
 .input-group-sm > select.input-group-addon,
 .input-group-sm > .input-group-btn > select.btn,
+.input-group-sm > .input-group-btn > select.button,
 .input-group-sm > .input-group-btn > select.progress-button {
   height: 30px;
   line-height: 30px; }
@@ -2527,11 +2540,13 @@ select.input-sm, .input-group-sm > select.form-control,
 textarea.input-sm, .input-group-sm > textarea.form-control,
 .input-group-sm > textarea.input-group-addon,
 .input-group-sm > .input-group-btn > textarea.btn,
+.input-group-sm > .input-group-btn > textarea.button,
 .input-group-sm > .input-group-btn > textarea.progress-button,
 select[multiple].input-sm,
 .input-group-sm > select[multiple].form-control,
 .input-group-sm > select[multiple].input-group-addon,
 .input-group-sm > .input-group-btn > select[multiple].btn,
+.input-group-sm > .input-group-btn > select[multiple].button,
 .input-group-sm > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
@@ -2560,6 +2575,7 @@ select[multiple].input-sm,
 .input-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn,
+.input-group-lg > .input-group-btn > .button,
 .input-group-lg > .input-group-btn > .progress-button {
   height: 45px;
   padding: 10px 16px;
@@ -2570,6 +2586,7 @@ select[multiple].input-sm,
 select.input-lg, .input-group-lg > select.form-control,
 .input-group-lg > select.input-group-addon,
 .input-group-lg > .input-group-btn > select.btn,
+.input-group-lg > .input-group-btn > select.button,
 .input-group-lg > .input-group-btn > select.progress-button {
   height: 45px;
   line-height: 45px; }
@@ -2577,11 +2594,13 @@ select.input-lg, .input-group-lg > select.form-control,
 textarea.input-lg, .input-group-lg > textarea.form-control,
 .input-group-lg > textarea.input-group-addon,
 .input-group-lg > .input-group-btn > textarea.btn,
+.input-group-lg > .input-group-btn > textarea.button,
 .input-group-lg > .input-group-btn > textarea.progress-button,
 select[multiple].input-lg,
 .input-group-lg > select[multiple].form-control,
 .input-group-lg > select[multiple].input-group-addon,
 .input-group-lg > .input-group-btn > select[multiple].btn,
+.input-group-lg > .input-group-btn > select[multiple].button,
 .input-group-lg > .input-group-btn > select[multiple].progress-button {
   height: auto; }
 
@@ -2627,6 +2646,7 @@ select[multiple].input-lg,
 .input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
 .input-group-lg > .input-group-addon + .form-control-feedback,
 .input-group-lg > .input-group-btn > .btn + .form-control-feedback,
+.input-group-lg > .input-group-btn > .button + .form-control-feedback,
 .input-group-lg > .input-group-btn > .progress-button + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
@@ -2637,6 +2657,7 @@ select[multiple].input-lg,
 .input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
 .input-group-sm > .input-group-addon + .form-control-feedback,
 .input-group-sm > .input-group-btn > .btn + .form-control-feedback,
+.input-group-sm > .input-group-btn > .button + .form-control-feedback,
 .input-group-sm > .input-group-btn > .progress-button + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
@@ -2741,7 +2762,7 @@ select[multiple].input-lg,
   display: block;
   margin-top: 5px;
   margin-bottom: 10px;
-  color: white; }
+  color: #737373; }
 
 @media (min-width: 768px) {
   .form-inline .form-group {
@@ -2822,7 +2843,7 @@ select[multiple].input-lg,
     padding-top: 6px;
     font-size: 12px; } }
 
-.btn, .progress-button {
+.btn, .button, .progress-button {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
@@ -2841,20 +2862,21 @@ select[multiple].input-lg,
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none; }
-  .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button, .btn:active:focus, .progress-button:active:focus, .btn:active.focus, .progress-button:active.focus, .btn.active:focus, .active.progress-button:focus, .btn.active.focus, .active.focus.progress-button {
+  .btn:focus, .button:focus, .progress-button:focus, .btn.focus, .focus.button, .focus.progress-button, .btn:active:focus, .button:active:focus, .progress-button:active:focus, .btn:active.focus, .button:active.focus, .progress-button:active.focus, .btn.active:focus, .active.button:focus, .active.progress-button:focus, .btn.active.focus, .active.focus.button, .active.focus.progress-button {
     outline: thin dotted;
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px; }
-  .btn:hover, .progress-button:hover, .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button {
-    color: #b3b3b3;
+  .btn:hover, .button:hover, .progress-button:hover, .btn:focus, .button:focus, .progress-button:focus, .btn.focus, .focus.button, .focus.progress-button {
+    color: #333;
     text-decoration: none; }
-  .btn:active, .progress-button:active, .btn.active, .active.progress-button {
+  .btn:active, .button:active, .progress-button:active, .btn.active, .active.button, .active.progress-button {
     outline: 0;
     background-image: none;
     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
-  .btn.disabled, .disabled.progress-button, .btn[disabled], [disabled].progress-button,
+  .btn.disabled, .disabled.button, .disabled.progress-button, .btn[disabled], [disabled].button, [disabled].progress-button,
   fieldset[disabled] .btn,
+  fieldset[disabled] .button,
   fieldset[disabled] .progress-button {
     cursor: initial;
     opacity: 0.65;
@@ -2862,34 +2884,35 @@ select[multiple].input-lg,
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-a.btn.disabled, a.disabled.progress-button,
+a.btn.disabled, a.disabled.button, a.disabled.progress-button,
 fieldset[disabled] a.btn,
+fieldset[disabled] a.button,
 fieldset[disabled] a.progress-button {
   pointer-events: none; }
 
 .btn-default {
-  color: #b3b3b3;
-  background-color: #ececec;
+  color: #333;
+  background-color: #fff;
   border-color: #ccc; }
   .btn-default:focus, .btn-default.focus {
-    color: #b3b3b3;
-    background-color: lightgray;
+    color: #333;
+    background-color: #e6e6e6;
     border-color: #8c8c8c; }
   .btn-default:hover {
-    color: #b3b3b3;
-    background-color: lightgray;
+    color: #333;
+    background-color: #e6e6e6;
     border-color: #adadad; }
   .btn-default:active, .btn-default.active,
   .open > .btn-default.dropdown-toggle {
-    color: #b3b3b3;
-    background-color: lightgray;
+    color: #333;
+    background-color: #e6e6e6;
     border-color: #adadad; }
     .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus,
     .open > .btn-default.dropdown-toggle:hover,
     .open > .btn-default.dropdown-toggle:focus,
     .open > .btn-default.dropdown-toggle.focus {
-      color: #b3b3b3;
-      background-color: #c1c1c1;
+      color: #333;
+      background-color: #d4d4d4;
       border-color: #8c8c8c; }
   .btn-default:active, .btn-default.active,
   .open > .btn-default.dropdown-toggle {
@@ -2898,55 +2921,47 @@ fieldset[disabled] a.progress-button {
   fieldset[disabled] .btn-default:hover,
   fieldset[disabled] .btn-default:focus,
   fieldset[disabled] .btn-default.focus {
-    background-color: #ececec;
+    background-color: #fff;
     border-color: #ccc; }
   .btn-default .badge {
-    color: #ececec;
-    background-color: #b3b3b3; }
+    color: #fff;
+    background-color: #333; }
 
-.btn-primary, .progress-button--primary {
+.btn-primary {
   color: #fff;
-  background-color: #5793db;
-  border-color: #4286d7; }
-  .btn-primary:focus, .progress-button--primary:focus, .btn-primary.focus, .focus.progress-button--primary {
+  background-color: #337ab7;
+  border-color: #2e6da4; }
+  .btn-primary:focus, .btn-primary.focus {
     color: #fff;
-    background-color: #2d78d2;
-    border-color: #1b487e; }
-  .btn-primary:hover, .progress-button--primary:hover {
+    background-color: #286090;
+    border-color: #122b40; }
+  .btn-primary:hover {
     color: #fff;
-    background-color: #2d78d2;
-    border-color: #2767b5; }
-  .btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
-  .open > .btn-primary.dropdown-toggle,
-  .open > .dropdown-toggle.progress-button--primary {
+    background-color: #286090;
+    border-color: #204d74; }
+  .btn-primary:active, .btn-primary.active,
+  .open > .btn-primary.dropdown-toggle {
     color: #fff;
-    background-color: #2d78d2;
-    border-color: #2767b5; }
-    .btn-primary:active:hover, .progress-button--primary:active:hover, .btn-primary:active:focus, .progress-button--primary:active:focus, .btn-primary:active.focus, .progress-button--primary:active.focus, .btn-primary.active:hover, .active.progress-button--primary:hover, .btn-primary.active:focus, .active.progress-button--primary:focus, .btn-primary.active.focus, .active.focus.progress-button--primary,
+    background-color: #286090;
+    border-color: #204d74; }
+    .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
     .open > .btn-primary.dropdown-toggle:hover,
-    .open > .dropdown-toggle.progress-button--primary:hover,
     .open > .btn-primary.dropdown-toggle:focus,
-    .open > .dropdown-toggle.progress-button--primary:focus,
-    .open > .btn-primary.dropdown-toggle.focus,
-    .open > .dropdown-toggle.focus.progress-button--primary {
+    .open > .btn-primary.dropdown-toggle.focus {
       color: #fff;
-      background-color: #2767b5;
-      border-color: #1b487e; }
-  .btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
-  .open > .btn-primary.dropdown-toggle,
-  .open > .dropdown-toggle.progress-button--primary {
+      background-color: #204d74;
+      border-color: #122b40; }
+  .btn-primary:active, .btn-primary.active,
+  .open > .btn-primary.dropdown-toggle {
     background-image: none; }
-  .btn-primary.disabled:hover, .disabled.progress-button--primary:hover, .btn-primary.disabled:focus, .disabled.progress-button--primary:focus, .btn-primary.disabled.focus, .disabled.focus.progress-button--primary, .btn-primary[disabled]:hover, [disabled].progress-button--primary:hover, .btn-primary[disabled]:focus, [disabled].progress-button--primary:focus, .btn-primary[disabled].focus, [disabled].focus.progress-button--primary,
+  .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
   fieldset[disabled] .btn-primary:hover,
-  fieldset[disabled] .progress-button--primary:hover,
   fieldset[disabled] .btn-primary:focus,
-  fieldset[disabled] .progress-button--primary:focus,
-  fieldset[disabled] .btn-primary.focus,
-  fieldset[disabled] .focus.progress-button--primary {
-    background-color: #5793db;
-    border-color: #4286d7; }
-  .btn-primary .badge, .progress-button--primary .badge {
-    color: #5793db;
+  fieldset[disabled] .btn-primary.focus {
+    background-color: #337ab7;
+    border-color: #2e6da4; }
+  .btn-primary .badge {
+    color: #337ab7;
     background-color: #fff; }
 
 .btn-success {
@@ -3025,28 +3040,28 @@ fieldset[disabled] a.progress-button {
 
 .btn-warning {
   color: #fff;
-  background-color: #e99852;
-  border-color: #e68b3b; }
+  background-color: #f0ad4e;
+  border-color: #eea236; }
   .btn-warning:focus, .btn-warning.focus {
     color: #fff;
-    background-color: #e37d25;
-    border-color: #904c12; }
+    background-color: #ec971f;
+    border-color: #985f0d; }
   .btn-warning:hover {
     color: #fff;
-    background-color: #e37d25;
-    border-color: #cb6c1a; }
+    background-color: #ec971f;
+    border-color: #d58512; }
   .btn-warning:active, .btn-warning.active,
   .open > .btn-warning.dropdown-toggle {
     color: #fff;
-    background-color: #e37d25;
-    border-color: #cb6c1a; }
+    background-color: #ec971f;
+    border-color: #d58512; }
     .btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:active.focus, .btn-warning.active:hover, .btn-warning.active:focus, .btn-warning.active.focus,
     .open > .btn-warning.dropdown-toggle:hover,
     .open > .btn-warning.dropdown-toggle:focus,
     .open > .btn-warning.dropdown-toggle.focus {
       color: #fff;
-      background-color: #cb6c1a;
-      border-color: #904c12; }
+      background-color: #d58512;
+      border-color: #985f0d; }
   .btn-warning:active, .btn-warning.active,
   .open > .btn-warning.dropdown-toggle {
     background-image: none; }
@@ -3054,10 +3069,10 @@ fieldset[disabled] a.progress-button {
   fieldset[disabled] .btn-warning:hover,
   fieldset[disabled] .btn-warning:focus,
   fieldset[disabled] .btn-warning.focus {
-    background-color: #e99852;
-    border-color: #e68b3b; }
+    background-color: #f0ad4e;
+    border-color: #eea236; }
   .btn-warning .badge {
-    color: #e99852;
+    color: #f0ad4e;
     background-color: #fff; }
 
 .btn-danger {
@@ -3097,40 +3112,43 @@ fieldset[disabled] a.progress-button {
     color: #d9534f;
     background-color: #fff; }
 
-.btn-link {
+.btn-link, .button-link {
   color: #ddd;
   font-weight: normal;
   border-radius: 0; }
-  .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled],
-  fieldset[disabled] .btn-link {
+  .btn-link, .button-link, .btn-link:active, .button-link:active, .btn-link.active, .active.button-link, .btn-link[disabled], [disabled].button-link,
+  fieldset[disabled] .btn-link,
+  fieldset[disabled] .button-link {
     background-color: transparent;
     -webkit-box-shadow: none;
     box-shadow: none; }
-  .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
+  .btn-link, .button-link, .btn-link:hover, .button-link:hover, .btn-link:focus, .button-link:focus, .btn-link:active, .button-link:active {
     border-color: transparent; }
-  .btn-link:hover, .btn-link:focus {
+  .btn-link:hover, .button-link:hover, .btn-link:focus, .button-link:focus {
     color: #b7b7b7;
     text-decoration: none;
     background-color: transparent; }
-  .btn-link[disabled]:hover, .btn-link[disabled]:focus,
+  .btn-link[disabled]:hover, [disabled].button-link:hover, .btn-link[disabled]:focus, [disabled].button-link:focus,
   fieldset[disabled] .btn-link:hover,
-  fieldset[disabled] .btn-link:focus {
-    color: #ddd;
+  fieldset[disabled] .button-link:hover,
+  fieldset[disabled] .btn-link:focus,
+  fieldset[disabled] .button-link:focus {
+    color: #777777;
     text-decoration: none; }
 
-.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .progress-button {
+.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .button, .btn-group-lg > .progress-button {
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33333;
   border-radius: 6px; }
 
-.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .progress-button, .alert-ribbon .btn-link {
+.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .button, .btn-group-sm > .progress-button {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px; }
 
-.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .progress-button {
+.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .button, .btn-group-xs > .progress-button {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
@@ -3242,10 +3260,10 @@ tbody.collapse.in {
   color: #fff;
   text-decoration: none;
   outline: 0;
-  background-color: #5793db; }
+  background-color: #337ab7; }
 
 .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
-  color: #ddd; }
+  color: #777777; }
 
 .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
   text-decoration: none;
@@ -3273,7 +3291,7 @@ tbody.collapse.in {
   padding: 3px 20px;
   font-size: 12px;
   line-height: 1.42857;
-  color: #ddd;
+  color: #777777;
   white-space: nowrap; }
 
 .dropdown-backdrop {
@@ -3314,26 +3332,33 @@ tbody.collapse.in {
   position: relative;
   display: inline-block;
   vertical-align: middle; }
-  .btn-group > .btn, .btn-group > .progress-button,
+  .btn-group > .btn, .btn-group > .button, .btn-group > .progress-button,
   .btn-group-vertical > .btn,
+  .btn-group-vertical > .button,
   .btn-group-vertical > .progress-button {
     position: relative;
     float: left; }
-    .btn-group > .btn:hover, .btn-group > .progress-button:hover, .btn-group > .btn:focus, .btn-group > .progress-button:focus, .btn-group > .btn:active, .btn-group > .progress-button:active, .btn-group > .btn.active, .btn-group > .active.progress-button,
+    .btn-group > .btn:hover, .btn-group > .button:hover, .btn-group > .progress-button:hover, .btn-group > .btn:focus, .btn-group > .button:focus, .btn-group > .progress-button:focus, .btn-group > .btn:active, .btn-group > .button:active, .btn-group > .progress-button:active, .btn-group > .btn.active, .btn-group > .active.button, .btn-group > .active.progress-button,
     .btn-group-vertical > .btn:hover,
+    .btn-group-vertical > .button:hover,
     .btn-group-vertical > .progress-button:hover,
     .btn-group-vertical > .btn:focus,
+    .btn-group-vertical > .button:focus,
     .btn-group-vertical > .progress-button:focus,
     .btn-group-vertical > .btn:active,
+    .btn-group-vertical > .button:active,
     .btn-group-vertical > .progress-button:active,
     .btn-group-vertical > .btn.active,
+    .btn-group-vertical > .active.button,
     .btn-group-vertical > .active.progress-button {
       z-index: 2; }
 
-.btn-group .btn + .btn, .btn-group .progress-button + .btn, .btn-group .btn + .progress-button, .btn-group .progress-button + .progress-button,
+.btn-group .btn + .btn, .btn-group .button + .btn, .btn-group .progress-button + .btn, .btn-group .btn + .button, .btn-group .button + .button, .btn-group .progress-button + .button, .btn-group .btn + .progress-button, .btn-group .button + .progress-button, .btn-group .progress-button + .progress-button,
 .btn-group .btn + .btn-group,
+.btn-group .button + .btn-group,
 .btn-group .progress-button + .btn-group,
 .btn-group .btn-group + .btn,
+.btn-group .btn-group + .button,
 .btn-group .btn-group + .progress-button,
 .btn-group .btn-group + .btn-group {
   margin-left: -1px; }
@@ -3345,25 +3370,25 @@ tbody.collapse.in {
     display: table; }
   .btn-toolbar:after {
     clear: both; }
-  .btn-toolbar .btn, .btn-toolbar .progress-button,
+  .btn-toolbar .btn, .btn-toolbar .button, .btn-toolbar .progress-button,
   .btn-toolbar .btn-group,
   .btn-toolbar .input-group {
     float: left; }
-  .btn-toolbar > .btn, .btn-toolbar > .progress-button,
+  .btn-toolbar > .btn, .btn-toolbar > .button, .btn-toolbar > .progress-button,
   .btn-toolbar > .btn-group,
   .btn-toolbar > .input-group {
     margin-left: 5px; }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .button:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
   border-radius: 0; }
 
-.btn-group > .btn:first-child, .btn-group > .progress-button:first-child {
+.btn-group > .btn:first-child, .btn-group > .button:first-child, .btn-group > .progress-button:first-child {
   margin-left: 0; }
-  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:first-child:not(:last-child):not(.dropdown-toggle) {
+  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .button:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:first-child:not(:last-child):not(.dropdown-toggle) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0; }
 
-.btn-group > .btn:last-child:not(:first-child), .btn-group > .progress-button:last-child:not(:first-child),
+.btn-group > .btn:last-child:not(:first-child), .btn-group > .button:last-child:not(:first-child), .btn-group > .progress-button:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
@@ -3371,15 +3396,15 @@ tbody.collapse.in {
 .btn-group > .btn-group {
   float: left; }
 
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .progress-button {
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .button, .btn-group > .btn-group:not(:first-child):not(:last-child) > .progress-button {
   border-radius: 0; }
 
-.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
+.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .button:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
 .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .button:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3387,34 +3412,35 @@ tbody.collapse.in {
 .btn-group.open .dropdown-toggle {
   outline: 0; }
 
-.btn-group > .btn + .dropdown-toggle, .btn-group > .progress-button + .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle, .btn-group > .button + .dropdown-toggle, .btn-group > .progress-button + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px; }
 
-.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group-lg.btn-group > .progress-button + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group-lg.btn-group > .button + .dropdown-toggle, .btn-group-lg.btn-group > .progress-button + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px; }
 
 .btn-group.open .dropdown-toggle {
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
-  .btn-group.open .dropdown-toggle.btn-link {
+  .btn-group.open .dropdown-toggle.btn-link, .btn-group.open .dropdown-toggle.button-link {
     -webkit-box-shadow: none;
     box-shadow: none; }
 
-.btn .caret, .progress-button .caret {
+.btn .caret, .button .caret, .progress-button .caret {
   margin-left: 0; }
 
-.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .progress-button .caret {
+.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .button .caret, .btn-group-lg > .progress-button .caret {
   border-width: 5px 5px 0;
   border-bottom-width: 0; }
 
-.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .progress-button .caret {
+.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .button .caret, .dropup .btn-group-lg > .progress-button .caret {
   border-width: 0 5px 5px; }
 
-.btn-group-vertical > .btn, .btn-group-vertical > .progress-button,
+.btn-group-vertical > .btn, .btn-group-vertical > .button, .btn-group-vertical > .progress-button,
 .btn-group-vertical > .btn-group,
 .btn-group-vertical > .btn-group > .btn,
+.btn-group-vertical > .btn-group > .button,
 .btn-group-vertical > .btn-group > .progress-button {
   display: block;
   float: none;
@@ -3428,42 +3454,44 @@ tbody.collapse.in {
 .btn-group-vertical > .btn-group:after {
   clear: both; }
 
-.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .progress-button {
+.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .button, .btn-group-vertical > .btn-group > .progress-button {
   float: none; }
 
-.btn-group-vertical > .btn + .btn, .btn-group-vertical > .progress-button + .btn, .btn-group-vertical > .btn + .progress-button, .btn-group-vertical > .progress-button + .progress-button,
+.btn-group-vertical > .btn + .btn, .btn-group-vertical > .button + .btn, .btn-group-vertical > .progress-button + .btn, .btn-group-vertical > .btn + .button, .btn-group-vertical > .button + .button, .btn-group-vertical > .progress-button + .button, .btn-group-vertical > .btn + .progress-button, .btn-group-vertical > .button + .progress-button, .btn-group-vertical > .progress-button + .progress-button,
 .btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .button + .btn-group,
 .btn-group-vertical > .progress-button + .btn-group,
 .btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .button,
 .btn-group-vertical > .btn-group + .progress-button,
 .btn-group-vertical > .btn-group + .btn-group {
   margin-top: -1px;
   margin-left: 0; }
 
-.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .progress-button:not(:first-child):not(:last-child) {
+.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .button:not(:first-child):not(:last-child), .btn-group-vertical > .progress-button:not(:first-child):not(:last-child) {
   border-radius: 0; }
 
-.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .progress-button:first-child:not(:last-child) {
+.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .button:first-child:not(:last-child), .btn-group-vertical > .progress-button:first-child:not(:last-child) {
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0; }
 
-.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .progress-button:last-child:not(:first-child) {
+.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .button:last-child:not(:first-child), .btn-group-vertical > .progress-button:last-child:not(:first-child) {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; }
 
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .progress-button {
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .button, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .progress-button {
   border-radius: 0; }
 
-.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .button:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0; }
 
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .button:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
   border-top-right-radius: 0;
   border-top-left-radius: 0; }
 
@@ -3472,22 +3500,25 @@ tbody.collapse.in {
   width: 100%;
   table-layout: fixed;
   border-collapse: separate; }
-  .btn-group-justified > .btn, .btn-group-justified > .progress-button,
+  .btn-group-justified > .btn, .btn-group-justified > .button, .btn-group-justified > .progress-button,
   .btn-group-justified > .btn-group {
     float: none;
     display: table-cell;
     width: 1%; }
-  .btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .progress-button {
+  .btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .button, .btn-group-justified > .btn-group .progress-button {
     width: 100%; }
   .btn-group-justified > .btn-group .dropdown-menu {
     left: auto; }
 
-[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .progress-button input[type="radio"],
+[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .button input[type="radio"], [data-toggle="buttons"] > .progress-button input[type="radio"],
 [data-toggle="buttons"] > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .button input[type="checkbox"],
 [data-toggle="buttons"] > .progress-button input[type="checkbox"],
 [data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
+[data-toggle="buttons"] > .btn-group > .button input[type="radio"],
 [data-toggle="buttons"] > .btn-group > .progress-button input[type="radio"],
 [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
+[data-toggle="buttons"] > .btn-group > .button input[type="checkbox"],
 [data-toggle="buttons"] > .btn-group > .progress-button input[type="checkbox"] {
   position: absolute;
   clip: rect(0, 0, 0, 0);
@@ -3538,6 +3569,7 @@ tbody.collapse.in {
   .input-group-addon.input-sm,
   .input-group-sm > .input-group-addon,
   .input-group-sm > .input-group-btn > .input-group-addon.btn,
+  .input-group-sm > .input-group-btn > .input-group-addon.button,
   .input-group-sm > .input-group-btn > .input-group-addon.progress-button {
     padding: 5px 10px;
     font-size: 12px;
@@ -3545,6 +3577,7 @@ tbody.collapse.in {
   .input-group-addon.input-lg,
   .input-group-lg > .input-group-addon,
   .input-group-lg > .input-group-btn > .input-group-addon.btn,
+  .input-group-lg > .input-group-btn > .input-group-addon.button,
   .input-group-lg > .input-group-btn > .input-group-addon.progress-button {
     padding: 10px 16px;
     font-size: 17px;
@@ -3556,13 +3589,17 @@ tbody.collapse.in {
 .input-group .form-control:first-child,
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .button,
 .input-group-btn:first-child > .progress-button,
 .input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .btn-group > .button,
 .input-group-btn:first-child > .btn-group > .progress-button,
 .input-group-btn:first-child > .dropdown-toggle,
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .button:not(:last-child):not(.dropdown-toggle),
 .input-group-btn:last-child > .progress-button:not(:last-child):not(.dropdown-toggle),
 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
+.input-group-btn:last-child > .btn-group:not(:last-child) > .button,
 .input-group-btn:last-child > .btn-group:not(:last-child) > .progress-button {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0; }
@@ -3573,13 +3610,17 @@ tbody.collapse.in {
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .button,
 .input-group-btn:last-child > .progress-button,
 .input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .btn-group > .button,
 .input-group-btn:last-child > .btn-group > .progress-button,
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .button:not(:first-child),
 .input-group-btn:first-child > .progress-button:not(:first-child),
 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
+.input-group-btn:first-child > .btn-group:not(:first-child) > .button,
 .input-group-btn:first-child > .btn-group:not(:first-child) > .progress-button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0; }
@@ -3591,16 +3632,16 @@ tbody.collapse.in {
   position: relative;
   font-size: 0;
   white-space: nowrap; }
-  .input-group-btn > .btn, .input-group-btn > .progress-button {
+  .input-group-btn > .btn, .input-group-btn > .button, .input-group-btn > .progress-button {
     position: relative; }
-    .input-group-btn > .btn + .btn, .input-group-btn > .progress-button + .btn, .input-group-btn > .btn + .progress-button, .input-group-btn > .progress-button + .progress-button {
+    .input-group-btn > .btn + .btn, .input-group-btn > .button + .btn, .input-group-btn > .progress-button + .btn, .input-group-btn > .btn + .button, .input-group-btn > .button + .button, .input-group-btn > .progress-button + .button, .input-group-btn > .btn + .progress-button, .input-group-btn > .button + .progress-button, .input-group-btn > .progress-button + .progress-button {
       margin-left: -1px; }
-    .input-group-btn > .btn:hover, .input-group-btn > .progress-button:hover, .input-group-btn > .btn:focus, .input-group-btn > .progress-button:focus, .input-group-btn > .btn:active, .input-group-btn > .progress-button:active {
+    .input-group-btn > .btn:hover, .input-group-btn > .button:hover, .input-group-btn > .progress-button:hover, .input-group-btn > .btn:focus, .input-group-btn > .button:focus, .input-group-btn > .progress-button:focus, .input-group-btn > .btn:active, .input-group-btn > .button:active, .input-group-btn > .progress-button:active {
       z-index: 2; }
-  .input-group-btn:first-child > .btn, .input-group-btn:first-child > .progress-button,
+  .input-group-btn:first-child > .btn, .input-group-btn:first-child > .button, .input-group-btn:first-child > .progress-button,
   .input-group-btn:first-child > .btn-group {
     margin-right: -1px; }
-  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .progress-button,
+  .input-group-btn:last-child > .btn, .input-group-btn:last-child > .button, .input-group-btn:last-child > .progress-button,
   .input-group-btn:last-child > .btn-group {
     z-index: 2;
     margin-left: -1px; }
@@ -3625,9 +3666,9 @@ tbody.collapse.in {
         text-decoration: none;
         background-color: #eeeeee; }
     .nav > li.disabled > a {
-      color: #ddd; }
+      color: #777777; }
       .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
-        color: #ddd;
+        color: #777777;
         text-decoration: none;
         background-color: transparent;
         cursor: initial; }
@@ -3656,7 +3697,7 @@ tbody.collapse.in {
         border-color: #eeeeee #eeeeee #ddd; }
     .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
       color: #555555;
-      background-color: #535760;
+      background-color: #fff;
       border: 1px solid #ddd;
       border-bottom-color: transparent;
       cursor: default; }
@@ -3669,7 +3710,7 @@ tbody.collapse.in {
     margin-left: 2px; }
   .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
     color: #fff;
-    background-color: #5793db; }
+    background-color: #337ab7; }
 
 .nav-stacked > li {
   float: none; }
@@ -3710,7 +3751,7 @@ tbody.collapse.in {
     .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
     .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:hover,
     .nav-tabs-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:focus {
-      border-bottom-color: #535760; } }
+      border-bottom-color: #fff; } }
 
 .tab-content > .tab-pane {
   display: none; }
@@ -3979,10 +4020,10 @@ tbody.collapse.in {
 .navbar-btn {
   margin-top: 9px;
   margin-bottom: 9px; }
-  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.progress-button, .alert-ribbon .navbar-btn.btn-link {
+  .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.button, .btn-group-sm > .navbar-btn.progress-button {
     margin-top: 10px;
     margin-bottom: 10px; }
-  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.progress-button {
+  .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.button, .btn-group-xs > .navbar-btn.progress-button {
     margin-top: 14px;
     margin-bottom: 14px; }
 
@@ -4053,27 +4094,29 @@ tbody.collapse.in {
     color: #777; }
     .navbar-default .navbar-link:hover {
       color: #333; }
-  .navbar-default .btn-link {
+  .navbar-default .btn-link, .navbar-default .button-link {
     color: #777; }
-    .navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
+    .navbar-default .btn-link:hover, .navbar-default .button-link:hover, .navbar-default .btn-link:focus, .navbar-default .button-link:focus {
       color: #333; }
-    .navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus,
+    .navbar-default .btn-link[disabled]:hover, .navbar-default [disabled].button-link:hover, .navbar-default .btn-link[disabled]:focus, .navbar-default [disabled].button-link:focus,
     fieldset[disabled] .navbar-default .btn-link:hover,
-    fieldset[disabled] .navbar-default .btn-link:focus {
+    fieldset[disabled] .navbar-default .button-link:hover,
+    fieldset[disabled] .navbar-default .btn-link:focus,
+    fieldset[disabled] .navbar-default .button-link:focus {
       color: #ccc; }
 
 .navbar-inverse {
   background-color: #222;
   border-color: #090909; }
   .navbar-inverse .navbar-brand {
-    color: white; }
+    color: #9d9d9d; }
     .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
       color: #fff;
       background-color: transparent; }
   .navbar-inverse .navbar-text {
-    color: white; }
+    color: #9d9d9d; }
   .navbar-inverse .navbar-nav > li > a {
-    color: white; }
+    color: #9d9d9d; }
     .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
       color: #fff;
       background-color: transparent; }
@@ -4101,7 +4144,7 @@ tbody.collapse.in {
     .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
       background-color: #090909; }
     .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-      color: white; }
+      color: #9d9d9d; }
       .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
         color: #fff;
         background-color: transparent; }
@@ -4112,16 +4155,18 @@ tbody.collapse.in {
       color: #444;
       background-color: transparent; } }
   .navbar-inverse .navbar-link {
-    color: white; }
+    color: #9d9d9d; }
     .navbar-inverse .navbar-link:hover {
       color: #fff; }
-  .navbar-inverse .btn-link {
-    color: white; }
-    .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
+  .navbar-inverse .btn-link, .navbar-inverse .button-link {
+    color: #9d9d9d; }
+    .navbar-inverse .btn-link:hover, .navbar-inverse .button-link:hover, .navbar-inverse .btn-link:focus, .navbar-inverse .button-link:focus {
       color: #fff; }
-    .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus,
+    .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse [disabled].button-link:hover, .navbar-inverse .btn-link[disabled]:focus, .navbar-inverse [disabled].button-link:focus,
     fieldset[disabled] .navbar-inverse .btn-link:hover,
-    fieldset[disabled] .navbar-inverse .btn-link:focus {
+    fieldset[disabled] .navbar-inverse .button-link:hover,
+    fieldset[disabled] .navbar-inverse .btn-link:focus,
+    fieldset[disabled] .navbar-inverse .button-link:focus {
       color: #444; }
 
 .breadcrumb {
@@ -4137,7 +4182,7 @@ tbody.collapse.in {
       padding: 0 5px;
       color: #ccc; }
   .breadcrumb > .active {
-    color: #ddd; }
+    color: #777777; }
 
 .pagination {
   display: inline-block;
@@ -4179,8 +4224,8 @@ tbody.collapse.in {
   .pagination > .active > span:focus {
     z-index: 3;
     color: #fff;
-    background-color: #5793db;
-    border-color: #5793db;
+    background-color: #337ab7;
+    border-color: #337ab7;
     cursor: default; }
   .pagination > .disabled > span,
   .pagination > .disabled > span:hover,
@@ -4188,7 +4233,7 @@ tbody.collapse.in {
   .pagination > .disabled > a,
   .pagination > .disabled > a:hover,
   .pagination > .disabled > a:focus {
-    color: #ddd;
+    color: #777777;
     background-color: #fff;
     border-color: #ddd;
     cursor: initial; }
@@ -4258,7 +4303,7 @@ tbody.collapse.in {
   .pager .disabled > a:hover,
   .pager .disabled > a:focus,
   .pager .disabled > span {
-    color: #ddd;
+    color: #777777;
     background-color: #fff;
     cursor: initial; }
 
@@ -4275,7 +4320,7 @@ tbody.collapse.in {
   border-radius: .25em; }
   .label:empty {
     display: none; }
-  .btn .label, .progress-button .label {
+  .btn .label, .button .label, .progress-button .label {
     position: relative;
     top: -1px; }
 
@@ -4285,14 +4330,14 @@ a.label:hover, a.label:focus {
   cursor: pointer; }
 
 .label-default {
-  background-color: #ddd; }
+  background-color: #777777; }
   .label-default[href]:hover, .label-default[href]:focus {
-    background-color: #c4c4c4; }
+    background-color: #5e5e5e; }
 
 .label-primary {
-  background-color: #5793db; }
+  background-color: #337ab7; }
   .label-primary[href]:hover, .label-primary[href]:focus {
-    background-color: #2d78d2; }
+    background-color: #286090; }
 
 .label-success {
   background-color: #5cb85c; }
@@ -4305,9 +4350,9 @@ a.label:hover, a.label:focus {
     background-color: #31b0d5; }
 
 .label-warning {
-  background-color: #e99852; }
+  background-color: #f0ad4e; }
   .label-warning[href]:hover, .label-warning[href]:focus {
-    background-color: #e37d25; }
+    background-color: #ec971f; }
 
 .label-danger {
   background-color: #d9534f; }
@@ -4325,15 +4370,16 @@ a.label:hover, a.label:focus {
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
-  background-color: #ddd;
+  background-color: #777777;
   border-radius: 10px; }
   .badge:empty {
     display: none; }
-  .btn .badge, .progress-button .badge {
+  .btn .badge, .button .badge, .progress-button .badge {
     position: relative;
     top: -1px; }
-  .btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .progress-button .badge,
+  .btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .button .badge, .btn-group-xs > .progress-button .badge,
   .btn-group-xs > .btn .badge,
+  .btn-group-xs > .button .badge,
   .btn-group-xs > .progress-button .badge {
     top: 0;
     padding: 1px 5px; }
@@ -4392,7 +4438,7 @@ a.badge:hover, a.badge:focus {
   padding: 4px;
   margin-bottom: 18px;
   line-height: 1.42857;
-  background-color: #535760;
+  background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 4px;
   -webkit-transition: border 0.2s ease-in-out;
@@ -4407,7 +4453,7 @@ a.badge:hover, a.badge:focus {
     margin-right: auto; }
   .thumbnail .caption, .thumbnail .page-main .icon-caption, .page-main .thumbnail .icon-caption {
     padding: 9px;
-    color: #fff; }
+    color: #333333; }
 
 a.thumbnail:hover,
 a.thumbnail:focus,
@@ -4459,13 +4505,13 @@ a.thumbnail.active {
     color: #245269; }
 
 .alert-warning {
-  background-color: #e99852;
+  background-color: #fcf8e3;
   border-color: #faebcc;
-  color: #fff; }
+  color: #8a6d3b; }
   .alert-warning hr {
     border-top-color: #f7e1b5; }
   .alert-warning .alert-link {
-    color: #e6e6e6; }
+    color: #66512c; }
 
 .alert-danger {
   background-color: #f2dede;
@@ -4505,7 +4551,7 @@ a.thumbnail.active {
   line-height: 18px;
   color: #fff;
   text-align: center;
-  background-color: #5793db;
+  background-color: #337ab7;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-transition: width 0.6s ease;
@@ -4540,7 +4586,7 @@ a.thumbnail.active {
     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
 
 .progress-bar-warning {
-  background-color: #e99852; }
+  background-color: #f0ad4e; }
   .progress-striped .progress-bar-warning {
     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4637,18 +4683,18 @@ button.list-group-item {
 
 .list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
   background-color: #eeeeee;
-  color: #ddd;
+  color: #777777;
   cursor: initial; }
   .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
     color: inherit; }
   .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
-    color: #ddd; }
+    color: #777777; }
 
 .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
   z-index: 2;
   color: #fff;
-  background-color: #5793db;
-  border-color: #5793db; }
+  background-color: #337ab7;
+  border-color: #337ab7; }
   .list-group-item.active .list-group-item-heading,
   .list-group-item.active .list-group-item-heading > small,
   .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading,
@@ -4658,7 +4704,7 @@ button.list-group-item {
   .list-group-item.active:focus .list-group-item-heading > .small {
     color: inherit; }
   .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
-    color: white; }
+    color: #c7ddef; }
 
 .list-group-item-success {
   color: #3c763d;
@@ -4993,18 +5039,18 @@ button.list-group-item-danger {
     border-bottom-color: #ddd; }
 
 .panel-primary {
-  border-color: #5793db; }
+  border-color: #337ab7; }
   .panel-primary > .panel-heading {
     color: #fff;
-    background-color: #5793db;
-    border-color: #5793db; }
+    background-color: #337ab7;
+    border-color: #337ab7; }
     .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-      border-top-color: #5793db; }
+      border-top-color: #337ab7; }
     .panel-primary > .panel-heading .badge {
-      color: #5793db;
+      color: #337ab7;
       background-color: #fff; }
   .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-    border-bottom-color: #5793db; }
+    border-bottom-color: #337ab7; }
 
 .panel-success {
   border-color: #d6e9c6; }
@@ -5224,10 +5270,10 @@ button.close {
     display: table; }
   .modal-footer:after {
     clear: both; }
-  .modal-footer .btn + .btn, .modal-footer .progress-button + .btn, .modal-footer .btn + .progress-button, .modal-footer .progress-button + .progress-button {
+  .modal-footer .btn + .btn, .modal-footer .button + .btn, .modal-footer .progress-button + .btn, .modal-footer .btn + .button, .modal-footer .button + .button, .modal-footer .progress-button + .button, .modal-footer .btn + .progress-button, .modal-footer .button + .progress-button, .modal-footer .progress-button + .progress-button {
     margin-left: 5px;
     margin-bottom: 0; }
-  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .progress-button + .btn, .modal-footer .btn-group .btn + .progress-button, .modal-footer .btn-group .progress-button + .progress-button {
+  .modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .button + .btn, .modal-footer .btn-group .progress-button + .btn, .modal-footer .btn-group .btn + .button, .modal-footer .btn-group .button + .button, .modal-footer .btn-group .progress-button + .button, .modal-footer .btn-group .btn + .progress-button, .modal-footer .btn-group .button + .progress-button, .modal-footer .btn-group .progress-button + .progress-button {
     margin-left: -1px; }
   .modal-footer .btn-block + .btn-block {
     margin-left: 0; }
@@ -5649,7 +5695,7 @@ button.close {
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
-  .carousel-caption .btn, .carousel-caption .progress-button {
+  .carousel-caption .btn, .carousel-caption .button, .carousel-caption .progress-button {
     text-shadow: none; }
 
 @media screen and (min-width: 768px) {
@@ -5681,7 +5727,7 @@ button.close {
 .clearfix:after {
   clear: both; }
 
-.center-block, .page-main .icon-caption {
+.center-block {
   display: block;
   margin-left: auto;
   margin-right: auto; }
@@ -5887,6 +5933,21 @@ button.close {
   .hidden-print {
     display: none !important; } }
 
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 /*
  * Copyright 2016 Resin.io
  *
@@ -5905,6 +5966,9 @@ button.close {
 html {
   background-color: #535760; }
 
+body {
+  background-color: #535760; }
+
 .checkbox input[type="checkbox"] {
   position: initial;
   margin-right: 2px; }
@@ -5913,6 +5977,7 @@ html {
   opacity: 0; }
 
 .alert, .alert-ribbon {
+  text-align: center;
   border: 0;
   border-radius: 2px; }
 
@@ -5945,7 +6010,7 @@ html {
   margin-top: 10px;
   margin-bottom: 10px; }
 
-.space-top-large, .page-settings .subtitle {
+.space-top-large {
   margin-top: 30px; }
 
 .space-top-medium {
@@ -5955,7 +6020,7 @@ html {
   margin-top: 30px;
   margin-bottom: 30px; }
 
-.space-bottom-medium, .page-settings .subtitle {
+.space-bottom-medium {
   margin-bottom: 15px; }
 
 .space-bottom-large {
@@ -5987,11 +6052,9 @@ html {
   font-size: 11px;
   padding: 8px 25px; }
 
-.label-default {
-  background-color: #3e4147;
+.label-inset {
+  background-color: #3b3e45;
   color: #919191; }
-  .label-default > b {
-    color: #f2f2f2; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6015,10 +6078,11 @@ html {
   position: relative;
   z-index: 10;
   letter-spacing: 0;
-  background-color: #535760; }
+  background-color: #535760;
+  color: #fff; }
 
 .badge[disabled] {
-  background-color: #5c5e5c;
+  background-color: #5a5d60;
   color: #787c7f; }
 
 /*
@@ -6056,7 +6120,7 @@ html {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.btn, .progress-button {
+.button, .progress-button {
   padding: 10px;
   padding-top: 11px;
   border-radius: 2px;
@@ -6064,60 +6128,63 @@ html {
   letter-spacing: .5px;
   outline: none;
   position: relative; }
-  .btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
+  .button > .glyphicon, .progress-button > .glyphicon, .button > .tick, .progress-button > .tick {
     top: 2px;
     margin-right: 2px; }
-  .btn[disabled], [disabled].progress-button {
+  .button[disabled], [disabled].progress-button {
     background-color: #313339;
-    color: #787c7f;
-    pointer-events: none; }
-    .btn[disabled]:hover, [disabled].progress-button:hover {
-      background-color: #36383e; }
+    color: #787c7f; }
 
-.btn-brick {
+.button-block {
+  display: block;
+  width: 100%; }
+
+.button-no-hover, .button[disabled], [disabled].progress-button, .progress-button[active="true"] {
+  pointer-events: none; }
+
+.button-brick {
   min-width: 170px; }
 
-.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .progress-button, .alert-ribbon .btn-link {
-  font-size: 10px;
-  padding: 4px 12px; }
-
-.btn-default:focus {
+.button-default,
+.button-default:focus {
   background-color: #ececec;
   color: #b3b3b3;
-  border-color: #ccc; }
+  outline: none; }
 
-.btn-primary:focus, .progress-button--primary:focus {
+.button-default:hover {
+  background-color: lightgray;
+  color: #b3b3b3; }
+
+.button-primary, .progress-button,
+.button-primary:focus,
+.progress-button:focus {
   background-color: #5793db;
   color: #fff;
-  border-color: #4286d7; }
+  outline: none; }
 
-.btn-success:focus {
-  background-color: #5cb85c;
-  color: #fff;
-  border-color: #4cae4c; }
+.button-primary:hover, .progress-button:hover {
+  background-color: #2d78d2;
+  color: #fff; }
 
-.btn-info:focus {
-  background-color: #5bc0de;
-  color: #fff;
-  border-color: #46b8da; }
-
-.btn-warning:focus {
+.button-warning,
+.button-warning:focus {
   background-color: #e99852;
   color: #fff;
-  border-color: #e68b3b; }
+  outline: none; }
 
-.btn-danger:focus {
+.button-warning:hover {
+  background-color: #e37d25;
+  color: #fff; }
+
+.button-danger,
+.button-danger:focus {
   background-color: #d9534f;
   color: #fff;
-  border-color: #d43f3a; }
+  outline: none; }
 
-/*
- * Remove blue/orange outline
- * !important is needed here for some reason
- * despite the rule having top precedence.
- */
-button.btn:focus, button.progress-button:focus {
-  outline: none !important; }
+.button-danger:hover {
+  background-color: #c9302c;
+  color: #fff; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6139,18 +6206,19 @@ button.btn:focus, button.progress-button:focus {
   border-radius: 50%;
   padding: 3px;
   font-size: 18px;
-  color: #fff;
   border: 2px solid; }
   .tick[disabled] {
-    color: #e1e2e2;
-    border-color: #e1e2e2;
+    color: #ddd;
+    border-color: #ddd;
     background-color: transparent; }
 
 .tick--success {
+  color: #fff;
   background-color: #5fb835;
   border-color: #5fb835; }
 
 .tick--error {
+  color: #fff;
   background-color: #d9534f;
   border-color: #d9534f; }
 
@@ -6170,9 +6238,11 @@ button.btn:focus, button.progress-button:focus {
  * limitations under the License.
  */
 .modal-content {
+  background-color: #fff;
   display: flex;
   flex-direction: column;
-  height: 320px; }
+  margin: 0 auto;
+  height: auto; }
 
 .modal-header {
   display: flex;
@@ -6199,7 +6269,7 @@ button.btn:focus, button.progress-button:focus {
     border-left: 0;
     border-right: 0;
     border-radius: 0;
-    border-color: #eee;
+    border-color: #ededed;
     padding: 12px 0; }
     .modal-body .list-group-item > .tick {
       font-size: 11px; }
@@ -6207,12 +6277,14 @@ button.btn:focus, button.progress-button:focus {
       flex-grow: 1; }
     .modal-body .list-group-item:first-child {
       border-top: 0; }
+    .modal-body .list-group-item[disabled] .list-group-item-heading {
+      color: #b3b3b3; }
   .modal-body .list-group-item-heading {
     font-size: 13px; }
   .modal-body .list-group-item-text {
     line-height: 1;
     font-size: 11px;
-    color: #aaa; }
+    color: #b3b3b3; }
 
 .modal-open {
   padding-right: 0 !important; }
@@ -6225,12 +6297,14 @@ button.btn:focus, button.progress-button:focus {
   display: flex !important;
   justify-content: center;
   align-items: center; }
-  .modal .btn-primary[disabled], .modal [disabled].progress-button--primary {
-    background-color: #d5d5d5; }
+  .modal .button[disabled], .modal [disabled].progress-button {
+    background-color: #d5d5d5;
+    color: #787c7f; }
 
 .modal-dialog {
   margin: 0;
-  position: initial; }
+  position: initial;
+  max-width: 50%; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6248,6 +6322,9 @@ button.btn:focus, button.progress-button:focus {
  * limitations under the License.
  */
 .alert-ribbon {
+  background-color: #e99852;
+  color: #fff;
+  border-color: #f7dbc3;
   width: 60%;
   position: fixed;
   left: 0;
@@ -6261,18 +6338,14 @@ button.btn:focus, button.progress-button:focus {
     margin-right: 5px; }
   .alert-ribbon > .glyphicon:last-child, .alert-ribbon > .tick:last-child {
     margin-left: 5px; }
-  .alert-ribbon .btn-link {
+  .alert-ribbon .button-link {
     padding: 0;
     font-size: inherit;
     vertical-align: baseline;
     border-radius: 0;
-    border-bottom: 1px solid; }
-  .alert-ribbon.alert-warning .btn-link {
-    border-color: #f7dbc3;
+    border-bottom: 1px solid;
+    border-color: #fff;
     color: #fff; }
-    .alert-ribbon.alert-warning .btn-link:hover {
-      color: #e6e6e6;
-      border-color: #f2c096; }
 
 .alert-ribbon--open {
   top: 0; }
@@ -6296,32 +6369,19 @@ button.btn:focus, button.progress-button:focus {
   padding: 30px 35px;
   overflow: hidden; }
 
-.modal-update-notifier {
-  width: 400px;
-  margin-top: -10px; }
-  .modal-update-notifier .modal-content {
-    height: 245px; }
+.modal-update-notifier .modal-body {
+  padding: 20px;
+  padding-bottom: 0; }
 
-.update-notifier-modal-body__content {
-  padding-bottom: 15px;
-  margin-bottom: 25px;
-  border-bottom: 1px solid #eeeeee; }
+.modal-update-notifier .modal-footer .checkbox {
+  color: #b3b3b3;
+  font-size: 11px;
+  margin-bottom: 0; }
 
-.update-notifier-modal-body__title {
-  margin-bottom: 15px; }
-
-.update-notifier-modal-body__menu {
-  display: flex;
-  justify-content: center; }
-  .update-notifier-modal-body__menu > .btn, .update-notifier-modal-body__menu > .progress-button {
-    flex-grow: 1;
-    width: 0; }
-  .update-notifier-modal-body__menu > .btn + .btn, .update-notifier-modal-body__menu > .progress-button + .btn, .update-notifier-modal-body__menu > .btn + .progress-button, .update-notifier-modal-body__menu > .progress-button + .progress-button {
-    margin-left: 10px; }
-
-.update-notifier-modal-body .checkbox {
-  color: #959595;
-  font-size: 11px; }
+.modal-update-notifier .modal-menu {
+  display: flex; }
+  .modal-update-notifier .modal-menu > .button, .modal-update-notifier .modal-menu > .progress-button {
+    flex-basis: 50%; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6346,9 +6406,6 @@ button.btn:focus, button.progress-button:focus {
  * The state of the progress bar is controller by the width, in percentage,
  * of `.progress-button__bar`.
  *
- * The current percentage also needs to be reflected in the top level
- * `.progress-button` element as a `percentage` attribute, without the percentage sign.
- *
  * If there is an action in place, the `active` attribute must be set to `true`.
  * This is useful to determine if the progress bar is paused from the point of view
  * of the styling.
@@ -6362,31 +6419,17 @@ button.btn:focus, button.progress-button:focus {
  *
  * Usage:
  *
- * <button class="progress-button progress-button--primary" percentage="50" active="true">
+ * <button class="progress-button" active="true">
  *   <span class="progress-button__content">Button text</span>
  *   <span class="progress-button__bar" style="width: 50%;"></span>
  * </button>
  */
-.progress-button--primary .progress-button__bar {
-  background: #6ca1e0; }
+.progress-button .progress-button__bar {
+  background-color: #6ca1e0; }
 
-.progress-button--primary.progress-button--striped {
+.progress-button.progress-button--striped {
   background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #3b679b), color-stop(0.26, #5c93d6), color-stop(0.5, #5c93d6), color-stop(0.51, #3b679b), color-stop(0.75, #3b679b), color-stop(0.76, #5c93d6), to(#5c93d6)); }
 
-.progress-button--primary[active="true"]:active {
-  box-shadow: none;
-  background-color: #5cb85c;
-  border-color: #4286d7; }
-
-.progress-button[percentage="100"][active="false"] .progress-button__bar {
-  background-color: #5cb85c; }
-
-.progress-button[percentage="100"][active="true"] .progress-button__bar {
-  background-color: #e99852; }
-
-.progress-button[active="true"] {
-  pointer-events: none; }
-
 .progress-button__content {
   position: relative;
   z-index: 10; }
@@ -6425,30 +6468,13 @@ button.btn:focus, button.progress-button:focus {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.svg-icon[disabled] path {
-  fill: #787c7f; }
+.modal-drive-selector-modal .modal-content {
+  width: 300px;
+  height: 320px; }
 
-/*
- * Copyright 2016 Resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 .component-drive-selector-body .list-group-item-footer {
   margin-top: 8px; }
 
-.component-drive-selector-body .list-group-item[disabled] .list-group-item-heading {
-  color: #aaaaaa; }
-
 /*
  * Copyright 2016 Resin.io
  *
@@ -6464,33 +6490,14 @@ button.btn:focus, button.progress-button:focus {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.modal-tooltip-modal {
-  max-width: 50%; }
-  .modal-tooltip-modal .modal-header {
-    border: none; }
-    .modal-tooltip-modal .modal-header .close {
-      position: absolute;
-      right: -9px;
-      top: -8px;
-      background-color: #333333;
-      color: #eeeeee;
-      opacity: 1;
-      font-weight: 200;
-      font-size: 150%;
-      padding: 0px 5px 3px;
-      text-shadow: none;
-      margin: 0;
-      border-radius: 50%; }
-  .modal-tooltip-modal .modal-content {
-    height: auto;
-    border-radius: 3px; }
-  .modal-tooltip-modal .modal-body {
-    margin: 0px 15px 15px;
-    color: #222222;
-    background-color: #eeeeee;
-    padding: 8px;
-    overflow: hidden;
-    word-wrap: break-word; }
+.modal-tooltip-modal .modal-body {
+  text-align: center;
+  margin: 15px;
+  color: #666;
+  background-color: #f2f2f2;
+  padding: 8px;
+  overflow: hidden;
+  word-wrap: break-word; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6508,11 +6515,21 @@ button.btn:focus, button.progress-button:focus {
  * limitations under the License.
  */
 .page-main .icon-caption {
-  margin-top: 10px; }
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+  color: #fff; }
   .page-main .icon-caption[disabled] {
     color: #787c7f; }
 
-.page-main .soft {
+.svg-icon[disabled] path {
+  fill: #787c7f; }
+
+.page-main .step-selection-text {
+  color: #fff; }
+
+.page-main .text-disabled {
   color: #787c7f; }
 
 .page-main .relative {
@@ -6536,13 +6553,13 @@ button.btn:focus, button.progress-button:focus {
 .page-main .step-tooltip {
   display: block;
   margin: -5px auto -20px;
-  color: #85898c;
+  color: #787c7f;
   font-size: 10px; }
 
 .page-main .step-footer {
   margin-top: 10px;
   margin-bottom: -40px;
-  color: #85898c;
+  color: #787c7f;
   font-size: 10px; }
 
 .page-main .step-footer-split {
@@ -6556,7 +6573,7 @@ button.btn:focus, button.progress-button:focus {
   border-bottom: 1px dotted;
   padding-bottom: 2px; }
 
-.page-main .btn.step-footer, .page-main .step-footer.progress-button {
+.page-main .button.step-footer, .page-main .step-footer.progress-button {
   font-size: 12px;
   border-bottom: 1px dashed;
   border-radius: 0;
@@ -6577,38 +6594,30 @@ button.btn:focus, button.progress-button:focus {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.page-settings .checkbox input[type="checkbox"] + * {
+  color: #fff; }
+
 .page-settings .checkbox input[type="checkbox"]:not(:checked) + * {
   color: #ddd; }
 
-.modal-settings-dangerous-modal {
-  max-width: 50%; }
-  .modal-settings-dangerous-modal .modal-header {
-    text-align: center;
-    font-weight: bold;
-    color: #555555;
-    text-transform: initial;
-    font-size: 15px;
-    border-bottom: none;
-    padding: 0 0 15px; }
-  .modal-settings-dangerous-modal .modal-title {
-    display: flex;
-    justify-content: center;
-    align-items: center; }
-    .modal-settings-dangerous-modal .modal-title .glyphicon, .modal-settings-dangerous-modal .modal-title .tick {
-      margin-right: 3px;
-      color: #d9534f; }
-  .modal-settings-dangerous-modal .modal-content {
-    padding: 25px 30px;
-    height: 220px; }
-  .modal-settings-dangerous-modal .modal-body {
-    padding: 0; }
-  .modal-settings-dangerous-modal .modal-footer {
-    padding: 0;
-    padding-top: 20px;
-    border-top: 1px solid #eeeeee;
-    display: flex; }
-    .modal-settings-dangerous-modal .modal-footer > .btn, .modal-settings-dangerous-modal .modal-footer > .progress-button {
-      flex-basis: 50%; }
+.page-settings .title {
+  color: #fff; }
+
+.page-settings .subtitle {
+  color: #fff;
+  margin-top: 30px;
+  margin-bottom: 15px; }
+
+.modal-settings-dangerous-modal .modal-title .glyphicon, .modal-settings-dangerous-modal .modal-title .tick {
+  color: #d9534f; }
+
+.modal-settings-dangerous-modal .modal-body {
+  padding: 20px; }
+
+.modal-settings-dangerous-modal .modal-footer {
+  display: flex; }
+  .modal-settings-dangerous-modal .modal-footer > .button, .modal-settings-dangerous-modal .modal-footer > .progress-button {
+    flex-basis: 50%; }
 
 /*
  * Copyright 2016 Resin.io
@@ -6629,11 +6638,14 @@ button.btn:focus, button.progress-button:focus {
   margin: 0 auto 15px;
   max-width: 165px; }
 
+.page-finish .title {
+  color: #fff; }
+
 .page-finish .label {
   display: inline-block; }
-
-.page-finish .monospace {
-  font-family: monospace; }
+  .page-finish .label > b {
+    color: #ddd;
+    font-family: monospace; }
 
 .page-finish .soft {
   color: #ddd; }
@@ -6658,7 +6670,8 @@ body {
   color: #787c7f;
   margin: 0 60px;
   padding-top: 15px;
-  border-top: 2px solid #64686a; }
+  border-top: 2px solid #64686a;
+  text-align: center; }
   .section-footer .col-xs {
     padding: 0; }
   .section-footer .svg-icon {
@@ -6678,9 +6691,10 @@ body {
   margin: 20px 60px; }
 
 .section-header {
+  text-align: right;
   padding: 5px 8px;
   font-size: 15px; }
-  .section-header > .btn, .section-header > .progress-button {
+  .section-header > .button, .section-header > .progress-button {
     padding-left: 3px;
     padding-right: 3px; }
 
diff --git a/lib/gui/components/drive-selector/services/drive-selector.js b/lib/gui/components/drive-selector/services/drive-selector.js
index 1780cd7f..85773a6a 100644
--- a/lib/gui/components/drive-selector/services/drive-selector.js
+++ b/lib/gui/components/drive-selector/services/drive-selector.js
@@ -36,7 +36,8 @@ module.exports = function(ModalService, $q) {
   this.open = () => {
     modal = ModalService.open({
       template: './components/drive-selector/templates/drive-selector-modal.tpl.html',
-      controller: 'DriveSelectorController as modal'
+      controller: 'DriveSelectorController as modal',
+      size: 'drive-selector-modal'
     });
 
     return modal.result;
diff --git a/lib/gui/components/drive-selector/styles/_drive-selector.scss b/lib/gui/components/drive-selector/styles/_drive-selector.scss
index 0cc44dea..d9ebd370 100644
--- a/lib/gui/components/drive-selector/styles/_drive-selector.scss
+++ b/lib/gui/components/drive-selector/styles/_drive-selector.scss
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
+.modal-drive-selector-modal .modal-content {
+  width: 300px;
+  height: 320px;
+}
+
 .component-drive-selector-body .list-group-item-footer {
   margin-top: 8px;
 }
-
-.component-drive-selector-body .list-group-item[disabled] .list-group-item-heading {
-  color: darken($gray-light, 20%);
-}
diff --git a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
index 89e864a9..17d65e6f 100644
--- a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -39,7 +39,7 @@
 </div>
 
 <div class="modal-footer">
-  <button class="btn btn-primary btn-block"
+  <button class="button button-primary button-block"
     ng-click="modal.closeModal()"
     ng-disabled="!modal.state.hasDrive()">CONTINUE</button>
 </div>
diff --git a/lib/gui/components/progress-button/styles/_progress-button.scss b/lib/gui/components/progress-button/styles/_progress-button.scss
index 3337be3c..0898543a 100644
--- a/lib/gui/components/progress-button/styles/_progress-button.scss
+++ b/lib/gui/components/progress-button/styles/_progress-button.scss
@@ -22,9 +22,6 @@
  * The state of the progress bar is controller by the width, in percentage,
  * of `.progress-button__bar`.
  *
- * The current percentage also needs to be reflected in the top level
- * `.progress-button` element as a `percentage` attribute, without the percentage sign.
- *
  * If there is an action in place, the `active` attribute must be set to `true`.
  * This is useful to determine if the progress bar is paused from the point of view
  * of the styling.
@@ -38,7 +35,7 @@
  *
  * Usage:
  *
- * <button class="progress-button progress-button--primary" percentage="50" active="true">
+ * <button class="progress-button" active="true">
  *   <span class="progress-button__content">Button text</span>
  *   <span class="progress-button__bar" style="width: 50%;"></span>
  * </button>
@@ -48,55 +45,37 @@ $progress-button-stripes-width: 20px;
 $progress-button-stripes-animation-duration: 1s;
 
 .progress-button {
-  @extend .btn;
-}
-
-.progress-button--primary {
-  @extend .btn-primary;
+  @extend .button;
+  @extend .button-primary;
 
   .progress-button__bar {
-    background: lighten($brand-primary, 5);
+    background-color: lighten($palette-theme-primary-background, 5%);
   }
 
-  $progress-button-stripes-background-color: desaturate($brand-primary, 5%);
-  $progress-button-stripes-color: desaturate(darken($brand-primary, 18%), 20%);
-
   &.progress-button--striped {
+    $progress-button-stripes-background-color: desaturate($palette-theme-primary-background, 5%);
+    $progress-button-stripes-foreground-color: desaturate(darken($palette-theme-primary-background, 18%), 20%);
 
     // Notice that we add `0.01` to certain gradient stop positions.
     // That workarounds a Chrome rendering issue where diagonal
     // lines look spiky.
     // See https://github.com/resin-io/etcher/issues/472
     background-image: -webkit-gradient(linear, 0 0, 100% 100%,
-      color-stop(0.25, $progress-button-stripes-color),
+      color-stop(0.25, $progress-button-stripes-foreground-color),
       color-stop(0.25 + 0.01, $progress-button-stripes-background-color),
       color-stop(0.50, $progress-button-stripes-background-color),
-      color-stop(0.50 + 0.01, $progress-button-stripes-color),
-      color-stop(0.75, $progress-button-stripes-color),
+      color-stop(0.50 + 0.01, $progress-button-stripes-foreground-color),
+      color-stop(0.75, $progress-button-stripes-foreground-color),
       color-stop(0.75 + 0.01, $progress-button-stripes-background-color),
       to($progress-button-stripes-background-color));
 
   }
 }
 
-.progress-button--primary[active="true"]:active {
-  box-shadow: none;
-  background-color: $brand-success;
-  border-color: $btn-primary-border;
-}
-
-.progress-button[percentage="100"][active="false"] .progress-button__bar {
-  background-color: $brand-success;
-}
-
-.progress-button[percentage="100"][active="true"] .progress-button__bar {
-  background-color: $brand-warning;
-}
-
 // Prevent the button from being clickable
 // when it has an active progress bar.
 .progress-button[active="true"] {
-  pointer-events: none;
+  @extend .button-no-hover;
 }
 
 .progress-button__content {
diff --git a/lib/gui/components/progress-button/templates/progress-button.tpl.html b/lib/gui/components/progress-button/templates/progress-button.tpl.html
index ab019a95..998cdd38 100644
--- a/lib/gui/components/progress-button/templates/progress-button.tpl.html
+++ b/lib/gui/components/progress-button/templates/progress-button.tpl.html
@@ -1,4 +1,4 @@
-<button class="progress-button progress-button--primary"
+<button class="progress-button"
   ng-class="{
     'progress-button--striped': striped && striped != 'false'
   }">
diff --git a/lib/gui/components/svg-icon/styles/_svg-icon.scss b/lib/gui/components/svg-icon/styles/_svg-icon.scss
deleted file mode 100644
index 5ffe5c8f..00000000
--- a/lib/gui/components/svg-icon/styles/_svg-icon.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright 2016 Resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.svg-icon[disabled] path {
-  fill: $color-disabled;
-}
diff --git a/lib/gui/components/tooltip-modal/styles/_tooltip-modal.scss b/lib/gui/components/tooltip-modal/styles/_tooltip-modal.scss
index 6825ff44..7c39aa32 100644
--- a/lib/gui/components/tooltip-modal/styles/_tooltip-modal.scss
+++ b/lib/gui/components/tooltip-modal/styles/_tooltip-modal.scss
@@ -14,45 +14,12 @@
  * limitations under the License.
  */
 
-.modal-tooltip-modal {
-  max-width: 50%;
-
-  .modal-header {
-    border: none;
-
-    .close {
-      position: absolute;
-
-      $modal-tooltip-close-position: 8px;
-      right: -($modal-tooltip-close-position + 1px);
-      top: -$modal-tooltip-close-position;
-
-      background-color: $gray-dark;
-      color: $gray-lighter;
-      opacity: 1;
-      font-weight: 200;
-      font-size: 150%;
-      padding: 0px 5px 3px;
-      text-shadow: none;
-      margin: 0;
-      border-radius: 50%;
-    }
-  }
-
-  .modal-content {
-    height: auto;
-    border-radius: 3px;
-  }
-
-  .modal-body {
-    @extend .text-center;
-
-    margin: 0px 15px 15px;
-    color: $gray-darker;
-    background-color: $gray-lighter;
-    padding: 8px;
-    overflow: hidden;
-    word-wrap: break-word;
-  }
-
+.modal-tooltip-modal .modal-body {
+  text-align: center;
+  margin: 15px;
+  color: $palette-theme-light-foreground;
+  background-color: darken($palette-theme-light-background, 5%);
+  padding: 8px;
+  overflow: hidden;
+  word-wrap: break-word;
 }
diff --git a/lib/gui/components/tooltip-modal/templates/tooltip-modal.tpl.html b/lib/gui/components/tooltip-modal/templates/tooltip-modal.tpl.html
index af272ff9..226a3dd7 100644
--- a/lib/gui/components/tooltip-modal/templates/tooltip-modal.tpl.html
+++ b/lib/gui/components/tooltip-modal/templates/tooltip-modal.tpl.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
-  <button class="close" ng-click="modal.closeModal()">&times;</button>
   <h4 class="modal-title">{{ ::modal.data.title }}</h4>
+  <button class="close" ng-click="modal.closeModal()">&times;</button>
 </div>
 
 <div class="modal-body">{{ ::modal.data.message }}</div>
diff --git a/lib/gui/components/update-notifier/styles/_update-notifier.scss b/lib/gui/components/update-notifier/styles/_update-notifier.scss
index d159a5a6..d2158d7e 100644
--- a/lib/gui/components/update-notifier/styles/_update-notifier.scss
+++ b/lib/gui/components/update-notifier/styles/_update-notifier.scss
@@ -20,50 +20,25 @@
 }
 
 .modal-update-notifier {
-  width: 400px;
-
-  // Move it a bit to the top for
-  // aesthetic reasons
-  margin-top: -10px;
-
-  .modal-content {
-    height: 245px;
-  }
-}
-
-.update-notifier-modal-body__content {
-  @extend .text-center;
-
-  padding-bottom: 15px;
-  margin-bottom: 25px;
-  border-bottom: 1px solid $gray-lighter;
-}
-
-.update-notifier-modal-body__title {
-  margin-bottom: 15px;
-}
-
-.update-notifier-modal-body__menu {
-  display: flex;
-  justify-content: center;
-
-  > .btn {
-    flex-grow: 1;
-
-
-    // This causes flex children buttons to be
-    // equally resized independently of the
-    // button text length
-    width: 0;
 
+  .modal-body {
+    padding: 20px;
+    padding-bottom: 0;
   }
 
-  > .btn + .btn {
-    margin-left: 10px;
+  .modal-footer .checkbox {
+    color: $palette-theme-light-soft-foreground;
+    font-size: 11px;
+    margin-bottom: 0;
   }
+
+  .modal-menu {
+    display: flex;
+
+    & > .button {
+      flex-basis: 50%;
+    }
+  }
+
 }
 
-.update-notifier-modal-body .checkbox {
-  color: lighten($gray, 25%);
-  font-size: 11px;
-}
diff --git a/lib/gui/components/update-notifier/templates/update-notifier-modal.tpl.html b/lib/gui/components/update-notifier/templates/update-notifier-modal.tpl.html
index 02f1b927..63f6b303 100644
--- a/lib/gui/components/update-notifier/templates/update-notifier-modal.tpl.html
+++ b/lib/gui/components/update-notifier/templates/update-notifier-modal.tpl.html
@@ -1,13 +1,16 @@
-<div class="modal-body update-notifier-modal-body">
-  <div class="update-notifier-modal-body__content">
-    <h4 class="update-notifier-modal-body__title">New Update Available!</h4>
-    <p>A new version of Etcher is available for download</p>
-  </div>
+<div class="modal-header">
+  <h4 class="modal-title">New Update Available!</h4>
+</div>
 
-  <div class="update-notifier-modal-body__menu">
-    <button class="btn btn-primary"
+<div class="modal-body">
+  <p>A new version of Etcher is available for download</p>
+</div>
+
+<div class="modal-footer">
+  <div class="modal-menu">
+    <button class="button button-primary"
       os-open-external="http://etcher.io">DOWNLOAD</button>
-    <button class="btn btn-default"
+    <button class="button button-default"
       ng-click="modal.closeModal()">SKIP</button>
   </div>
 
@@ -20,3 +23,4 @@
     </label>
   </div>
 </div>
+
diff --git a/lib/gui/index.html b/lib/gui/index.html
index cdb8df15..5044b074 100644
--- a/lib/gui/index.html
+++ b/lib/gui/index.html
@@ -19,15 +19,15 @@
   </head>
   <body ng-app="Etcher">
     <header class="section-header">
-      <button class="btn btn-link" os-open-external="https://github.com/resin-io/etcher/blob/master/SUPPORT.md">
+      <button class="button button-link" os-open-external="https://github.com/resin-io/etcher/blob/master/SUPPORT.md">
         <span class="glyphicon glyphicon-question-sign"></span> Need Help?
       </button>
 
-      <button class="btn btn-link" ui-sref="settings" hide-if-state="settings">
+      <button class="button button-link" ui-sref="settings" hide-if-state="settings">
         <span class="glyphicon glyphicon-cog"></span>
       </button>
 
-      <button class="btn btn-link" ui-sref="main" show-if-state="settings">
+      <button class="button button-link" ui-sref="main" show-if-state="settings">
         <span class="glyphicon glyphicon-chevron-left"></span> Back
       </button>
     </header>
diff --git a/lib/gui/pages/finish/styles/_finish.scss b/lib/gui/pages/finish/styles/_finish.scss
index e0f05bde..d37e296a 100644
--- a/lib/gui/pages/finish/styles/_finish.scss
+++ b/lib/gui/pages/finish/styles/_finish.scss
@@ -21,21 +21,26 @@
   max-width: $btn-min-width - 5px;
 }
 
-.page-finish .label {
-  display: inline-block;
+.page-finish .title {
+  color: $palette-theme-dark-foreground;
 }
 
-.page-finish .monospace {
-  font-family: monospace;
+.page-finish .label {
+  display: inline-block;
+
+  > b {
+    color: $palette-theme-dark-soft-foreground;
+    font-family: monospace;
+  }
 }
 
 .page-finish .soft {
-  color: $gray-light;
+  color: $palette-theme-dark-soft-foreground;
 }
 
 .page-finish .separator-xs {
   flex-grow: 0;
-  background-color: darken($color-disabled, 8%);
+  background-color: $palette-theme-dark-soft-background;
   padding: 0px;
   min-width: 2px;
 }
diff --git a/lib/gui/pages/finish/templates/success.tpl.html b/lib/gui/pages/finish/templates/success.tpl.html
index 07690d02..66481e34 100644
--- a/lib/gui/pages/finish/templates/success.tpl.html
+++ b/lib/gui/pages/finish/templates/success.tpl.html
@@ -1,7 +1,7 @@
 <div class="page-finish row around-xs">
   <div class="col-xs">
     <div class="box text-center">
-      <h3><span class="tick tick--success" class="space-right-tiny"></span> Flash Complete!</h3>
+      <h3 class="title"><span class="tick tick--success" class="space-right-tiny"></span> Flash Complete!</h3>
       <p class="soft space-vertical-small" ng-show="finish.settings.get('unmountOnSuccess')">Safely ejected and ready for use</p>
 
       <div class="row center-xs space-vertical-medium">
@@ -9,7 +9,7 @@
           <div class="box">
             <p class="soft button-label">Would you like to flash the same image?</p>
 
-            <button class="btn btn-primary btn-brick" ng-click="finish.restart({ preserveImage: true })">
+            <button class="button button-primary button-brick" ng-click="finish.restart({ preserveImage: true })">
               Use <b>same</b> image
             </button>
           </div>
@@ -21,15 +21,15 @@
           <div class="box">
             <p class="soft button-label">Would you like to flash a new image?</p>
 
-            <button class="btn btn-primary btn-brick" ng-click="finish.restart()">
+            <button class="button button-primary button-brick" ng-click="finish.restart()">
               Use <b>new</b> image
             </button>
           </div>
         </div>
       </div>
 
-      <span class="label label-big label-default"
-        ng-if="finish.checksum">CRC32 CHECKSUM : <b class="monospace">{{ ::finish.checksum }}</b></span>
+      <span class="label label-big label-inset"
+        ng-if="finish.checksum">CRC32 CHECKSUM : <b>{{ ::finish.checksum }}</b></span>
     </div>
   </div>
 </div>
diff --git a/lib/gui/pages/main/styles/_main.scss b/lib/gui/pages/main/styles/_main.scss
index fc976e60..376d215f 100644
--- a/lib/gui/pages/main/styles/_main.scss
+++ b/lib/gui/pages/main/styles/_main.scss
@@ -16,17 +16,29 @@
 
 .page-main .icon-caption {
   @extend .caption;
-  @extend .center-block;
 
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
   margin-top: 10px;
 
+  color: $palette-theme-dark-foreground;
+
   &[disabled] {
-    color: $color-disabled;
+    color: $palette-theme-dark-disabled-foreground;
   }
 }
 
-.page-main .soft {
-  color: $color-disabled;
+.svg-icon[disabled] path {
+  fill: $palette-theme-dark-disabled-foreground;
+}
+
+.page-main .step-selection-text {
+  color: $palette-theme-dark-foreground;
+}
+
+.page-main .text-disabled {
+  color: $palette-theme-dark-disabled-foreground;
 }
 
 .page-main .relative {
@@ -35,13 +47,13 @@
 
 %step-border {
   height: 2px;
-  background-color: $text-color;
+  background-color: $palette-theme-dark-foreground;
   position: absolute;
   width: 230px;
   top: 95px;
 
   &[disabled] {
-    background-color: $color-disabled;
+    background-color: $palette-theme-dark-disabled-foreground;
   }
 }
 
@@ -58,14 +70,14 @@
 .page-main .step-tooltip {
   display: block;
   margin: -5px auto -20px;
-  color: lighten($color-disabled, 5%);
+  color: $palette-theme-dark-disabled-foreground;
   font-size: 10px;
 }
 
 .page-main .step-footer {
   margin-top: 10px;
   margin-bottom: -40px;
-  color: lighten($color-disabled, 5%);
+  color: $palette-theme-dark-disabled-foreground;
   font-size: 10px;
 }
 
@@ -82,7 +94,7 @@
   padding-bottom: 2px;
 }
 
-.page-main .btn.step-footer {
+.page-main .button.step-footer {
   font-size: 12px;
   border-bottom: 1px dashed;
   border-radius: 0;
diff --git a/lib/gui/pages/main/templates/main.tpl.html b/lib/gui/pages/main/templates/main.tpl.html
index 88e23901..53c87a81 100644
--- a/lib/gui/pages/main/templates/main.tpl.html
+++ b/lib/gui/pages/main/templates/main.tpl.html
@@ -7,7 +7,7 @@
 
       <div class="space-vertical-large">
         <div ng-hide="main.selection.hasImage()">
-          <button class="btn btn-primary btn-brick" ng-click="image.openImageSelector()">Select image</button>
+          <button class="button button-primary button-brick" ng-click="image.openImageSelector()">Select image</button>
 
           <p class="step-footer">
             {{ ::image.mainSupportedExtensions.join(', ') }}, and
@@ -16,16 +16,17 @@
           </p>
         </div>
         <div ng-if="main.selection.hasImage()">
-          <div ng-click="main.external.open(main.selection.getImageUrl())"
+          <div class="step-selection-text"
+            ng-click="main.external.open(main.selection.getImageUrl())"
             ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:25"></div>
 
-          <button class="btn btn-link step-tooltip"
+          <button class="button button-link step-tooltip"
             ng-click="main.tooltipModal.show({
               title: 'IMAGE FILE NAME',
               message: main.selection.getImagePath()
             })">SHOW FULL FILE NAME</button>
 
-          <button class="btn btn-link step-footer"
+          <button class="button button-link step-footer"
             ng-click="image.reselectImage()"
             ng-hide="main.state.isFlashing()">Change</button>
         </div>
@@ -50,21 +51,23 @@
         <div ng-hide="main.selection.hasDrive()">
 
           <div ng-show="main.drives.hasAvailableDrives() || main.shouldDriveStepBeDisabled()">
-            <button class="btn btn-primary btn-brick"
+            <button class="button button-primary button-brick"
               ng-disabled="main.shouldDriveStepBeDisabled()"
               ng-click="drive.openDriveSelector()">Select drive</button>
           </div>
 
           <div ng-hide="main.drives.hasAvailableDrives() || main.shouldDriveStepBeDisabled()">
-            <button class="btn btn-danger btn-brick">Connect a drive</button>
+            <button class="button button-danger button-brick button-no-hover">Connect a drive</button>
           </div>
 
         </div>
         <div ng-show="main.selection.hasDrive()">
-          <div ng-class="{
-            soft: main.shouldDriveStepBeDisabled()
-          }">{{ main.selection.getDrive().name }} - {{ main.selection.getDrive().size | gigabyte | number:1 }} GB</div>
-          <button class="btn btn-link step-footer"
+
+          <div class="step-selection-text"
+            ng-class="{
+              'text-disabled': main.shouldDriveStepBeDisabled()
+            }">{{ main.selection.getDrive().name }} - {{ main.selection.getDrive().size | gigabyte | number:1 }} GB</div>
+          <button class="button button-link step-footer"
             ng-click="drive.reselectDrive()"
             ng-hide="main.state.isFlashing()">Change</button>
         </div>
@@ -83,7 +86,7 @@
       <span class="badge space-top-medium" ng-disabled="main.shouldFlashStateBeDisabled()">3</span>
 
       <div class="space-vertical-large">
-        <progress-button class="btn-brick"
+        <progress-button class="button-brick"
           percentage="main.state.getFlashState().percentage"
           striped="{{ main.state.getFlashState().type == 'check' }}"
           ng-attr-active="{{ main.state.isFlashing() }}"
@@ -93,20 +96,20 @@
             <span ng-bind="flash.getProgressButtonLabel()"></span>
         </progress-button>
 
-        <div class="alert-ribbon alert-warning" ng-class="{ 'alert-ribbon--open': !main.state.wasLastFlashSuccessful() }">
+        <div class="alert-ribbon" ng-class="{ 'alert-ribbon--open': !main.state.wasLastFlashSuccessful() }">
           <span class="glyphicon glyphicon-warning-sign"></span>
           <span ng-show="main.state.getLastFlashErrorCode() === 'ENOSPC'">
-            Not enough space on the drive.<br>Please insert larger one and <button class="btn btn-link" ng-click="main.restartAfterFailure()">try again</button>
+            Not enough space on the drive.<br>Please insert larger one and <button class="button button-link" ng-click="main.restartAfterFailure()">try again</button>
           </span>
           <span ng-show="main.state.getLastFlashErrorCode() !== 'ENOSPC' && main.settings.get('validateWriteOnSuccess')">
-            Your removable drive may be corrupted.<br>Try inserting a different one and <button class="btn btn-link" ng-click="main.restartAfterFailure()">press "retry"</button>
+            Your removable drive may be corrupted.<br>Try inserting a different one and <button class="button button-link" ng-click="main.restartAfterFailure()">press "retry"</button>
           </span>
           <span ng-show="main.state.getLastFlashErrorCode() !== 'ENOSPC' && !main.settings.get('validateWriteOnSuccess')">
-            Oops, seems something went wrong. Click <button class="btn btn-link" ng-click="main.restartAfterFailure()">here</button> to retry
+            Oops, seems something went wrong. Click <button class="button button-link" ng-click="main.restartAfterFailure()">here</button> to retry
           </span>
         </div>
 
-        <button class="btn btn-warning btn-brick" ng-hide="main.state.wasLastFlashSuccessful()" ng-click="main.restartAfterFailure()">
+        <button class="button button-warning button-brick" ng-hide="main.state.wasLastFlashSuccessful()" ng-click="main.restartAfterFailure()">
           <span class="glyphicon glyphicon-repeat"></span> Retry
         </button>
 
diff --git a/lib/gui/pages/settings/styles/_settings.scss b/lib/gui/pages/settings/styles/_settings.scss
index 04b89128..31f683e5 100644
--- a/lib/gui/pages/settings/styles/_settings.scss
+++ b/lib/gui/pages/settings/styles/_settings.scss
@@ -14,55 +14,38 @@
  * limitations under the License.
  */
 
+.page-settings .checkbox input[type="checkbox"] + * {
+  color: $palette-theme-dark-foreground;
+}
+
 .page-settings .checkbox input[type="checkbox"]:not(:checked) + * {
-  color: $gray-light;
+  color: $palette-theme-dark-soft-foreground;
+}
+
+.page-settings .title {
+  color: $palette-theme-dark-foreground;
 }
 
 .page-settings .subtitle {
-  @extend .space-top-large;
-  @extend .space-bottom-medium;
+  color: $palette-theme-dark-foreground;
+  margin-top: 30px;
+  margin-bottom: 15px;
 }
 
 .modal-settings-dangerous-modal {
-  max-width: 50%;
 
-  .modal-header {
-    text-align: center;
-    font-weight: bold;
-    color: $gray;
-    text-transform: initial;
-    font-size: 15px;
-    border-bottom: none;
-    padding: 0 0 15px;
-  }
-
-  .modal-title {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .glyphicon {
-      margin-right: 3px;
-      color: $btn-danger-bg;
-    }
-  }
-
-  .modal-content {
-    padding: 25px 30px;
-    height: 220px;
+  .modal-title .glyphicon {
+    color: $palette-theme-danger-background;
   }
 
   .modal-body {
-    padding: 0;
+    padding: 20px;
   }
 
   .modal-footer {
-    padding: 0;
-    padding-top: 20px;
-    border-top: 1px solid $gray-lighter;
     display: flex;
 
-    & > .btn {
+    & > .button {
       flex-basis: 50%;
     }
   }
diff --git a/lib/gui/pages/settings/templates/settings-dangerous-modal.tpl.html b/lib/gui/pages/settings/templates/settings-dangerous-modal.tpl.html
index 5e7a85a9..177e3c12 100644
--- a/lib/gui/pages/settings/templates/settings-dangerous-modal.tpl.html
+++ b/lib/gui/pages/settings/templates/settings-dangerous-modal.tpl.html
@@ -10,9 +10,9 @@
 </div>
 
 <div class="modal-footer">
-  <button class="btn btn-danger"
+  <button class="button button-danger"
     ng-click="modal.accept()">YES, CONTINUE</button>
 
-  <button class="btn btn-default"
+  <button class="button button-default"
     ng-click="modal.reject()">CANCEL</button>
 </div>
diff --git a/lib/gui/pages/settings/templates/settings.tpl.html b/lib/gui/pages/settings/templates/settings.tpl.html
index df6bce9d..0109e639 100644
--- a/lib/gui/pages/settings/templates/settings.tpl.html
+++ b/lib/gui/pages/settings/templates/settings.tpl.html
@@ -1,5 +1,5 @@
 <div class="page-settings text-left">
-  <h1 class="space-bottom-large">Settings</h1>
+  <h1 class="title space-bottom-large">Settings</h1>
 
   <div class="checkbox">
     <label>
diff --git a/lib/gui/scss/components/_alert-ribbon.scss b/lib/gui/scss/components/_alert-ribbon.scss
index ad3bd6f9..08c30f1c 100644
--- a/lib/gui/scss/components/_alert-ribbon.scss
+++ b/lib/gui/scss/components/_alert-ribbon.scss
@@ -17,6 +17,10 @@
 .alert-ribbon {
   @extend .alert;
 
+  background-color: $palette-theme-warning-background;
+  color: $palette-theme-warning-foreground;
+  border-color: lighten($palette-theme-warning-background, 25%);
+
   width: 60%;
   position: fixed;
 
@@ -42,24 +46,15 @@
     }
   }
 
-  .btn-link {
-    @extend .btn-sm;
-
+  .button-link {
     padding: 0;
     font-size: inherit;
     vertical-align: baseline;
     border-radius: 0;
     border-bottom: 1px solid;
-  }
 
-  &.alert-warning .btn-link {
-    border-color: lighten($alert-warning-bg, 25%);
-    color: $alert-warning-text;
-
-    &:hover {
-      color: darken($alert-warning-text, 10%);
-      border-color: lighten($alert-warning-bg, 15%);
-    }
+    border-color: $palette-theme-warning-foreground;
+    color: $palette-theme-warning-foreground;
   }
 }
 
diff --git a/lib/gui/scss/components/_badge.scss b/lib/gui/scss/components/_badge.scss
index 722e62c2..6cdbd474 100644
--- a/lib/gui/scss/components/_badge.scss
+++ b/lib/gui/scss/components/_badge.scss
@@ -21,10 +21,11 @@
   position: relative;
   z-index: 10;
   letter-spacing: 0;
-  background-color: $body-bg;
+  background-color: $palette-theme-dark-background;
+  color: $palette-theme-dark-foreground;
 }
 
 .badge[disabled] {
-  background-color: #5c5e5c;
-  color: $color-disabled;
+  background-color: darken($palette-theme-dark-disabled-foreground, 12%);
+  color: $palette-theme-dark-disabled-foreground;
 }
diff --git a/lib/gui/scss/components/_button.scss b/lib/gui/scss/components/_button.scss
index 1591d609..e1425fee 100644
--- a/lib/gui/scss/components/_button.scss
+++ b/lib/gui/scss/components/_button.scss
@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-.btn {
+.button {
+  @extend .btn;
+
   padding: 10px;
   padding-top: 11px;
 
@@ -32,80 +34,70 @@
   }
 
   &[disabled] {
-    background-color: $btn-disabled;
-    color: $color-disabled;
-    pointer-events: none;
-
-    &:hover {
-      background-color: lighten($btn-disabled, 2);
-    }
+    @extend .button-no-hover;
+    background-color: $palette-theme-dark-disabled-background;
+    color: $palette-theme-dark-disabled-foreground;
   }
 }
 
-.btn-brick {
-  min-width: $btn-min-width;
+.button-link {
+  @extend .btn-link;
 }
 
-.btn-sm {
-  font-size: 10px;
-  padding: 4px 12px;
+.button-block {
+  display: block;
+  width: 100%;
+}
+
+.button-no-hover {
+  pointer-events: none;
+}
+
+.button-brick {
+  min-width: $btn-min-width;
 }
 
 // Create map from Bootstrap `.btn` type styles
 // since its not possible to perform variable
 // interpolation (e.g: `$btn-${type}-bg`).
 // See https://github.com/sass/sass/issues/132
-$btn-types-styles: (
+$button-types-styles: (
   default: (
-    bg: $btn-default-bg,
-    color: $btn-default-color,
-    border: $btn-default-border
+    bg: $palette-theme-default-background,
+    color: $palette-theme-default-foreground
   ),
   primary: (
-    bg: $btn-primary-bg,
-    color: $btn-primary-color,
-    border: $btn-primary-border
-  ),
-  success: (
-    bg: $btn-success-bg,
-    color: $btn-success-color,
-    border: $btn-success-border
-  ),
-  info: (
-    bg: $btn-info-bg,
-    color: $btn-info-color,
-    border: $btn-info-border
+    bg: $palette-theme-primary-background,
+    color: $palette-theme-primary-foreground
   ),
   warning: (
-    bg: $btn-warning-bg,
-    color: $btn-warning-color,
-    border: $btn-warning-border
+    bg: $palette-theme-warning-background,
+    color: $palette-theme-warning-foreground
   ),
   danger: (
-    bg: $btn-danger-bg,
-    color: $btn-danger-color,
-    border: $btn-danger-border
+    bg: $palette-theme-danger-background,
+    color: $palette-theme-danger-foreground
   )
 );
 
-// Undo `:focus` styles from Bootstrap.
-// On Electron, the user can click and press over a button,
-// then move the mouse away from the button and release,
-// and the button will erroneusly keep the `:focus` state style.
-@each $style in map-keys($btn-types-styles) {
-  .btn-#{$style}:focus {
-    $btn-styles: map-get($btn-types-styles, $style);
-    background-color: map-get($btn-styles, "bg");
-    color: map-get($btn-styles, "color");
-    border-color: map-get($btn-styles, "border");
+@each $style in map-keys($button-types-styles) {
+  $button-styles: map-get($button-types-styles, $style);
+
+  .button-#{$style},
+
+  // Undo `:focus` styles from Bootstrap.
+  // On Electron, the user can click and press over a button,
+  // then move the mouse away from the button and release,
+  // and the button will erroneusly keep the `:focus` state style.
+  .button-#{$style}:focus {
+
+    background-color: map-get($button-styles, "bg");
+    color: map-get($button-styles, "color");
+    outline: none;
+  }
+
+  .button-#{$style}:hover {
+    background-color: darken(map-get($button-styles, "bg"), 10%);
+    color: map-get($button-styles, "color");
   }
 }
-
-/*
- * Remove blue/orange outline
- * !important is needed here for some reason
- * despite the rule having top precedence.
- */
-button.btn:focus {
-  outline: none !important;
-}
diff --git a/lib/gui/scss/components/_label.scss b/lib/gui/scss/components/_label.scss
index 83912284..65fea6e7 100644
--- a/lib/gui/scss/components/_label.scss
+++ b/lib/gui/scss/components/_label.scss
@@ -24,11 +24,7 @@
   padding: 8px 25px;
 }
 
-.label-default {
-  background-color: #3e4147;
-  color: darken($gray-light, 30%);
-
-  > b {
-    color: darken(#fff, 5%);
-  }
+.label-inset {
+  background-color: darken($palette-theme-dark-background, 10%);
+  color: darken($palette-theme-dark-foreground, 43%);
 }
diff --git a/lib/gui/scss/components/_modal.scss b/lib/gui/scss/components/_modal.scss
index b3dca4a7..bb9a587c 100644
--- a/lib/gui/scss/components/_modal.scss
+++ b/lib/gui/scss/components/_modal.scss
@@ -15,12 +15,11 @@
  */
 
 .modal-content {
+  background-color: $palette-theme-light-background;
   display: flex;
   flex-direction: column;
-
-  // Since Etcher opens with a known width & height and its
-  // not resizable, we can safely use an absolute value here
-  height: 320px;
+  margin: 0 auto;
+  height: auto;
 }
 
 .modal-header {
@@ -28,7 +27,7 @@
   align-items: baseline;
   text-transform: uppercase;
   font-size: 11px;
-  color: $btn-default-color;
+  color: $palette-theme-light-soft-foreground;
   padding: 11px 20px;
   flex-grow: 0;
 }
@@ -40,7 +39,7 @@
 
 .modal-body {
   flex-grow: 1;
-  color: #666;
+  color: $palette-theme-light-foreground;
   padding: 0 20px;
   max-height: 250px;
   overflow: auto;
@@ -51,7 +50,7 @@
     border-left: 0;
     border-right: 0;
     border-radius: 0;
-    border-color: #eee;
+    border-color: darken($palette-theme-light-background, 7%);
     padding: 12px 0;
 
     > .tick {
@@ -65,6 +64,10 @@
     &:first-child {
       border-top: 0;
     }
+
+    &[disabled] .list-group-item-heading {
+      color: $palette-theme-light-soft-foreground;
+    }
   }
 
   .list-group-item-heading {
@@ -74,7 +77,7 @@
   .list-group-item-text {
     line-height: 1;
     font-size: 11px;
-    color: #aaa;
+    color: $palette-theme-light-soft-foreground;
   }
 }
 
@@ -101,13 +104,15 @@
   justify-content: center;
   align-items: center;
 
-  .btn-primary[disabled] {
-    background-color: darken($gray-lighter, 10%);
+  .button[disabled] {
+    background-color: $palette-theme-light-disabled-background;
+    color: $palette-theme-light-disabled-foreground;
   }
 }
 
 .modal-dialog {
   margin: 0;
   position: initial;
+  max-width: 50%;
 }
 
diff --git a/lib/gui/scss/components/_tick.scss b/lib/gui/scss/components/_tick.scss
index feaf0bd8..0b3d6f82 100644
--- a/lib/gui/scss/components/_tick.scss
+++ b/lib/gui/scss/components/_tick.scss
@@ -21,12 +21,11 @@
   border-radius: 50%;
   padding: 3px;
   font-size: 18px;
-  color: #fff;
   border: 2px solid;
 
   &[disabled] {
-    color: lighten($color-disabled, 40);
-    border-color: lighten($color-disabled, 40);
+    color: $palette-theme-dark-soft-foreground;
+    border-color: $palette-theme-dark-soft-foreground;
     background-color: transparent;
   }
 }
@@ -34,13 +33,15 @@
 .tick--success {
   @extend .glyphicon-ok;
 
-  background-color: rgb(95, 184, 53);
-  border-color: rgb(95, 184, 53);
+  color: $palette-theme-success-foreground;
+  background-color: $palette-theme-success-background;
+  border-color: $palette-theme-success-background;
 }
 
 .tick--error {
   @extend .glyphicon-remove;
 
-  background-color: #d9534f;
-  border-color: #d9534f;
+  color: $palette-theme-danger-foreground;
+  background-color: $palette-theme-danger-background;
+  border-color: $palette-theme-danger-background;
 }
diff --git a/lib/gui/scss/main.scss b/lib/gui/scss/main.scss
index 570c7e15..45760c9b 100644
--- a/lib/gui/scss/main.scss
+++ b/lib/gui/scss/main.scss
@@ -15,26 +15,15 @@
  */
 
 $icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
-$body-bg: rgb(83, 87, 96);
-$text-color: #fff;
-$brand-primary: rgb(87, 147, 219);
-$gray-light: #ddd;
 $font-size-base: 13px;
 $cursor-disabled: initial;
-$color-disabled: rgb(120, 124, 127);
-$btn-disabled: rgb(49, 51, 57);
-$btn-min-width: 170px;
-$link-color: $gray-light;
 $link-hover-decoration: none;
-$btn-default-bg: #ececec;
-$btn-default-color: #b3b3b3;
-$brand-warning: rgb(233, 152, 82);
-$alert-warning-bg: $brand-warning;
-$alert-warning-text: #fff;
 $alert-padding: 13px;
+$btn-min-width: 170px;
+$link-color: #ddd;
 
 @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
-
+@import "./modules/theme";
 @import "./modules/bootstrap";
 @import "./modules/space";
 @import "./components/label";
@@ -46,7 +35,6 @@ $alert-padding: 13px;
 @import "./components/alert-ribbon";
 @import "../components/update-notifier/styles/update-notifier";
 @import "../components/progress-button/styles/progress-button";
-@import "../components/svg-icon/styles/svg-icon";
 @import "../components/drive-selector/styles/drive-selector";
 @import "../components/tooltip-modal/styles/tooltip-modal";
 @import "../pages/main/styles/main";
@@ -58,8 +46,6 @@ body {
 }
 
 .section-footer {
-  @extend .text-center;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -68,10 +54,11 @@ body {
   bottom: 20px;
   left: 0;
   right: 0;
-  color: $color-disabled;
+  color: $palette-theme-dark-disabled-foreground;
   margin: 0 60px;
   padding-top: 15px;
-  border-top: 2px solid darken($color-disabled, 8%);
+  border-top: 2px solid $palette-theme-dark-soft-background;
+  text-align: center;
 
   // Override default column padding
   // set by flexboxgrid.
@@ -88,7 +75,7 @@ body {
     padding-bottom: 2px;
 
     &:hover {
-      color: lighten($color-disabled, 5%);
+      color: lighten($palette-theme-dark-disabled-foreground, 5%);
     }
   }
 
@@ -105,11 +92,11 @@ body {
 }
 
 .section-header {
-  @extend .text-right;
+  text-align: right;
   padding: 5px 8px;
   font-size: 15px;
 
-  > .btn {
+  > .button {
     padding-left: 3px;
     padding-right: 3px;
   }
diff --git a/lib/gui/scss/modules/_bootstrap.scss b/lib/gui/scss/modules/_bootstrap.scss
index e38e2034..cb4e5594 100644
--- a/lib/gui/scss/modules/_bootstrap.scss
+++ b/lib/gui/scss/modules/_bootstrap.scss
@@ -19,7 +19,11 @@
 
 // Prevent white flash when running application
 html {
-  background-color: $body-bg;
+  background-color: $palette-theme-dark-background;
+}
+
+body {
+  background-color: $palette-theme-dark-background;
 }
 
 // Fix slighly checkbox vertical alignment issue
@@ -34,8 +38,7 @@ html {
 }
 
 .alert {
-  @extend .text-center;
-
+  text-align: center;
   border: 0;
   border-radius: 2px;
 }
diff --git a/lib/gui/scss/modules/_theme.scss b/lib/gui/scss/modules/_theme.scss
new file mode 100644
index 00000000..f2e3e955
--- /dev/null
+++ b/lib/gui/scss/modules/_theme.scss
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$palette-theme-dark-foreground: #fff;
+$palette-theme-dark-background: #535760;
+$palette-theme-light-foreground: #666;
+$palette-theme-light-background: #fff;
+$palette-theme-dark-soft-foreground: #ddd;
+$palette-theme-dark-soft-background: #64686a;
+$palette-theme-light-soft-foreground: #b3b3b3;
+$palette-theme-dark-disabled-background: #313339;
+$palette-theme-dark-disabled-foreground: #787c7f;
+$palette-theme-light-disabled-background: #d5d5d5;
+$palette-theme-light-disabled-foreground: #787c7f;
+$palette-theme-default-background: #ececec;
+$palette-theme-default-foreground: #b3b3b3;
+$palette-theme-primary-background: #5793db;
+$palette-theme-primary-foreground: #fff;
+$palette-theme-warning-background: #e99852;
+$palette-theme-warning-foreground: #fff;
+$palette-theme-danger-background: #d9534f;
+$palette-theme-danger-foreground: #fff;
+$palette-theme-success-background: #5fb835;
+$palette-theme-success-foreground: #fff;