tidy-up of less style files
diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less
index 591e046..15dd9d3 100644
--- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less
+++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less
@@ -22,9 +22,6 @@
 @hide-info-button-when-not-hovered: false;
 @hide-unset-undefault-values: true;
 
-@label-gray: darken(@gray-light, 10%);
-@gray-lightest: #f8f8f9;
-
 spec-editor {
   display: block;
   margin-top: 15px;
diff --git a/ui-modules/blueprint-composer/app/index.less b/ui-modules/blueprint-composer/app/index.less
index 1562b40..0ab3f4d 100644
--- a/ui-modules/blueprint-composer/app/index.less
+++ b/ui-modules/blueprint-composer/app/index.less
@@ -36,9 +36,6 @@
 @import "components/catalog-saver/catalog-saver.less";
 @import "components/dsl-editor/dsl-editor";
 
-@gray-lighter: #E1E5E7;
-@gray-light: #818899;
-
 .make-icon(@size) {
   width: auto;
   height: auto;
diff --git a/ui-modules/utils/br-core/style/buttons.less b/ui-modules/utils/br-core/style/buttons.less
index e87dbc3..baefe44 100644
--- a/ui-modules/utils/br-core/style/buttons.less
+++ b/ui-modules/utils/br-core/style/buttons.less
@@ -23,6 +23,9 @@
 .btn-accent {
     .button-variant(@btn-accent-color; @btn-accent-bg; @btn-accent-border);
 }
+.btn-light {
+  .button-variant(@gray-dark; @gray-lightest; @gray-lightest);
+}
 
 .btn-outline {
     &.btn-primary:not(:hover) {
@@ -49,4 +52,9 @@
         background-color: transparent;
         color: @brand-danger;
     }
+    
+    &.btn-light:not(:hover) {
+        background-color: transparent;
+        color: @gray-lightest;
+    }
 }
diff --git a/ui-modules/utils/br-core/style/variables.less b/ui-modules/utils/br-core/style/variables.less
index efe673a..439ee28 100644
--- a/ui-modules/utils/br-core/style/variables.less
+++ b/ui-modules/utils/br-core/style/variables.less
@@ -21,18 +21,18 @@
 @brand-accent: #bf3727;
 
 
-// Create path variables for fonts and images
-@br-core-path-font: '../fonts';
-@br-core-path-img: '../img';
-// Override the font-awesome path to use our custom one
-@fa-font-path: @br-core-path-font;
+// bootstrap colours at
+// https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
 
+@gray-light: #818899;   // override bootstrap default of #777
+@gray-lighter: #E1E5E7; // override bootstrap default of #eee
+@gray-lightest: #f8f8f9;
+@label-gray: darken(@gray-light, 10%);  // between @gray and @gray-light
 
-@body-bg: hsl(223,30%,97%);
+@body-bg: hsl(223,30%,97%);  // override bootstrap default, #333, same as @gray-dark, used for the button bar, body default bg colour from bootstrap scaffolding
+
 @card-border-color: mix(black, @body-bg, 7%);
 
-@font-family-sans-serif: "myriad-pro-1", Helvetica, Arial, sans-serif;
-
 /* Colors in pattern lab */
 .brand-primary {
   background-color: @brand-primary;
@@ -54,3 +54,13 @@
 @state-accent-text:             @accent-500;
 @state-accent-bg:               @accent-30;
 @state-accent-border:           darken(spin(@state-accent-bg, -10), 5%);
+
+
+// Create path variables for fonts and images
+
+@br-core-path-font: '../fonts';
+@br-core-path-img: '../img';
+// Override the font-awesome path to use our custom one
+@fa-font-path: @br-core-path-font;
+
+@font-family-sans-serif: "myriad-pro-1", Helvetica, Arial, sans-serif;