diff --git a/docs/app/css/style.css b/docs/app/css/style.css
index 5783a858077..85bb6d52b26 100644
--- a/docs/app/css/style.css
+++ b/docs/app/css/style.css
@@ -75,6 +75,10 @@ a {
   text-decoration: none;
   font-weight: 400;
   transition: border-bottom 0.35s;
+  color: #1e88e5;
+}
+a:visited {
+  color: #7e57c2;
 }
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: 1rem;
@@ -432,10 +436,6 @@ a.docs-logo {
   font-size: 24px !important;
   font-weight: 400 !important;
 }
-.md-breadcrumb md-icon {
-  color: #666 !important;
-  fill: #666 !important;
-}
 .md-breadcrumb-page {
   display: inline-block;
   word-wrap: break-word;
@@ -799,13 +799,6 @@ docs-demo .doc-demo-content {
   margin: 16px;
 }
 .site-content-toolbar {
-  background: #f6f6f6 !important;
-  color: #666 !important;
-  z-index: 3;
-}
-.site-content-toolbar {
-  background: #f6f6f6 !important;
-  color: #202020 !important;
   z-index: 3;
 }
 .service-desc {
@@ -889,6 +882,7 @@ table.custom-table {
   box-shadow: 0 1px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
   border-radius: 2px;
   background: #fafafa;
+  color: rgba(0,0,0,0.87);
   border-spacing: 0;
 }
 table.custom-table thead > {
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
index 3ba23b20d4a..339e6faf665 100644
--- a/docs/app/js/app.js
+++ b/docs/app/js/app.js
@@ -62,6 +62,11 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     .primaryPalette('yellow')
     .dark();
 
+  $mdThemingProvider.theme('site-toolbar')
+    .primaryPalette('grey', {
+      'default': '100'
+    });
+
   $mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48);
   $mdIconProvider
     .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
index 7ee017782d3..a7cc00b719a 100644
--- a/docs/config/template/index.template.html
+++ b/docs/config/template/index.template.html
@@ -54,7 +54,7 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
   </md-sidenav>
 
   <div layout="column" tabIndex="-1" role="main" flex>
-    <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
+    <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar" md-theme="site-toolbar">
 
       <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
         <md-button class="md-icon-button" ng-click="openMenu()" hide-gt-sm aria-label="Toggle Menu">
diff --git a/src/components/button/demoBasicUsage/index.html b/src/components/button/demoBasicUsage/index.html
index 0a3b09a0d17..05a305d6c43 100644
--- a/src/components/button/demoBasicUsage/index.html
+++ b/src/components/button/demoBasicUsage/index.html
@@ -1,4 +1,3 @@
-
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content>
 
@@ -9,6 +8,7 @@
       <md-button class="md-warn">{{title4}}</md-button>
       <div class="label">Flat</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
       <md-button class="md-raised">Button</md-button>
@@ -17,6 +17,7 @@
       <md-button class="md-raised md-warn">Warn</md-button>
       <div class="label">Raised</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
         <md-button class="md-fab" aria-label="Eat cake">
@@ -44,14 +45,17 @@
         </md-button>
       <div class="label">FAB</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
         <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
-        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>
-
+        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">
+          Primary Link
+        </md-button>
         <md-button>Default Button</md-button>
       <div class="label">Link vs. Button</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
       <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
@@ -60,6 +64,7 @@
       <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
       <div class="label">Themed</div>
     </section>
+    <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
       <md-button class="md-icon-button md-primary" aria-label="Settings">
diff --git a/src/components/button/demoBasicUsage/script.js b/src/components/button/demoBasicUsage/script.js
index a38166e958b..4201838b251 100644
--- a/src/components/button/demoBasicUsage/script.js
+++ b/src/components/button/demoBasicUsage/script.js
@@ -1,11 +1,7 @@
-
-angular.module('buttonsDemo1', ['ngMaterial'])
-
+angular.module('buttonsDemoBasic', ['ngMaterial'])
 .controller('AppCtrl', function($scope) {
   $scope.title1 = 'Button';
   $scope.title4 = 'Warn';
   $scope.isDisabled = true;
-
   $scope.googleUrl = 'http://google.com';
-
 });
diff --git a/src/components/button/demoBasicUsage/style.css b/src/components/button/demoBasicUsage/style.css
index 84b9fedb081..65e021f6d55 100644
--- a/src/components/button/demoBasicUsage/style.css
+++ b/src/components/button/demoBasicUsage/style.css
@@ -1,13 +1,8 @@
 section {
-  background: #f7f7f7;
   border-radius: 3px;
   text-align: center;
   margin: 1em;
   position: relative !important;
-  padding-bottom: 10px;
-}
-md-content {
-  margin-right: 7px;
 }
 section .md-button {
   margin-top: 16px;
diff --git a/src/components/chips/demoCustomInputs/style.css b/src/components/chips/demoCustomInputs/style.css
index 3cb5f3b438c..759db2303c7 100644
--- a/src/components/chips/demoCustomInputs/style.css
+++ b/src/components/chips/demoCustomInputs/style.css
@@ -12,7 +12,6 @@ input[type=number] {
 }
 .veggie-option .md-item-text {
  padding: 8px;
- background: #f0f0f0;
  border-radius: 3px;
 }
 .veggie-option .md-item-text h3,
diff --git a/src/components/tabs/demoDynamicHeight/style.scss b/src/components/tabs/demoDynamicHeight/style.scss
index 13dafa06b30..5c385edecb4 100644
--- a/src/components/tabs/demoDynamicHeight/style.scss
+++ b/src/components/tabs/demoDynamicHeight/style.scss
@@ -1,12 +1,4 @@
 md-content {
-  background-color: transparent !important;
-  md-tabs {
-    background: #f6f6f6;
-    border: 1px solid #e1e1e1;
-    md-tabs-wrapper {
-      background: white;
-    }
-  }
   h1:first-child {
     margin-top: 0;
   }
diff --git a/src/components/tabs/demoDynamicTabs/style.scss b/src/components/tabs/demoDynamicTabs/style.scss
index 53420ecf9a8..b7d43f94288 100644
--- a/src/components/tabs/demoDynamicTabs/style.scss
+++ b/src/components/tabs/demoDynamicTabs/style.scss
@@ -1,14 +1,4 @@
 md-content {
-  background-color: transparent !important;
-  md-tabs {
-    border: 1px solid #e1e1e1;
-    md-tab-content {
-      background: #f6f6f6;
-    }
-    md-tabs-wrapper {
-      background: white;
-    }
-  }
   h1:first-child {
     margin-top: 0;
   }
@@ -26,16 +16,12 @@ md-input-container {
 .edit-form input {
   width: 100%;
 }
-md-tabs {
-  border-bottom: 1px solid rgba(0,0,0,0.12);
-}
 md-tab[disabled] {
   opacity: 0.5;
 }
 label {
   text-align: left;
 }
-
 .long > input {
   width: 264px;
 }
diff --git a/src/components/tabs/demoStaticTabs/index.html b/src/components/tabs/demoStaticTabs/index.html
index 1744d4653fa..f7521579f29 100644
--- a/src/components/tabs/demoStaticTabs/index.html
+++ b/src/components/tabs/demoStaticTabs/index.html
@@ -1,6 +1,7 @@
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content class="md-padding">
-    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
+    <md-tabs class="md-primary" md-selected="data.selectedIndex"
+             md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
       <md-tab id="tab1">
         <md-tab-label>Item One</md-tab-label>
         <md-tab-body>
diff --git a/src/components/tabs/demoStaticTabs/style.scss b/src/components/tabs/demoStaticTabs/style.scss
index 3175e1366fe..edb2e9fccc6 100644
--- a/src/components/tabs/demoStaticTabs/style.scss
+++ b/src/components/tabs/demoStaticTabs/style.scss
@@ -1,6 +1,5 @@
 md-content {
   md-tabs {
-    border: 1px solid #e1e1e1;
     md-tab-content {
       padding: 25px;
       &:nth-child(1) {
@@ -23,14 +22,14 @@ md-content {
 }
 .after-tabs-area {
   > span {
-    margin-top:25px;
+    margin-top: 25px;
     padding-right: 15px;
     vertical-align: middle;
     line-height: 30px;
     height: 35px;
   }
   > md-checkbox {
-    margin-top:26px;
+    margin-top: 26px;
     margin-left: 0;
   }
 }
diff --git a/src/components/whiteframe/demoBasicClassUsage/style.css b/src/components/whiteframe/demoBasicClassUsage/style.css
index 9972731bc7e..f129e34f299 100644
--- a/src/components/whiteframe/demoBasicClassUsage/style.css
+++ b/src/components/whiteframe/demoBasicClassUsage/style.css
@@ -1,5 +1,4 @@
 md-whiteframe {
-  background: #fff;
   margin: 30px;
   height: 100px;
 }
@@ -9,7 +8,6 @@ md-whiteframe {
   md-whiteframe {
     margin: 7px;
     height: 50px;
-    background-color: #c8e4fa;
   }
   md-whiteframe > span {
     font-size: 0.4em;
@@ -32,7 +30,6 @@ md-whiteframe {
   md-whiteframe {
     margin: 20px;
     height: 90px;
-    background-color: #fcddde;
   }
   md-whiteframe > span {
     font-size: 0.9em;
@@ -44,7 +41,6 @@ md-whiteframe {
   md-whiteframe {
     margin: 25px;
     height: 100px;
-    background-color: #F2FCE2;
   }
   md-whiteframe > span {
     font-size: 1.0em;
diff --git a/src/components/whiteframe/demoDirectiveAttributeUsage/style.css b/src/components/whiteframe/demoDirectiveAttributeUsage/style.css
index 89739575464..c87b1c314cb 100644
--- a/src/components/whiteframe/demoDirectiveAttributeUsage/style.css
+++ b/src/components/whiteframe/demoDirectiveAttributeUsage/style.css
@@ -1,5 +1,4 @@
 md-whiteframe, div.padded {
-  background: #fff;
   margin: 30px;
   height: 100px;
 }
@@ -9,7 +8,6 @@ md-whiteframe, div.padded {
   md-whiteframe, div.padded {
     margin: 7px;
     height: 50px;
-    background-color: #c8e4fa;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.4em;
@@ -32,7 +30,6 @@ md-whiteframe, div.padded {
   md-whiteframe, div.padded {
     margin: 20px;
     height: 90px;
-    background-color: #fcddde;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.9em;
@@ -44,7 +41,6 @@ md-whiteframe, div.padded {
   md-whiteframe, div.padded {
     margin: 25px;
     height: 100px;
-    background-color: #F2FCE2;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 1.0em;
diff --git a/src/components/whiteframe/demoDirectiveInterpolation/style.css b/src/components/whiteframe/demoDirectiveInterpolation/style.css
index ff7cfe58ac4..5601c9b8cb5 100644
--- a/src/components/whiteframe/demoDirectiveInterpolation/style.css
+++ b/src/components/whiteframe/demoDirectiveInterpolation/style.css
@@ -1,5 +1,4 @@
 md-whiteframe, div.padded {
-  background: #fff;
   height: 100px;
 }
 
@@ -16,7 +15,6 @@ md-whiteframe:focus, div.padded:focus {
   md-whiteframe, div.padded {
     margin: 7px;
     height: 50px;
-    background-color: #c8e4fa;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.4em;
@@ -37,7 +35,6 @@ md-whiteframe:focus, div.padded:focus {
 @media (min-width: 960px ) and (max-width: 1279px) {
   md-whiteframe, div.padded {
     height: 90px;
-    background-color: #fcddde;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 0.9em;
@@ -48,7 +45,6 @@ md-whiteframe:focus, div.padded:focus {
 @media (min-width: 1280px) {
   md-whiteframe, div.padded {
     height: 100px;
-    background-color: #F2FCE2;
   }
   md-whiteframe > span, div.padded > span {
     font-size: 1.0em;