diff --git a/client/galaxy/scripts/mvc/grid/grid-template.js b/client/galaxy/scripts/mvc/grid/grid-template.js
index 141c6df7a95..6cc4346b340 100644
--- a/client/galaxy/scripts/mvc/grid/grid-template.js
+++ b/client/galaxy/scripts/mvc/grid/grid-template.js
@@ -414,7 +414,7 @@ export default {
         //
         // advanced search
         //
-        tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px; border: 1px solid #ccc;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
+        tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
 
         // add advanced filters
         for (let column of options.columns) {
diff --git a/client/galaxy/scripts/qunit/tests/form_tests.js b/client/galaxy/scripts/qunit/tests/form_tests.js
index 84197e3622b..4c2e7a71dae 100644
--- a/client/galaxy/scripts/qunit/tests/form_tests.js
+++ b/client/galaxy/scripts/qunit/tests/form_tests.js
@@ -141,20 +141,16 @@ QUnit.test("input", function(assert) {
     assert.ok(input.$field.css("display") == "none", "Input field hidden");
     input.model.set("disabled", false);
     assert.ok(input.$field.css("display") == "block", "Input field shown, again");
+    var colorElement = input.$field.children().first();
+    var oldColor = colorElement.css("color");
     input.model.set("color", "red");
     assert.ok(
-        input.$field
-            .children()
-            .first()
-            .css("color") == "rgb(255, 0, 0)",
+        colorElement.css("color") == "rgb(255, 0, 0)",
         "Shows correct new color"
     );
     input.model.set("color", null);
     assert.ok(
-        input.$field
-            .children()
-            .first()
-            .css("color") == "rgb(73, 80, 87)",
+        colorElement.css("color") == oldColor,
         "Shows correct old color"
     );
     input.model.set("collapsible_value", "_collapsible_value");
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index e49eaac9507..2f54fd7123e 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -122,25 +122,19 @@ body {
 }
 
 #messagebox {
-    // position: absolute;
-    // top: $navbar-height + $layout_top_padding + 1;
-    // left: 0;
     width: 100%;
     height: $panel-message-height !important;
     overflow: hidden;
-    border-bottom: solid #999 1px;
+    border-bottom: solid $border-default-color 1px;
     font-size: 90%;
     display: none;
 }
 
 #inactivebox {
-    // position: absolute;
-    // top: $navbar-height + $layout_top_padding + 1;
-    // left: 0;
     width: 100%;
     height: $panel-message-height !important;
     overflow: hidden;
-    border-bottom: solid #999 1px;
+    border-bottom: solid $border-default-color 1px;
     font-size: 90%;
     display: none;
 }
@@ -178,6 +172,7 @@ body {
             height: 100%;
             padding: $margin-h $margin-v;
             overflow: auto;
+            background: $brand-white;
         }
         .center-frame {
             position: absolute;
@@ -276,10 +271,10 @@ body {
     width: 100%;
     z-index: 1000; // Above #dd-helper
     border-top: $layout-border;
-    background: $navbar-default-bg;
-    color: #555;
+    background: $panel-footer-bg-color;
+    color: $panel-header-text-color;
     a {
-        color: #555;
+        color: $panel-header-text-color;
     }
     .drag {
         position: absolute;
@@ -328,7 +323,7 @@ body {
     background: none;
     border-right: $layout-border;
     border-top: $layout-border;
-    background: $navbar-default-bg;
+    background: $panel-footer-bg-color;
     &.right {
         left: inherit;
         right: 0;
@@ -411,7 +406,7 @@ div.unified-panel-body-background {
 #masthead {
     padding: 0;
     margin-bottom: 0px;
-    background-color: $base-color-1;
+    background-color: $brand-dark;
     height: $masthead-height;
     .navbar-nav {
         min-height: 100%;
@@ -422,19 +417,19 @@ div.unified-panel-body-background {
             display: flex;
             align-items: center;
             &.active {
-                background: black;
+                background: darken($brand-dark, 10%);
             }
             .nav-link {
                 cursor: pointer;
                 text-decoration: none;
                 &:hover {
-                    color: gold;
+                    color: $dropdown-link-active-color;
                 }
                 &.nav-icon {
                     font-size: 1.7em;
                 }
                 &.toggle {
-                    color: gold;
+                    color: $dropdown-link-active-color;
                 }
             }
             .nav-note {
@@ -443,7 +438,7 @@ div.unified-panel-body-background {
                 position: relative;
                 right: 5px;
                 top: 10px;
-                color: gold;
+                color: $dropdown-link-active-color;
                 width: 0px;
             }
         }
@@ -456,7 +451,7 @@ div.unified-panel-body-background {
         font-weight: bold;
         font-size: 20px;
         // line-height: 1;
-        color: white;
+        color: $white;
         // Override margin and padding due to shorter navbar height
         padding: 5px 20px 12px;
         margin-left: -15px;
@@ -469,7 +464,7 @@ div.unified-panel-body-background {
             border: none;
         }
         .navbar-brand-title {
-            color: white;
+            color: $white;
         }
     }
 }
@@ -555,11 +550,11 @@ div.metadataFormBody div.metadataFormTitle {
 
 div.metadataFormDisabled div.metadataFormTitle {
     background: #eee;
-    border-color: #999;
+    border-color: $border-default-color;
 }
 
 div.metadataFormDisabled {
-    border-color: #999;
+    border-color: $border-default-color;
 }
 
 div.metadataHelpBody {
@@ -595,24 +590,6 @@ div.toolHelpBody {
     width: 100%;
 }
 
-// In workflow
-div.toolTitleDisabled {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-left: 16px;
-    margin-right: 10px;
-    display: list-item;
-    list-style: square outside;
-    font-style: italic;
-    color: gray;
-}
-
-div.toolTitleNoSectionDisabled {
-    padding-bottom: 0px;
-    font-style: italic;
-    color: gray;
-}
-
 div.toolFormRow {
     position: relative;
 }
@@ -647,12 +624,13 @@ div.toolFormRow {
 }
 
 .toolForm.toolFormInCanvas.tool-node-error {
-    border-color: #aa6666;
+    border-color: $state-danger-border;
     .toolFormTitle {
-        background: #ffcccc;
-        border-color: #aa6666;
+        background: $state-danger-bg;
+        border-color: $state-danger-border;
     }
 }
+
 div.form,
 div.toolForm {
     border: solid $form-border 1px;
@@ -712,22 +690,6 @@ div.form-row-input label {
     display: inline;
 }
 
-div.form-row-error-message {
-    width: 300px;
-    float: left;
-    color: red;
-    font-weight: bold;
-    padding: 3px 0;
-}
-
-.form-row .help,
-.toolParamHelp {
-    color: #666;
-    a {
-        color: #666;
-    }
-}
-
 .form-row.form-actions {
     background: whiteSmoke;
     border-top: solid #ddd 1px;
@@ -737,7 +699,7 @@ div.form-row-error-message {
 }
 
 .workflow-right {
-    background: white;
+    background: $white;
 }
 
 .workflow-right .right-content {
@@ -750,7 +712,6 @@ div.form-row-error-message {
 
 // Selects
 select {
-    //border: 1px solid $input-border;
     padding: 2px;
     font-size: $font-size-base;
     line-height: $line-height-base;
@@ -779,8 +740,6 @@ input[type="text"],
 input[type="password"] {
     font-size: $font-size-base;
     line-height: $line-height-base;
-    border: 1px solid $input-border;
-    padding: 3px;
 }
 
 // Always style buttons and submits as bootstrap buttons
@@ -788,7 +747,6 @@ input[type="submit"],
 button {
     @extend .btn;
     @extend .btn-secondary;
-    // The above overrides the button variants (primary, danger, etc) because it occurs later, redefine btn-primary (bit of a hack)
     &.btn-primary {
         @extend .btn-primary;
     }
@@ -799,13 +757,14 @@ button {
     padding: 4px;
     font-size: $font-size-base;
     line-height: $line-height-base;
-    color: $gray-700;
-    border: 1px solid $input-border;
+    color: $text-color;
+    border: 1px solid $border-default-color;
     padding-left: 14px !important;
     padding-right: 14px;
-    margin-bottom: 0; // remove the default margin on all inputs
+    margin-bottom: 0;
     @include border-radius(14px);
     max-width: auto;
+    background: $brand-white;
 }
 .search-query:focus {
     border-color: darken(rgba(82, 168, 236, 0.8), 15%);
@@ -830,7 +789,7 @@ button {
     #search-clear-btn {
         position: absolute;
         right: 6px;
-        top: 5px;
+        top: 6px;
         display: block;
         font-size: 1.4em !important;
         text-decoration: none;
@@ -884,13 +843,6 @@ button {
     background-image: url(../../images/info_large.png);
 }
 
-.screencastBox {
-    padding-left: 10px;
-    border-color: #aaaa66;
-    background-color: #ffffcc;
-    background-image: none;
-}
-
 .errormessage,
 .warningmessage,
 .donemessage,
@@ -1014,7 +966,6 @@ table.colored th {
 
 table.colored tr.header {
     background: $table-heading-bg;
-    color: contrast(spin($base-color-3, 180));
     background-repeat: repeat-x;
     background-position: top;
     border-bottom: solid $table-border-color 1px;
@@ -1132,18 +1083,14 @@ div.debug {
     margin-left: 2px;
 }
 .search-box-input {
-    border: 0;
+    @extend .ui-input;
     float: left;
-    outline: medium none;
-    font-style: italic;
-    font-size: inherit;
 }
 .search-box {
     vertical-align: bottom;
     display: inline-block;
     padding: 0;
     white-space: nowrap;
-    // border: 1px solid #aaa;
 }
 .gray-background {
     background-color: #dddddd;
@@ -1274,38 +1221,6 @@ ul.manage-table-actions li {
     background: $state-default-bg;
 }
 
-.state-fg-new {
-    color: #ffb030;
-}
-
-.state-fg-upload {
-    color: #d090d0;
-}
-
-.state-fg-waiting {
-    color: #e8c060;
-}
-
-.state-fg-queued {
-    color: #888888;
-}
-
-.state-fg-running {
-    color: #aaaa66;
-}
-
-.state-fg-ok {
-    color: #66aa66;
-}
-
-.state-fg-error {
-    color: #aa6666;
-}
-
-.state-fg-deleted {
-    color: #3399ff;
-}
-
 // Button styles
 
 button {
@@ -1340,19 +1255,11 @@ a.action-button {
     @extend .btn-secondary;
 }
 
-//.action-button > * {
-//    vertical-align: middle;
-//}
-
 .action-button:hover {
     @extend .btn:hover;
-    //color: black;
-    //background: #dddddd;
 }
 .action-button:active {
     @extend .btn.active;
-    //color: white;
-    //background: #aaaaaa;
 }
 
 // A menu button is a button that has an attached popup menu
@@ -1373,14 +1280,6 @@ a.action-button {
     position: relative;
     @extend .unselectable;
 
-    // border: solid transparent 1px;
-    // -moz-border-radius: 0.25em;
-    // -webkit-border-radius: 0.25em;
-    // border-radius: 0.25em;
-
-    // padding: 1px 0.25em;
-    // margin: -1px -0.25em;
-
     a {
         text-decoration: none;
     }
@@ -1434,24 +1333,6 @@ a.action-button {
 }
 
 // Popup menu styles
-
-/*
-.overlay-border {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    padding: 1em;
-    margin: -1em;
-    background-color: rgba(0,0,0,0.5);
-    -moz-border-radius: 1em;
-    -webkit-border-radius: 1em;
-    z-index: -1;
-}
-*/
-
-// Galaxy popup menus
 div.popmenu-wrapper {
     position: absolute;
     top: 100%;
@@ -1476,15 +1357,13 @@ ul.dropdown-menu {
         font-size: 11px;
         font-weight: bold;
         line-height: $line-height-base;
-        color: $gray-500;
+        color: $text-color;
         text-transform: uppercase;
     }
-
     li.head > a:hover {
         background: inherit;
         border-color: transparent;
     }
-
     li > a {
         @extend .dropdown-item;
     }
@@ -1582,7 +1461,7 @@ div.permissionContainer {
 
 .editable-text:hover {
     cursor: text;
-    border: dotted #999999 1px;
+    border: dotted $border-default-color 1px;
 }
 
 .icon-button.multiinput {
@@ -1753,7 +1632,7 @@ div.toolTitleNoSection {
 
 .toolMenuAndView .toolForm {
     float: left;
-    background-color: white;
+    background-color: $white;
     margin: 10px;
 }
 
@@ -2010,7 +1889,7 @@ div.toolTitleNoSection {
     @extend .fa;
     @extend .fa-circle;
     @extend .mt-1;
-    color: white;
+    color: $white;
     position: absolute;
     z-index: 1500;
     > icon {
@@ -2045,7 +1924,7 @@ div.toolTitleNoSection {
 }
 .mark-terminal {
     cursor: pointer;
-    color: $gray-500;
+    color: darken($border-default-color, 20%);
     &.mark-terminal-active {
         color: $brand-success;
     }
@@ -2075,7 +1954,7 @@ div.toolTitleNoSection {
     border-top: solid gray 1px;
     border-left: solid grey 1px;
     padding: 7px 0 0 7px;
-    background: $workflow-overview-border no-repeat url("../../images/resizable.png");
+    background: $workflow-overview-bg no-repeat url("../../images/resizable.png");
     z-index: 20000;
     overflow: hidden;
     max-width: 300px;
diff --git a/client/galaxy/style/scss/charts.scss b/client/galaxy/style/scss/charts.scss
index aba457b09ca..93b42b8c966 100644
--- a/client/galaxy/style/scss/charts.scss
+++ b/client/galaxy/style/scss/charts.scss
@@ -8,7 +8,7 @@
         top: 4px;
         .btn {
             background: white;
-            color: #666;
+            color: $panel-header-text-color;
             border: none;
             .icon {
                 font-size: 1.5em;
diff --git a/client/galaxy/style/scss/frame.scss b/client/galaxy/style/scss/frame.scss
index 5650dbfefa1..382e8c9492a 100644
--- a/client/galaxy/style/scss/frame.scss
+++ b/client/galaxy/style/scss/frame.scss
@@ -1,5 +1,5 @@
 $frame-zindex: 1000;
-$frame-default-border: $gray-300;
+$frame-default-border: $border-default-color;
 
 .galaxy-frame {
     .corner {
@@ -8,7 +8,7 @@ $frame-default-border: $gray-300;
     }
 
     .toggle {
-        color: gold;
+        color: $dropdown-link-active-color;
     }
 
     .frame-background {
@@ -18,8 +18,8 @@ $frame-default-border: $gray-300;
         left: 0px;
         height: 100%;
         width: 100%;
-        opacity: 0.6;
-        background: $black;
+        opacity: 0.5;
+        background: $brand-dark;
         overflow: auto;
     }
 
@@ -30,7 +30,7 @@ $frame-default-border: $gray-300;
         top: 0px;
         left: 0px;
         opacity: 0.5;
-        background: darken($base-color, 25%);
+        background: $brand-dark;
         border: 1px solid $frame-default-border;
     }
 
@@ -41,7 +41,7 @@ $frame-default-border: $gray-300;
         z-index: $frame-zindex + 5;
         position: absolute;
         cursor: pointer;
-        color: gold;
+        color: $dropdown-link-active-color;
         right: 10px;
     }
 
@@ -98,7 +98,7 @@ $frame-default-border: $gray-300;
             margin: 2px;
             cursor: pointer;
             border: 1px solid $black;
-            background: $base-color-1;
+            background: $brand-dark;
             color: $white;
             .f-icon-left {
                 cursor: pointer;
@@ -146,7 +146,7 @@ $frame-default-border: $gray-300;
             background: $white;
             width: 16px;
             height: 16px;
-            color: $base-color-1;
+            color: $brand-dark;
             right: 0px;
             bottom: 0px;
             text-align: center;
diff --git a/client/galaxy/style/scss/theme/blue.scss b/client/galaxy/style/scss/theme/blue.scss
index de2a0a0192a..ab851c8da51 100644
--- a/client/galaxy/style/scss/theme/blue.scss
+++ b/client/galaxy/style/scss/theme/blue.scss
@@ -1,34 +1,27 @@
-// Everything is derived from $base-color
-// Caveat: currently only works for light colored backgrounds, scss provides functions (contrast) that could be used to improve this
-
-// Base color -- Based on the Galaxy masthead color
-$base-color-1: #2c3143;
-$base-color-2: lighten($base-color-1, 25%);
-$base-color-3: lighten($base-color-1, 50%);
-$base-color: $base-color-2;
-
-// Default border bolor, this is between gray-light and gray-lighter -- classic Galaxy border color
-$border-default-color: lighten(black, 75%);
-
-// Grays from Bootstrap 4 _variables.scss
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
 // Brand colors
 $brand-primary: #25537b;
+$brand-secondary: #dee2e6;
 $brand-success: #66cc66;
 $brand-info: #2077b3;
 $brand-warning: #fe7f02;
 $brand-danger: #e31a1e;
+$brand-light: #f8f9fa;
+$brand-dark: #2c3143;
+$brand-white: #fff;
+$brand-toggle: gold;
+
+// Grays from Bootstrap 4 _variables.scss
+$white: $brand-white;
+$gray-100: $brand-light;
+$gray-200: darken($gray-100, 5%);  // welcome background
+$gray-300: darken($gray-100, 10%);
+$gray-400: darken($gray-100, 20%); // input borders
+$gray-500: darken($gray-100, 40%);
+$gray-600: darken($gray-100, 60%); // text-muted
+$gray-700: darken($gray-100, 70%);
+$gray-800: darken($gray-100, 80%);
+$gray-900: darken($gray-100, 90%); // text-regular
+$black: $brand-dark;
 
 // These variables don't actually determine the colors in Bootstrap 4, instead
 // they use a map called $theme-colors, so here we override that
@@ -36,13 +29,13 @@ $theme-colors: ();
 $theme-colors: map-merge(
     (
         "primary": $brand-primary,
-        "secondary": $gray-300,
+        "secondary": $brand-secondary,
         "success": $brand-success,
-        "info": $brand-info,
-        "warning": $brand-warning,
         "danger": $brand-danger,
-        "light": $gray-100,
-        "dark": $gray-800
+        "warning": $brand-warning,
+        "info": $brand-info,
+        "light": $brand-light,
+        "dark": $brand-dark
     ),
     $theme-colors
 );
@@ -53,11 +46,10 @@ $theme-color-interval: 5% !default;
 // Alerts and states
 $alert-bg-level: -12 !default;
 $alert-border-level: -6 !default;
-$alert-color-level: 8 !default;
+$alert-color-level: 16 !default;
 
 // These are not Bootstrap styles but are used extensively in Galaxy. This
 // duplicated the way that Bootstrap 4 alerts are derived.
-
 $state-warning-text: theme-color-level("warning", $alert-color-level);
 $state-warning-bg: theme-color-level("warning", $alert-bg-level);
 $state-warning-border: theme-color-level("warning", $alert-border-level);
@@ -90,12 +82,11 @@ $h5-font-size: $font-size-base; // default 1.25
 $h6-font-size: $font-size-base * 0.85; // default 1
 
 // Increase contrast of dropdown items
-$dropdown-link-hover-color: white;
+$dropdown-link-hover-color: $brand-light;
 $dropdown-link-hover-bg: $brand-primary;
-$dropdown-link-active-color: gold;
+$dropdown-link-active-color: $brand-toggle;
 
-// Additional variables that are not used by bootstrap but are used
-// in Galaxy stylesheets
+// Galaxy Variables (not used by bootstrap)
 $body-bg: $white;
 $text-color: $gray-900;
 
@@ -103,15 +94,18 @@ $text-color: $gray-900;
 $masthead-height: 3rem;
 
 // Side panels
-$panel-bg-color: $gray-100; // #dfe5f9;
-$panel-text-color: $gray-900;
-$panel-header-bg-color: $gray-100;
-$panel-header-text-color: #555;
-$panel-message-height: 2.5rem; //1.875rem;
+$panel-bg-color: $gray-100;
+$panel-text-color: $text-color;
+$panel-header-text-color: $text-color;
+$panel-footer-bg-color: $panel-bg-color;
+$panel-message-height: 2.5rem;
 $panel-width: 18rem;
 $panel_header_height: 2.5rem;
 $panel_footer_height: 25px;
 
+// Portlets
+$portlet-bg-color: $gray-200;
+
 // Layout
 $layout_top_padding: 0px;
 $layout-border-color: $gray-900;
@@ -120,41 +114,34 @@ $layout-border: none;
 // Borders
 $border-radius-base: 0.1875rem;
 $border-radius-large: 0.3125rem;
+$border-default-color: $gray-400;
 
 // Buttons
-$btn-default-color: #333;
-$btn-default-bg: darken($white, 5%);
+$btn-default-color: $text-color;
+$btn-default-bg: $gray-200;
 $btn-default-border: $border-default-color;
 
 // Forms
-$form-heading-bg: #ebd9b2;
+$form-heading-bg: $panel-bg-color;
 $form-border: darken($form-heading-bg, 20%);
 
 // Table
 $table-heading-bg: $panel-bg-color;
-$table-bg-accent: #f9f9f9; // for striping
+$table-bg-accent: darken($panel-bg-color, 5%);
 $table-border-color: darken($table-heading-bg, 20%);
 
 // Additional state colors
 $state-default-bg: $gray-200;
 $state-default-border: $border-default-color;
-$state-paused-bg: #d9edf7;
-$state-running-border: #aaaa66;
-$state-running-bg: #ffffcc;
-
-// Navbar
-$navbar-height: 36px; // 2.062500rem;
-$navbar-default-bg: $gray-100; // JT #f8f8f8;
-$navbar-default-border: darken($navbar-default-bg, 20%);
+$state-paused-bg: lighten($brand-info, 50%);
+$state-running-bg: lighten($brand-warning, 40%);
+$state-running-border: $border-default-color;
 
 // Workflow editor
-$workflow-editor-bg: white;
-$workflow-overview-border: $gray-200;
+$workflow-editor-bg: $brand-white;
+$workflow-overview-bg: $gray-200;
 
 // Margins
-$spacer: 1rem; // Not sure why this is not coming from Bootstrap
+$spacer: 1rem;
 $margin-v: $spacer * 1.5;
 $margin-h: $spacer;
-
-// Inputs
-$input-border: #aaa;
diff --git a/client/galaxy/style/scss/tour.scss b/client/galaxy/style/scss/tour.scss
index 4fce701f91f..9fdbcee7959 100644
--- a/client/galaxy/style/scss/tour.scss
+++ b/client/galaxy/style/scss/tour.scss
@@ -1,4 +1,4 @@
 .tour-tour > .popover-title {
-    background-color: $base-color-1;
+    background-color: $brand-dark;
     color: $white;
 }
diff --git a/client/galaxy/style/scss/ui.scss b/client/galaxy/style/scss/ui.scss
index 1c9e0d8ed3b..a7ee926a32b 100644
--- a/client/galaxy/style/scss/ui.scss
+++ b/client/galaxy/style/scss/ui.scss
@@ -105,7 +105,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
             height: 86px;
             font-size: 4em;
             padding: 20px 26px;
-            color: lighten(#25537b, 10%);
+            color: lighten($brand-primary, 10%);
         }
         .ui-thumbnails-text {
             word-wrap: break-word;
@@ -199,7 +199,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
     .portlet-header:first-child {
         @extend .card-header;
         @extend .rounded;
-        background: $gray-200;
+        background: $portlet-bg-color;
         .portlet-title {
             .portlet-title-text.collapsible {
                 cursor: pointer;
@@ -239,10 +239,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
     @extend .ui-portlet;
     @extend .mb-2;
     border: none;
-    border-left: solid 3px $gray-200;
+    border-left: solid 3px $portlet-bg-color;
     border-radius: $border-radius-large;
     .portlet-header:first-child {
-        background: $gray-200;
+        background: $portlet-bg-color;
         @extend .rounded-0;
         border-top-right-radius: $border-radius-large !important;
         padding: 5px;
@@ -277,7 +277,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
     &[readonly],
     fieldset[disabled] & {
         cursor: not-allowed;
-        background-color: $gray-200;
+        background-color: $brand-light;
     }
 }
 
@@ -478,7 +478,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
 // select2 adjustments
 .select2-drop-active,
 .select2-drop-above.select2-drop-active {
-    border: 1px solid $input-border;
+    border: 1px solid $border-default-color;
     .select2-search {
         @extend .pt-1;
     }
diff --git a/client/galaxy/style/scss/ui/search-input.scss b/client/galaxy/style/scss/ui/search-input.scss
index c3ea2051031..71b0d9290ca 100644
--- a/client/galaxy/style/scss/ui/search-input.scss
+++ b/client/galaxy/style/scss/ui/search-input.scss
@@ -11,7 +11,7 @@
         display: inline-block;
 
         float: right;
-        margin-top: -24px;
+        margin-top: -25px;
         margin-right: 4px;
 
         font-size: 1.4em;
diff --git a/client/galaxy/style/scss/upload.scss b/client/galaxy/style/scss/upload.scss
index f395d2723ee..180ff64ea8f 100644
--- a/client/galaxy/style/scss/upload.scss
+++ b/client/galaxy/style/scss/upload.scss
@@ -9,7 +9,7 @@
         height: 21px;
         margin: 0px;
         font-size: 0.75rem;
-        background-color: #f5f5f5;
+        background-color: $panel-bg-color;
     }
     .progress-bar-danger {
         background: $state-danger-bg;
@@ -134,7 +134,7 @@
                         height: 80px;
                         resize: none;
                         background: inherit;
-                        color: $black;
+                        color: $text-color;
                         white-space: pre;
                         overflow: auto;
                     }
diff --git a/static/welcome.html.sample b/static/welcome.html.sample
index 4842eefe1b2..c3ef6200153 100644
--- a/static/welcome.html.sample
+++ b/static/welcome.html.sample
@@ -4,8 +4,8 @@
         <meta charset="utf-8">
         <link rel="stylesheet" href="style/base.css" type="text/css" />
     </head>
-    <body style="margin: 0">
-        <div class="jumbotron">
+    <body class="m-0">
+        <div class="jumbotron rounded-0">
             <div class="container">
                 <h2>Hello, <strong>Galaxy</strong> is running!</h2>
                 To customize this page edit <code>static/welcome.html</code>
diff --git a/templates/webapps/galaxy/workflow/editor.mako b/templates/webapps/galaxy/workflow/editor.mako
index f922cb58b76..223c952406e 100644
--- a/templates/webapps/galaxy/workflow/editor.mako
+++ b/templates/webapps/galaxy/workflow/editor.mako
@@ -84,9 +84,9 @@
             </div>
         %else:
             %if section:
-                <div class="toolTitleDisabled">
+                <div class="toolTitle text-muted">
             %else:
-                <div class="toolTitleNoSectionDisabled">
+                <div class="toolTitleNoSection text-muted">
             %endif
                 %if "[[" in tool.description and "]]" in tool.description:
                     ${tool.description.replace( '[[', '' % tool.id ).replace( "]]", "" )}