diff --git a/src/css/_private-variables.scss b/src/css/_private-variables.scss
index 2356d6461d..9b4fb3a7c6 100644
--- a/src/css/_private-variables.scss
+++ b/src/css/_private-variables.scss
@@ -1,16 +1,17 @@
-$primary-text: #fff !default;
-// currently just used for visited links in errors and such.
-$secondary-text: #F4A460 !default;
+// Text, icons, hover states
+$primary-foreground-color: #fff;
 
-$primary-bg: #000 !default;
-$secondary-bg: lighten($primary-bg, 35%) !default;
+// Control backgrounds (control bar, big play, menus)
+$primary-background-color: #2B333F !default;
+$primary-background-transparency: 0.7 !default;
 
-$text-font-family: Arial, Helvetica, sans-serif !default;
-$base-font-size: 10px !default;
+// Hover states, slider backgrounds
+$secondary-background-color: lighten($primary-background-color, 33%) !default;
+$secondary-background-transparency: 0.5 !default;
 
-$control-bar--bg: #2B333F !default;
-$control-bar--transparency: 0.5 !default;
+$text-font-family: Arial, Helvetica, sans-serif !default;
 
+// Using the '--' naming for component-specific styles
 $big-play-button--width: 3em !default;
 $big-play-button--height: 1.5em !default;
 $big-play-button--transparency: 0.8 !default;
diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss
index 6e2270e88c..e8593cf53b 100644
--- a/src/css/components/_big-play.scss
+++ b/src/css/components/_big-play.scss
@@ -11,10 +11,10 @@
   padding: 0;
   cursor: pointer;
   opacity: 1;
-  border: 2px solid $primary-text;
+  border: 0.06666em solid $primary-foreground-color;
 
   /* Need a slightly gray bg so it can be seen on black backgrounds */
-  @include background-color-with-alpha($primary-bg, $big-play-button--transparency);
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
   @include border-radius(0.3em);
   @include transition(all 0.4s);
 
@@ -38,9 +38,9 @@
 .video-js:hover .vjs-big-play-button,
 .video-js .vjs-big-play-button:focus {
   outline: 0;
-  border-color: $primary-text;
+  border-color: $primary-foreground-color;
 
-  @include background-color-with-alpha($secondary-bg, 0.75);
+  @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
   @include transition(all 0s);
 }
 
diff --git a/src/css/components/_button.scss b/src/css/components/_button.scss
index 1a56d6c715..6c74ec0ed3 100644
--- a/src/css/components/_button.scss
+++ b/src/css/components/_button.scss
@@ -1,7 +1,7 @@
 .video-js button {
   background: none;
   border: none;
-  color: $primary-text;
+  color: inherit;
   display: inline-block;
 
   overflow: visible; // IE8
diff --git a/src/css/components/_captions-settings.scss b/src/css/components/_captions-settings.scss
index fee3cece90..6eadec3af0 100644
--- a/src/css/components/_captions-settings.scss
+++ b/src/css/components/_captions-settings.scss
@@ -1,13 +1,12 @@
 .vjs-caption-settings {
   position: relative;
   top: 1em;
-  background-color: $primary-bg;
-  background-color: rgba($primary-bg, 0.75);
-  color: $primary-text;
+  background-color: $primary-background-color;
+  background-color: rgba($primary-background-color, 0.75);
+  color: $primary-foreground-color;
   margin: 0 auto;
   padding: 0.5em;
   height: 15em;
-  font-family: $text-font-family;
   font-size: 12px;
   width: 40em;
 }
diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss
index e9315c654c..588bd7cc96 100644
--- a/src/css/components/_control-bar.scss
+++ b/src/css/components/_control-bar.scss
@@ -7,7 +7,7 @@
   right: 0;
   height: 3.0em;
 
-  @include background-color-with-alpha($control-bar--bg, $control-bar--transparency);
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }
 
 // Video has started playing
diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss
index 45fed0c79f..b3506b9f57 100644
--- a/src/css/components/_control.scss
+++ b/src/css/components/_control.scss
@@ -23,7 +23,7 @@
 .video-js .vjs-control:focus:before,
 .video-js .vjs-control:hover:before,
 .video-js .vjs-control:focus {
-  text-shadow: 0em 0em 1em rgba($primary-text, 1);
+  text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);
 }
 
 /* Hide control text visually, but have it available for screenreaders */
diff --git a/src/css/components/_error.scss b/src/css/components/_error.scss
index b8acd70141..135f2dfaab 100644
--- a/src/css/components/_error.scss
+++ b/src/css/components/_error.scss
@@ -15,11 +15,11 @@
   content: 'X';
   font-family: $text-font-family;
   font-size: 4em;
-  color: $secondary-bg;
+  color: #fff;
   /* In order to center the play icon vertically we need to set the line height
   to the same as the button height */
   line-height: 1;
-  text-shadow: 0.05em 0.05em 0.1em $primary-bg;
+  text-shadow: 0.05em 0.05em 0.1em #000;
   text-align: center /* Needed for IE8 */;
   vertical-align: middle;
 
@@ -39,9 +39,10 @@
   text-align: center;
   padding: 3px;
 
-  @include background-color-with-alpha($primary-bg, 0.5);
+  @include background-color-with-alpha(#000, 0.5);
 }
 
-.vjs-error-display a, .vjs-error-display a:visited {
-  color: $secondary-text;
+.vjs-error-display a,
+.vjs-error-display a:visited {
+  color: #66A8CC;
 }
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index 57151d7694..2a95fe2083 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -7,13 +7,13 @@
   vertical-align: top;
   box-sizing: border-box;
 
-  color: $primary-text;
-  background-color: $primary-bg;
+  color: $primary-foreground-color;
+  background-color: #000;
   position: relative;
   padding: 0;
   /* Start with 10px for base font size so other dimensions can be em based and
   easily calculable. */
-  font-size: $base-font-size;
+  font-size: 10px;
   line-height: 1;
 
   /* Provide some basic defaults for fonts */
@@ -58,13 +58,19 @@
 /* Fill the width of the containing element and use padding to create the
    desired aspect ratio. Default to 16x9 unless another ratio is given. */
 @mixin apply-aspect-ratio($width, $height) {
+  padding-top: 100% * ($height/$width);
+}
+
+/* Not including a default AR in vjs-fluid because it would override
+   the user set AR injected into the header. */
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3 {
   width: 100%;
   max-width: 100%;
   height: 0;
-  padding-top: 100% * ($height/$width);
 }
 
-.video-js.vjs-fluid,
 .video-js.vjs-16-9 {
   @include apply-aspect-ratio(16, 9);
 }
@@ -131,8 +137,8 @@ This optional paragraph inside the video tag can provide a message to users
 about what's required to play video. */
 .vjs-no-js {
   padding: 20px;
-  color: $primary-text;
-  background-color: $primary-bg;
+  color: #fff;
+  background-color: #000;
   font-size: 18px;
   font-family: $text-font-family;
   text-align: center;
@@ -141,6 +147,7 @@ about what's required to play video. */
   margin: 0px auto;
 }
 
-.vjs-no-js a, .vjs-no-js a:visited {
-  color: $secondary-text;
+.vjs-no-js a,
+.vjs-no-js a:visited {
+  color: #66A8CC;
 }
diff --git a/src/css/components/_loading.scss b/src/css/components/_loading.scss
index c1c6e71219..08900c75f9 100644
--- a/src/css/components/_loading.scss
+++ b/src/css/components/_loading.scss
@@ -6,7 +6,10 @@
   margin: -25px 0 0 -25px;
   opacity: 0.85;
 
-  border: 6px solid rgba(113, 119, 129, 0.75);
+  /* Need to fix centered page layouts */
+  text-align: left;
+
+  border: 6px solid rgba($primary-background-color, $primary-background-transparency);
   // border: 6px solid rgba(43, 51, 63, 0.5);
 
   box-sizing: border-box;
@@ -72,36 +75,36 @@
 
 @keyframes vjs-spinner-fade {
   0% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
   20% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
   35% {
     border-top-color: white;
   }
   60% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
   100% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
 }
 
 @-webkit-keyframes vjs-spinner-fade {
   0% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
   20% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
   35% {
     border-top-color: white;
   }
   60% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
   100% {
-    border-top-color: #a6aab0;
+    border-top-color: $secondary-background-color;
   }
 }
diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
index cb6db84e33..38cc61b102 100644
--- a/src/css/components/_progress.scss
+++ b/src/css/components/_progress.scss
@@ -68,7 +68,7 @@
   }
 }
 .video-js .vjs-play-progress {
-  background-color: $primary-text;
+  background-color: $primary-foreground-color;
   @extend .vjs-icon-circle;
 
   // Progress handle
@@ -89,10 +89,10 @@
   top: -2.4em;
   right: -1.5em;
   font-size: 0.9em;
-  color: $primary-bg;
+  color: #000;
   content: attr(data-current-time);
   padding: 0.2em 0.5em;
-  @include background-color-with-alpha($primary-text, 0.8);
+  @include background-color-with-alpha(#fff, 0.8);
   @include border-radius(0.3em);
 }
 .video-js .vjs-play-progress:before,
@@ -101,14 +101,19 @@
 }
 
 .video-js .vjs-load-progress {
-  background: rgb(100, 100, 100) /* IE8- Fallback */;
-  background: rgba(255, 255, 255, 0.2);
+  /* For IE8 we'll lighten the color */
+  background: ligthen($secondary-background-color, 25%);
+  /* Otherwise we'll rely on stacked opacities */
+  background: rgba($secondary-background-color, $secondary-background-transparency);
 }
 
 /* there are child elements of the load progress bar that represent the
 specific time ranges that have been buffered */
 .video-js .vjs-load-progress div {
-  background: rgba($secondary-bg, 0.1);
+  /* For IE8 we'll lighten the color */
+  background: ligthen($secondary-background-color, 50%);
+  /* Otherwise we'll rely on stacked opacities */
+  background: rgba($secondary-background-color, 0.75);
 }
 
 .video-js.vjs-no-flex .vjs-progress-control {
@@ -120,7 +125,7 @@ specific time ranges that have been buffered */
   position: absolute;
   width: 1px;
   height: 100%;
-  background-color: $primary-bg;
+  background-color: #000;
   z-index: 1;
 }
 .vjs-no-flex .vjs-progress-control .vjs-mouse-display {
@@ -141,6 +146,6 @@ specific time ranges that have been buffered */
   display: none;
 }
 .video-js .vjs-progress-control .vjs-mouse-display:after {
-  color: $primary-text; 
-  @include background-color-with-alpha($primary-bg, 0.8);
+  color: #fff;
+  @include background-color-with-alpha(#000, 0.8);
 }
diff --git a/src/css/components/_slider.scss b/src/css/components/_slider.scss
index 9a68afeb8f..bbf2bd99b4 100644
--- a/src/css/components/_slider.scss
+++ b/src/css/components/_slider.scss
@@ -5,11 +5,11 @@
   padding: 0;
   margin: 0 0.45em 0 0.45em;
 
-  @include background-color-with-alpha($secondary-bg, 0.9);
+  @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
 }
 
 .video-js .vjs-slider:focus {
-  text-shadow: 0em 0em 1em rgba($primary-text, 1);
+  text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);
 
-  @include box-shadow(0 0 1em $primary-text);
+  @include box-shadow(0 0 1em $primary-foreground-color);
 }
diff --git a/src/css/components/_text-track.scss b/src/css/components/_text-track.scss
index 7e0095d1b8..540bb60ff3 100644
--- a/src/css/components/_text-track.scss
+++ b/src/css/components/_text-track.scss
@@ -18,7 +18,7 @@
   text-align: center;
   margin-bottom: 0.1em;
   /* Transparent black background, or fallback to all black (oldIE) */
-  @include background-color-with-alpha($primary-bg, 0.5);
+  @include background-color-with-alpha(#000, 0.5);
 }
 
 .vjs-subtitles { color: #fff /* Subtitles are white */; }
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
index 82f2220681..7e516937af 100644
--- a/src/css/components/_volume.scss
+++ b/src/css/components/_volume.scss
@@ -43,7 +43,7 @@
   bottom: 0;
   left: 0;
 
-  background-color: $primary-text;
+  background-color: $primary-foreground-color;
 
   @extend .vjs-icon-circle;
 
@@ -121,3 +121,9 @@ width and height to zero. */
   height: 2.9em;
   width: 8em;
 }
+
+.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
+  /* An inline volume should never have a menu background color.
+     This protects it from external changes to background colors. */
+  background-color: transparent !important;
+}
diff --git a/src/css/components/menu/_menu-popup.scss b/src/css/components/menu/_menu-popup.scss
index 0dacdd09c2..ba968307a7 100644
--- a/src/css/components/menu/_menu-popup.scss
+++ b/src/css/components/menu/_menu-popup.scss
@@ -6,12 +6,12 @@
   left: -3em; /* (Width of vjs-menu - width of button) / 2 */
   height: 0em;
   margin-bottom: 1.5em;
-  border-top-color: rgba(7, 40, 50, $control-bar--transparency); /* Same as ul background */
+  border-top-color: rgba($primary-background-color, $primary-background-transparency); /* Same as ul background */
 }
 
 /* Button Pop-up Menu */
 .vjs-menu-button-popup .vjs-menu ul {
-  @include background-color-with-alpha($primary-bg, 0.7);
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 
   position: absolute;
   width: 100%;
diff --git a/src/css/components/menu/_menu.scss b/src/css/components/menu/_menu.scss
index c0aa2a5064..b6bdfff133 100644
--- a/src/css/components/menu/_menu.scss
+++ b/src/css/components/menu/_menu.scss
@@ -23,18 +23,17 @@
   text-transform: lowercase;
 }
 
-.vjs-menu li.vjs-selected {
-  background-color: $primary-bg;
+.vjs-menu li:focus,
+.vjs-menu li:hover {
+  outline: 0;
+  @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
 }
 
-.vjs-menu li:focus,
-.vjs-menu li:hover,
+.vjs-menu li.vjs-selected,
 .vjs-menu li.vjs-selected:focus,
 .vjs-menu li.vjs-selected:hover {
-  outline: 0;
-  color: $primary-bg;
-
-  @include background-color-with-alpha($primary-text, 0.75);
+  background-color: $primary-foreground-color;
+  color: $primary-background-color;
 }
 
 .vjs-menu li.vjs-menu-title {
diff --git a/src/js/control-bar/progress-control/play-progress-bar.js b/src/js/control-bar/progress-control/play-progress-bar.js
index ab7f98b653..5236d11300 100644
--- a/src/js/control-bar/progress-control/play-progress-bar.js
+++ b/src/js/control-bar/progress-control/play-progress-bar.js
@@ -30,7 +30,7 @@ class PlayProgressBar extends Component {
    */
   createEl() {
     return super.createEl('div', {
-      className: 'vjs-play-progress',
+      className: 'vjs-play-progress vjs-slider-bar',
       innerHTML: `<span class="vjs-control-text"><span>${this.localize('Progress')}</span>: 0%</span>`
     });
   }
diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js
index 4f37780248..00808b1d7f 100644
--- a/src/js/control-bar/volume-control/volume-bar.js
+++ b/src/js/control-bar/volume-control/volume-bar.js
@@ -32,7 +32,7 @@ class VolumeBar extends Slider {
    */
   createEl() {
     return super.createEl('div', {
-      className: 'vjs-volume-bar'
+      className: 'vjs-volume-bar vjs-slider-bar'
     }, {
       'aria-label': 'volume level'
     });
diff --git a/src/js/video.js b/src/js/video.js
index 2cfffaddfc..2310dfc79c 100644
--- a/src/js/video.js
+++ b/src/js/video.js
@@ -107,6 +107,11 @@ if (!style) {
     .video-js {
       width: 300px;
       height: 150px;
+    }
+
+    .vjs-fluid {
+      padding-top: 56.25%
+    }
   `);
 }