diff --git a/docs/app/css/style.css b/docs/app/css/style.css
index 858d46f5e16..b569b72fa63 100644
--- a/docs/app/css/style.css
+++ b/docs/app/css/style.css
@@ -5,6 +5,10 @@ body {
   max-height: 100%;
 }
 
+a {
+  color: #3f51b5;
+}
+
 md-toolbar.md-medium-tall {
   height: 88px;
 }
@@ -158,13 +162,16 @@ pre > code.highlight {
   -moz-flex: 1;
   -ms-flex: 1;
   flex: 1;
+}
+
+.demo-content > div[layout-fill] {
   min-height: 448px;
 }
 
 md-toolbar.demo-toolbar,
 .demo-source-tabs md-tab,
 .demo-source-tabs .tabs-header {
-  background: #00BCD4;
+  background: #00BCD4 !important;
   color: white;
 }
 md-toolbar.demo-toolbar md-tab-label {
diff --git a/docs/app/partials/home.tmpl.html b/docs/app/partials/home.tmpl.html
index 86f66af7598..74ac9b78ac1 100644
--- a/docs/app/partials/home.tmpl.html
+++ b/docs/app/partials/home.tmpl.html
@@ -1,7 +1,7 @@
 <div ng-controller="HomeCtrl" layout="vertical">
   <md-content flex>
     <p>
-      <a href="http://www.google.com/design/spec/materal-design/">Material Design</a> is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.
+      <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.
     </p>
     <p>
       The material design project for Angular is a complementary effort to the <a href="http://www.polymer-project.org/">Polymer</a> project's <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">paper elements</a> collection. Our goal is to provide a set of AngularJS-native UI elements that implement the material design system.
diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
index e5a4c96801c..fa4f6d4236a 100644
--- a/docs/config/template/index.template.html
+++ b/docs/config/template/index.template.html
@@ -19,7 +19,7 @@
     component-id="left"
     is-locked-open="$media('md')">
 
-    <md-toolbar class="md-theme-light md-medium-tall">
+    <md-toolbar class="md-medium-tall">
       <h1 class="md-toolbar-tools" style="padding-top:25px;">
         <a href="#/" ng-click="goHome()">Angular<br/>Material Design</a>
       </h1>
@@ -50,7 +50,7 @@ <h1 class="md-toolbar-tools" style="padding-top:25px;">
   </md-sidenav>
 
   <div layout="vertical" layout-fill tabIndex="-1" role="main">
-    <md-toolbar class="md-theme-dark md-medium-tall app-toolbar">
+    <md-toolbar md-theme="indigo" class="md-medium-tall app-toolbar">
 
       <div class="md-toolbar-tools" ng-click="openMenu()">
         <button class="menu-icon" hide-md aria-label="Toggle Menu">
diff --git a/docs/gulpfile.js b/docs/gulpfile.js
index 7ac10673947..c3d166dd417 100644
--- a/docs/gulpfile.js
+++ b/docs/gulpfile.js
@@ -118,10 +118,10 @@ module.exports = function(gulp, IS_RELEASE_BUILD) {
   gulp.task('docs-css', ['docs-app', 'build'], function() {
     return gulp.src([
       'dist/angular-material.css',
+      'dist/themes/*.css',
       'docs/app/css/highlightjs-github.css',
       'docs/app/css/layout-demo.css',
-      'docs/app/css/style.css',
-      'dist/themes/default-theme.css'
+      'docs/app/css/style.css'
     ])
       .pipe(concat('docs.css'))
       .pipe(gulp.dest('dist/docs'));
diff --git a/gulpfile.js b/gulpfile.js
index dfbf58762dc..7939257b3c2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,6 +9,7 @@ var gulp = require('gulp');
 var karma = require('karma').server;
 var pkg = require('./package.json');
 var exec = require('child_process').exec;
+var mergeStream = require('merge-stream');
 
 var argv = require('minimist')(process.argv.slice(2));
 
@@ -109,8 +110,8 @@ var config = {
     ' * v' + pkg.version + '\n' +
     ' */\n',
   jsBaseFiles: ['src/core/core.js', 'src/core/util/*.js'],
-  themeBaseFiles: ['src/core/style/variables.scss', 'src/core/style/mixins.scss'],
-  scssBaseFiles: ['src/core/style/variables.scss', 'src/core/style/mixins.scss', 'src/core/style/{structure,layout,table}.scss'],
+  themeBaseFiles: ['src/core/style/color-palette.scss', 'src/core/style/variables.scss', 'src/core/style/mixins.scss'],
+  scssBaseFiles: ['src/core/style/color-palette.scss', 'src/core/style/variables.scss', 'src/core/style/mixins.scss', 'src/core/style/{structure,layout,table}.scss'],
   paths: 'src/{components,services}/**',
   outputDir: 'dist/'
 };
@@ -121,7 +122,7 @@ var config = {
  * Project wide build related tasks
  */
 
-gulp.task('build', ['build-theme', 'build-scss', 'build-js'], function() {
+gulp.task('build', ['build-themes', 'build-scss', 'build-js'], function() {
 });
 
 gulp.task('watch', ['build'], function() {
@@ -162,13 +163,27 @@ gulp.task('build-default-theme', function() {
 gulp.task('build-theme', ['build-default-theme'], function() {
   var theme = argv.theme || argv.t || 'default';
   theme = theme.replace(/-theme$/, '');
+  return buildTheme(theme);
+});
+
+gulp.task('build-themes', ['build-default-theme'], function() {
+  var stream = mergeStream();
+  var themes = glob('themes/*.scss', { cwd: __dirname });
+  themes.forEach(function(themeFile) {
+    var name = themeFile.match(/((\w|-)+)-theme\.scss/)[1];
+    stream.add(buildTheme(name));
+  });
+  return stream;
+});
+
+function buildTheme(theme) {
   gutil.log("Building theme " + theme + "...");
-  return gulp.src(['themes/default-theme.scss', 'themes/' + theme + '-theme.scss'])
+  return gulp.src(['src/core/style/color-palette.scss', 'themes/' + theme + '-theme.scss', 'themes/default-theme.scss'])
     .pipe(concat(theme + '-theme.scss'))
     .pipe(utils.hoistScssVariables())
     .pipe(sass())
     .pipe(gulp.dest(config.outputDir + 'themes/'));
-});
+}
 
 gulp.task('build-scss', function() {
   var scssGlob = path.join(config.paths, '*.scss');
@@ -249,7 +264,11 @@ gulp.task('build-demo', function() {
 });
 
 function buildModuleStyles(name) {
-  var baseStyles = glob(config.themeBaseFiles, { cwd: __dirname }).map(function(fileName) {
+  var files = [];
+  config.themeBaseFiles.forEach(function(fileGlob) {
+    files = files.concat(glob(fileGlob, { cwd: __dirname }));
+  });
+  var baseStyles = files.map(function(fileName) {
     return fs.readFileSync(fileName, 'utf8').toString();
   }).join('\n');
   return lazypipe()
diff --git a/package.json b/package.json
index f4ad05caace..ad62f3d50f2 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "batch": "^0.5.1",
     "canonical-path": "0.0.2",
     "conventional-changelog": "0.0.9",
+    "dgeni": "^0.4.1",
+    "dgeni-packages": "^0.10.3",
     "esprima": "^1.2.2",
     "event-stream": "^3.1.5",
     "glob": "~4.0.2",
@@ -21,14 +23,16 @@
     "gulp-insert": "^0.4.0",
     "gulp-jshint": "^1.5.5",
     "gulp-minify-css": "^0.3.4",
+    "gulp-minify-html": "^0.1.6",
     "gulp-ng-html2js": "^0.1.8",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.3.0",
-    "gulp-sass": "^0.7.1",
+    "gulp-sass": "1.2.0",
     "gulp-strip-debug": "^0.3.0",
     "gulp-uglify": "^0.3.0",
     "gulp-uncss": "^0.4.5",
     "gulp-util": "^3.0.1",
+    "gulp-webserver": "^0.8.3",
     "jshint-summary": "^0.3.0",
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.4",
@@ -39,14 +43,10 @@
     "karma-sauce-launcher": "^0.2.10",
     "lazypipe": "^0.2.2",
     "lodash": "^2.4.1",
+    "merge-stream": "^0.1.6",
     "minimist": "^0.1.0",
-    "node-sass": "^0.9.5-rc1",
-    "dgeni": "^0.4.1",
-    "dgeni-packages": "^0.10.3",
-    "through2": "^0.6.3",
-    "gulp-minify-html": "^0.1.6",
     "mkdirp": "^0.5.0",
-    "gulp-webserver": "^0.8.3",
-    "q": "^1.0.1"
+    "q": "^1.0.1",
+    "through2": "^0.6.3"
   }
 }
diff --git a/scripts/gulp-utils.js b/scripts/gulp-utils.js
index 68e46bbdba3..a2575591b02 100644
--- a/scripts/gulp-utils.js
+++ b/scripts/gulp-utils.js
@@ -154,13 +154,20 @@ exports.hoistScssVariables = function() {
     var contents = file.contents.toString().split('\n');
     var lastVariableLine = -1;
 
+    var openCount = 0;
+    var closeCount = 0;
+    var openBlock = false;
+
     for( var currentLine = 0; currentLine < contents.length; ++currentLine) {
       var line = contents[currentLine];
-      if (/^\s*\$/.test(line)) {
-        if (currentLine != lastVariableLine + 1) {
-          var variable = contents.splice(currentLine, 1)[0];
-          contents.splice(++lastVariableLine, 0, variable);
-        }
+
+      if (openBlock || /^\s*\$/.test(line)) {
+        if (openBlock) debugger;
+        openCount += (line.match(/\(/g) || []).length;
+        closeCount += (line.match(/\)/g) || []).length;
+        openBlock = openCount != closeCount;
+        var variable = contents.splice(currentLine, 1)[0];
+        contents.splice(++lastVariableLine, 0, variable);
       }
     }
     file.contents = new Buffer(contents.join('\n'));
diff --git a/src/components/animate/_effects.scss b/src/components/animate/_effects.scss
index a086271b977..9d86b578f6e 100644
--- a/src/components/animate/_effects.scss
+++ b/src/components/animate/_effects.scss
@@ -1,10 +1,3 @@
-md-tabs-ink-bar {
-  height: 2px;
-  background: #ffff85;
-  position: absolute;
-  margin-top: -2px;
-}
-
 // Button ripple: keep same opacity, but expand to 0.75 scale.
 // Then, fade out and expand to 2.0 scale.
 @keyframes inkRippleButton {
diff --git a/src/components/backdrop/_backdrop.js b/src/components/backdrop/_backdrop.js
new file mode 100644
index 00000000000..72a0bb09924
--- /dev/null
+++ b/src/components/backdrop/_backdrop.js
@@ -0,0 +1,29 @@
+/*
+ * @ngdoc module
+ * @name material.components.backdrop
+ * @description Backdrop
+ */
+
+/**
+ * @ngdoc directive
+ * @name mdBackdrop
+ * @module material.components.backdrop
+ *
+ * @restrict E
+ *
+ * @description
+ * `<md-backdrop>` is a backdrop element used by other coponents, such as dialog and bottom sheet.
+ * Apply class `opaque` to make the backdrop use the theme backdrop color.
+ *
+ */
+angular.module('material.components.backdrop', [
+  'material.services.theming'
+])
+.directive('mdBackdrop', [
+  '$mdTheming',
+  BackdropDirective
+]);
+
+function BackdropDirective($mdTheming) {
+  return $mdTheming;
+}
diff --git a/src/components/backdrop/_backdrop.scss b/src/components/backdrop/_backdrop.scss
index f499f134ee6..e994a32ebfa 100644
--- a/src/components/backdrop/_backdrop.scss
+++ b/src/components/backdrop/_backdrop.scss
@@ -8,10 +8,6 @@ md-backdrop {
   right: 0;
   bottom: 0;
 
-  &.opaque {
-    background-color: rgba(0,0,0,0.3);
-  }
-
   transition: all 0.2s ease-out;
 
   &.ng-enter {
diff --git a/src/components/backdrop/backdrop-theme.scss b/src/components/backdrop/backdrop-theme.scss
new file mode 100644
index 00000000000..ef6eb2769ec
--- /dev/null
+++ b/src/components/backdrop/backdrop-theme.scss
@@ -0,0 +1,5 @@
+$backdrop-color: rgba(0,0,0,0.3);
+
+md-backdrop.opaque.md-#{$theme-name}-theme {
+  background-color: $backdrop-color;
+}
diff --git a/src/components/bottomSheet/_bottomSheet.scss b/src/components/bottomSheet/_bottomSheet.scss
index a0fd0019aec..53f50e660b1 100644
--- a/src/components/bottomSheet/_bottomSheet.scss
+++ b/src/components/bottomSheet/_bottomSheet.scss
@@ -1,3 +1,11 @@
+$bottom-sheet-horizontal-padding: 2 * $baseline-grid;
+$bottom-sheet-vertical-padding: 1 * $baseline-grid;
+$bottom-sheet-icon-after-margin: 4 * $baseline-grid;
+$bottom-sheet-list-item-height: 6 * $baseline-grid;
+$bottom-sheet-hidden-bottom-padding: 80px;
+$bottom-sheet-header-height: 7 * $baseline-grid;
+$bottom-sheet-grid-font-weight: 300;
+
 md-bottom-sheet {
   position: fixed;
   left: 0;
@@ -6,8 +14,7 @@ md-bottom-sheet {
   padding: $bottom-sheet-vertical-padding $bottom-sheet-horizontal-padding $bottom-sheet-vertical-padding + $bottom-sheet-hidden-bottom-padding $bottom-sheet-horizontal-padding;
   z-index: $z-index-bottom-sheet;
 
-  background-color: $bottom-sheet-background-color;
-  border-top: 1px solid $bottom-sheet-border-top-color;
+  border-top: 1px solid;
 
   transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
   transition: 0.2s linear;
@@ -36,7 +43,6 @@ md-bottom-sheet {
   h2.md-subheader {
     background-color: transparent;
     font-family: $font-family;
-    color: $text-medium;
     line-height: $bottom-sheet-header-height;
     padding: 0;
     white-space: nowrap;
@@ -62,7 +68,6 @@ md-bottom-sheet {
     md-item {
       align-items: center;
       height: $bottom-sheet-list-item-height;
-      color: $text-medium;
 
       div.md-icon-container {
         display: inline-block;
@@ -155,6 +160,3 @@ md-bottom-sheet {
     }
   }
 }
-
-
-
diff --git a/src/components/bottomSheet/bottomSheet-theme.scss b/src/components/bottomSheet/bottomSheet-theme.scss
new file mode 100644
index 00000000000..84adfc5d430
--- /dev/null
+++ b/src/components/bottomSheet/bottomSheet-theme.scss
@@ -0,0 +1,24 @@
+$bottom-sheet-color-palette: $background-color-palette !default;
+$bottom-sheet-background-color: map-get($bottom-sheet-color-palette, '50') !default;
+$bottom-sheet-border-top-color: map-get($bottom-sheet-color-palette, '400') !default;
+$bottom-sheet-header-color: $foreground-secondary-color !default;
+$bottom-sheet-list-color: $foreground-secondary-color !default;
+
+md-bottom-sheet.md-#{$theme-name}-theme {
+  background-color: $bottom-sheet-background-color;
+  border-top-color: $bottom-sheet-border-top-color;
+
+  &.list {
+    md-item {
+      color: $bottom-sheet-list-color;
+    }
+  }
+
+  .md-subheader {
+    background-color: $bottom-sheet-background-color;
+  }
+
+  .md-subheader {
+    color: $bottom-sheet-header-color;
+  }
+}
diff --git a/src/components/bottomSheet/bottomSheet.js b/src/components/bottomSheet/bottomSheet.js
index 17206291ca7..fc326835ce8 100644
--- a/src/components/bottomSheet/bottomSheet.js
+++ b/src/components/bottomSheet/bottomSheet.js
@@ -16,6 +16,7 @@ angular.module('material.components.bottomSheet', [
   '$mdEffects',
   '$timeout',
   '$$rAF',
+  '$compile',
   MdBottomSheet
 ]);
 
@@ -111,11 +112,12 @@ function MdBottomSheetDirective() {
  *
  */
 
-function MdBottomSheet($$interimElement, $animate, $mdEffects, $timeout, $$rAF) {
+function MdBottomSheet($$interimElement, $animate, $mdEffects, $timeout, $$rAF, $compile) {
   var backdrop;
 
   var $mdBottomSheet;
   return $mdBottomSheet = $$interimElement({
+    themable: true,
     targetEvent: null,
     onShow: onShow,
     onRemove: onRemove,
@@ -123,7 +125,7 @@ function MdBottomSheet($$interimElement, $animate, $mdEffects, $timeout, $$rAF)
 
   function onShow(scope, element, options) {
     // Add a backdrop that will close on click
-    backdrop = angular.element('<md-backdrop class="opaque ng-enter">');
+    backdrop = $compile('<md-backdrop class="opaque ng-enter">')(scope);
     backdrop.on('click touchstart', function() {
       $timeout($mdBottomSheet.cancel);
     });
diff --git a/src/components/bottomSheet/demoBasicUsage/index.html b/src/components/bottomSheet/demoBasicUsage/index.html
index 2e1219f7576..2e6e8341733 100644
--- a/src/components/bottomSheet/demoBasicUsage/index.html
+++ b/src/components/bottomSheet/demoBasicUsage/index.html
@@ -3,11 +3,11 @@
     Bottom sheet can be dismissed with the service or a swipe down.
   </p>
   <div class="bottom-sheet-demo inset" layout="vertical" layout-sm="horizontal" layout-align="center">
-    <md-button class="md-button-colored" ng-click="showListBottomSheet($event)">
+    <md-button class="md-primary" ng-click="showListBottomSheet($event)">
       Show as List
     </md-button>
     <div style="width:50px;"></div>
-    <md-button class="md-button-colored" ng-click="showGridBottomSheet($event)">
+    <md-button class="md-primary" ng-click="showGridBottomSheet($event)">
       Show as Grid
     </md-button>
   </div>
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 6cd172c086e..04bb352acd7 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -1,8 +1,17 @@
+$button-line-height: 25px;
+$button-padding: 2px 6px 3px;
+
+// Fab buttons
+$button-fab-width: 56px;
+$button-fab-height: 56px;
+$button-fab-padding: 16px;
+$button-fab-toast-offset: $toast-height + $toast-margin;
+
 /**
  * Position a FAB button.
  */
 @mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
-  &.md-button-fab-#{$spot} {
+  &.md-fab-#{$spot} {
     top: $top;
     right: $right;
     bottom: $bottom;
@@ -22,7 +31,6 @@ md-button {
   padding: 0;
   margin: 0;
 
-  border-radius: $button-border-radius;
   text-align: center;
 
   // Always uppercase buttons
@@ -71,61 +79,26 @@ md-button {
   }
 
 
-  &.md-button-colored {
-    color: $theme-light;
-    fill: $theme-light;
-  }
-
-  &.md-button-cornered {
+  &.md-cornered {
     border-radius: 0;
   }
 
-  &:not([disabled]) {
-    &:hover, 
-    // Uses a .focus class because the child button/a is getting the actual focus
-    &.focus {
-      background-color: $button-hover-background;
-    }
-  }
-
-  &[disabled] {
-    background-color: $button-disabled-background !important;
-    color: $button-disabled-color !important;
-    cursor: auto;
-  }
-
-  &.md-button-icon {
+  &.md-icon {
     padding: 0;
     background: none;
   }
 
-  &.md-button-raised {
-    background-color: $button-raised-background;
-
+  &.md-raised {
     transition: 0.2s linear;
     transition-property: box-shadow, transform, background-color;
     transform: translate3d(0, 0, 0);
 
     &:not([disabled]) {
       @extend .md-shadow-bottom-z-1;
-      &:hover,
-      &.focus {
-        background-color: $button-raised-hover-background;
-      }
-    }
-
-    &.md-button-colored {
-      background-color: $button-raised-colored-background;
-      color: $button-raised-colored-color;
-
-      &:hover:not([disabled]),
-      &.focus {
-        background-color: $button-raised-colored-hover-background;
-      }
     }
   }
 
-  &.md-button-fab {
+  &.md-fab {
 
     @include fab-position(bottom-right, auto, $button-fab-width/2, $button-fab-height/2, auto);
     @include fab-position(bottom-left, auto, auto, $button-fab-height/2, $button-fab-width/2);
@@ -137,7 +110,7 @@ md-button {
     width: $button-fab-width;
     height: $button-fab-height;
 
-    border-radius: $button-fab-border-radius;
+    border-radius: 50%;
 
     @extend .md-shadow-bottom-z-1;
     border-radius: 50%;
@@ -151,8 +124,8 @@ md-button {
   }
 
   &:not([disabled]) {
-    &.md-button-raised,
-    &.md-button-fab {
+    &.md-raised,
+    &.md-fab {
       &.focus,
       &:hover {
         transform: translate3d(0, -1px, 0);
@@ -163,8 +136,8 @@ md-button {
 }
 
 .md-toast-open-top {
-  md-button.md-button-fab-top-left,
-  md-button.md-button-fab-top-right {
+  md-button.md-fab-top-left,
+  md-button.md-fab-top-right {
     transform: translate3d(0, $button-fab-toast-offset, 0);
     &.focus,
     &:hover:not([disabled]) {
@@ -173,8 +146,8 @@ md-button {
   }
 }
 .md-toast-open-bottom {
-  md-button.md-button-fab-bottom-left,
-  md-button.md-button-fab-bottom-right {
+  md-button.md-fab-bottom-left,
+  md-button.md-fab-bottom-right {
     transform: translate3d(0, -$button-fab-toast-offset, 0);
     &.focus,
     &:hover {
diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss
new file mode 100644
index 00000000000..3f9295bfb2d
--- /dev/null
+++ b/src/components/button/button-theme.scss
@@ -0,0 +1,84 @@
+$button-border-radius: 3px !default;
+$button-fab-border-radius: 50% !default;
+
+$button-primary-color-palette: $primary-color-palette !default;
+$button-primary-color: map-get($button-primary-color-palette, '400') !default;
+$button-primary-raised-color: $primary-color-palette-contrast-color !default;
+$button-primary-raised-background-color: map-get($button-primary-color-palette, '500') !default;
+$button-primary-raised-hover-background-color: map-get($button-primary-color-palette, '600') !default;
+
+$button-warn-color-palette: $warn-color-palette !default;
+$button-warn-color: map-get($button-warn-color-palette, '400') !default;
+$button-warn-raised-color: $primary-color-palette-contrast-color !default;
+$button-warn-raised-background-color: map-get($button-warn-color-palette, '500') !default;
+$button-warn-raised-hover-background-color: map-get($button-warn-color-palette, '700') !default;
+
+$button-flat-color-palette: $background-color-palette !default;
+$button-disabled-color: map-get($button-flat-color-palette, '500') !default;
+$button-disabled-background-color: rgba(map-get($button-flat-color-palette, '500'), 0.145) !default;
+$button-hover-background-color: rgba(map-get($button-flat-color-palette, '500'), 0.20) !default;
+
+$button-raised-color-palette: $button-flat-color-palette !default;
+$button-raised-background-color: rgba(map-get($button-raised-color-palette, '500'), 0.185) !default;
+$button-raised-hover-background-color: rgba(map-get($button-raised-color-palette, '500'), 0.30) !default;
+
+md-button.md-#{$theme-name}-theme {
+  border-radius: $button-border-radius;
+
+  &[disabled] {
+    background-color: $button-disabled-background-color !important;
+    color: $button-disabled-color !important;
+    fill: $button-disabled-color !important;
+    cursor: auto;
+  }
+
+  &:not([disabled]) {
+    &:hover, &.focus {
+      background-color: $button-hover-background-color;
+    }
+  }
+
+  &.md-fab {
+    border-radius: $button-fab-border-radius;
+  }
+
+  &.md-primary {
+    color: $button-primary-color;
+    fill: $button-primary-color;
+  }
+
+  &.md-warn {
+    color: $button-warn-color;
+    fill: $button-warn-color;
+  }
+
+  &.md-raised, &.md-fab {
+    background-color: $button-raised-background-color;
+
+    &:not([disabled]) {
+      &:hover, &.focus {
+        background-color: $button-raised-hover-background-color;
+      }
+    }
+
+    &.md-primary {
+      color: $button-primary-raised-color;
+      background-color: $button-primary-raised-background-color;
+      &:not([disabled]) {
+        &:hover, &.focus {
+          background-color: $button-primary-raised-hover-background-color;
+        }
+      }
+    }
+
+    &.md-warn {
+      color: $button-warn-raised-color;
+      background-color: $button-warn-raised-background-color;
+      &:not([disabled]) {
+        &:hover, &.focus {
+          background-color: $button-warn-raised-hover-background-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 5dc124c4785..42a9cb0d81c 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -8,13 +8,15 @@
 angular.module('material.components.button', [
   'material.core',
   'material.animations',
-  'material.services.aria'
+  'material.services.aria',
+  'material.services.theming'
 ])
   .directive('mdButton', [
     'ngHrefDirective',
     '$mdInkRipple',
     '$mdAria',
     '$mdUtil',
+    '$mdTheming',
     MdButtonDirective
   ]);
 
@@ -48,7 +50,7 @@ angular.module('material.components.button', [
  *  </md-button>
  * </hljs>
  */
-function MdButtonDirective(ngHrefDirectives, $mdInkRipple, $mdAria, $mdUtil ) {
+function MdButtonDirective(ngHrefDirectives, $mdInkRipple, $mdAria, $mdUtil, $mdTheming ) {
   var ngHrefDirective = ngHrefDirectives[0];
 
   return {
@@ -57,6 +59,7 @@ function MdButtonDirective(ngHrefDirectives, $mdInkRipple, $mdAria, $mdUtil ) {
       var innerElement;
       var attributesToCopy;
 
+
       // Add an inner anchor if the element has a `href` or `ngHref` attribute,
       // so this element can be clicked like a normal `<a>`.
       if (attr.ngHref || attr.href) {
@@ -97,7 +100,8 @@ function MdButtonDirective(ngHrefDirectives, $mdInkRipple, $mdAria, $mdUtil ) {
         });
 
       return function postLink(scope, element, attr) {
-        $mdAria.expect(element, 'aria-label', true);
+        $mdTheming(element);
+        $mdAria.expect(element, 'aria-label', element.text());
         $mdInkRipple.attachButtonBehavior(element);
       };
     }
diff --git a/src/components/button/demoBasicUsage/index.html b/src/components/button/demoBasicUsage/index.html
index 691025f5592..9fdea44990f 100644
--- a/src/components/button/demoBasicUsage/index.html
+++ b/src/components/button/demoBasicUsage/index.html
@@ -4,61 +4,36 @@
 
     <section layout="vertical" layout-sm="horizontal" layout-align="center center">
       <md-button>Button</md-button>
-      <md-button noink class="md-button-colored">Button (noink)</md-button>
-      <md-button disabled class="md-button-colored">Disabled</md-button>
+      <md-button noink class="md-primary">Primary (noink)</md-button>
+      <md-button disabled class="md-primary">Disabled</md-button>
+      <md-button class="md-warn">Warn</md-button>
       <div class="label">flat</div>
     </section>
 
     <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-      <md-button class="md-button-raised">Button</md-button>
-      <md-button class="md-button-raised md-button-colored">Colored</md-button>
-      <md-button disabled class="md-button-raised md-button-colored">Disabled</md-button>
+      <md-button class="md-raised">Button</md-button>
+      <md-button class="md-raised md-primary">Primary</md-button>
+      <md-button disabled class="md-raised md-primary">Disabled</md-button>
+      <md-button class="md-raised md-warn">Warn</md-button>
       <div class="label">raised</div>
     </section>
 
     <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-      <md-button>Button</md-button>
-      <md-button class="md-button-colored">Colored</md-button>
-      <div class="label">flat + hover state</div>
-    </section>
-
-    <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-      <md-button class="md-button-raised">Button</md-button>
-      <md-button class="md-button-raised md-button-colored">Colored</md-button>
-      <div class="label">raised + hover state</div>
-    </section>
-
-    <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-      <md-button>Button</md-button>
-      <md-button class="md-button-colored">Colored</md-button>
-      <div class="label">flat + focused</div>
-    </section>
-
-    <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-      <md-button class="md-button-raised">Button</md-button>
-      <md-button class="md-button-raised md-button-colored">Colored</md-button>
-      <div class="label">raised + focused</div>
-    </section>
-
-    <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-
-        <md-button class="md-button-fab" aria-label="Time">
+        <md-button class="md-fab" aria-label="Time">
             <md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
         </md-button>
 
-      <md-button class="md-button-fab" aria-label="New document">
+      <md-button class="md-fab" aria-label="New document">
         <md-icon icon="/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
       </md-button>
 
-        <md-button class="md-button-fab" disabled aria-label="Comment">
+        <md-button class="md-fab" disabled arial-label="Comment">
             <md-icon icon="/img/icons/ic_comment_24px.svg" style="width: 24px; height: 24px;"></md-icon>
         </md-button>
 
-        <md-button class="md-button-fab md-theme-light-blue" aria-label="Profile">
+        <md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
             <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
         </md-button>
-
-
       <div class="label">FAB</div>
     </section>
 
@@ -69,10 +44,10 @@
     </section>
 
     <section layout="vertical" layout-sm="horizontal" layout-align="center center">
-      <md-button class="md-theme-green">Button</md-button>
-      <md-button class="md-theme-red">Button</md-button>
-      <md-button class="md-theme-light-blue">Button</md-button>
-      <md-button class="md-theme-yellow">Button</md-button>
+      <md-button class="md-primary" md-theme="green">Button</md-button>
+      <md-button class="md-primary md-raised" md-theme="indigo">Button</md-button>
+      <md-button class="md-primary md-raised" md-theme="orange">Button</md-button>
+      <md-button class="md-primary" md-theme="cyan">Button</md-button>
       <div class="label">Themed</div>
     </section>
 
diff --git a/src/components/button/demoBasicUsage/style.css b/src/components/button/demoBasicUsage/style.css
index cb051d376e4..665fdd1a5e6 100644
--- a/src/components/button/demoBasicUsage/style.css
+++ b/src/components/button/demoBasicUsage/style.css
@@ -12,7 +12,7 @@ section {
 md-content {
   margin-right: 7px;
 }
-section md-button:not(.md-button-fab) {
+section md-button:not(.md-fab) {
   width: 10em;
 }
 section md-button {
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 323f6c34c2f..0731094cbcf 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -1,3 +1,7 @@
+$card-padding: 8px;
+$card-margin: 8px;
+$card-box-shadow: $whiteframe-shadow-z1;
+
 md-card {
   display: block;
   box-sizing: border-box;
@@ -5,12 +9,9 @@ md-card {
   box-shadow: $card-box-shadow;
   margin: $card-margin;
   padding: $card-padding;
-  border-radius: $card-border-radius;
 
   .md-card-image {
     display: block;
     width: 100%;
-    border-radius: $card-border-radius $card-border-radius 0 0;
   }
-
 }
diff --git a/src/components/card/card-theme.scss b/src/components/card/card-theme.scss
new file mode 100644
index 00000000000..04820cc8442
--- /dev/null
+++ b/src/components/card/card-theme.scss
@@ -0,0 +1,9 @@
+$card-border-radius: 2px !default;
+
+md-card.md-#{$theme-name}-theme {
+  border-radius: $card-border-radius;
+
+  .md-card-image {
+    border-radius: $card-border-radius $card-border-radius 0 0;
+  }
+}
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
index 9c191e1ede9..52200c4075b 100644
--- a/src/components/checkbox/_checkbox.scss
+++ b/src/components/checkbox/_checkbox.scss
@@ -1,3 +1,5 @@
+$checkbox-width: 18px;
+$checkbox-height: $checkbox-width;
 
 md-checkbox {
   display: block;
@@ -21,14 +23,6 @@ md-checkbox {
       left: -$checkbox-width;
       top: -$checkbox-width;
     }
-    .md-ripple {
-      color: #0f9d58;
-    }
-
-  }
-
-  &.md-checked .md-ripple {
-    color: #5a5f5a;
   }
 
   .circle {
@@ -43,26 +37,17 @@ md-checkbox {
     left: 0;
     width: $checkbox-width;
     height: $checkbox-height;
-    border: 2px solid $input-border-color;
+    border: 2px solid;
     border-radius: 2px;
   }
 
-  // checked
   &.md-checked .md-icon {
-    border-color: #4CAF50;
-    background: #4CAF50;
+    border: none;
   }
 
   // disabled
   &[disabled] {
     cursor: no-drop;
-
-    .md-icon {
-      border-color: $input-disabled-border-color;
-    }
-    &.md-checked .md-icon {
-      background: $input-disabled-border-color;
-    }
   }
 
   // focus
@@ -70,14 +55,16 @@ md-checkbox {
     border-color: black;
   }
 
+
   &.md-checked .md-icon:after {
     transform: rotate(45deg);
     position: absolute;
-    left: 4px;
+    left: 6px;
+    top: 2px;
     display: table;
     width: 6px;
     height: 12px;
-    border: 2px solid $color-grey-200;
+    border: 2px solid;
     border-top: 0;
     border-left: 0;
     content: ' ';
diff --git a/src/components/checkbox/checkbox-theme.scss b/src/components/checkbox/checkbox-theme.scss
new file mode 100644
index 00000000000..4bf5cc28acf
--- /dev/null
+++ b/src/components/checkbox/checkbox-theme.scss
@@ -0,0 +1,40 @@
+$checkbox-color-palette: $color-green !default;
+$checkbox-checked-background-color: rgba(map-get($checkbox-color-palette, '400'), 0.87) !default;
+$checkbox-checked-color: map-get($foreground-color-palette, '200') !default;
+$checkbox-ripple-color: map-get($checkbox-color-palette, '600') !default;
+$checkbox-checked-ripple-color: map-get($color-grey, '600') !default;
+$checkbox-border-color: $input-border-color !default;
+$checkbox-disabled-border-color: $input-disabled-border-color !default;
+
+md-checkbox.md-#{$theme-name}-theme {
+
+  .md-ripple {
+    color: $checkbox-ripple-color;
+  }
+
+  &.md-checked .md-ripple {
+    color: $checkbox-checked-ripple-color;
+  }
+
+  .md-icon {
+    border-color: $checkbox-border-color;
+  }
+
+  &.md-checked .md-icon {
+    background-color: $checkbox-checked-background-color;
+  }
+
+  &.md-checked .md-icon:after {
+    border-color: $checkbox-checked-color;
+  }
+
+  &[disabled] {
+    .md-icon {
+      border-color: $checkbox-disabled-border-color;
+    }
+
+    &.md-checked .md-icon {
+      background-color: $checkbox-disabled-border-color;
+    }
+  }
+}
diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
index 96009fc1460..77a0b4f6e30 100644
--- a/src/components/checkbox/checkbox.js
+++ b/src/components/checkbox/checkbox.js
@@ -6,6 +6,7 @@
 angular.module('material.components.checkbox', [
   'material.core',
   'material.animations',
+  'material.services.theming',
   'material.services.aria'
 ])
   .directive('mdCheckbox', [ 
@@ -13,6 +14,7 @@ angular.module('material.components.checkbox', [
     '$mdInkRipple',
     '$mdAria',
     '$mdConstant',
+    '$mdTheming',
     MdCheckboxDirective
   ]);
 
@@ -51,7 +53,7 @@ angular.module('material.components.checkbox', [
  * </hljs>
  *
  */
-function MdCheckboxDirective(inputDirectives, $mdInkRipple, $mdAria, $mdConstant) {
+function MdCheckboxDirective(inputDirectives, $mdInkRipple, $mdAria, $mdConstant, $mdTheming) {
   var inputDirective = inputDirectives[0];
 
   var CHECKED_CSS = 'md-checked';
@@ -80,6 +82,7 @@ function MdCheckboxDirective(inputDirectives, $mdInkRipple, $mdAria, $mdConstant
 
     return function postLink(scope, element, attr, ngModelCtrl) {
       var checked = false;
+      $mdTheming(element);
 
       // Create a mock ngModel if the user doesn't provide one
       ngModelCtrl = ngModelCtrl || {
diff --git a/src/components/content/content-theme.scss b/src/components/content/content-theme.scss
new file mode 100644
index 00000000000..95f03fbd372
--- /dev/null
+++ b/src/components/content/content-theme.scss
@@ -0,0 +1,5 @@
+$content-background-color: $background-color-base !default;
+
+md-content.md-#{$theme-name}-theme {
+  background-color: $content-background-color;
+}
diff --git a/src/components/content/content.js b/src/components/content/content.js
index 29c8318143f..f8ae98b20d6 100644
--- a/src/components/content/content.js
+++ b/src/components/content/content.js
@@ -6,9 +6,11 @@
  * Scrollable content
  */
 angular.module('material.components.content', [
+  'material.services.theming',
   'material.services.registry'
 ])
   .directive('mdContent', [
+    '$mdTheming',
     mdContentDirective
   ]);
 
@@ -30,11 +32,12 @@ angular.module('material.components.content', [
  * </hljs>
  *
  */
-function mdContentDirective() {
+function mdContentDirective($mdTheming) {
   return {
     restrict: 'E',
     controller: ['$scope', '$element', ContentController],
     link: function($scope, $element, $attr) {
+      $mdTheming($element);
       $scope.$broadcast('$mdContentLoaded', $element);
     }
   };
diff --git a/src/components/content/demoBasicUsage/index.html b/src/components/content/demoBasicUsage/index.html
index 28def39b8b9..87b4e8ef56d 100644
--- a/src/components/content/demoBasicUsage/index.html
+++ b/src/components/content/demoBasicUsage/index.html
@@ -1,8 +1,8 @@
 
 <div ng-controller="AppCtrl" layout="vertical" style="padding-bottom: 15px;">
-  <md-toolbar class="md-theme-dark">
+  <md-toolbar md-theme="indigo">
     <div class="md-toolbar-tools">
-      <span class="md-flex">Toolbar: dark-theme</span>
+      <span class="md-flex">Toolbar: indigo-theme</span>
     </div>
   </md-toolbar>
 
diff --git a/src/components/dialog/_dialog.scss b/src/components/dialog/_dialog.scss
index 6d0a208db33..1579520e22d 100644
--- a/src/components/dialog/_dialog.scss
+++ b/src/components/dialog/_dialog.scss
@@ -29,8 +29,6 @@ md-dialog {
   margin: auto;
   position: relative;
 
-  background-color: #fff;
-  border-radius: 4px;
 
   box-shadow: $whiteframe-shadow-z5;
 
@@ -42,6 +40,10 @@ md-dialog {
     padding: 24px;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+
+    *:first-child {
+      margin-top: 0px;
+    }
   }
 
   .dialog-actions {
@@ -58,7 +60,7 @@ md-dialog {
     }
   }
   &.dialog-content-overflow .dialog-actions {
-    border-top: 1px solid #eee;
+    border-top: 1px solid;
   }
 
 }
diff --git a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html
index d5824ac6511..c06f3c42a5b 100644
--- a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html
+++ b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html
@@ -1,12 +1,13 @@
-<md-dialog aria-label="Bluth's Original Frozen Banana Stand">
+<md-dialog aria-label="Suspect app">
   <div class="dialog-content">
-    <div>A banana is an edible fruit produced by several kinds of large herbaceous flowering plants in the genus Musa. (In some countries, bananas used for cooking may be called plantains.) The fruit is variable in size, color and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind which may be green, yellow, red, purple, or brown when ripe. The fruits grow in clusters hanging from the top of the plant. Almost all modern edible parthenocarpic (seedless) bananas come from two wild species - acuminata and Musa balbisiana. The scientific names of most cultivated bananas are Musa acuminata + Musa balbisiana, and Musa + paradisiaca for the hybrid Musa acuminata balbisiana, depending on their genomic constitution. The old scientific name Musa sapientum is no longer used.
-    </div>
-
-      <p>Musa species are native to tropical Indomalaya and Australia, and are likely to have been first domesticated in Papua New Guinea. They are grown in at least 107 countries, primarily for their fruit, and to a lesser extent to make fiber, banana wine and banana beer and as ornamental plants.</p>
+    <h2>Permissions</h2>
+    <p>This app wants every permission you can offer, plus more. It's likely doing something fishy, like beaming your contact info to aliens.</p>
   </div>
   <div class="dialog-actions" layout="horizontal" layout-align="end">
-    <md-button ng-click="hide()">
+    <md-button ng-click="cancel()">
+      Cancel
+    </md-button>
+    <md-button class="md-primary" ng-click="hide()">
       Okay
     </md-button>
   </div>
diff --git a/src/components/dialog/demoBasicUsage/dialog2.tmpl.html b/src/components/dialog/demoBasicUsage/dialog2.tmpl.html
index 9e87caccd55..e31f57a1758 100644
--- a/src/components/dialog/demoBasicUsage/dialog2.tmpl.html
+++ b/src/components/dialog/demoBasicUsage/dialog2.tmpl.html
@@ -17,16 +17,16 @@
   </md-content>
 
   <div class="dialog-actions">
-    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" class="md-button-colored" hide show-md>
+    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" hide show-md>
       More on Wikipedia
     </md-button>
     <span flex></span>
-    <md-button ng-click="answer('useful')" class="md-theme-green">
-      Useful
-    </md-button>
-    <md-button ng-click="answer('not useful')" class="md-theme-red">
+    <md-button ng-click="answer('not useful')">
      Not Useful
     </md-button>
+    <md-button ng-click="answer('useful')" class="md-primary">
+      Useful
+    </md-button>
   </div>
 
 </md-dialog>
diff --git a/src/components/dialog/demoBasicUsage/index.html b/src/components/dialog/demoBasicUsage/index.html
index 246ef18bc9d..8b3022223ad 100644
--- a/src/components/dialog/demoBasicUsage/index.html
+++ b/src/components/dialog/demoBasicUsage/index.html
@@ -4,11 +4,11 @@
   </p>
 
   <div layout="vertical" layout-sm="horizontal" layout-align="center" >
-    <md-button class="md-button-colored" ng-click="dialogBasic($event)">
+    <md-button class="md-primary" ng-click="dialogBasic($event)">
       Simple Dialog
     </md-button>
     <div class="gap"></div>
-    <md-button class="md-button-colored" ng-click="dialogAdvanced($event)">
+    <md-button class="md-primary" ng-click="dialogAdvanced($event)">
       Complex Dialog
     </md-button>
   </div>
diff --git a/src/components/dialog/demoBasicUsage/script.js b/src/components/dialog/demoBasicUsage/script.js
index c6c58f48a48..cbbab8c88b0 100644
--- a/src/components/dialog/demoBasicUsage/script.js
+++ b/src/components/dialog/demoBasicUsage/script.js
@@ -33,6 +33,10 @@ function DialogController($scope, $mdDialog) {
     $mdDialog.hide();
   };
 
+  $scope.cancel = function() {
+    $mdDialog.cancel();
+  };
+
   $scope.answer = function(answer) {
     $mdDialog.hide(answer);
   };
diff --git a/src/components/dialog/dialog-theme.scss b/src/components/dialog/dialog-theme.scss
new file mode 100644
index 00000000000..6eb4b61d01d
--- /dev/null
+++ b/src/components/dialog/dialog-theme.scss
@@ -0,0 +1,14 @@
+$dialog-border-radius: 4px !default;
+$dialog-color-palette: $background-color-palette !default;
+$dialog-background-color: map-get($dialog-color-palette, 'A100') !default;
+$dialog-border-color: rgba(map-get($dialog-color-palette, '1000'), 0.12) !default;
+
+md-dialog.md-#{$theme-name}-theme {
+  border-radius: $dialog-border-radius;
+  background-color: $dialog-background-color;
+
+  &.dialog-content-overflow .dialog-actions {
+    border-top-color: $dialog-border-color;
+  }
+}
+
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index 078b4f0c4ce..3f83b3e0fbe 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -8,14 +8,17 @@ angular.module('material.components.dialog', [
   'material.services.compiler',
   'material.services.aria',
   'material.services.interimElement',
+  'material.services.theming',
 ])
   .directive('mdDialog', [
     '$$rAF',
+    '$mdTheming',
     MdDialogDirective
   ])
   .factory('$mdDialog', [
     '$timeout',
     '$rootElement',
+    '$compile',
     '$mdEffects',
     '$animate',
     '$mdAria',
@@ -25,10 +28,11 @@ angular.module('material.components.dialog', [
     MdDialogService
   ]);
 
-function MdDialogDirective($$rAF) {
+function MdDialogDirective($$rAF, $mdTheming) {
   return {
     restrict: 'E',
     link: function(scope, element, attr) {
+      $mdTheming(element);
       $$rAF(function() {
         var content = element[0].querySelector('.dialog-content');
         if (content && content.scrollHeight > content.clientHeight) {
@@ -149,7 +153,7 @@ function MdDialogDirective($$rAF) {
  *
  */
 
-function MdDialogService($timeout, $rootElement, $mdEffects, $animate, $mdAria, $$interimElement, $mdUtil, $mdConstant) {
+function MdDialogService($timeout, $rootElement, $compile, $mdEffects, $animate, $mdAria, $$interimElement, $mdUtil, $mdConstant) {
 
   var $dialogService;
   return $dialogService = $$interimElement({
@@ -175,7 +179,7 @@ function MdDialogService($timeout, $rootElement, $mdEffects, $animate, $mdAria,
     configureAria(element.find('md-dialog'));
 
     if (options.hasBackdrop) {
-      var backdrop = angular.element('<md-backdrop class="opaque ng-enter">');
+      var backdrop = $compile('<md-backdrop class="opaque ng-enter">')(scope);
       $animate.enter(backdrop, options.parent, null);
       options.backdrop = backdrop;
     }
diff --git a/src/components/divider/_divider.scss b/src/components/divider/_divider.scss
index 6da81944ac9..99d2c84a5bf 100644
--- a/src/components/divider/_divider.scss
+++ b/src/components/divider/_divider.scss
@@ -1,6 +1,6 @@
 md-divider {
   display: block;
-  border-top: 1px solid $color-divider;
+  border-top: 1px solid;
   margin: 0;
 
   &[inset] {
diff --git a/src/components/divider/divider-theme.scss b/src/components/divider/divider-theme.scss
new file mode 100644
index 00000000000..061d6fcfd3e
--- /dev/null
+++ b/src/components/divider/divider-theme.scss
@@ -0,0 +1,5 @@
+$divider-color: $foreground-quarternary-color !default;
+
+md-divider.md-#{$theme-name}-theme {
+  border-top-color: $divider-color;
+}
diff --git a/src/components/divider/divider.js b/src/components/divider/divider.js
index 881ded031b4..f9e6a391326 100644
--- a/src/components/divider/divider.js
+++ b/src/components/divider/divider.js
@@ -5,9 +5,13 @@
  */
 angular.module('material.components.divider', [
   'material.animations',
-  'material.services.aria'
+  'material.services.aria',
+  'material.services.theming'
 ])
-  .directive('mdDivider', MdDividerDirective);
+.directive('mdDivider', [
+  '$mdTheming',
+  MdDividerDirective
+]);
 
 function MdDividerController(){}
 
@@ -29,9 +33,10 @@ function MdDividerController(){}
  * </hljs>
  *
  */
-function MdDividerDirective() {
+function MdDividerDirective($mdTheming) {
   return {
     restrict: 'E',
+    link: $mdTheming,
     controller: [MdDividerController]
   };
 }
diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
index 624f0838a7f..1f74323390d 100644
--- a/src/components/list/_list.scss
+++ b/src/components/list/_list.scss
@@ -1,3 +1,22 @@
+$list-h3-font-size: 1.1em;
+$list-h3-margin: 0 0 3px 0;
+$list-h3-font-weight: 400;
+$list-h4-font-size: 0.9em;
+$list-h4-font-weight: 400;
+$list-h4-margin: 0 0 3px 0;
+$list-p-font-size: 0.75em;
+$list-p-margin: 0 0 3px 0;
+
+$list-padding-top: $baseline-grid;
+$list-padding-right: 0px;
+$list-padding-left: 0px;
+$list-padding-bottom: $baseline-grid;
+
+$item-padding-top: 0px;
+$item-padding-right: 0px;
+$item-padding-left: 0px;
+$item-padding-bottom: 0px;
+
 md-list {
   padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
 
diff --git a/src/components/progressCircular/_progressCircular.scss b/src/components/progressCircular/_progressCircular.scss
index f9e51d1b303..18bf8cb0533 100644
--- a/src/components/progressCircular/_progressCircular.scss
+++ b/src/components/progressCircular/_progressCircular.scss
@@ -1,30 +1,25 @@
-$circle-size:48px;
-$circle-background:transparent;
-$circle-color:$color-blue-500;
-$inset-size:36px;
-$inset-color:white;
-$transition-length:.3s;
-$shadow:6px 6px 10px rgba(0, 0, 0, 0.2);
+$progress-circle-size:48px;
+$progress-circle-inset-size:36px;
+$progress-circle-transition-length:.3s;
 
 md-progress-circular {
   display: block;
-  width: $circle-size + 6;
-  height: $circle-size + 6;
-  background-color: $circle-background;
+  width: $progress-circle-size + 6;
+  height: $progress-circle-size + 6;
   border-radius: 50%;
   padding: 3px;
 
   .wrapper1, .wrapper2 {
-    width: $circle-size;
-    height: $circle-size;
+    width: $progress-circle-size;
+    height: $progress-circle-size;
     position: absolute;
     border-radius: 50%;
   }
 
   .circle {
     .mask, .fill, .shadow {
-      width: $circle-size;
-      height: $circle-size;
+      width: $progress-circle-size;
+      height: $progress-circle-size;
       position: absolute;
       border-radius: 50%;
     }
@@ -33,25 +28,23 @@ md-progress-circular {
 
     .mask, .fill {
       backface-visibility: hidden;
-      transition: transform $transition-length;
+      transition: transform $progress-circle-transition-length;
     }
 
     .mask {
-      clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
+      clip: rect(0px, $progress-circle-size, $progress-circle-size, $progress-circle-size/2);
       .fill {
-        clip: rect(0px, $circle-size/2, $circle-size, 0px);
-        background-color: $circle-color;
+        clip: rect(0px, $progress-circle-size/2, $progress-circle-size, 0px);
       }
     }
   }
 
   .inset {
-    width: $inset-size;
-    height: $inset-size;
+    width: $progress-circle-inset-size;
+    height: $progress-circle-inset-size;
     position: absolute;
-    margin-left: ($circle-size - $inset-size)/2;
-    margin-top: ($circle-size - $inset-size)/2;
-    background-color: $inset-color;
+    margin-left: ($progress-circle-size - $progress-circle-inset-size)/2;
+    margin-top: ($progress-circle-size - $progress-circle-inset-size)/2;
     border-radius: 50%;
   }
 
diff --git a/src/components/progressCircular/demoBasicUsage/index.html b/src/components/progressCircular/demoBasicUsage/index.html
index 6856d065157..64912590de3 100644
--- a/src/components/progressCircular/demoBasicUsage/index.html
+++ b/src/components/progressCircular/demoBasicUsage/index.html
@@ -1,11 +1,26 @@
 <div ng-controller="AppCtrl" layout="vertical" layout-padding style="padding:25px;">
 
     <h4 style="margin-top:10px">Determinate</h4>
-    For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.
-    <md-progress-circular mode="determinate" value="{{determinateValue}}"></md-progress-circular>
+    <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
+    <div layout="vertical" layout-sm="horizontal" layout-align="space-around">
+      <md-progress-circular mode="determinate" value="{{determinateValue}}"></md-progress-circular>
+    </div>
 
     <h4>Indeterminate</h4>
-    For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
-    <md-progress-circular mode="indeterminate"></md-progress-circular>
+    <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
+    <div layout="vertical" layout-sm="horizontal" layout-align="space-around">
+      <md-progress-circular mode="indeterminate"></md-progress-circular>
+    </div>
+
+    <h4>Theming</h4>
+
+    <div layout="vertical" layout-sm="horizontal" layout-align="space-around">
+      <md-progress-circular md-theme="red" mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="lime" mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="orange" mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="light-green" mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="blue" mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="purple" mode="indeterminate"></md-progress-circular>
+    </div>
 
 </div>
diff --git a/src/components/progressCircular/progressCircular-theme.scss b/src/components/progressCircular/progressCircular-theme.scss
new file mode 100644
index 00000000000..5fafe381978
--- /dev/null
+++ b/src/components/progressCircular/progressCircular-theme.scss
@@ -0,0 +1,14 @@
+$progress-circle-background: transparent !default;
+$progress-circle-color: map-get($primary-color-palette, '500') !default;
+$progress-circle-inset-color: $background-color-base !default;
+
+md-progress-circular.md-#{$theme-name}-theme {
+  background-color: $progress-circle-background;
+  .circle .mask .fill {
+    background-color: $progress-circle-color;
+  }
+
+  .inset {
+    background-color: $progress-circle-inset-color;
+  }
+}
diff --git a/src/components/progressCircular/progressCircular.js b/src/components/progressCircular/progressCircular.js
index b875c09d232..da997338314 100644
--- a/src/components/progressCircular/progressCircular.js
+++ b/src/components/progressCircular/progressCircular.js
@@ -5,11 +5,13 @@
  */
 angular.module('material.components.progressCircular', [
   'material.animations',
-  'material.services.aria'
+  'material.services.aria',
+  'material.services.theming',
 ])
   .directive('mdProgressCircular', [
     '$$rAF',
     '$mdEffects',
+    '$mdTheming',
     MdProgressCircularDirective
   ]);
 
@@ -41,7 +43,7 @@ angular.module('material.components.progressCircular', [
  * <md-progress-circular mode="indeterminate"></md-progress-circular>
  * </hljs>
  */
-function MdProgressCircularDirective($$rAF, $mdEffects) {
+function MdProgressCircularDirective($$rAF, $mdEffects, $mdTheming) {
   var fillRotations = new Array(101),
     fixRotations = new Array(101);
 
@@ -79,6 +81,7 @@ function MdProgressCircularDirective($$rAF, $mdEffects) {
   }
 
   function postLink(scope, element, attr) {
+    $mdTheming(element);
     var circle = element[0],
       fill = circle.querySelectorAll('.fill, .mask.full'),
       fix = circle.querySelectorAll('.fill.fix'),
diff --git a/src/components/progressLinear/_progressLinear.scss b/src/components/progressLinear/_progressLinear.scss
index b98091112ec..0964a1d5485 100644
--- a/src/components/progressLinear/_progressLinear.scss
+++ b/src/components/progressLinear/_progressLinear.scss
@@ -1,16 +1,15 @@
-$bar-height:5px;
+$progress-linear-bar-height:5px;
 
  md-progress-linear {
   display: block;
   width: 100%;
-  height: $bar-height;
+  height: $progress-linear-bar-height;
 
   .container {
     overflow: hidden;
     position: relative;
-    height: $bar-height;
-    background-color: $color-blue-100;
-    top: $bar-height;
+    height: $progress-linear-bar-height;
+    top: $progress-linear-bar-height;
     transform: translate(0, 5px) scale(1, 0);
     transition: all .3s linear;
   }
@@ -20,8 +19,7 @@ $bar-height:5px;
   }
 
   .bar {
-    height: $bar-height;
-    background-color: $color-blue-500;
+    height: $progress-linear-bar-height;
     position: absolute;
     width: 100%;
   }
@@ -48,26 +46,21 @@ $bar-height:5px;
 
   &[mode=buffer] {
     .container {
-      background-color: transparent;
+      background-color: transparent !important;
     }
 
     .dashed:before {
       content: "";
       display: block;
-      height: $bar-height;
+      height: $progress-linear-bar-height;
       width: 100%;
       margin-top: 0px;
       position: absolute;
-      background: radial-gradient(#d0d9ff 0%, #d0d9ff 16%, transparent 42%);
       background-color: transparent;
-      background-size: 10px 10px;
+      background-size: 10px 10px !important;
       background-position: 0px -23px;
       animation: buffer 3s infinite linear;
     }
-
-    .bar1 {
-      background-color: $color-blue-100;
-    }
   }
 
   &[mode=query] {
diff --git a/src/components/progressLinear/demoBasicUsage/index.html b/src/components/progressLinear/demoBasicUsage/index.html
index 78ebb4cb52c..bb6c77ed280 100644
--- a/src/components/progressLinear/demoBasicUsage/index.html
+++ b/src/components/progressLinear/demoBasicUsage/index.html
@@ -1,11 +1,11 @@
 <div ng-controller="AppCtrl" layout="vertical" layout-padding style="padding:25px;">
 
   <h4 style="margin-top:0px">Determinate</h4>
-  For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.
+  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
   <md-progress-linear mode="determinate" ng-value="determinateValue" ></md-progress-linear>
 
   <h4>Indeterminate</h4>
-  For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
+  <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
   <md-progress-linear mode="indeterminate"></md-progress-linear>
 
   <h4>Buffer</h4>
@@ -14,4 +14,12 @@ <h4>Buffer</h4>
   <h4>Query Indeterminate and Determinate</h4>
   <md-progress-linear mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
 
+  <h4>Themes</h4>
+  <md-progress-linear md-theme="red" mode="determinate" ng-value="determinateValue" ></md-progress-linear>
+  <md-progress-linear md-theme="deep-orange" mode="buffer" value="{{determinateValue}}" secondaryValue="{{determinateValue2}}"></md-progress-linear>
+  <md-progress-linear md-theme="yellow" mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
+  <md-progress-linear md-theme="green" mode="determinate" ng-value="determinateValue" ></md-progress-linear>
+  <md-progress-linear md-theme="blue" mode="buffer" value="{{determinateValue}}" secondaryValue="{{determinateValue2}}"></md-progress-linear>
+  <md-progress-linear md-theme="indigo" mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
+
 </div>
diff --git a/src/components/progressLinear/progressLinear-theme.scss b/src/components/progressLinear/progressLinear-theme.scss
new file mode 100644
index 00000000000..907607a5d40
--- /dev/null
+++ b/src/components/progressLinear/progressLinear-theme.scss
@@ -0,0 +1,22 @@
+$progress-linear-color-palette: $primary-color-palette !default;
+$progress-linear-color: map-get($progress-linear-color-palette, '500') !default;
+$progress-linear-alt-color: map-get($progress-linear-color-palette, '100') !default;
+
+md-progress-linear.md-#{$theme-name}-theme {
+  .container {
+    background-color: $progress-linear-alt-color;
+  }
+
+  .bar {
+    background-color: $progress-linear-color;
+  }
+
+  &[mode=buffer] {
+    .dashed:before {
+      background: radial-gradient($progress-linear-alt-color 0%, $progress-linear-alt-color 16%, transparent 42%);
+    }
+    .bar1 {
+      background-color: $progress-linear-alt-color;
+    }
+  }
+}
diff --git a/src/components/progressLinear/progressLinear.js b/src/components/progressLinear/progressLinear.js
index 5b924da1628..aad24c66ec7 100644
--- a/src/components/progressLinear/progressLinear.js
+++ b/src/components/progressLinear/progressLinear.js
@@ -5,11 +5,13 @@
  */
 angular.module('material.components.progressLinear', [
   'material.animations',
+  'material.services.theming',
   'material.services.aria'
 ])
 .directive('mdProgressLinear', [
   '$$rAF', 
   '$mdEffects',
+  '$mdTheming',
   MdProgressLinearDirective
 ]);
 
@@ -43,7 +45,7 @@ angular.module('material.components.progressLinear', [
  * <md-progress-linear mode="query"></md-progress-linear>
  * </hljs>
  */
-function MdProgressLinearDirective($$rAF, $mdEffects) {
+function MdProgressLinearDirective($$rAF, $mdEffects, $mdTheming) {
 
   return {
     restrict: 'E',
@@ -63,6 +65,7 @@ function MdProgressLinearDirective($$rAF, $mdEffects) {
     return postLink;
   }
   function postLink(scope, element, attr) {
+    $mdTheming(element);
     var bar1Style = element[0].querySelector('.bar1').style,
       bar2Style = element[0].querySelector('.bar2').style,
       container = angular.element(element[0].querySelector('.container'));
diff --git a/src/components/radioButton/_radio-button.scss b/src/components/radioButton/_radio-button.scss
index 767c0f44118..4a0775089c6 100644
--- a/src/components/radioButton/_radio-button.scss
+++ b/src/components/radioButton/_radio-button.scss
@@ -1,3 +1,5 @@
+$radio-width: 16px;
+$radio-height: $radio-width;
 
 md-radio-button,
 .md-switch-thumb { // Used in switch
@@ -26,9 +28,6 @@ md-radio-button,
       left: -$radio-width;
       top: -$radio-width;
     }
-    .md-ripple {
-      color: #0f9d58;
-    }
   }
 
 
@@ -39,8 +38,8 @@ md-radio-button,
     width: $radio-width;
     height: $radio-width;
     border: solid 2px;
-    border-color: #5a5a5a;
     border-radius: 50%;
+    transition: border-color ease 0.28s;
   }
 
   .md-on {
@@ -50,17 +49,12 @@ md-radio-button,
     width: $radio-width;
     height: $radio-width;
     border-radius: 50%;
-    background-color: #0f9d58;
     transition: transform ease 0.28s;
     transform: scale(0);
   }
 
   &.md-checked .md-on {
-    transform: scale(1.1);
-  }
-
-  &.md-checked .md-ink-ripple {
-    color: #119957;
+    transform: scale(0.55);
   }
 
   .md-label {
@@ -82,8 +76,4 @@ md-radio-group {
   border: 1px dotted transparent;
   display: block;
   outline: none;
-
-  &:focus {
-    border-color: $input-focused-border-color;
-  }
 }
diff --git a/src/components/radioButton/radio-button-theme.scss b/src/components/radioButton/radio-button-theme.scss
new file mode 100644
index 00000000000..40e580e2e93
--- /dev/null
+++ b/src/components/radioButton/radio-button-theme.scss
@@ -0,0 +1,33 @@
+$radio-color-palette: $color-green !default;
+$radio-on-background-color: rgba(map-get($radio-color-palette, '400'), 0.87) !default;
+$radio-ripple-color: map-get($radio-color-palette, '600') !default;
+$radio-off-border-color: $foreground-secondary-color !default;
+$radio-group-focus-border-color: $foreground-primary-color !default;
+
+md-radio-button.md-#{$theme-name}-theme,
+md-switch.md-#{$theme-name}-theme .md-switch-thumb {
+  .md-container .md-ripple {
+    color: $radio-ripple-color;
+  }
+
+  .md-off {
+    border-color: $radio-off-border-color;
+  }
+
+
+  .md-on {
+    background-color: $radio-on-background-color;
+  }
+
+  &.md-checked .md-off {
+    border-color: $radio-on-background-color;
+  }
+
+  &.md-checked .md-ink-ripple {
+    color: $radio-on-background-color;
+  }
+}
+
+md-radio-group.md-#{$theme-name}-theme:focus {
+  border-color: $radio-group-focus-border-color;
+}
diff --git a/src/components/radioButton/radioButton.js b/src/components/radioButton/radioButton.js
index dbfd211e35f..e70115f5ab6 100644
--- a/src/components/radioButton/radioButton.js
+++ b/src/components/radioButton/radioButton.js
@@ -7,16 +7,19 @@
 angular.module('material.components.radioButton', [
   'material.core',
   'material.animations',
-  'material.services.aria'
+  'material.services.aria',
+  'material.services.theming'
 ])
   .directive('mdRadioGroup', [
     '$mdUtil',
     '$mdConstant',
+    '$mdTheming',
     mdRadioGroupDirective
   ])
   .directive('mdRadioButton', [
     '$mdAria',
     '$mdUtil',
+    '$mdTheming',
     mdRadioButtonDirective
   ]);
 
@@ -51,7 +54,7 @@ angular.module('material.components.radioButton', [
  * </hljs>
  *
  */
-function mdRadioGroupDirective($mdUtil, $mdConstant) {
+function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
   RadioGroupController.prototype = createRadioGroupControllerProto();
 
   return {
@@ -62,6 +65,7 @@ function mdRadioGroupDirective($mdUtil, $mdConstant) {
   };
 
   function link(scope, element, attr, ctrls) {
+    $mdTheming(element);
     var rgCtrl = ctrls[0],
       ngModelCtrl = ctrls[1] || {
         $setViewValue: angular.noop
@@ -189,7 +193,7 @@ function mdRadioGroupDirective($mdUtil, $mdConstant) {
  * </hljs>
  *
  */
-function mdRadioButtonDirective($mdAria, $mdUtil) {
+function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
 
   var CHECKED_CSS = 'md-checked';
 
@@ -208,6 +212,7 @@ function mdRadioButtonDirective($mdAria, $mdUtil) {
   function link(scope, element, attr, rgCtrl) {
     var lastChecked;
 
+    $mdTheming(element);
     configureAria(element, scope);
 
     rgCtrl.add(render);
diff --git a/src/components/sidenav/_sidenav.scss b/src/components/sidenav/_sidenav.scss
index c2f7d9072a2..7d8cc06c94f 100644
--- a/src/components/sidenav/_sidenav.scss
+++ b/src/components/sidenav/_sidenav.scss
@@ -1,3 +1,5 @@
+$sidenav-default-width: 304px;
+
 md-sidenav {
   position: absolute;
 
diff --git a/src/components/sidenav/demoBasicUsage/index.html b/src/components/sidenav/demoBasicUsage/index.html
index a670c874465..ed5d2f7653f 100644
--- a/src/components/sidenav/demoBasicUsage/index.html
+++ b/src/components/sidenav/demoBasicUsage/index.html
@@ -9,7 +9,7 @@
         <h1 class="md-toolbar-tools">Sidenav Left</h1>
       </md-toolbar>
       <md-content class="md-content-padding" ng-controller="LeftCtrl">
-        <md-button ng-click="close()" class="md-button-colored" hide-md>
+        <md-button ng-click="close()" class="md-primary" hide-md>
           Close Sidenav Left
         </md-button>
         <p hide show-md>
@@ -29,14 +29,14 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
 
         <div>
           <md-button ng-click="toggleLeft()"
-            class="md-button-colored" hide-md>
+            class="md-primary" hide-md>
             Toggle left
           </md-button>
         </div>
 
         <div>
           <md-button ng-click="toggleRight()"
-            class="md-button-colored">
+            class="md-primary">
             Toggle right
           </md-button>
         </div>
@@ -50,7 +50,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
         <h1 class="md-toolbar-tools">Sidenav Right</h1>
       </md-toolbar>
       <md-content ng-controller="RightCtrl" class="md-content-padding">
-        <md-button ng-click="close()" class="md-button-colored">
+        <md-button ng-click="close()" class="md-primary">
           Close Sidenav Right
         </md-button>
       </md-content>
diff --git a/src/components/slider/_slider.scss b/src/components/slider/_slider.scss
index 76bd1790d08..4f07f039a28 100644
--- a/src/components/slider/_slider.scss
+++ b/src/components/slider/_slider.scss
@@ -1,3 +1,26 @@
+$slider-background-color:  rgb(200, 200, 200);
+$slider-height:  48px;
+
+$slider-track-height:  2px;
+$slider-thumb-width:  32px;
+$slider-thumb-height:  $slider-thumb-width;
+
+$slider-thumb-default-scale: 0.5;
+$slider-thumb-hover-scale: 0.6;
+$slider-thumb-focus-scale: 0.85;
+$slider-thumb-disabled-scale: 0.35;
+$slider-thumb-disabled-border: 6px;
+
+$slider-focus-thumb-width:  48px;
+$slider-focus-thumb-height: $slider-focus-thumb-width;
+$slider-focus-ring-border-width: 3px;
+
+$slider-arrow-height: 16px;
+$slider-arrow-width: 28px;
+
+$slider-sign-height: 28px;
+$slider-sign-width: 28px;
+$slider-sign-top: ($slider-height / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 8px;
 
 @keyframes sliderFocusThumb {
   0% {
@@ -44,10 +67,8 @@ md-slider {
     left: 0;
     right: 0;
     height: 100%;
-    background: #C8C8C8;
   }
   .slider-track-fill {
-    background: #03A9F4;
     transition: width 0.05s linear;
   }
   .slider-track-ticks {
@@ -85,8 +106,7 @@ md-slider {
       width: $slider-thumb-width;
       height: $slider-thumb-height;
       border-radius: max($slider-thumb-width, $slider-thumb-height);
-      border: 3px solid $theme-light-blue;
-      background-color: $theme-light-blue;
+      border: 3px solid;
     }
 
     transform: scale($slider-thumb-default-scale);
@@ -107,7 +127,6 @@ md-slider {
     width: $slider-sign-width;
     height: $slider-sign-height;
     border-radius: max($slider-sign-height, $slider-sign-width);
-    background-color: $theme-light-blue;
 
     transform: scale(0.4) translate3d(0,(-$slider-sign-top + 8) / 0.4,0);
     transition: all 0.2s ease-in-out;
@@ -121,7 +140,7 @@ md-slider {
       top: 19px;
       border-left: $slider-arrow-width / 2 solid transparent;
       border-right: $slider-arrow-width / 2 solid transparent;
-      border-top: $slider-arrow-height solid $theme-light-blue;
+      border-top: $slider-arrow-height solid;
 
       opacity: 0;
       transform: translate3d(0,-8px,0);
@@ -130,7 +149,6 @@ md-slider {
 
     .slider-thumb-text {
       z-index: 1;
-      color: white;
       font-size: 12px;
       font-weight: bold;
     }
@@ -159,7 +177,7 @@ md-slider {
       $slider-thumb-height + $slider-thumb-disabled-border * 2
     );
     transform: scale($slider-thumb-disabled-scale);
-    border: $slider-thumb-disabled-border solid white;
+    border: $slider-thumb-disabled-border solid;
     display: none;
   }
 
@@ -238,16 +256,11 @@ md-slider {
     .slider-track-fill {
       display: none;
     }
+    .slider-sign {
+      display: none;
+    }
     .slider-thumb {
       transform: scale($slider-thumb-disabled-scale);
-      &:after {
-        border-color: #BEBEBE;
-      }
-    }
-    &:not(.slider-min) .slider-thumb {
-      &:after {
-        background-color: #BEBEBE;
-      }
     }
     .slider-disabled-thumb {
       display: block;
diff --git a/src/components/slider/demoBasicUsage/index.html b/src/components/slider/demoBasicUsage/index.html
index 9e375a40006..4155339415b 100644
--- a/src/components/slider/demoBasicUsage/index.html
+++ b/src/components/slider/demoBasicUsage/index.html
@@ -10,7 +10,7 @@ <h3>
       <div flex="10" layout layout-align="center center">
         <span>R</span>
       </div>
-      <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
+      <md-slider md-theme="red" flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
       </md-slider>
       <div flex="20" layout layout-align="center center">
         <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
@@ -21,7 +21,7 @@ <h3>
       <div flex="10" layout layout-align="center center">
         <span>G</span>
       </div>
-      <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider">
+      <md-slider md-theme="green" flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider">
       </md-slider>
       <div flex="20" layout layout-align="center center">
         <input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider">
@@ -32,7 +32,7 @@ <h3>
       <div flex="10" layout layout-align="center center">
         <span>B</span>
       </div>
-      <md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider">
+      <md-slider md-theme="blue" flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider">
       </md-slider>
       <div flex="20" layout layout-align="center center">
         <input type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider">
diff --git a/src/components/slider/slider-theme.scss b/src/components/slider/slider-theme.scss
new file mode 100644
index 00000000000..8b63aacfc6b
--- /dev/null
+++ b/src/components/slider/slider-theme.scss
@@ -0,0 +1,61 @@
+$slider-color-palette: $primary-color-palette !default;
+$slider-background-color: $foreground-tertiary-color !default;
+$slider-track-color: map-get($slider-color-palette, '500') !default;
+$slider-thumb-color: map-get($slider-color-palette, '500') !default;
+$slider-sign-color: map-get($slider-color-palette, '500') !default;
+$slider-sign-text-color: $primary-color-palette-contrast-color !default;
+$slider-focus-thumb-color: $foreground-secondary-color !default;
+$slider-focus-ring-color: $foreground-quarternary-color !default;
+$slider-disabled-color: map-get($foreground-color-palette, '400') !default;
+
+md-slider.md-#{$theme-name}-theme {
+  .slider-track {
+    background-color: $slider-background-color;
+  }
+
+  .slider-track-fill {
+    background-color: $slider-track-color;
+  }
+
+  .slider-thumb:after {
+    border-color: $slider-thumb-color;
+    background-color: $slider-thumb-color;
+  }
+
+  .slider-sign {
+    background-color: $slider-sign-color;
+
+    &:after {
+      border-top-color: $slider-sign-color;
+    }
+  }
+
+  .slider-thumb-text {
+    color: $slider-sign-text-color;
+  }
+
+  .slider-focus-thumb {
+    background-color: $slider-focus-thumb-color;
+  }
+
+  .slider-focus-ring {
+    border-color: $slider-focus-ring-color;
+  }
+
+  .slider-disabled-thumb {
+    border-color: $background-color-base;
+  }
+
+  &.slider-min .slider-thumb:after {
+    background-color: $background-color-base;
+  }
+
+  &[disabled] {
+    .slider-thumb:after {
+      border-color: $slider-disabled-color;
+    }
+    &:not(.slider-min) .slider-thumb:after {
+      background-color: $slider-disabled-color;
+    }
+  }
+}
diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js
index 882d96a0c99..a56173de814 100644
--- a/src/components/slider/slider.js
+++ b/src/components/slider/slider.js
@@ -5,9 +5,11 @@
 angular.module('material.components.slider', [
   'material.core',
   'material.animations',
-  'material.services.aria'
+  'material.services.aria',
+  'material.services.theming'
 ])
 .directive('mdSlider', [
+  '$mdTheming',
   SliderDirective
 ]);
 
@@ -45,7 +47,7 @@ angular.module('material.components.slider', [
  * @param {number=} min The minimum value the user is allowed to pick. Default 0.
  * @param {number=} max The maximum value the user is allowed to pick. Default 100.
  */
-function SliderDirective() {
+function SliderDirective($mdTheming) {
   return {
     scope: {},
     require: ['?ngModel', 'mdSlider'],
@@ -80,6 +82,7 @@ function SliderDirective() {
   };
 
   function postLink(scope, element, attr, ctrls) {
+    $mdTheming(element);
     var ngModelCtrl = ctrls[0] || {
       // Mock ngModelController if it doesn't exist to give us
       // the minimum functionality needed
diff --git a/src/components/subheader/_subheader.scss b/src/components/subheader/_subheader.scss
index 8a6a1638ac5..b25d756f564 100644
--- a/src/components/subheader/_subheader.scss
+++ b/src/components/subheader/_subheader.scss
@@ -1,3 +1,11 @@
+$subheader-line-height: 1em;
+$subheader-font-size: 0.9em;
+$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2);
+$subheader-font-weight: 400;
+$subheader-margin: 0 0 0 0;
+$subheader-margin-right: 16px;
+$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16);
+
 @keyframes subheaderStickyHoverIn {
   0% {
     box-shadow: 0 0 0 0 transparent;
@@ -16,7 +24,6 @@
 }
 
 .md-subheader {
-  color: $text-medium;
   display: block;
   font-size: $subheader-font-size;
   font-weight: $subheader-font-weight;
@@ -24,13 +31,8 @@
   padding: $subheader-padding;
   margin: $subheader-margin;
   margin-right: $subheader-margin-right;
-  background-color: white;
   position: relative;
 
-  &.md-subheader-colored {
-    color: $theme-light-blue
-  }
-
   &:not(.sticky-no-effect) {
     &:after {
       position: absolute;
diff --git a/src/components/subheader/demoBasicUsage/index.html b/src/components/subheader/demoBasicUsage/index.html
index df041aff338..98ae9b6b572 100644
--- a/src/components/subheader/demoBasicUsage/index.html
+++ b/src/components/subheader/demoBasicUsage/index.html
@@ -2,7 +2,7 @@
 <div ng-controller="SubheaderAppCtrl" layout="vertical" flex layout-fill>
   <md-content style="height: 600px;">
     <section>
-      <md-subheader class="md-subheader-colored">Unread Messages</md-subheader>
+      <md-subheader class="md-primary">Unread Messages</md-subheader>
       <md-list layout="vertical">
         <md-item ng-repeat="message in messages">
           <md-item-content>
diff --git a/src/components/subheader/subheader-theme.scss b/src/components/subheader/subheader-theme.scss
new file mode 100644
index 00000000000..72e41dc72e8
--- /dev/null
+++ b/src/components/subheader/subheader-theme.scss
@@ -0,0 +1,12 @@
+$subheader-color-palette: $primary-color-palette !default;
+$subheader-text-color: $foreground-secondary-color !default;
+$subheader-primary-text-color: map-get($subheader-color-palette, '500') !default;
+
+.md-subheader.md-#{$theme-name}-theme {
+  color: $subheader-text-color;
+  background-color: $background-color-base;
+
+  &.md-primary {
+    color: $subheader-primary-text-color;
+  }
+}
diff --git a/src/components/subheader/subheader.js b/src/components/subheader/subheader.js
index 2883448de35..4d2d5be0016 100644
--- a/src/components/subheader/subheader.js
+++ b/src/components/subheader/subheader.js
@@ -5,11 +5,13 @@
  * SubHeader module
  */
 angular.module('material.components.subheader', [
-  'material.components.sticky'
+  'material.components.sticky',
+  'material.services.theming'
 ])
 .directive('mdSubheader', [
   '$mdSticky',
   '$compile',
+  '$mdTheming',
   MdSubheaderDirective
 ]);
 
@@ -29,7 +31,7 @@ angular.module('material.components.subheader', [
  * </hljs>
  */
 
-function MdSubheaderDirective($mdSticky, $compile) {
+function MdSubheaderDirective($mdSticky, $compile, $mdTheming) {
   return {
     restrict: 'E',
     replace: true,
@@ -41,6 +43,7 @@ function MdSubheaderDirective($mdSticky, $compile) {
     compile: function(element, attr, transclude) {
       var outerHTML = element[0].outerHTML;
       return function postLink(scope, element, attr) {
+        $mdTheming(element);
         function getContent(el) {
           return angular.element(el[0].querySelector('.md-subheader-content'));
         }
@@ -55,6 +58,7 @@ function MdSubheaderDirective($mdSticky, $compile) {
         // of the element, that will be 'stickied' as the user scrolls.
         transclude(scope, function(clone) {
           var stickyClone = $compile(angular.element(outerHTML))(scope);
+          $mdTheming(stickyClone);
           getContent(stickyClone).append(clone);
           $mdSticky(scope, element, stickyClone);
         });
diff --git a/src/components/switch/_switch.scss b/src/components/switch/_switch.scss
index 852cb60ba3e..674f666819d 100644
--- a/src/components/switch/_switch.scss
+++ b/src/components/switch/_switch.scss
@@ -1,3 +1,5 @@
+$switch-width: $baseline-grid * 8;
+
 md-switch {
   display: block;
   position: relative;
@@ -13,7 +15,6 @@ md-switch {
     top: $baseline-grid * 1.5;
     width: $baseline-grid * 4;
     height: 1px;
-    background-color: #5a5a5a;
     pointer-events: none;
   }
 
@@ -34,9 +35,6 @@ md-switch {
       transform: translate3d($switch-width - 16,0,0);
     }
 
-    &:focus .md-label {
-      border: 1px dotted black;
-    }
     .md-label {
       margin-left: $baseline-grid * 9;
     }
diff --git a/src/components/switch/switch-theme.scss b/src/components/switch/switch-theme.scss
new file mode 100644
index 00000000000..e0f461631c9
--- /dev/null
+++ b/src/components/switch/switch-theme.scss
@@ -0,0 +1,13 @@
+$switch-color: $foreground-secondary-color !default;
+$switch-focus-color: map-get($foreground-color-palette, '1000');
+
+md-switch.md-#{$theme-name}-theme {
+  .md-switch-bar {
+    background-color: $switch-color;
+  }
+  .md-switch-thumb {
+    &:focus .md-label {
+      border: 1px dotted black;
+    }
+  }
+}
diff --git a/src/components/switch/switch.js b/src/components/switch/switch.js
index d2f385e3b99..c9d60e48e6e 100644
--- a/src/components/switch/switch.js
+++ b/src/components/switch/switch.js
@@ -6,12 +6,14 @@
 
 angular.module('material.components.switch', [
   'material.components.checkbox',
-  'material.components.radioButton'
+  'material.components.radioButton',
+  'material.services.theming'
 ])
 
 .directive('mdSwitch', [
   'mdCheckboxDirective',
   'mdRadioButtonDirective',
+  '$mdTheming',
   MdSwitch
 ]);
 
@@ -49,7 +51,7 @@ angular.module('material.components.switch', [
  *
  * </hljs>
  */
-function MdSwitch(checkboxDirectives, radioButtonDirectives) {
+function MdSwitch(checkboxDirectives, radioButtonDirectives, $mdTheming) {
   var checkboxDirective = checkboxDirectives[0];
   var radioButtonDirective = radioButtonDirectives[0];
 
@@ -75,8 +77,9 @@ function MdSwitch(checkboxDirectives, radioButtonDirectives) {
     var link = checkboxDirective.compile(thumb, attr);
 
     return function (scope, element, attr, ngModelCtrl) {
+      $mdTheming(element);
       var thumb = angular.element(element[0].querySelector('.md-switch-thumb'));
-      return link(scope, thumb, attr, ngModelCtrl)
+      return link(scope, thumb, attr, ngModelCtrl);
     };
   }
 }
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index 239ca399567..a15afe68f5e 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -1,3 +1,8 @@
+// Tabs
+$tabs-paginator-width: $baseline-grid * 4 !default;
+$tabs-tab-width: $baseline-grid * 12 !default;
+$tabs-header-height: 48px;
+
 md-tabs {
   display: block;
   width: 100%;
@@ -9,7 +14,6 @@ md-tabs {
   height: $tabs-header-height;
   box-sizing: border-box;
   position: relative;
-  background-color: #4285F4;
 }
 
 .tab-paginator {
@@ -82,10 +86,13 @@ md-tabs[center] .tabs-header:not(.tab-paginating) .tabs-header-items {
 }
 
 md-tabs-ink-bar {
+  position: absolute;
   left: 0;
   bottom: 0;
   box-sizing: border-box;
   transition: all 0.2s linear;
+  height: 2px;
+  margin-top: -2px;
 }
 
 md-tab {
@@ -103,21 +110,14 @@ md-tab {
   min-width: $tabs-tab-width;
   border: 1px dotted transparent;
 
-  color: #9FC1FB;
-  &.active {
-   color: white;
-  }
   &[disabled] {
     pointer-events: none;
-    color: #6a6a6a;
-    opacity: 0.5;
     cursor: default;
   }
 
   @include not-selectable();
 
   &:focus {
-    border-color: $input-focused-border-color;
     outline: none;
   }
 
@@ -129,10 +129,6 @@ md-tab {
     text-overflow: ellipsis;
   }
 
-  .md-ripple-container {
-    color: #ffff85;
-  }
-
 }
 
 shadow {
diff --git a/src/components/tabs/demoDynamicTabs/index.html b/src/components/tabs/demoDynamicTabs/index.html
index 3ceb6c22186..ce194512c57 100644
--- a/src/components/tabs/demoDynamicTabs/index.html
+++ b/src/components/tabs/demoDynamicTabs/index.html
@@ -9,7 +9,7 @@
 
             <div ng-class="tab.style" layout="vertical" layout-fill layout-align="center center">
                 <div flex ng-bind="tab.content" class="tab-text"></div>
-                <md-button class="md-theme-red btnRemove"
+                <md-button class="remove-tab md-warn"
                            ng-click="removeTab( tab )">Remove Tab
                 </md-button>
             </div>
@@ -26,7 +26,7 @@
             <span class="title">Add a new Tab:</span>
             <md-text-float label="Label" ng-model="tTitle"></md-text-float>
             <md-text-float label="Content" ng-model="tContent" ></md-text-float>
-            <md-button class="md-theme-green"  type="submit" style="max-height: 40px" >Add Tab</md-button>
+            <md-button class="add-tab md-primary"  type="submit" style="max-height: 40px" >Add Tab</md-button>
         </div>
     </form>
 
diff --git a/src/components/tabs/demoDynamicTabs/style.css b/src/components/tabs/demoDynamicTabs/style.css
index 02f2893e26a..9472ba452a6 100644
--- a/src/components/tabs/demoDynamicTabs/style.css
+++ b/src/components/tabs/demoDynamicTabs/style.css
@@ -1,5 +1,5 @@
 
-.btnRemove {
+.remove-tab {
     margin-bottom: 40px;
 }
 
@@ -61,7 +61,7 @@ md-button {
     max-height: 30px;
 }
 
-md-button.md-theme-green {
+md-button.add-tab {
     margin-top:20px;
     max-height:30px !important;
 }
diff --git a/src/components/tabs/js/tabsDirective.js b/src/components/tabs/js/tabsDirective.js
index 335ec99ef6d..1fadb9d354e 100644
--- a/src/components/tabs/js/tabsDirective.js
+++ b/src/components/tabs/js/tabsDirective.js
@@ -74,10 +74,11 @@ angular.module('material.components.tabs')
  */
 .directive('mdTabs', [
   '$parse',
+  '$mdTheming',
   TabsDirective
 ]);
 
-function TabsDirective($parse) {
+function TabsDirective($parse, $mdTheming) {
   return {
     restrict: 'E',
     controller: '$mdTabs',
@@ -86,7 +87,7 @@ function TabsDirective($parse) {
     scope: {
       selectedIndex: '=?selected'
     },
-    template: 
+    template:
       '<section class="tabs-header" ' +
         'ng-class="{\'tab-paginating\': pagination.active}">' +
 
@@ -113,7 +114,7 @@ function TabsDirective($parse) {
   };
 
   function postLink(scope, element, attr, tabsCtrl) {
-
+    $mdTheming(element);
     configureAria();
     watchSelected();
 
diff --git a/src/components/tabs/tabs-theme.scss b/src/components/tabs/tabs-theme.scss
new file mode 100644
index 00000000000..7ea1e9ccd08
--- /dev/null
+++ b/src/components/tabs/tabs-theme.scss
@@ -0,0 +1,34 @@
+$tabs-color-palette: $primary-color-palette !default;
+$tabs-header-background-color: map-get($tabs-color-palette, '500') !default;
+$tabs-inactive-color: map-get($tabs-color-palette, '100') !default;
+$tabs-active-color: $primary-color-palette-contrast-color !default;
+$tabs-disabled-color: $foreground-quarternary-color !default;
+$tabs-focus-color: $foreground-primary-color !default;
+$tabs-highlight-color: #ffff85;
+
+md-tabs.md-#{$theme-name}-theme {
+  .tabs-header {
+    background-color: $tabs-header-background-color;
+  }
+
+  md-tabs-ink-bar {
+    background: $tabs-highlight-color;
+  }
+
+  md-tab {
+    color: $tabs-inactive-color;
+    &.active {
+      color: $tabs-active-color;
+    }
+    &[disabled] {
+      color: $tabs-disabled-color;
+    }
+    &:focus {
+      border-color: $tabs-focus-color;
+    }
+
+    .md-ripple-container {
+      color: $tabs-highlight-color;
+    }
+  }
+}
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 128b6ceaa4a..f09a11bd62c 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -8,6 +8,6 @@
 angular.module('material.components.tabs', [
   'material.core',
   'material.animations',
-  'material.components.swipe'
+  'material.components.swipe',
+  'material.services.theming'
 ]);
-
diff --git a/src/components/textField/_textField.scss b/src/components/textField/_textField.scss
index a1d03e70165..f188c76c502 100644
--- a/src/components/textField/_textField.scss
+++ b/src/components/textField/_textField.scss
@@ -1,3 +1,58 @@
+$tff-font-size: 0.75em;
+$tff-line-height:26px;
+$tff-transition: all ease-out 150ms;
+// - `label` element (aka hint)
+$tff-hint-offset-large : 22px;
+$tff-hint-offset-small : 4px;
+$ttf-hint-offset-scale : 0.75;
+// - `line` element
+$tff-line-focused-width: 2px;
+$tff-line-disabled-width: 0px;
+$tff-line-dot-width: 1px;
+$tff-line-dot-size: 3px;
+$tff-line-dashed: #cfcfcf;
+
+$tff-margin: 10px 0 (10px - $tff-line-focused-width) 0;
+
+// ******************************
+// Mixins: Text Fields
+// ******************************
+
+@mixin text-field($transition:false, $borderWidth:1px ) {
+  input, textarea {
+    border-bottom-width: $borderWidth;
+
+    @if( $transition != false ) {
+      transition: $transition;
+    }
+  }
+}
+
+@mixin text-hint($size:large, $transition:false ) {
+  label {
+    @if $size == "small" {
+      transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
+    } @else {
+      transform: translate3d(0, $tff-hint-offset-large, 0);
+      transform-origin: left center;
+      transition: $tff-transition;
+    }
+
+    @if( $transition != false ) {
+      transition: $transition;
+    }
+  }
+}
+
+@mixin text-dashed-line( $dotGap, $dotSize) {
+  background-size: $dotSize $dotGap;
+
+  background-position: 0 bottom;
+
+  background-size: (1px + 1px) $dotGap;
+  background-repeat: repeat-x;
+}
+
 form {
 }
 
@@ -25,6 +80,7 @@ input[type="color"] {
   border-width: 0 0 1px 0;
   padding-top:2px;
   line-height: $tff-line-height;
+  padding-bottom: 1px;
 
   &:focus {
     outline: 0;
@@ -32,19 +88,20 @@ input[type="color"] {
 }
 
 input, textarea {
-  @include input-placeholder($tff-placeholder-color);
   background: none;
 }
 
 // Light-Theme
 md-input-group,
 .md-input-group {
+  padding-bottom: $tff-line-focused-width;
   margin: $tff-margin;
 
   position: relative;
   display:  block;
 
   label {
+    font-size: 1em;
     z-index: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
@@ -54,80 +111,40 @@ md-input-group,
     }
   }
 
-  @include text-hint( $tff-hint-normal, large, $tff-transition );
-  @include text-field( $tff-input-normal, $tff-line-normal, $tff-transition );
+  @include text-hint( large, $tff-transition );
+  @include text-field( $tff-transition );
 
 
   &.md-input-focused {
-    @include text-hint( $tff-hint-focused, small );
-    @include text-field( $tff-input-normal,$tff-line-focused, false, $tff-line-focused-width );
-  }
-
-  &.md-input-has-value {
-    @include text-hint( $tff-hint-focused, small );
-
-    &:not(.md-input-focused) {
-      @include text-hint( $tff-hint-normal, small );
+    @include text-hint( small );
+    @include text-field( false, $tff-line-focused-width );
+    input {
+      padding-bottom: 0px;
     }
   }
 
-  &[disabled] {
-
-    @include text-field( $tff-input-disabled, $tff-line-disabled, false, $tff-line-disabled-width );
-    input, textarea {
-      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size, $tff-line-dashed );
-      pointer-events: none;
-      tabindex : -1;
-    }
-
-    @include text-hint( $tff-hint-disabled, small );
-
-    *:not(.md-input-has-value) {
-      @include text-hint( $tff-hint-disabled, large );
-    }
-
-  }
-}
-
-
-// Dark Theme
-.dark md-input-group,
-.dark .md-input-group {
-
-  @include text-hint( $tff-hint-normal-dark, large, $tff-transition );
-  @include text-field( $tff-input-normal-dark, $tff-line-normal-dark, $tff-transition );
-
-
-  &.md-input-focused {
-    @include text-hint( $tff-hint-focused-dark, small );
-    @include text-field( $tff-input-focused-dark,$tff-line-focused-dark, false, $tff-line-focused-width );
-  }
-
   &.md-input-has-value {
-    @include text-hint( $tff-hint-focused-dark, small );
+    @include text-hint( small );
 
     &:not(.md-input-focused) {
-      @include text-hint( $tff-hint-normal-dark, small );
+      @include text-hint( small );
     }
   }
 
   &[disabled] {
 
-    @include text-field( $tff-input-disabled-dark, $tff-line-disabled-dark, false, $tff-line-disabled-width );
+    @include text-field( false, $tff-line-disabled-width );
     input, textarea {
-      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size, $tff-line-dashed-dark );
+      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size);
       pointer-events: none;
       tabindex : -1;
     }
 
-    @include text-hint( $tff-hint-disabled-dark, small );
+    @include text-hint( small );
 
     *:not(.md-input-has-value) {
-      @include text-hint( $tff-hint-disabled-dark, large );
+      @include text-hint( large );
     }
 
   }
-
 }
-
-.theme-dark-tff { @include theme-bg-and-color(#333, #999); }
diff --git a/src/components/textField/demoBasicUsage/index.html b/src/components/textField/demoBasicUsage/index.html
index 5c14cd2d665..8b9f5d01faa 100644
--- a/src/components/textField/demoBasicUsage/index.html
+++ b/src/components/textField/demoBasicUsage/index.html
@@ -1,12 +1,13 @@
 
 <div ng-controller="DemoController" layout="vertical">
-
-  <md-toolbar class="theme-dark-tff md-medium-tall" style="padding-top:15px;">
-    <div class="md-toolbar-tools dark">
-      <md-text-float label="Title"  ng-model="user.title"   ></md-text-float>
-      <md-text-float label="eMail"  ng-model="user.email" type="email" ></md-text-float>
-    </div>
-  </md-toolbar>
+  <md-content md-theme="light-blue-dark">
+    <form style="padding: 20px;">
+      <div class="row">
+        <md-text-float label="Title"  ng-model="user.title"   ></md-text-float>
+        <md-text-float label="eMail"  ng-model="user.email" type="email" ></md-text-float>
+      </div>
+    </form>
+  </md-content>
 
   <md-content>
     <form style="padding: 20px;">
diff --git a/src/components/textField/demoBasicUsage/style.css b/src/components/textField/demoBasicUsage/style.css
index 58f76045e32..1c891686c64 100644
--- a/src/components/textField/demoBasicUsage/style.css
+++ b/src/components/textField/demoBasicUsage/style.css
@@ -46,7 +46,8 @@ form > .row {
 
 .row > * {
     font-size: inherit;
-    margin: 0 8px;
+    margin-left: 8px;
+    margin-right: 8px;
 }
 
 md-input-group.long > input {
diff --git a/src/components/textField/textField-theme.scss b/src/components/textField/textField-theme.scss
new file mode 100644
index 00000000000..70bc0a4d349
--- /dev/null
+++ b/src/components/textField/textField-theme.scss
@@ -0,0 +1,54 @@
+$tff-focus-color: map-get($primary-color-palette, '500') !default;
+$tff-text-color: $foreground-primary-color !default;
+$tff-hint-small-color: mix($foreground-secondary-color, $foreground-tertiary-color, 40%) !default;
+$tff-hint-color: $foreground-tertiary-color !default;
+$tff-line-color: $foreground-quarternary-color !default;
+$tff-disabled-line-color: mix($foreground-tertiary-color, $foreground-quarternary-color) !default;
+$tff-disabled-color: $foreground-quarternary-color !default;
+
+md-input-group.md-#{$theme-name}-theme {
+  input, textarea {
+    text-shadow: $foreground-text-shadow;
+    @include input-placeholder($tff-hint-color);
+  }
+
+  label {
+    text-shadow: $foreground-text-shadow;
+    color: $tff-hint-color;
+  }
+
+  input, textarea {
+    color: $tff-text-color;
+    border-color: $tff-line-color;
+  }
+
+  &.md-input-focused {
+    input, textarea {
+      border-color: $tff-focus-color;
+    }
+    label {
+      color: $tff-focus-color;
+    }
+    &.md-input-has-value {
+      @if $dark-theme {
+        label {
+          color: lighten($tff-focus-color, 10%);
+        }
+      }
+    }
+  }
+
+  &.md-input-has-value:not(.md-input-focused) {
+    label {
+      color: $tff-hint-small-color;
+    }
+  }
+
+  &[disabled] {
+    input, textarea {
+      border-bottom-color: $tff-disabled-color;
+      color: $tff-hint-color;
+      background-image: linear-gradient(to right, $tff-disabled-line-color 0%, $tff-disabled-line-color 50%, rgba(0, 0, 0, 0) 0%);
+    }
+  }
+}
diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js
index 0da3f690974..c1f6c554170 100644
--- a/src/components/textField/textField.js
+++ b/src/components/textField/textField.js
@@ -7,7 +7,7 @@
 angular.module('material.components.textField', ['material.core'])
        .directive('mdInputGroup', [ mdInputGroupDirective ])
        .directive('mdInput', ['$mdUtil', mdInputDirective ])
-       .directive('mdTextFloat', [ mdTextFloatDirective ]);
+       .directive('mdTextFloat', [ '$mdTheming', mdTextFloatDirective ]);
 
 
 
@@ -36,7 +36,7 @@ angular.module('material.components.textField', ['material.core'])
  * <md-text-float label="eMail"    ng-model="user.email" type="email" ></md-text-float>
  * </hljs>
  */
-function mdTextFloatDirective() {
+function mdTextFloatDirective($mdTheming) {
   return {
     restrict: 'E',
     replace: true,
@@ -60,7 +60,8 @@ function mdTextFloatDirective() {
           // transpose optional `type` and `class` settings
           element.attr('type', attrs.type || "text");
           element.attr('class', attrs.class );
-        }
+        },
+        post: $mdTheming
       };
     },
     template:
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index 3f59e4abc89..4f7ae90f59f 100644
--- a/src/components/toast/_toast.scss
+++ b/src/components/toast/_toast.scss
@@ -1,11 +1,9 @@
-
+// See height set globally, depended on by buttons
 md-toast {
   display: flex;
   box-sizing: border-box;
   align-items: center;
 
-  background: #323232;
-  color: #f1f1f1;
   min-height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -19,12 +17,9 @@ md-toast {
   max-width: 879px;
   max-height: 40px;
 
+  height: $toast-height;
   z-index: $z-index-toast;
 
-  md-button {
-    color: white;
-  }
-
   &.capsule {
     border-radius: 24px;
   }
@@ -66,17 +61,17 @@ md-toast {
       transform: translate3d(100%, 0%, 0);
     }
   }
-}
 
-.toast-action {
-  line-height: 19px;
-  color: #eeff41;
-  padding-left: 24px;
-  cursor: pointer;
-  text-transform: uppercase;
-  float: right;
+  .md-action {
+    line-height: 19px;
+    padding-left: 24px;
+    cursor: pointer;
+    text-transform: uppercase;
+    float: right;
+  }
 }
 
+
 @media (max-width: $layout-breakpoint-sm) {
   md-toast {
     left: 0;
diff --git a/src/components/toast/demoBasicUsage/index.html b/src/components/toast/demoBasicUsage/index.html
index 8d574f76cf7..a22ade6dd87 100644
--- a/src/components/toast/demoBasicUsage/index.html
+++ b/src/components/toast/demoBasicUsage/index.html
@@ -6,7 +6,7 @@
         Show Simple
       </md-button>
       <div style="width:50px"></div>
-      <md-button class="md-button-raised"
+      <md-button class="md-raised"
                  ng-click="complexToastIt()">
         Show Advanced
       </md-button>
@@ -20,10 +20,10 @@
       ng-model="toastPosition[name]"> 
       {{name}}
     </md-checkbox>
-    <md-button class="md-button-fab md-button-fab-bottom-right md-theme-red">
+    <md-button class="md-primary md-fab md-fab-bottom-right">
       FAB
     </md-button>
-    <md-button class="md-button-fab md-button-fab-top-right md-theme-green">
+    <md-button class="md-primary md-fab md-fab-top-right" md-theme="green">
       FAB
     </md-button>
   </div>
diff --git a/src/components/toast/toast-theme.scss b/src/components/toast/toast-theme.scss
index 09cd3af5d91..b672a6351c8 100644
--- a/src/components/toast/toast-theme.scss
+++ b/src/components/toast/toast-theme.scss
@@ -1,5 +1,16 @@
-$toast-height: 20px !default;
+$toast-background-color: #323232 !default;
+$toast-text-color: white !default;
+$toast-action-color: map-get($primary-color-palette, 'A200') !default;
 
-md-toast {
-  height: $toast-height;
+md-toast.md-#{$theme-name}-theme {
+  background-color: $toast-background-color;
+  color: $toast-text-color;
+
+  md-button {
+    color: $toast-text-color;
+  }
+
+  .md-action {
+    color: $toast-action-color;
+  }
 }
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index b41ca7237bd..d76ebc96dd1 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -116,12 +116,13 @@ function MdToastDirective() {
  *
  */
 
-function MdToastService($timeout, $$interimElement, $animate, $mdSwipe) {
+function MdToastService($timeout, $$interimElement, $animate, $mdSwipe, $mdTheming) {
 
   var factoryDef = {
     onShow: onShow,
     onRemove: onRemove,
     position: 'bottom left',
+    themable: true,
     hideDelay: 3000,
   };
 
diff --git a/src/components/toolbar/_toolbar.scss b/src/components/toolbar/_toolbar.scss
index aa6e22bbdbb..3ab1653ca14 100644
--- a/src/components/toolbar/_toolbar.scss
+++ b/src/components/toolbar/_toolbar.scss
@@ -1,3 +1,9 @@
+$toolbar-tools-height: 64px;
+$toolbar-height: 64px;
+$toolbar-medium-tall-height: 88px;
+$toolbar-tall-height: 192px;
+$toolbar-indent-margin: 64px;
+
 md-toolbar {
   display: flex;
   flex-direction: column;
diff --git a/src/components/toolbar/demoBasicUsage/index.html b/src/components/toolbar/demoBasicUsage/index.html
index f25d2148500..10ecf600ab7 100644
--- a/src/components/toolbar/demoBasicUsage/index.html
+++ b/src/components/toolbar/demoBasicUsage/index.html
@@ -3,7 +3,7 @@
 
   <md-content>
 
-    <md-toolbar class="md-theme-light">
+    <md-toolbar>
       <h2 class="md-toolbar-tools">
         <span>Toolbar: light-theme (default)</span>
       </h2>
@@ -11,15 +11,15 @@ <h2 class="md-toolbar-tools">
 
     <br>
 
-    <md-toolbar class="md-theme-dark">
+    <md-toolbar md-theme="blue">
       <h2 class="md-toolbar-tools">
-        <span>Toolbar: dark-theme</span>
+        <span>Toolbar: blue-theme</span>
       </h2>
     </md-toolbar>
 
     <br>
 
-    <md-toolbar class="md-theme-green md-tall">
+    <md-toolbar md-theme="green" class="md-tall">
       <h2 class="md-toolbar-tools">
         <span>Toolbar: tall</span>
       </h2>
@@ -27,7 +27,7 @@ <h2 class="md-toolbar-tools">
 
     <br>
 
-    <md-toolbar class="md-theme-yellow md-tall">
+    <md-toolbar md-theme="yellow" class="md-tall">
       <span flex></span>
       <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
         <span class="md-flex">Toolbar: tall with actions pin to the bottom</span>
@@ -36,7 +36,7 @@ <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
 
     <br>
 
-    <md-toolbar class="md-theme-orange md-medium-tall">
+    <md-toolbar md-theme="orange" class="md-medium-tall">
       <div class="md-toolbar-tools md-toolbar-tools-top">
         <md-icon style="width: 24px; height: 24px;">
           <svg-icon></svg-icon>
@@ -50,7 +50,7 @@ <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
 
     <br>
 
-    <md-toolbar class="md-theme-purple md-tall">
+    <md-toolbar md-theme="purple" class="md-tall">
       <div class="md-toolbar-tools md-toolbar-tools-top">
         <md-icon style="width: 24px; height: 24px;">
           <svg-icon></svg-icon>
diff --git a/src/components/toolbar/demoScrollShrink/index.html b/src/components/toolbar/demoScrollShrink/index.html
index f8989c2bb00..4926bd37ff7 100644
--- a/src/components/toolbar/demoScrollShrink/index.html
+++ b/src/components/toolbar/demoScrollShrink/index.html
@@ -1,6 +1,6 @@
 <div ng-controller="AppCtrl" layout="vertical" layout-fill>
 
-  <md-toolbar scroll-shrink class="md-theme-light">
+  <md-toolbar scroll-shrink>
     <div class="md-toolbar-tools">
       <h3>
         <span>My App Title</span>
diff --git a/src/components/toolbar/toolbar-theme.scss b/src/components/toolbar/toolbar-theme.scss
new file mode 100644
index 00000000000..19858f3c615
--- /dev/null
+++ b/src/components/toolbar/toolbar-theme.scss
@@ -0,0 +1,7 @@
+$toolbar-background-color: map-get($primary-color-palette, '500') !default;
+$toolbar-text-color: $primary-color-palette-contrast-color;
+
+md-toolbar.md-#{$theme-name}-theme {
+  background-color: $toolbar-background-color;
+  color: $primary-color-palette-contrast-color;
+}
diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
index aaec0d15d05..aa2188f4e2a 100644
--- a/src/components/toolbar/toolbar.js
+++ b/src/components/toolbar/toolbar.js
@@ -5,12 +5,14 @@
 angular.module('material.components.toolbar', [
   'material.core',
   'material.components.content',
+  'material.services.theming',
   'material.animations'
 ])
   .directive('mdToolbar', [
     '$$rAF',
     '$mdEffects',
     '$mdUtil',
+    '$mdTheming',
     mdToolbarDirective
   ]);
 
@@ -61,12 +63,13 @@ angular.module('material.components.toolbar', [
  * shrinking by. For example, if 0.25 is given then the toolbar will shrink
  * at one fourth the rate at which the user scrolls down. Default 0.5.
  */ 
-function mdToolbarDirective($$rAF, $mdEffects, $mdUtil) {
+function mdToolbarDirective($$rAF, $mdEffects, $mdUtil, $mdTheming) {
 
   return {
     restrict: 'E',
     controller: angular.noop,
     link: function(scope, element, attr) {
+      $mdTheming(element);
 
       if (angular.isDefined(attr.scrollShrink)) {
         setupScrollShrink();
diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
index cadd79a392a..3f943f4c4d6 100644
--- a/src/components/tooltip/_tooltip.scss
+++ b/src/components/tooltip/_tooltip.scss
@@ -22,7 +22,6 @@ md-tooltip {
   z-index: $z-index-tooltip;
   overflow: hidden;
   pointer-events: none;
-  color: white;
   border-radius: 4px;
 
   &[tooltip-direction="bottom"] {
@@ -35,7 +34,6 @@ md-tooltip {
   }
 
   .tooltip-background {
-    background: rgb(115,115,115);
     position: absolute;
     left: 50%;
     width: 256px;
diff --git a/src/components/tooltip/demoBasicUsage/index.html b/src/components/tooltip/demoBasicUsage/index.html
index 8a816c86148..1b647e493f2 100644
--- a/src/components/tooltip/demoBasicUsage/index.html
+++ b/src/components/tooltip/demoBasicUsage/index.html
@@ -1,9 +1,9 @@
 <div ng-controller="AppCtrl">
 
-  <md-toolbar class="md-theme-green">
+  <md-toolbar md-theme="green">
     <h1 class="md-toolbar-tools">
       <span flex>Awesome Md App</span>
-      <md-button class="md-button-fab md-theme-green">
+      <md-button class="md-fab md-primary">
         <md-tooltip>
           Refresh
         </md-tooltip>
@@ -18,13 +18,13 @@ <h1 class="md-toolbar-tools">
       The tooltip is visible when the button is hovered, focused, or touched.
     </p>
 
-    <md-button class="md-button-fab md-button-fab-top-left left" >
+    <md-button class="md-fab md-fab-top-left left" >
       <md-icon icon="/img/icons/ic_insert_drive_file_24px.svg"></md-icon>
       <md-tooltip visible="showTooltip">
         Insert Drive
       </md-tooltip>
     </md-button>
-    <md-button class="md-button-fab md-button-fab-top-right right">
+    <md-button class="md-fab md-fab-top-right right">
       <md-icon icon="/img/icons/ic_photo_24px.svg"></md-icon>
       <md-tooltip>
         Photos
diff --git a/src/components/tooltip/tooltip-theme.scss b/src/components/tooltip/tooltip-theme.scss
new file mode 100644
index 00000000000..8bf19638c4c
--- /dev/null
+++ b/src/components/tooltip/tooltip-theme.scss
@@ -0,0 +1,9 @@
+$tooltip-color: map-get($foreground-color-palette, 'A100') !default;
+$tooltip-background-color: rgba(black, 0.52);
+
+md-tooltip.md-#{$theme-name}-theme {
+  color: $tooltip-color;
+  .tooltip-background {
+    background-color: $tooltip-background-color;
+  }
+}
diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
index 14d8310248b..bafee1cc8a1 100644
--- a/src/components/tooltip/tooltip.js
+++ b/src/components/tooltip/tooltip.js
@@ -2,7 +2,10 @@
  * @ngdoc module
  * @name material.components.tooltip
  */
-angular.module('material.components.tooltip', ['material.core'])
+angular.module('material.components.tooltip', [
+  'material.core',
+  'material.services.theming'
+])
 
 .directive('mdTooltip', [
   '$timeout',
@@ -10,6 +13,7 @@ angular.module('material.components.tooltip', ['material.core'])
   '$$rAF',
   '$document',
   '$mdUtil',
+  '$mdTheming',
   MdTooltipDirective
 ]);
 
@@ -36,7 +40,7 @@ angular.module('material.components.tooltip', ['material.core'])
  * @param {expression=} visible Boolean bound to whether the tooltip is 
  * currently visible.
  */
-function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil) {
+function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdTheming) {
 
   var TOOLTIP_SHOW_DELAY = 400;
   var TOOLTIP_WINDOW_EDGE_SPACE = 8;
@@ -59,6 +63,7 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil) {
   };
 
   function postLink(scope, element, attr, contentCtrl) {
+    $mdTheming(element);
     var parent = element.parent();
 
     // We will re-attach tooltip when visible
diff --git a/src/core/style/color-palette.scss b/src/core/style/color-palette.scss
new file mode 100644
index 00000000000..9a1a6c1b385
--- /dev/null
+++ b/src/core/style/color-palette.scss
@@ -0,0 +1,378 @@
+$color-red: (
+  '50': #fde0dc,
+  '100': #f9bdbb,
+  '200': #f69988,
+  '300': #f36c60,
+  '400': #e84e40,
+  '500': #e51c23,
+  '600': #dd191d,
+  '700': #d01716,
+  '800': #c41411,
+  '900': #b0120a,
+  'A100': #ff7997,
+  'A200': #ff5177,
+  'A400': #ff2d6f,
+  'A700': #e00032
+);
+
+// Pink
+// ----------------------------
+
+$color-pink: (
+  '50': #fce4ec,
+  '100': #f8bbd0,
+  '200': #f48fb1,
+  '300': #f06292,
+  '400': #ec407a,
+  '500': #e91e63,
+  '600': #d81b60,
+  '700': #c2185b,
+  '800': #ad1457,
+  '900': #880e4f,
+  'A100': #ff80ab,
+  'A200': #ff4081,
+  'A400': #f50057,
+  'A700': #c51162,
+);
+
+// Purple
+// ----------------------------
+
+$color-purple: (
+  '50': #f3e5f5,
+  '100': #e1bee7,
+  '200': #ce93d8,
+  '300': #ba68c8,
+  '400': #ab47bc,
+  '500': #9c27b0,
+  '600': #8e24aa,
+  '700': #7b1fa2,
+  '800': #6a1b9a,
+  '900': #4a148c,
+  'A100': #ea80fc,
+  'A200': #e040fb,
+  'A400': #d500f9,
+  'A700': #aa00ff
+);
+
+
+// Deep Purple
+// ----------------------------
+
+$color-deep-purple: (
+  '50': #ede7f6,
+  '100': #d1c4e9,
+  '200': #b39ddb,
+  '300': #9575cd,
+  '400': #7e57c2,
+  '500': #673ab7,
+  '600': #5e35b1,
+  '700': #512da8,
+  '800': #4527a0,
+  '900': #311b92,
+  'A100': #b388ff,
+  'A200': #7c4dff,
+  'A400': #651fff,
+  'A700': #6200ea
+);
+
+// Indigo
+// ----------------------------
+
+$color-indigo: (
+  '50': #e8eaf6,
+  '100': #c5cae9,
+  '200': #9fa8da,
+  '300': #7986cb,
+  '400': #5c6bc0,
+  '500': #3f51b5,
+  '600': #3949ab,
+  '700': #303f9f,
+  '800': #283593,
+  '900': #1a237e,
+  'A100': #8c9eff,
+  'A200': #536dfe,
+  'A400': #3d5afe,
+  'A700': #304ffe
+);
+
+
+// Blue
+// ----------------------------
+
+$color-blue: (
+  '50': #e7e9fd,
+  '100': #d0d9ff,
+  '200': #afbfff,
+  '300': #91a7ff,
+  '400': #738ffe,
+  '500': #5677fc,
+  '600': #4e6cef,
+  '700': #455ede,
+  '800': #3b50ce,
+  '900': #2a36b1,
+  'A100': #a6baff,
+  'A200': #6889ff,
+  'A400': #4d73ff,
+  'A700': #4d69ff
+);
+
+
+// Light Blue
+// ----------------------------
+
+$color-light-blue: (
+  '50': #e1f5fe,
+  '100': #b3e5fc,
+  '200': #81d4fa,
+  '300': #4fc3f7,
+  '400': #29b6f6,
+  '500': #03a9f4,
+  '600': #039be5,
+  '700': #0288d1,
+  '800': #0277bd,
+  '900': #01579b,
+  'A100': #80d8ff,
+  'A200': #40c4ff,
+  'A400': #00b0ff,
+  'A700': #0091ea
+);
+
+
+// Cyan
+// ----------------------------
+
+$color-cyan: (
+  '50': #e0f7fa,
+  '100': #b2ebf2,
+  '200': #80deea,
+  '300': #4dd0e1,
+  '400': #26c6da,
+  '500': #00bcd4,
+  '600': #00acc1,
+  '700': #0097a7,
+  '800': #00838f,
+  '900': #006064,
+  'A100': #84ffff,
+  'A200': #18ffff,
+  'A400': #00e5ff,
+  'A700': #00b8d4
+);
+
+
+// Teal
+// ----------------------------
+
+$color-teal: (
+  '50': #e0f2f1,
+  '100': #b2dfdb,
+  '200': #80cbc4,
+  '300': #4db6ac,
+  '400': #26a69a,
+  '500': #009688,
+  '600': #00897b,
+  '700': #00796b,
+  '800': #00695c,
+  '900': #004d40,
+  'A100': #a7ffeb,
+  'A200': #64ffda,
+  'A400': #1de9b6,
+  'A700': #00bfa5
+);
+
+
+// Green
+// ----------------------------
+
+$color-green: (
+  '50': #d0f8ce,
+  '100': #a3e9a4,
+  '200': #72d572,
+  '300': #42bd41,
+  '400': #2baf2b,
+  '500': #259b24,
+  '600': #0a8f08,
+  '700': #0a7e07,
+  '800': #056f00,
+  '900': #0d5302,
+  'A100': #a2f78d,
+  'A200': #5af158,
+  'A400': #14e715,
+  'A700': #12c700
+);
+
+
+// Light Green
+// ----------------------------
+
+$color-light-green: (
+  '50': #f1f8e9,
+  '100': #dcedc8,
+  '200': #c5e1a5,
+  '300': #aed581,
+  '400': #9ccc65,
+  '500': #8bc34a,
+  '600': #7cb342,
+  '700': #689f38,
+  '800': #558b2f,
+  '900': #33691e,
+  'A100': #ccff90,
+  'A200': #b2ff59,
+  'A400': #76ff03,
+  'A700': #64dd17
+);
+
+
+// Lime
+// ----------------------------
+
+$color-lime: (
+  '50': #f9fbe7,
+  '100': #f0f4c3,
+  '200': #e6ee9c,
+  '300': #dce775,
+  '400': #d4e157,
+  '500': #cddc39,
+  '600': #c0ca33,
+  '700': #afb42b,
+  '800': #9e9d24,
+  '900': #827717,
+  'A100': #f4ff81,
+  'A200': #eeff41,
+  'A400': #c6ff00,
+  'A700': #aeea00
+);
+
+
+// Yellow
+// ----------------------------
+$color-yellow: (
+  '50': #fffde7,
+  '100': #fff9c4,
+  '200': #fff59d,
+  '300': #fff176,
+  '400': #ffee58,
+  '500': #ffeb3b,
+  '600': #fdd835,
+  '700': #fbc02d,
+  '800': #f9a825,
+  '900': #f57f17,
+  'A100': #ffff8d,
+  'A200': #ffff00,
+  'A400': #ffea00,
+  'A700': #ffd600
+);
+
+
+// Amber
+// ----------------------------
+
+$color-amber: (
+  '50': #fff8e1,
+  '100': #ffecb3,
+  '200': #ffe082,
+  '300': #ffd54f,
+  '400': #ffca28,
+  '500': #ffc107,
+  '600': #ffb300,
+  '700': #ffa000,
+  '800': #ff8f00,
+  '900': #ff6f00,
+  'A100': #ffe57f,
+  'A200': #ffd740,
+  'A400': #ffc400,
+  'A700': #ffab00
+);
+
+
+// Orange
+// ----------------------------
+
+$color-orange: (
+  '50': #fff3e0,
+  '100': #ffe0b2,
+  '200': #ffcc80,
+  '300': #ffb74d,
+  '400': #ffa726,
+  '500': #ff9800,
+  '600': #fb8c00,
+  '700': #f57c00,
+  '800': #ef6c00,
+  '900': #e65100,
+  'A100': #ffd180,
+  'A200': #ffab40,
+  'A400': #ff9100,
+  'A700': #ff6d00
+);
+
+
+// Deep Orange
+// ----------------------------
+
+$color-deep-orange: (
+  '50': #fbe9e7,
+  '100': #ffccbc,
+  '200': #ffab91,
+  '300': #ff8a65,
+  '400': #ff7043,
+  '500': #ff5722,
+  '600': #f4511e,
+  '700': #e64a19,
+  '800': #d84315,
+  '900': #bf360c,
+  'A100': #ff9e80,
+  'A200': #ff6e40,
+  'A400': #ff3d00,
+  'A700': #dd2c00
+);
+
+
+// Brown
+// ----------------------------
+
+$color-brown: (
+  '50': #efebe9,
+  '100': #d7ccc8,
+  '200': #bcaaa4,
+  '300': #a1887f,
+  '400': #8d6e63,
+  '500': #795548,
+  '600': #6d4c41,
+  '700': #5d4037,
+  '800': #4e342e,
+  '900': #3e2723
+);
+
+
+// Grey
+// ----------------------------
+$color-grey: (
+  '0': #ffffff,
+  '50': #fafafa,
+  '100': #f5f5f5,
+  '200': #eeeeee,
+  '300': #e0e0e0,
+  '400': #bdbdbd,
+  '500': #9e9e9e,
+  '600': #757575,
+  '700': #616161,
+  '800': #424242,
+  '900': #212121,
+  '1000': #000000,
+  'A100': #ffffff
+);
+
+// Blue Grey
+// ----------------------------
+$color-blue-grey: (
+  '50': #eceff1,
+  '100': #cfd8dc,
+  '200': #b0bec5,
+  '300': #90a4ae,
+  '400': #78909c,
+  '500': #607d8b,
+  '600': #546e7a,
+  '700': #455a64,
+  '800': #37474f,
+  '900': #263238
+);
diff --git a/src/core/style/mixins.scss b/src/core/style/mixins.scss
index 6c89905ef82..78000eca789 100644
--- a/src/core/style/mixins.scss
+++ b/src/core/style/mixins.scss
@@ -17,49 +17,3 @@
     color: $color;
   }
 }
-
-
-
-// ******************************
-// Mixins: Text Fields
-// ******************************
-
-@mixin text-field($color, $borderColor, $transition:false, $borderWidth:1px ) {
-  input, textarea {
-    color: $color;
-    border-color: $borderColor;
-    border-bottom-width: $borderWidth;
-
-    @if( $transition != false ) {
-      transition: $transition;
-    }
-  }
-}
-
-@mixin text-hint($color, $size:large, $transition:false ) {
-  label {
-    color: $color;
-
-    @if $size == "small" {
-      transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
-    } @else {
-      transform: translate3d(0, $tff-hint-offset-large, 0);
-      transform-origin: left center;
-      transition: $tff-transition;
-    }
-
-    @if( $transition != false ) {
-      transition: $transition;
-    }
-  }
-}
-
-@mixin text-dashed-line( $dotGap, $dotSize, $color ) {
-  background-size: $dotSize $dotGap;
-
-  background-image: linear-gradient(to right, $color 0%, $color 50%, rgba(0, 0, 0, 0) 0%);
-  background-position: 0 bottom;
-
-  background-size: (1px + 1px) $dotGap;
-  background-repeat: repeat-x;
-}
diff --git a/src/core/style/structure.scss b/src/core/style/structure.scss
index 70375f0e977..a9216314c07 100644
--- a/src/core/style/structure.scss
+++ b/src/core/style/structure.scss
@@ -1,3 +1,21 @@
+$h1-font-size-base: 2em !default;
+$h1-margin-base: 0.67em 0 !default;
+
+$h2-font-size-base: 1.5em !default;
+$h2-margin-base: 0.83em 0 !default;
+
+$h3-font-size-base: 1.17em !default;
+$h3-margin-base: 1em 0 !default;
+
+$h4-font-size-base: 1em !default;
+$h4-margin-base: 1.33em 0 !default;
+
+$h5-font-size-base: 0.83em !default;
+$h5-margin-base: 1.67em 0 !default;
+
+$h6-font-size-base: 0.75em !default;
+$h6-margin-base: 2.33em 0 !default;
+
 *,
 *:before,
 *:after {
@@ -10,7 +28,7 @@
 
 html, body {
   height: 100%;
-  color: $font-color-base;
+  color: $foreground-primary-color;
   background: $background-color-base;
 
   -webkit-tap-highlight-color: rgba(0,0,0,0);
@@ -19,6 +37,10 @@ html, body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 
+  p {
+    line-height: 1.846;
+  }
+
   h3 {
     display: block;
     @include margin-selectors();
@@ -175,64 +197,6 @@ input {
   src: local('RobotoDraft Bold Italic'), local('RobotoDraft-BoldItalic'), url(//fonts.gstatic.com/s/robotodraft/v1/5SAvdU0uYYlH8OURAykt5wRV2F9RPTaqyJ4QibDfkzM.woff) format('woff');
 }
 
-
-// TEMPORARY theming variables
-// TODO(ajoslin, ryanschmukler): remove things
-@mixin theme-bg-and-color($bg, $color) {
-  background-color: $bg !important;
-  color: $color !important;
-}
-@mixin theme-input-text-and-border($color) {
-  &.md-input-has-value, &.md-input-focused {
-    input {
-      border-color: $color;
-    }
-    label {
-      color: $color;
-    }
-  }
-}
-
-/*
-@mixin md-theme($name, $t100, $t300, $t500, $t700, $t900) {
-}
-
-@include md-theme('google-red', #f3c6C2, #e57b72, #da4336, #c43828, #a42613);
-@include md-theme('pink', #f7bacf, #ef6191, #e81d62, #c1175a, #870d4e);
-@include md-theme('indigo', #c4c9e8, #7885ca, #3e50b4, #2f3e9e, #19227d);
-@include md-theme('google-blue', #c5d9fb, #7aa9f6, #4184f3, #3266d5, #1b39ab);
-@include md-theme('light-blue', #b2e4fb, #4ec2f6, #02a8f3, #0187d0, #00569A);
-@include md-theme('teal', #b1deda, #4cb5ab, #009587, #00786a, #004c3f);
-@include md-theme('google-green', #b6e0cc, #56ba89, #0E9C57, #0a7f42, #045423);
-@include md-theme('yellow', #fff8c3, #fff075, #ffea3a, #fabf2c, #f47e16);
-@include md-theme('google-yellow', #fbe7b1, #f6ca4c, #f3b300, #ef9200, #e96000);
-@include md-theme('orange', #ffdfb1, #ffb64c, #ff9700, #f47b00, #e55000);
-@include md-theme('deep-orange', #ffcbbb, #ff8964, #ff5621, #e54918, #be350b);
-@include md-theme('grey', #f0f0f0, #e0e0e0, #a2a2a2, #636363, #252525);
-*/
-
-.md-theme-dark { @include theme-bg-and-color($theme-dark, $text-light); }
-
-
-.md-theme-light { @include theme-bg-and-color($theme-light, $text-light); }
-.md-theme-light-blue { @include theme-bg-and-color($theme-light-blue, $text-light); }
-.md-theme-indigo { @include theme-bg-and-color($theme-indigo, $text-light); }
-.md-theme-green { @include theme-bg-and-color($theme-green, $text-light); }
-.md-theme-yellow { @include theme-bg-and-color($theme-yellow, $text-dark); }
-.md-theme-orange { @include theme-bg-and-color($theme-orange, $text-light); }
-.md-theme-purple { @include theme-bg-and-color($theme-purple, $text-light); }
-.md-theme-red { @include theme-bg-and-color($theme-red, $text-light); }
-
-.md-input-group-theme-light { @include theme-input-text-and-border($theme-light); }
-.md-input-group-theme-light-blue { @include theme-input-text-and-border($theme-light-blue); }
-.md-input-group-theme-dark { @include theme-input-text-and-border($theme-dark); }
-.md-input-group-theme-green { @include theme-input-text-and-border($theme-green); }
-.md-input-group-theme-yellow { @include theme-input-text-and-border($theme-yellow); }
-.md-input-group-theme-orange { @include theme-input-text-and-border($theme-orange); }
-.md-input-group-theme-purple { @include theme-input-text-and-border($theme-purple); }
-.md-input-group-theme-red { @include theme-input-text-and-border($theme-red); }
-
-
 .md-shadow {
   position: absolute;
   top: 0;
diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss
index 0d6c498cb45..1bf7a6bfae5 100644
--- a/src/core/style/variables.scss
+++ b/src/core/style/variables.scss
@@ -1,55 +1,27 @@
-// Structural
+$theme-name: 'default' !default;
 
-// Base vendor prefixes for mixins
-$base-vendor-prefixes: "webkit", "moz", "ms";
+// Font Variables
+$font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial !default;
 
-// Font families
-$font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial;
-$font-color-base: #444;
+$dark-theme: false !default;
+$foreground-color-palette: $color-grey !default;
+$foreground-base-color: map-get($foreground-color-palette, '1000') !default;
+$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
+$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
+$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
+$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
+$foreground-text-shadow: none !default;
 
-$background-color-base: #fff !default;
-
-// Font colors
-$text-light: #f1f1f1;
-$text-medium: #999;
-$text-dark: #111111;
-
-// Theme colors
-$theme-textfield-focus-label: #1b1b1b;
-$theme-textfield-focus-border: #1394F5;
-
-$theme-gray: #444;
-$theme-light: #4285f4;
-$theme-light-blue: #03a9f4;
-$theme-dark: #3f51b5;
-$theme-green: #0f9d58;
-$theme-yellow: #ffeb3b;
-$theme-orange: #ff5722;
-$theme-purple: #9c27b0;
-$theme-red: #db4437;
-
-$theme-indigo: #3e50b4;
-
-$h1-font-size-base: 2em !default;
-$h1-margin-base: 0.67em 0 !default;
-
-$h2-font-size-base: 1.5em !default;
-$h2-margin-base: 0.83em 0 !default;
-
-$h3-font-size-base: 1.17em !default;
-$h3-margin-base: 1em 0 !default;
-
-$h4-font-size-base: 1em !default;
-$h4-margin-base: 1.33em 0 !default;
-
-$h5-font-size-base: 0.83em !default;
-$h5-margin-base: 1.67em 0 !default;
-
-$h6-font-size-base: 0.75em !default;
-$h6-margin-base: 2.33em 0 !default;
 
+$input-border-color: $foreground-secondary-color !default;
+$input-disabled-border-color: $foreground-tertiary-color !default;
 
+$background-color-palette: $color-grey !default;
+$background-color-base: map-get($background-color-palette, 'A100') !default;
 
+$primary-color-palette: $color-light-blue !default;
+$warn-color-palette: $color-red !default;
+$primary-color-palette-contrast-color: white !default;
 
 // Layout
 // ------------------------------
@@ -60,50 +32,12 @@ $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 
-// Toast
-//--------------------------------------------
-$toast-height: $baseline-grid * 3;
-$toast-margin: $baseline-grid * 1;
-
-
-// Button
-//--------------------------------------------
-$button-border-radius: 3px;
-$button-disabled-background: rgb(234, 234, 234);
-$button-disabled-color: rgb(168, 168, 168);
-$button-raised-background: rgb(223, 223, 233);
-$button-raised-colored-color: #fff;
-$button-raised-colored-background: $theme-light;
-
-$button-hover-background: rgb(228, 228, 228);
-$button-raised-hover-background: rgb(214, 214, 214);
-$button-raised-colored-hover-background: #3367d6;
-
-$button-line-height: 25px;
-$button-padding: 2px 6px 3px;
-
-// Fab buttons
-$button-fab-width: 56px;
-$button-fab-height: 56px;
-$button-fab-border-radius: 28px;
-$button-fab-padding: 16px;
-$button-fab-toast-offset: $toast-height + $toast-margin;
 
 // App bar variables
 $app-bar-height: 64px;
 
-// Toolbar variables
-$toolbar-tools-height: 64px;
-$toolbar-height: 64px;
-$toolbar-medium-tall-height: 88px;
-$toolbar-tall-height: 192px;
-$toolbar-indent-margin: 64px;
-
-// Side nav variables
-
-$sidenav-shadow: 0px 0px 5px rgba(0,0,0,0.4);
-$sidenav-default-width: 304px;
-$sidenav-min-room: 56px;
+$toast-height: $baseline-grid * 3 !default;
+$toast-margin: $baseline-grid * 1 !default;
 
 // Whiteframes
 
@@ -118,179 +52,7 @@ $whiteframe-zindex-z4: 4;
 $whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2);
 $whiteframe-zindex-z5: 5;
 
-// SubHeader
-
-$subheader-line-height: 1em;
-$subheader-font-size: 0.9em;
-$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2);
-$subheader-font-weight: 400;
-$subheader-margin: 0 0 0 0;
-$subheader-margin-right: 16px;
-$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16);
-
-// Lists and tiles
-
-$list-h3-font-size: 1.1em;
-$list-h3-margin: 0 0 3px 0;
-$list-h3-font-weight: 400;
-$list-h4-font-size: 0.9em;
-$list-h4-font-weight: 400;
-$list-h4-margin: 0 0 3px 0;
-$list-p-font-size: 0.75em;
-$list-p-margin: 0 0 3px 0;
-
-$list-padding-top: $baseline-grid;
-$list-padding-right: 0px;
-$list-padding-left: 0px;
-$list-padding-bottom: $baseline-grid;
-
-$item-padding-top: 0px;
-$item-padding-right: 0px;
-$item-padding-left: 0px;
-$item-padding-bottom: 0px;
-
-// Cards
-
-$card-border-radius: 2px;
-$card-border: 1px solid #eee;
-$card-padding: 8px;
-$card-margin: 8px;
-$card-box-shadow: $whiteframe-shadow-z1;
-
-// Tabs
-$tabs-paginator-width: $baseline-grid * 4 !default;
-$tabs-tab-width: $baseline-grid * 12 !default;
-$tabs-header-height: 48px;
-
-
-// ***********************************
-// Styles for Floating Label Text Fields
-// - Light Theme -
-// ***********************************
-//
-$tff-font-size: 0.75em;
-$tff-line-height:26px;
-$tff-margin: 10px 0 10px 0;
-$tff-placeholder-color: darken($text-light, 30%);
-$tff-transition: all ease-out 150ms;
-// - `label` element (aka hint)
-$tff-hint-offset-large : 22px;
-$tff-hint-offset-small : 4px;
-$ttf-hint-offset-scale : 0.75;
-$tff-hint-normal: #999;
-$tff-hint-focused: #EE008B;
-$tff-hint-disabled: #b0b0b0;
-// - `input` element
-$tff-input-normal: #2f2f2f;
-$tff-input-focused: #EE008B;
-$tff-input-disabled: #bcbcbc;
-// - `line` element
-$tff-line-focused-width: 2px;
-$tff-line-disabled-width: 0px;
-$tff-line-dot-width: 1px;
-$tff-line-dot-size: 3px;
-$tff-line-normal: #c7c7c7;
-$tff-line-focused: #EE008B;
-$tff-line-disabled: #bcbcbc;
-$tff-line-dashed: #cfcfcf;
-
-// ***********************************
-// Styles for Floating Label Text Fields
-// - Light Theme -
-// ***********************************
-// - `label` element (aka hint)
-$tff-hint-normal-dark: #5d5d5d;
-$tff-hint-focused-dark: #1194f6;
-$tff-hint-disabled-dark: #858585;
-// - `input` element
-$tff-input-normal-dark: #d6d6d6;
-$tff-input-focused-dark: #d6d6d6;
-$tff-input-disabled-dark: #5d5d5d;
-// - `line` element
-$tff-line-normal-dark: #4c4c4c;
-$tff-line-focused-dark: #1194f6;
-$tff-line-disabled-dark: #333333;
-$tff-line-dashed-dark: #525252;
 
-// Bottom Sheets
-$bottom-sheet-background-color: #FAFAFA;
-$bottom-sheet-border-top-color: #BCBBBB;
-$bottom-sheet-horizontal-padding: 2 * $baseline-grid;
-$bottom-sheet-vertical-padding: 1 * $baseline-grid;
-$bottom-sheet-icon-after-margin: 4 * $baseline-grid;
-$bottom-sheet-list-item-height: 6 * $baseline-grid;
-$bottom-sheet-hidden-bottom-padding: 80px;
-$bottom-sheet-header-height: 7 * $baseline-grid;
-$bottom-sheet-grid-font-weight: 300;
-
-// Forms and inputs
-
-$input-font-size: 0.75em;
-$input-line-height: 26px;
-
-$input-placeholder-color: darken($text-light, 30%);
-
-$input-color: $text-dark;
-$input-color-inverted: $text-light;
-
-$input-group-margin: 10px 0 10px 0;
-
-$input-label-focused-font-size: 0.7em;
-$input-label-focused-color: $text-dark;
-
-$input-focused-scale: 0.85;
-
-$input-label-transition: all ease-out 300ms;
-
-$input-border-color: #6D6D6D;
-$input-disabled-border-color: #a0a0a0;
-$input-focused-border-color: $text-dark;
-
-// Slider
-//--------------------------------------------
-
-$slider-background-color:  rgb(200, 200, 200);
-$slider-height:  48px;
-
-$slider-track-height:  2px;
-$slider-thumb-width:  32px;
-$slider-thumb-height:  $slider-thumb-width;
-
-$slider-thumb-default-scale: 0.5;
-$slider-thumb-hover-scale: 0.6;
-$slider-thumb-focus-scale: 0.85;
-$slider-thumb-disabled-scale: 0.35;
-$slider-thumb-disabled-border: 6px;
-
-$slider-focus-thumb-width:  48px;
-$slider-focus-thumb-height: $slider-focus-thumb-width;
-$slider-focus-ring-border-width: 3px;
-
-$slider-arrow-height: 16px;
-$slider-arrow-width: 28px;
-
-$slider-sign-height: 28px;
-$slider-sign-width: 28px;
-$slider-sign-top: ($slider-height / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 8px;
-
-// Switch
-//--------------------------------------------
-
-$switch-width: $baseline-grid * 8;
-
-
-// Checkbox
-//--------------------------------------------
-
-$checkbox-width: 18px;
-$checkbox-height: $checkbox-width;
-
-
-// Radio Button
-//--------------------------------------------
-
-$radio-width: 16px;
-$radio-height: $radio-width;
 
 // Z-indexes
 //--------------------------------------------
@@ -302,381 +64,3 @@ $z-index-backdrop: 7;
 $z-index-tooltip: 6;
 $z-index-fab: 2;
 $z-index-bottom-sheet: $z-index-backdrop + 1;
-
-// Md Design Color Palette
-// -----------------------------
-// http://www.google.com/design/spec/style/color.html
-
-// Text
-// ----------------------------
-
-$color-divider: 							 rgba(0,0,0,.12) !important;
-
-// Red
-// ----------------------------
-
-$color-red-50:                 #fde0dc !default;
-$color-red-100:                #f9bdbb !default;
-$color-red-200:                #f69988 !default;
-$color-red-300:                #f36c60 !default;
-$color-red-400:                #e84e40 !default;
-$color-red-500:                #e51c23 !default;
-$color-red-600:                #dd191d !default;
-$color-red-700:                #d01716 !default;
-$color-red-800:                #c41411 !default;
-$color-red-900:                #b0120a !default;
-$color-red-A100:               #ff7997 !default;
-$color-red-A200:               #ff5177 !default;
-$color-red-A400:               #ff2d6f !default;
-$color-red-A700:               #e00032 !default;
-$color-red:                    $color-red-500 !default;
-
-
-// Pink
-// ----------------------------
-
-$color-pink-50:                #fce4ec !default;
-$color-pink-100:               #f8bbd0 !default;
-$color-pink-200:               #f48fb1 !default;
-$color-pink-300:               #f06292 !default;
-$color-pink-400:               #ec407a !default;
-$color-pink-500:               #e91e63 !default;
-$color-pink-600:               #d81b60 !default;
-$color-pink-700:               #c2185b !default;
-$color-pink-800:               #ad1457 !default;
-$color-pink-900:               #880e4f !default;
-$color-pink-A100:              #ff80ab !default;
-$color-pink-A200:              #ff4081 !default;
-$color-pink-A400:              #f50057 !default;
-$color-pink-A700:              #c51162 !default;
-$color-pink:                   $color-pink-500 !default;
-
-
-// Purple
-// ----------------------------
-
-$color-purple-50:              #f3e5f5 !default;
-$color-purple-100:             #e1bee7 !default;
-$color-purple-200:             #ce93d8 !default;
-$color-purple-300:             #ba68c8 !default;
-$color-purple-400:             #ab47bc !default;
-$color-purple-500:             #9c27b0 !default;
-$color-purple-600:             #8e24aa !default;
-$color-purple-700:             #7b1fa2 !default;
-$color-purple-800:             #6a1b9a !default;
-$color-purple-900:             #4a148c !default;
-$color-purple-A100:            #ea80fc !default;
-$color-purple-A200:            #e040fb !default;
-$color-purple-A400:            #d500f9 !default;
-$color-purple-A700:            #aa00ff !default;
-$color-purple:                 $color-purple-500 !default;
-
-
-// Deep Purple
-// ----------------------------
-
-$color-deep-purple-50:         #ede7f6 !default;
-$color-deep-purple-100:        #d1c4e9 !default;
-$color-deep-purple-200:        #b39ddb !default;
-$color-deep-purple-300:        #9575cd !default;
-$color-deep-purple-400:        #7e57c2 !default;
-$color-deep-purple-500:        #673ab7 !default;
-$color-deep-purple-600:        #5e35b1 !default;
-$color-deep-purple-700:        #512da8 !default;
-$color-deep-purple-800:        #4527a0 !default;
-$color-deep-purple-900:        #311b92 !default;
-$color-deep-purple-A100:       #b388ff !default;
-$color-deep-purple-A200:       #7c4dff !default;
-$color-deep-purple-A400:       #651fff !default;
-$color-deep-purple-A700:       #6200ea !default;
-$color-deep-purple:            $color-deep-purple-500 !default;
-
-
-// Indigo
-// ----------------------------
-
-$color-indigo-50:              #e8eaf6 !default;
-$color-indigo-100:             #c5cae9 !default;
-$color-indigo-200:             #9fa8da !default;
-$color-indigo-300:             #7986cb !default;
-$color-indigo-400:             #5c6bc0 !default;
-$color-indigo-500:             #3f51b5 !default;
-$color-indigo-600:             #3949ab !default;
-$color-indigo-700:             #303f9f !default;
-$color-indigo-800:             #283593 !default;
-$color-indigo-900:             #1a237e !default;
-$color-indigo-A100:            #8c9eff !default;
-$color-indigo-A200:            #536dfe !default;
-$color-indigo-A400:            #3d5afe !default;
-$color-indigo-A700:            #304ffe !default;
-$color-indigo:                 $color-indigo-500 !default;
-
-
-// Blue
-// ----------------------------
-
-$color-blue-50:                #e7e9fd !default;
-$color-blue-100:               #d0d9ff !default;
-$color-blue-200:               #afbfff !default;
-$color-blue-300:               #91a7ff !default;
-$color-blue-400:               #738ffe !default;
-$color-blue-500:               #5677fc !default;
-$color-blue-600:               #4e6cef !default;
-$color-blue-700:               #455ede !default;
-$color-blue-800:               #3b50ce !default;
-$color-blue-900:               #2a36b1 !default;
-$color-blue-A100:              #a6baff !default;
-$color-blue-A200:              #6889ff !default;
-$color-blue-A400:              #4d73ff !default;
-$color-blue-A700:              #4d69ff !default;
-$color-blue:                   $color-blue-500 !default;
-
-
-// Light Blue
-// ----------------------------
-
-$color-light-blue-50:          #e1f5fe !default;
-$color-light-blue-100:         #b3e5fc !default;
-$color-light-blue-200:         #81d4fa !default;
-$color-light-blue-300:         #4fc3f7 !default;
-$color-light-blue-400:         #29b6f6 !default;
-$color-light-blue-500:         #03a9f4 !default;
-$color-light-blue-600:         #039be5 !default;
-$color-light-blue-700:         #0288d1 !default;
-$color-light-blue-800:         #0277bd !default;
-$color-light-blue-900:         #01579b !default;
-$color-light-blue-A100:        #80d8ff !default;
-$color-light-blue-A200:        #40c4ff !default;
-$color-light-blue-A400:        #00b0ff !default;
-$color-light-blue-A700:        #0091ea !default;
-$color-light-blue:             $color-light-blue-500 !default;
-
-
-// Cyan
-// ----------------------------
-
-$color-cyan-50:                #e0f7fa !default;
-$color-cyan-100:               #b2ebf2 !default;
-$color-cyan-200:               #80deea !default;
-$color-cyan-300:               #4dd0e1 !default;
-$color-cyan-400:               #26c6da !default;
-$color-cyan-500:               #00bcd4 !default;
-$color-cyan-600:               #00acc1 !default;
-$color-cyan-700:               #0097a7 !default;
-$color-cyan-800:               #00838f !default;
-$color-cyan-900:               #006064 !default;
-$color-cyan-A100:              #84ffff !default;
-$color-cyan-A200:              #18ffff !default;
-$color-cyan-A400:              #00e5ff !default;
-$color-cyan-A700:              #00b8d4 !default;
-$color-cyan:                   $color-cyan-500 !default;
-
-
-// Teal
-// ----------------------------
-
-$color-teal-50:                #e0f2f1 !default;
-$color-teal-100:               #b2dfdb !default;
-$color-teal-200:               #80cbc4 !default;
-$color-teal-300:               #4db6ac !default;
-$color-teal-400:               #26a69a !default;
-$color-teal-500:               #009688 !default;
-$color-teal-600:               #00897b !default;
-$color-teal-700:               #00796b !default;
-$color-teal-800:               #00695c !default;
-$color-teal-900:               #004d40 !default;
-$color-teal-A100:              #a7ffeb !default;
-$color-teal-A200:              #64ffda !default;
-$color-teal-A400:              #1de9b6 !default;
-$color-teal-A700:              #00bfa5 !default;
-$color-teal:                   $color-teal-500 !default;
-
-
-// Green
-// ----------------------------
-
-$color-green-50:               #d0f8ce !default;
-$color-green-100:              #a3e9a4 !default;
-$color-green-200:              #72d572 !default;
-$color-green-300:              #42bd41 !default;
-$color-green-400:              #2baf2b !default;
-$color-green-500:              #259b24 !default;
-$color-green-600:              #0a8f08 !default;
-$color-green-700:              #0a7e07 !default;
-$color-green-800:              #056f00 !default;
-$color-green-900:              #0d5302 !default;
-$color-green-A100:             #a2f78d !default;
-$color-green-A200:             #5af158 !default;
-$color-green-A400:             #14e715 !default;
-$color-green-A700:             #12c700 !default;
-$color-green:                  $color-green-500 !default;
-
-
-// Light Green
-// ----------------------------
-
-$color-light-green-50:         #f1f8e9 !default;
-$color-light-green-100:        #dcedc8 !default;
-$color-light-green-200:        #c5e1a5 !default;
-$color-light-green-300:        #aed581 !default;
-$color-light-green-400:        #9ccc65 !default;
-$color-light-green-500:        #8bc34a !default;
-$color-light-green-600:        #7cb342 !default;
-$color-light-green-700:        #689f38 !default;
-$color-light-green-800:        #558b2f !default;
-$color-light-green-900:        #33691e !default;
-$color-light-green-A100:       #ccff90 !default;
-$color-light-green-A200:       #b2ff59 !default;
-$color-light-green-A400:       #76ff03 !default;
-$color-light-green-A700:       #64dd17 !default;
-$color-light-green:            $color-light-green-500 !default;
-
-
-// Lime
-// ----------------------------
-
-$color-lime-50:                #f9fbe7 !default;
-$color-lime-100:               #f0f4c3 !default;
-$color-lime-200:               #e6ee9c !default;
-$color-lime-300:               #dce775 !default;
-$color-lime-400:               #d4e157 !default;
-$color-lime-500:               #cddc39 !default;
-$color-lime-600:               #c0ca33 !default;
-$color-lime-700:               #afb42b !default;
-$color-lime-800:               #9e9d24 !default;
-$color-lime-900:               #827717 !default;
-$color-lime-A100:              #f4ff81 !default;
-$color-lime-A200:              #eeff41 !default;
-$color-lime-A400:              #c6ff00 !default;
-$color-lime-A700:              #aeea00 !default;
-$color-lime:                   $color-lime-500 !default;
-
-
-// Yellow
-// ----------------------------
-
-$color-yellow-50:              #fffde7 !default;
-$color-yellow-100:             #fff9c4 !default;
-$color-yellow-200:             #fff59d !default;
-$color-yellow-300:             #fff176 !default;
-$color-yellow-400:             #ffee58 !default;
-$color-yellow-500:             #ffeb3b !default;
-$color-yellow-600:             #fdd835 !default;
-$color-yellow-700:             #fbc02d !default;
-$color-yellow-800:             #f9a825 !default;
-$color-yellow-900:             #f57f17 !default;
-$color-yellow-A100:            #ffff8d !default;
-$color-yellow-A200:            #ffff00 !default;
-$color-yellow-A400:            #ffea00 !default;
-$color-yellow-A700:            #ffd600 !default;
-$color-yellow:                 $color-yellow-500 !default;
-
-
-// Amber
-// ----------------------------
-
-$color-amber-50:               #fff8e1 !default;
-$color-amber-100:              #ffecb3 !default;
-$color-amber-200:              #ffe082 !default;
-$color-amber-300:              #ffd54f !default;
-$color-amber-400:              #ffca28 !default;
-$color-amber-500:              #ffc107 !default;
-$color-amber-600:              #ffb300 !default;
-$color-amber-700:              #ffa000 !default;
-$color-amber-800:              #ff8f00 !default;
-$color-amber-900:              #ff6f00 !default;
-$color-amber-A100:             #ffe57f !default;
-$color-amber-A200:             #ffd740 !default;
-$color-amber-A400:             #ffc400 !default;
-$color-amber-A700:             #ffab00 !default;
-$color-amber:                  $color-amber-500 !default;
-
-
-// Orange
-// ----------------------------
-
-$color-orange-50:              #fff3e0 !default;
-$color-orange-100:             #ffe0b2 !default;
-$color-orange-200:             #ffcc80 !default;
-$color-orange-300:             #ffb74d !default;
-$color-orange-400:             #ffa726 !default;
-$color-orange-500:             #ff9800 !default;
-$color-orange-600:             #fb8c00 !default;
-$color-orange-700:             #f57c00 !default;
-$color-orange-800:             #ef6c00 !default;
-$color-orange-900:             #e65100 !default;
-$color-orange-A100:            #ffd180 !default;
-$color-orange-A200:            #ffab40 !default;
-$color-orange-A400:            #ff9100 !default;
-$color-orange-A700:            #ff6d00 !default;
-$color-orange:                 $color-orange-500 !default;
-
-
-// Deep Orange
-// ----------------------------
-
-$color-deep-orange-50:         #fbe9e7 !default;
-$color-deep-orange-100:        #ffccbc !default;
-$color-deep-orange-200:        #ffab91 !default;
-$color-deep-orange-300:        #ff8a65 !default;
-$color-deep-orange-400:        #ff7043 !default;
-$color-deep-orange-500:        #ff5722 !default;
-$color-deep-orange-600:        #f4511e !default;
-$color-deep-orange-700:        #e64a19 !default;
-$color-deep-orange-800:        #d84315 !default;
-$color-deep-orange-900:        #bf360c !default;
-$color-deep-orange-A100:       #ff9e80 !default;
-$color-deep-orange-A200:       #ff6e40 !default;
-$color-deep-orange-A400:       #ff3d00 !default;
-$color-deep-orange-A700:       #dd2c00 !default;
-$color-deep-orange:            $color-deep-orange-500 !default;
-
-
-// Brown
-// ----------------------------
-
-$color-brown-50:               #efebe9 !default;
-$color-brown-100:              #d7ccc8 !default;
-$color-brown-200:              #bcaaa4 !default;
-$color-brown-300:              #a1887f !default;
-$color-brown-400:              #8d6e63 !default;
-$color-brown-500:              #795548 !default;
-$color-brown-600:              #6d4c41 !default;
-$color-brown-700:              #5d4037 !default;
-$color-brown-800:              #4e342e !default;
-$color-brown-900:              #3e2723 !default;
-$color-brown:                  $color-brown-500 !default;
-
-
-// Grey
-// ----------------------------
-
-$color-grey-0:                 #ffffff !default;
-$color-grey-50:                #fafafa !default;
-$color-grey-100:               #f5f5f5 !default;
-$color-grey-200:               #eeeeee !default;
-$color-grey-300:               #e0e0e0 !default;
-$color-grey-400:               #bdbdbd !default;
-$color-grey-500:               #9e9e9e !default;
-$color-grey-600:               #757575 !default;
-$color-grey-700:               #616161 !default;
-$color-grey-800:               #424242 !default;
-$color-grey-900:               #212121 !default;
-$color-grey-1000:              #000000 !default;
-$color-grey:                   $color-grey-500 !default;
-
-
-// Blue Grey
-// ----------------------------
-
-$color-blue-grey-50:           #eceff1 !default;
-$color-blue-grey-100:          #cfd8dc !default;
-$color-blue-grey-200:          #b0bec5 !default;
-$color-blue-grey-300:          #90a4ae !default;
-$color-blue-grey-400:          #78909c !default;
-$color-blue-grey-500:          #607d8b !default;
-$color-blue-grey-600:          #546e7a !default;
-$color-blue-grey-700:          #455a64 !default;
-$color-blue-grey-800:          #37474f !default;
-$color-blue-grey-900:          #263238 !default;
-$color-blue-grey:              $color-blue-grey-500 !default;
diff --git a/src/services/interimElement/interimElement.js b/src/services/interimElement/interimElement.js
index ea8beb2344e..eecdcb15d0f 100644
--- a/src/services/interimElement/interimElement.js
+++ b/src/services/interimElement/interimElement.js
@@ -5,7 +5,8 @@
  */
 
 angular.module('material.services.interimElement', [
-  'material.services.compiler'
+  'material.services.compiler',
+  'material.services.theming'
 ])
 .factory('$$interimElement', [
   '$q',
@@ -14,6 +15,7 @@ angular.module('material.services.interimElement', [
   '$rootElement',
   '$animate',
   '$mdCompiler',
+  '$mdTheming',
   InterimElementFactory
 ]);
 
@@ -40,7 +42,7 @@ angular.module('material.services.interimElement', [
  *
  */
 
-function InterimElementFactory($q, $rootScope, $timeout, $rootElement, $animate, $mdCompiler) {
+function InterimElementFactory($q, $rootScope, $timeout, $rootElement, $animate, $mdCompiler, $mdTheming) {
 
   return function createInterimElementService(defaults) {
 
@@ -164,6 +166,7 @@ function InterimElementFactory($q, $rootScope, $timeout, $rootElement, $animate,
               if (!options.parent.length) options.parent = $rootElement;
             }
             element = compiledData.link(options.scope);
+            if (options.themable) $mdTheming(element);
             var ret = options.onShow(options.scope, element, options);
             return $q.when(ret)
               .then(startHideTimeout);
diff --git a/src/services/interimElement/interimElement.spec.js b/src/services/interimElement/interimElement.spec.js
index a7696e3507a..bdab10ff91b 100644
--- a/src/services/interimElement/interimElement.spec.js
+++ b/src/services/interimElement/interimElement.spec.js
@@ -1,11 +1,13 @@
 describe('$$interimElement service', function() {
-  var $compilerSpy, resolvingPromise;
+  var $compilerSpy, $themingSpy, resolvingPromise;
 
   beforeEach(module('material.services.interimElement', 'ngAnimateMock', function($provide) {
     var $mdCompiler = { compile: angular.noop };
     $compilerSpy = spyOn($mdCompiler, 'compile');
+    $themingSpy = jasmine.createSpy('$mdTheming');
 
     $provide.value('$mdCompiler', $mdCompiler);
+    $provide.value('$mdTheming', $themingSpy);
   }));
 
   beforeEach(inject(function($q, $compile) {
@@ -39,6 +41,12 @@ describe('$$interimElement service', function() {
         expect($compilerSpy.mostRecentCall.args[0].template).toBe('testing');
       }));
 
+      it('supports theming', inject(function($$interimElement, $rootScope) {
+        Service.show({themable: true});
+        $rootScope.$digest();
+        expect($themingSpy).toHaveBeenCalled();
+      }));
+
       it('calls hide after hideDelay', inject(function($animate, $timeout, $rootScope) {
         var hideSpy = spyOn(Service, 'hide').andCallThrough();
         Service.show({hideDelay: 1000});
diff --git a/src/services/theming/theming.js b/src/services/theming/theming.js
new file mode 100644
index 00000000000..a5c8a508d6d
--- /dev/null
+++ b/src/services/theming/theming.js
@@ -0,0 +1,93 @@
+/*
+ * @ngdoc module
+ * @name material.services.theming
+ * @description InterimElement
+ */
+
+angular.module('material.services.theming', [
+])
+.directive('mdTheme', [
+  ThemingDirective
+])
+.directive('mdThemable', [
+  '$mdTheming',
+  ThemableDirective
+])
+.factory('$mdTheming', [
+  '$rootScope',
+  Theming
+]);
+
+/*
+ * @ngdoc service
+ * @name $mdTheming
+ *
+ * @description
+ *
+ * Service that makes an element apply theming related classes to itself.
+ *
+ * ```js
+ * app.directive('myFancyDirective', function($mdTheming) {
+ *   return {
+ *     restrict: 'e',
+ *     link: function(scope, el, attrs) {
+ *       $mdTheming(el);
+ *     }
+ *   };
+ * });
+ * ```
+ * @param {el=} element to apply theming to
+ *
+ * @returns {$$interimElement.$service}
+ *
+ */
+
+function Theming($rootScope) {
+  return function applyTheme(scope, el) {
+    // Allow us to be invoked via a linking function signature.
+    if (el === undefined) { 
+      el = scope;
+      scope = undefined;
+    }
+    if (scope === undefined) {
+      scope = $rootScope;
+    }
+
+    if (el.attr('md-theme')) { window.debugging = true; }
+    var ctrl = el.controller('mdTheme');
+
+    if (el.attr('md-theme-watch')) { 
+      $scope.$watch(function() { return ctrl && ctrl.$mdTheme || 'default'; }, changeTheme);
+    } else {
+      var theme = ctrl && ctrl.$mdTheme || 'default';
+      changeTheme(theme);
+    }
+
+    function changeTheme(theme, oldTheme) {
+      if (oldTheme) el.removeClass('md-' + theme +'-theme');
+      el.addClass('md-' + theme + '-theme');
+    }
+  };
+}
+
+function ThemingDirective() {
+  return {
+    priority: 100,
+    link: {
+      pre: function(scope, el, attrs) {
+        var ctrl = {
+          $setTheme: function(theme) {
+            this.$mdTheme = theme;
+          }
+        };
+        el.data('$mdThemeController', ctrl);
+        ctrl.$setTheme(attrs.mdTheme);
+        attrs.$observe('mdTheme', ctrl.$setTheme);
+      }
+    }
+  };
+}
+
+function ThemableDirective($mdTheming) {
+  return $mdTheming;
+}
diff --git a/src/services/theming/theming.spec.js b/src/services/theming/theming.spec.js
new file mode 100644
index 00000000000..ad797865511
--- /dev/null
+++ b/src/services/theming/theming.spec.js
@@ -0,0 +1,38 @@
+describe('$mdTheming service', function() {
+  beforeEach(module('material.services.theming'));
+
+  var el, testHtml, compileAndLink;
+
+  beforeEach(inject(function($rootScope, $compile) {
+    compileAndLink = function(html) {
+      return $compile(html)($rootScope.$new());
+    };
+  }));
+
+  beforeEach(function() {
+    testHtml = '<h1>Test</h1>';
+    el = compileAndLink(testHtml);
+  });
+
+  it('applies a default theme if no theme can be found', inject(function($mdTheming) {
+    $mdTheming(el);
+    expect(el.hasClass('md-default-theme')).toBe(true);
+  }));
+
+  it('inherits the theme from parent elements', inject(function($mdTheming) {
+    el = compileAndLink([
+      '<div md-theme="awesome">',
+        testHtml,
+      '</div>'
+    ].join('')).children(0);
+
+    $mdTheming(el);
+    expect(el.hasClass('md-default-theme')).toBe(false);
+    expect(el.hasClass('md-awesome-theme')).toBe(true);
+  }));
+
+  it('provides the md-themable directive', function() {
+    el = compileAndLink('<h1 md-themable></h1>');
+    expect(el.hasClass('md-default-theme')).toBe(true);
+  });
+});
diff --git a/themes/amber-theme.scss b/themes/amber-theme.scss
new file mode 100644
index 00000000000..4ea4fd5be60
--- /dev/null
+++ b/themes/amber-theme.scss
@@ -0,0 +1,3 @@
+$theme-name: 'amber';
+$primary-color-palette: $color-amber;
+$primary-color-palette-contrast-color: rgba(black, 0.73);
diff --git a/themes/blue-grey-theme.scss b/themes/blue-grey-theme.scss
new file mode 100644
index 00000000000..403bd68567e
--- /dev/null
+++ b/themes/blue-grey-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'blue-grey';
+$primary-color-palette: $color-blue-grey;
diff --git a/themes/blue-theme.scss b/themes/blue-theme.scss
new file mode 100644
index 00000000000..8a5b8bdc5d6
--- /dev/null
+++ b/themes/blue-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'blue';
+$primary-color-palette: $color-blue;
diff --git a/themes/brown-theme.scss b/themes/brown-theme.scss
new file mode 100644
index 00000000000..aac980ffff0
--- /dev/null
+++ b/themes/brown-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'brown';
+$primary-color-palette: $color-brown;
diff --git a/themes/cyan-theme.scss b/themes/cyan-theme.scss
new file mode 100644
index 00000000000..70e38a8e2b5
--- /dev/null
+++ b/themes/cyan-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'cyan';
+$primary-color-palette: $color-cyan;
diff --git a/themes/deep-orange-theme.scss b/themes/deep-orange-theme.scss
new file mode 100644
index 00000000000..24a048ab3c9
--- /dev/null
+++ b/themes/deep-orange-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'deep-orange';
+$primary-color-palette: $color-deep-orange;
diff --git a/themes/deep-purple-theme.scss b/themes/deep-purple-theme.scss
new file mode 100644
index 00000000000..3a5b9e07837
--- /dev/null
+++ b/themes/deep-purple-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'deep-purple';
+$primary-color-palette: $color-deep-purple;
diff --git a/themes/default-theme.scss b/themes/default-theme.scss
index 4d2e652b00e..d4d6d9c8bf7 100644
--- a/themes/default-theme.scss
+++ b/themes/default-theme.scss
@@ -1,66 +1,323 @@
-$base-vendor-prefixes: "webkit", "moz", "ms";
-$font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial;
-$font-color-base: #444;
-$background-color-base: #fff !default;
-$text-light: #f1f1f1;
-$text-medium: #999;
-$text-dark: #111111;
-$theme-textfield-focus-label: #1b1b1b;
-$theme-textfield-focus-border: #1394F5;
-$theme-gray: #444;
-$theme-light: #4285f4;
-$theme-light-blue: #03a9f4;
-$theme-dark: #3f51b5;
-$theme-green: #0f9d58;
-$theme-yellow: #ffeb3b;
-$theme-orange: #ff5722;
-$theme-purple: #9c27b0;
-$theme-red: #db4437;
-$theme-indigo: #3e50b4;
-$h1-font-size-base: 2em !default;
-$h1-margin-base: 0.67em 0 !default;
-$h2-font-size-base: 1.5em !default;
-$h2-margin-base: 0.83em 0 !default;
-$h3-font-size-base: 1.17em !default;
-$h3-margin-base: 1em 0 !default;
-$h4-font-size-base: 1em !default;
-$h4-margin-base: 1.33em 0 !default;
-$h5-font-size-base: 0.83em !default;
-$h5-margin-base: 1.67em 0 !default;
-$h6-font-size-base: 0.75em !default;
-$h6-margin-base: 2.33em 0 !default;
+$color-red: (
+  '50': #fde0dc,
+  '100': #f9bdbb,
+  '200': #f69988,
+  '300': #f36c60,
+  '400': #e84e40,
+  '500': #e51c23,
+  '600': #dd191d,
+  '700': #d01716,
+  '800': #c41411,
+  '900': #b0120a,
+  'A100': #ff7997,
+  'A200': #ff5177,
+  'A400': #ff2d6f,
+  'A700': #e00032
+);
+$color-pink: (
+  '50': #fce4ec,
+  '100': #f8bbd0,
+  '200': #f48fb1,
+  '300': #f06292,
+  '400': #ec407a,
+  '500': #e91e63,
+  '600': #d81b60,
+  '700': #c2185b,
+  '800': #ad1457,
+  '900': #880e4f,
+  'A100': #ff80ab,
+  'A200': #ff4081,
+  'A400': #f50057,
+  'A700': #c51162,
+);
+$color-purple: (
+  '50': #f3e5f5,
+  '100': #e1bee7,
+  '200': #ce93d8,
+  '300': #ba68c8,
+  '400': #ab47bc,
+  '500': #9c27b0,
+  '600': #8e24aa,
+  '700': #7b1fa2,
+  '800': #6a1b9a,
+  '900': #4a148c,
+  'A100': #ea80fc,
+  'A200': #e040fb,
+  'A400': #d500f9,
+  'A700': #aa00ff
+);
+$color-deep-purple: (
+  '50': #ede7f6,
+  '100': #d1c4e9,
+  '200': #b39ddb,
+  '300': #9575cd,
+  '400': #7e57c2,
+  '500': #673ab7,
+  '600': #5e35b1,
+  '700': #512da8,
+  '800': #4527a0,
+  '900': #311b92,
+  'A100': #b388ff,
+  'A200': #7c4dff,
+  'A400': #651fff,
+  'A700': #6200ea
+);
+$color-indigo: (
+  '50': #e8eaf6,
+  '100': #c5cae9,
+  '200': #9fa8da,
+  '300': #7986cb,
+  '400': #5c6bc0,
+  '500': #3f51b5,
+  '600': #3949ab,
+  '700': #303f9f,
+  '800': #283593,
+  '900': #1a237e,
+  'A100': #8c9eff,
+  'A200': #536dfe,
+  'A400': #3d5afe,
+  'A700': #304ffe
+);
+$color-blue: (
+  '50': #e7e9fd,
+  '100': #d0d9ff,
+  '200': #afbfff,
+  '300': #91a7ff,
+  '400': #738ffe,
+  '500': #5677fc,
+  '600': #4e6cef,
+  '700': #455ede,
+  '800': #3b50ce,
+  '900': #2a36b1,
+  'A100': #a6baff,
+  'A200': #6889ff,
+  'A400': #4d73ff,
+  'A700': #4d69ff
+);
+$color-light-blue: (
+  '50': #e1f5fe,
+  '100': #b3e5fc,
+  '200': #81d4fa,
+  '300': #4fc3f7,
+  '400': #29b6f6,
+  '500': #03a9f4,
+  '600': #039be5,
+  '700': #0288d1,
+  '800': #0277bd,
+  '900': #01579b,
+  'A100': #80d8ff,
+  'A200': #40c4ff,
+  'A400': #00b0ff,
+  'A700': #0091ea
+);
+$color-cyan: (
+  '50': #e0f7fa,
+  '100': #b2ebf2,
+  '200': #80deea,
+  '300': #4dd0e1,
+  '400': #26c6da,
+  '500': #00bcd4,
+  '600': #00acc1,
+  '700': #0097a7,
+  '800': #00838f,
+  '900': #006064,
+  'A100': #84ffff,
+  'A200': #18ffff,
+  'A400': #00e5ff,
+  'A700': #00b8d4
+);
+$color-teal: (
+  '50': #e0f2f1,
+  '100': #b2dfdb,
+  '200': #80cbc4,
+  '300': #4db6ac,
+  '400': #26a69a,
+  '500': #009688,
+  '600': #00897b,
+  '700': #00796b,
+  '800': #00695c,
+  '900': #004d40,
+  'A100': #a7ffeb,
+  'A200': #64ffda,
+  'A400': #1de9b6,
+  'A700': #00bfa5
+);
+$color-green: (
+  '50': #d0f8ce,
+  '100': #a3e9a4,
+  '200': #72d572,
+  '300': #42bd41,
+  '400': #2baf2b,
+  '500': #259b24,
+  '600': #0a8f08,
+  '700': #0a7e07,
+  '800': #056f00,
+  '900': #0d5302,
+  'A100': #a2f78d,
+  'A200': #5af158,
+  'A400': #14e715,
+  'A700': #12c700
+);
+$color-light-green: (
+  '50': #f1f8e9,
+  '100': #dcedc8,
+  '200': #c5e1a5,
+  '300': #aed581,
+  '400': #9ccc65,
+  '500': #8bc34a,
+  '600': #7cb342,
+  '700': #689f38,
+  '800': #558b2f,
+  '900': #33691e,
+  'A100': #ccff90,
+  'A200': #b2ff59,
+  'A400': #76ff03,
+  'A700': #64dd17
+);
+$color-lime: (
+  '50': #f9fbe7,
+  '100': #f0f4c3,
+  '200': #e6ee9c,
+  '300': #dce775,
+  '400': #d4e157,
+  '500': #cddc39,
+  '600': #c0ca33,
+  '700': #afb42b,
+  '800': #9e9d24,
+  '900': #827717,
+  'A100': #f4ff81,
+  'A200': #eeff41,
+  'A400': #c6ff00,
+  'A700': #aeea00
+);
+$color-yellow: (
+  '50': #fffde7,
+  '100': #fff9c4,
+  '200': #fff59d,
+  '300': #fff176,
+  '400': #ffee58,
+  '500': #ffeb3b,
+  '600': #fdd835,
+  '700': #fbc02d,
+  '800': #f9a825,
+  '900': #f57f17,
+  'A100': #ffff8d,
+  'A200': #ffff00,
+  'A400': #ffea00,
+  'A700': #ffd600
+);
+$color-amber: (
+  '50': #fff8e1,
+  '100': #ffecb3,
+  '200': #ffe082,
+  '300': #ffd54f,
+  '400': #ffca28,
+  '500': #ffc107,
+  '600': #ffb300,
+  '700': #ffa000,
+  '800': #ff8f00,
+  '900': #ff6f00,
+  'A100': #ffe57f,
+  'A200': #ffd740,
+  'A400': #ffc400,
+  'A700': #ffab00
+);
+$color-orange: (
+  '50': #fff3e0,
+  '100': #ffe0b2,
+  '200': #ffcc80,
+  '300': #ffb74d,
+  '400': #ffa726,
+  '500': #ff9800,
+  '600': #fb8c00,
+  '700': #f57c00,
+  '800': #ef6c00,
+  '900': #e65100,
+  'A100': #ffd180,
+  'A200': #ffab40,
+  'A400': #ff9100,
+  'A700': #ff6d00
+);
+$color-deep-orange: (
+  '50': #fbe9e7,
+  '100': #ffccbc,
+  '200': #ffab91,
+  '300': #ff8a65,
+  '400': #ff7043,
+  '500': #ff5722,
+  '600': #f4511e,
+  '700': #e64a19,
+  '800': #d84315,
+  '900': #bf360c,
+  'A100': #ff9e80,
+  'A200': #ff6e40,
+  'A400': #ff3d00,
+  'A700': #dd2c00
+);
+$color-brown: (
+  '50': #efebe9,
+  '100': #d7ccc8,
+  '200': #bcaaa4,
+  '300': #a1887f,
+  '400': #8d6e63,
+  '500': #795548,
+  '600': #6d4c41,
+  '700': #5d4037,
+  '800': #4e342e,
+  '900': #3e2723
+);
+$color-grey: (
+  '0': #ffffff,
+  '50': #fafafa,
+  '100': #f5f5f5,
+  '200': #eeeeee,
+  '300': #e0e0e0,
+  '400': #bdbdbd,
+  '500': #9e9e9e,
+  '600': #757575,
+  '700': #616161,
+  '800': #424242,
+  '900': #212121,
+  '1000': #000000,
+  'A100': #ffffff
+);
+$color-blue-grey: (
+  '50': #eceff1,
+  '100': #cfd8dc,
+  '200': #b0bec5,
+  '300': #90a4ae,
+  '400': #78909c,
+  '500': #607d8b,
+  '600': #546e7a,
+  '700': #455a64,
+  '800': #37474f,
+  '900': #263238
+);
+$theme-name: 'default' !default;
+$font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial !default;
+$dark-theme: false !default;
+$foreground-color-palette: $color-grey !default;
+$foreground-base-color: map-get($foreground-color-palette, '1000') !default;
+$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
+$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
+$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
+$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
+$foreground-text-shadow: none !default;
+$input-border-color: $foreground-secondary-color !default;
+$input-disabled-border-color: $foreground-tertiary-color !default;
+$background-color-palette: $color-grey !default;
+$background-color-base: map-get($background-color-palette, 'A100') !default;
+$primary-color-palette: $color-light-blue !default;
+$warn-color-palette: $color-red !default;
+$primary-color-palette-contrast-color: white !default;
 $baseline-grid:            8px !default;
 $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
-$toast-height: $baseline-grid * 3;
-$toast-margin: $baseline-grid * 1;
-$button-border-radius: 3px;
-$button-disabled-background: rgb(234, 234, 234);
-$button-disabled-color: rgb(168, 168, 168);
-$button-raised-background: rgb(223, 223, 233);
-$button-raised-colored-color: #fff;
-$button-raised-colored-background: $theme-light;
-$button-hover-background: rgb(228, 228, 228);
-$button-raised-hover-background: rgb(214, 214, 214);
-$button-raised-colored-hover-background: #3367d6;
-$button-line-height: 25px;
-$button-padding: 2px 6px 3px;
-$button-fab-width: 56px;
-$button-fab-height: 56px;
-$button-fab-border-radius: 28px;
-$button-fab-padding: 16px;
-$button-fab-toast-offset: $toast-height + $toast-margin;
 $app-bar-height: 64px;
-$toolbar-tools-height: 64px;
-$toolbar-height: 64px;
-$toolbar-medium-tall-height: 88px;
-$toolbar-tall-height: 192px;
-$toolbar-indent-margin: 64px;
-$sidenav-shadow: 0px 0px 5px rgba(0,0,0,0.4);
-$sidenav-default-width: 304px;
-$sidenav-min-room: 56px;
+$toast-height: $baseline-grid * 3 !default;
+$toast-margin: $baseline-grid * 1 !default;
 $whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26);
 $whiteframe-zindex-z1: 1;
 $whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2);
@@ -71,114 +328,6 @@ $whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22);
 $whiteframe-zindex-z4: 4;
 $whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2);
 $whiteframe-zindex-z5: 5;
-$subheader-line-height: 1em;
-$subheader-font-size: 0.9em;
-$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2);
-$subheader-font-weight: 400;
-$subheader-margin: 0 0 0 0;
-$subheader-margin-right: 16px;
-$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16);
-$list-h3-font-size: 1.1em;
-$list-h3-margin: 0 0 3px 0;
-$list-h3-font-weight: 400;
-$list-h4-font-size: 0.9em;
-$list-h4-font-weight: 400;
-$list-h4-margin: 0 0 3px 0;
-$list-p-font-size: 0.75em;
-$list-p-margin: 0 0 3px 0;
-$list-padding-top: $baseline-grid;
-$list-padding-right: 0px;
-$list-padding-left: 0px;
-$list-padding-bottom: $baseline-grid;
-$item-padding-top: 0px;
-$item-padding-right: 0px;
-$item-padding-left: 0px;
-$item-padding-bottom: 0px;
-$card-border-radius: 2px;
-$card-border: 1px solid #eee;
-$card-padding: 8px;
-$card-margin: 8px;
-$card-box-shadow: $whiteframe-shadow-z1;
-$tabs-paginator-width: $baseline-grid * 4 !default;
-$tabs-tab-width: $baseline-grid * 12 !default;
-$tabs-header-height: 48px;
-$tff-font-size: 0.75em;
-$tff-line-height:26px;
-$tff-margin: 10px 0 10px 0;
-$tff-placeholder-color: darken($text-light, 30%);
-$tff-transition: all ease-out 150ms;
-$tff-hint-offset-large : 22px;
-$tff-hint-offset-small : 4px;
-$ttf-hint-offset-scale : 0.75;
-$tff-hint-normal: #999;
-$tff-hint-focused: #EE008B;
-$tff-hint-disabled: #b0b0b0;
-$tff-input-normal: #2f2f2f;
-$tff-input-focused: #EE008B;
-$tff-input-disabled: #bcbcbc;
-$tff-line-focused-width: 2px;
-$tff-line-disabled-width: 0px;
-$tff-line-dot-width: 1px;
-$tff-line-dot-size: 3px;
-$tff-line-normal: #c7c7c7;
-$tff-line-focused: #EE008B;
-$tff-line-disabled: #bcbcbc;
-$tff-line-dashed: #cfcfcf;
-$tff-hint-normal-dark: #5d5d5d;
-$tff-hint-focused-dark: #1194f6;
-$tff-hint-disabled-dark: #858585;
-$tff-input-normal-dark: #d6d6d6;
-$tff-input-focused-dark: #d6d6d6;
-$tff-input-disabled-dark: #5d5d5d;
-$tff-line-normal-dark: #4c4c4c;
-$tff-line-focused-dark: #1194f6;
-$tff-line-disabled-dark: #333333;
-$tff-line-dashed-dark: #525252;
-$bottom-sheet-background-color: #FAFAFA;
-$bottom-sheet-border-top-color: #BCBBBB;
-$bottom-sheet-horizontal-padding: 2 * $baseline-grid;
-$bottom-sheet-vertical-padding: 1 * $baseline-grid;
-$bottom-sheet-icon-after-margin: 4 * $baseline-grid;
-$bottom-sheet-list-item-height: 6 * $baseline-grid;
-$bottom-sheet-hidden-bottom-padding: 80px;
-$bottom-sheet-header-height: 7 * $baseline-grid;
-$bottom-sheet-grid-font-weight: 300;
-$input-font-size: 0.75em;
-$input-line-height: 26px;
-$input-placeholder-color: darken($text-light, 30%);
-$input-color: $text-dark;
-$input-color-inverted: $text-light;
-$input-group-margin: 10px 0 10px 0;
-$input-label-focused-font-size: 0.7em;
-$input-label-focused-color: $text-dark;
-$input-focused-scale: 0.85;
-$input-label-transition: all ease-out 300ms;
-$input-border-color: #6D6D6D;
-$input-disabled-border-color: #a0a0a0;
-$input-focused-border-color: $text-dark;
-$slider-background-color:  rgb(200, 200, 200);
-$slider-height:  48px;
-$slider-track-height:  2px;
-$slider-thumb-width:  32px;
-$slider-thumb-height:  $slider-thumb-width;
-$slider-thumb-default-scale: 0.5;
-$slider-thumb-hover-scale: 0.6;
-$slider-thumb-focus-scale: 0.85;
-$slider-thumb-disabled-scale: 0.35;
-$slider-thumb-disabled-border: 6px;
-$slider-focus-thumb-width:  48px;
-$slider-focus-thumb-height: $slider-focus-thumb-width;
-$slider-focus-ring-border-width: 3px;
-$slider-arrow-height: 16px;
-$slider-arrow-width: 28px;
-$slider-sign-height: 28px;
-$slider-sign-width: 28px;
-$slider-sign-top: ($slider-height / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 8px;
-$switch-width: $baseline-grid * 8;
-$checkbox-width: 18px;
-$checkbox-height: $checkbox-width;
-$radio-width: 16px;
-$radio-height: $radio-width;
 $z-index-dialog: 10;
 $z-index-toast: 9;
 $z-index-sidenav: 8;
@@ -186,569 +335,611 @@ $z-index-backdrop: 7;
 $z-index-tooltip: 6;
 $z-index-fab: 2;
 $z-index-bottom-sheet: $z-index-backdrop + 1;
-$color-divider: 							 rgba(0,0,0,.12) !important;
-$color-red-50:                 #fde0dc !default;
-$color-red-100:                #f9bdbb !default;
-$color-red-200:                #f69988 !default;
-$color-red-300:                #f36c60 !default;
-$color-red-400:                #e84e40 !default;
-$color-red-500:                #e51c23 !default;
-$color-red-600:                #dd191d !default;
-$color-red-700:                #d01716 !default;
-$color-red-800:                #c41411 !default;
-$color-red-900:                #b0120a !default;
-$color-red-A100:               #ff7997 !default;
-$color-red-A200:               #ff5177 !default;
-$color-red-A400:               #ff2d6f !default;
-$color-red-A700:               #e00032 !default;
-$color-red:                    $color-red-500 !default;
-$color-pink-50:                #fce4ec !default;
-$color-pink-100:               #f8bbd0 !default;
-$color-pink-200:               #f48fb1 !default;
-$color-pink-300:               #f06292 !default;
-$color-pink-400:               #ec407a !default;
-$color-pink-500:               #e91e63 !default;
-$color-pink-600:               #d81b60 !default;
-$color-pink-700:               #c2185b !default;
-$color-pink-800:               #ad1457 !default;
-$color-pink-900:               #880e4f !default;
-$color-pink-A100:              #ff80ab !default;
-$color-pink-A200:              #ff4081 !default;
-$color-pink-A400:              #f50057 !default;
-$color-pink-A700:              #c51162 !default;
-$color-pink:                   $color-pink-500 !default;
-$color-purple-50:              #f3e5f5 !default;
-$color-purple-100:             #e1bee7 !default;
-$color-purple-200:             #ce93d8 !default;
-$color-purple-300:             #ba68c8 !default;
-$color-purple-400:             #ab47bc !default;
-$color-purple-500:             #9c27b0 !default;
-$color-purple-600:             #8e24aa !default;
-$color-purple-700:             #7b1fa2 !default;
-$color-purple-800:             #6a1b9a !default;
-$color-purple-900:             #4a148c !default;
-$color-purple-A100:            #ea80fc !default;
-$color-purple-A200:            #e040fb !default;
-$color-purple-A400:            #d500f9 !default;
-$color-purple-A700:            #aa00ff !default;
-$color-purple:                 $color-purple-500 !default;
-$color-deep-purple-50:         #ede7f6 !default;
-$color-deep-purple-100:        #d1c4e9 !default;
-$color-deep-purple-200:        #b39ddb !default;
-$color-deep-purple-300:        #9575cd !default;
-$color-deep-purple-400:        #7e57c2 !default;
-$color-deep-purple-500:        #673ab7 !default;
-$color-deep-purple-600:        #5e35b1 !default;
-$color-deep-purple-700:        #512da8 !default;
-$color-deep-purple-800:        #4527a0 !default;
-$color-deep-purple-900:        #311b92 !default;
-$color-deep-purple-A100:       #b388ff !default;
-$color-deep-purple-A200:       #7c4dff !default;
-$color-deep-purple-A400:       #651fff !default;
-$color-deep-purple-A700:       #6200ea !default;
-$color-deep-purple:            $color-deep-purple-500 !default;
-$color-indigo-50:              #e8eaf6 !default;
-$color-indigo-100:             #c5cae9 !default;
-$color-indigo-200:             #9fa8da !default;
-$color-indigo-300:             #7986cb !default;
-$color-indigo-400:             #5c6bc0 !default;
-$color-indigo-500:             #3f51b5 !default;
-$color-indigo-600:             #3949ab !default;
-$color-indigo-700:             #303f9f !default;
-$color-indigo-800:             #283593 !default;
-$color-indigo-900:             #1a237e !default;
-$color-indigo-A100:            #8c9eff !default;
-$color-indigo-A200:            #536dfe !default;
-$color-indigo-A400:            #3d5afe !default;
-$color-indigo-A700:            #304ffe !default;
-$color-indigo:                 $color-indigo-500 !default;
-$color-blue-50:                #e7e9fd !default;
-$color-blue-100:               #d0d9ff !default;
-$color-blue-200:               #afbfff !default;
-$color-blue-300:               #91a7ff !default;
-$color-blue-400:               #738ffe !default;
-$color-blue-500:               #5677fc !default;
-$color-blue-600:               #4e6cef !default;
-$color-blue-700:               #455ede !default;
-$color-blue-800:               #3b50ce !default;
-$color-blue-900:               #2a36b1 !default;
-$color-blue-A100:              #a6baff !default;
-$color-blue-A200:              #6889ff !default;
-$color-blue-A400:              #4d73ff !default;
-$color-blue-A700:              #4d69ff !default;
-$color-blue:                   $color-blue-500 !default;
-$color-light-blue-50:          #e1f5fe !default;
-$color-light-blue-100:         #b3e5fc !default;
-$color-light-blue-200:         #81d4fa !default;
-$color-light-blue-300:         #4fc3f7 !default;
-$color-light-blue-400:         #29b6f6 !default;
-$color-light-blue-500:         #03a9f4 !default;
-$color-light-blue-600:         #039be5 !default;
-$color-light-blue-700:         #0288d1 !default;
-$color-light-blue-800:         #0277bd !default;
-$color-light-blue-900:         #01579b !default;
-$color-light-blue-A100:        #80d8ff !default;
-$color-light-blue-A200:        #40c4ff !default;
-$color-light-blue-A400:        #00b0ff !default;
-$color-light-blue-A700:        #0091ea !default;
-$color-light-blue:             $color-light-blue-500 !default;
-$color-cyan-50:                #e0f7fa !default;
-$color-cyan-100:               #b2ebf2 !default;
-$color-cyan-200:               #80deea !default;
-$color-cyan-300:               #4dd0e1 !default;
-$color-cyan-400:               #26c6da !default;
-$color-cyan-500:               #00bcd4 !default;
-$color-cyan-600:               #00acc1 !default;
-$color-cyan-700:               #0097a7 !default;
-$color-cyan-800:               #00838f !default;
-$color-cyan-900:               #006064 !default;
-$color-cyan-A100:              #84ffff !default;
-$color-cyan-A200:              #18ffff !default;
-$color-cyan-A400:              #00e5ff !default;
-$color-cyan-A700:              #00b8d4 !default;
-$color-cyan:                   $color-cyan-500 !default;
-$color-teal-50:                #e0f2f1 !default;
-$color-teal-100:               #b2dfdb !default;
-$color-teal-200:               #80cbc4 !default;
-$color-teal-300:               #4db6ac !default;
-$color-teal-400:               #26a69a !default;
-$color-teal-500:               #009688 !default;
-$color-teal-600:               #00897b !default;
-$color-teal-700:               #00796b !default;
-$color-teal-800:               #00695c !default;
-$color-teal-900:               #004d40 !default;
-$color-teal-A100:              #a7ffeb !default;
-$color-teal-A200:              #64ffda !default;
-$color-teal-A400:              #1de9b6 !default;
-$color-teal-A700:              #00bfa5 !default;
-$color-teal:                   $color-teal-500 !default;
-$color-green-50:               #d0f8ce !default;
-$color-green-100:              #a3e9a4 !default;
-$color-green-200:              #72d572 !default;
-$color-green-300:              #42bd41 !default;
-$color-green-400:              #2baf2b !default;
-$color-green-500:              #259b24 !default;
-$color-green-600:              #0a8f08 !default;
-$color-green-700:              #0a7e07 !default;
-$color-green-800:              #056f00 !default;
-$color-green-900:              #0d5302 !default;
-$color-green-A100:             #a2f78d !default;
-$color-green-A200:             #5af158 !default;
-$color-green-A400:             #14e715 !default;
-$color-green-A700:             #12c700 !default;
-$color-green:                  $color-green-500 !default;
-$color-light-green-50:         #f1f8e9 !default;
-$color-light-green-100:        #dcedc8 !default;
-$color-light-green-200:        #c5e1a5 !default;
-$color-light-green-300:        #aed581 !default;
-$color-light-green-400:        #9ccc65 !default;
-$color-light-green-500:        #8bc34a !default;
-$color-light-green-600:        #7cb342 !default;
-$color-light-green-700:        #689f38 !default;
-$color-light-green-800:        #558b2f !default;
-$color-light-green-900:        #33691e !default;
-$color-light-green-A100:       #ccff90 !default;
-$color-light-green-A200:       #b2ff59 !default;
-$color-light-green-A400:       #76ff03 !default;
-$color-light-green-A700:       #64dd17 !default;
-$color-light-green:            $color-light-green-500 !default;
-$color-lime-50:                #f9fbe7 !default;
-$color-lime-100:               #f0f4c3 !default;
-$color-lime-200:               #e6ee9c !default;
-$color-lime-300:               #dce775 !default;
-$color-lime-400:               #d4e157 !default;
-$color-lime-500:               #cddc39 !default;
-$color-lime-600:               #c0ca33 !default;
-$color-lime-700:               #afb42b !default;
-$color-lime-800:               #9e9d24 !default;
-$color-lime-900:               #827717 !default;
-$color-lime-A100:              #f4ff81 !default;
-$color-lime-A200:              #eeff41 !default;
-$color-lime-A400:              #c6ff00 !default;
-$color-lime-A700:              #aeea00 !default;
-$color-lime:                   $color-lime-500 !default;
-$color-yellow-50:              #fffde7 !default;
-$color-yellow-100:             #fff9c4 !default;
-$color-yellow-200:             #fff59d !default;
-$color-yellow-300:             #fff176 !default;
-$color-yellow-400:             #ffee58 !default;
-$color-yellow-500:             #ffeb3b !default;
-$color-yellow-600:             #fdd835 !default;
-$color-yellow-700:             #fbc02d !default;
-$color-yellow-800:             #f9a825 !default;
-$color-yellow-900:             #f57f17 !default;
-$color-yellow-A100:            #ffff8d !default;
-$color-yellow-A200:            #ffff00 !default;
-$color-yellow-A400:            #ffea00 !default;
-$color-yellow-A700:            #ffd600 !default;
-$color-yellow:                 $color-yellow-500 !default;
-$color-amber-50:               #fff8e1 !default;
-$color-amber-100:              #ffecb3 !default;
-$color-amber-200:              #ffe082 !default;
-$color-amber-300:              #ffd54f !default;
-$color-amber-400:              #ffca28 !default;
-$color-amber-500:              #ffc107 !default;
-$color-amber-600:              #ffb300 !default;
-$color-amber-700:              #ffa000 !default;
-$color-amber-800:              #ff8f00 !default;
-$color-amber-900:              #ff6f00 !default;
-$color-amber-A100:             #ffe57f !default;
-$color-amber-A200:             #ffd740 !default;
-$color-amber-A400:             #ffc400 !default;
-$color-amber-A700:             #ffab00 !default;
-$color-amber:                  $color-amber-500 !default;
-$color-orange-50:              #fff3e0 !default;
-$color-orange-100:             #ffe0b2 !default;
-$color-orange-200:             #ffcc80 !default;
-$color-orange-300:             #ffb74d !default;
-$color-orange-400:             #ffa726 !default;
-$color-orange-500:             #ff9800 !default;
-$color-orange-600:             #fb8c00 !default;
-$color-orange-700:             #f57c00 !default;
-$color-orange-800:             #ef6c00 !default;
-$color-orange-900:             #e65100 !default;
-$color-orange-A100:            #ffd180 !default;
-$color-orange-A200:            #ffab40 !default;
-$color-orange-A400:            #ff9100 !default;
-$color-orange-A700:            #ff6d00 !default;
-$color-orange:                 $color-orange-500 !default;
-$color-deep-orange-50:         #fbe9e7 !default;
-$color-deep-orange-100:        #ffccbc !default;
-$color-deep-orange-200:        #ffab91 !default;
-$color-deep-orange-300:        #ff8a65 !default;
-$color-deep-orange-400:        #ff7043 !default;
-$color-deep-orange-500:        #ff5722 !default;
-$color-deep-orange-600:        #f4511e !default;
-$color-deep-orange-700:        #e64a19 !default;
-$color-deep-orange-800:        #d84315 !default;
-$color-deep-orange-900:        #bf360c !default;
-$color-deep-orange-A100:       #ff9e80 !default;
-$color-deep-orange-A200:       #ff6e40 !default;
-$color-deep-orange-A400:       #ff3d00 !default;
-$color-deep-orange-A700:       #dd2c00 !default;
-$color-deep-orange:            $color-deep-orange-500 !default;
-$color-brown-50:               #efebe9 !default;
-$color-brown-100:              #d7ccc8 !default;
-$color-brown-200:              #bcaaa4 !default;
-$color-brown-300:              #a1887f !default;
-$color-brown-400:              #8d6e63 !default;
-$color-brown-500:              #795548 !default;
-$color-brown-600:              #6d4c41 !default;
-$color-brown-700:              #5d4037 !default;
-$color-brown-800:              #4e342e !default;
-$color-brown-900:              #3e2723 !default;
-$color-brown:                  $color-brown-500 !default;
-$color-grey-0:                 #ffffff !default;
-$color-grey-50:                #fafafa !default;
-$color-grey-100:               #f5f5f5 !default;
-$color-grey-200:               #eeeeee !default;
-$color-grey-300:               #e0e0e0 !default;
-$color-grey-400:               #bdbdbd !default;
-$color-grey-500:               #9e9e9e !default;
-$color-grey-600:               #757575 !default;
-$color-grey-700:               #616161 !default;
-$color-grey-800:               #424242 !default;
-$color-grey-900:               #212121 !default;
-$color-grey-1000:              #000000 !default;
-$color-grey:                   $color-grey-500 !default;
-$color-blue-grey-50:           #eceff1 !default;
-$color-blue-grey-100:          #cfd8dc !default;
-$color-blue-grey-200:          #b0bec5 !default;
-$color-blue-grey-300:          #90a4ae !default;
-$color-blue-grey-400:          #78909c !default;
-$color-blue-grey-500:          #607d8b !default;
-$color-blue-grey-600:          #546e7a !default;
-$color-blue-grey-700:          #455a64 !default;
-$color-blue-grey-800:          #37474f !default;
-$color-blue-grey-900:          #263238 !default;
-$color-blue-grey:              $color-blue-grey-500 !default;
-$toast-height: 20px !default;
-// Structural
-
-// Base vendor prefixes for mixins
-
-// Font families
-
-
-// Font colors
-
-// Theme colors
+$backdrop-color: rgba(0,0,0,0.3);
+$bottom-sheet-color-palette: $background-color-palette !default;
+$bottom-sheet-background-color: map-get($bottom-sheet-color-palette, '50') !default;
+$bottom-sheet-border-top-color: map-get($bottom-sheet-color-palette, '400') !default;
+$bottom-sheet-header-color: $foreground-secondary-color !default;
+$bottom-sheet-list-color: $foreground-secondary-color !default;
+$button-border-radius: 3px !default;
+$button-fab-border-radius: 50% !default;
+$button-primary-color-palette: $primary-color-palette !default;
+$button-primary-color: map-get($button-primary-color-palette, '400') !default;
+$button-primary-raised-color: $primary-color-palette-contrast-color !default;
+$button-primary-raised-background-color: map-get($button-primary-color-palette, '500') !default;
+$button-primary-raised-hover-background-color: map-get($button-primary-color-palette, '600') !default;
+$button-warn-color-palette: $warn-color-palette !default;
+$button-warn-color: map-get($button-warn-color-palette, '400') !default;
+$button-warn-raised-color: $primary-color-palette-contrast-color !default;
+$button-warn-raised-background-color: map-get($button-warn-color-palette, '500') !default;
+$button-warn-raised-hover-background-color: map-get($button-warn-color-palette, '700') !default;
+$button-flat-color-palette: $background-color-palette !default;
+$button-disabled-color: map-get($button-flat-color-palette, '500') !default;
+$button-disabled-background-color: rgba(map-get($button-flat-color-palette, '500'), 0.145) !default;
+$button-hover-background-color: rgba(map-get($button-flat-color-palette, '500'), 0.20) !default;
+$button-raised-color-palette: $button-flat-color-palette !default;
+$button-raised-background-color: rgba(map-get($button-raised-color-palette, '500'), 0.185) !default;
+$button-raised-hover-background-color: rgba(map-get($button-raised-color-palette, '500'), 0.30) !default;
+$card-border-radius: 2px !default;
+$checkbox-color-palette: $color-green !default;
+$checkbox-checked-background-color: rgba(map-get($checkbox-color-palette, '400'), 0.87) !default;
+$checkbox-checked-color: map-get($foreground-color-palette, '200') !default;
+$checkbox-ripple-color: map-get($checkbox-color-palette, '600') !default;
+$checkbox-checked-ripple-color: map-get($color-grey, '600') !default;
+$checkbox-border-color: $input-border-color !default;
+$checkbox-disabled-border-color: $input-disabled-border-color !default;
+$content-background-color: $background-color-base !default;
+$dialog-border-radius: 4px !default;
+$dialog-color-palette: $background-color-palette !default;
+$dialog-background-color: map-get($dialog-color-palette, 'A100') !default;
+$dialog-border-color: rgba(map-get($dialog-color-palette, '1000'), 0.12) !default;
+$divider-color: $foreground-quarternary-color !default;
+$progress-circle-background: transparent !default;
+$progress-circle-color: map-get($primary-color-palette, '500') !default;
+$progress-circle-inset-color: $background-color-base !default;
+$progress-linear-color-palette: $primary-color-palette !default;
+$progress-linear-color: map-get($progress-linear-color-palette, '500') !default;
+$progress-linear-alt-color: map-get($progress-linear-color-palette, '100') !default;
+$radio-color-palette: $color-green !default;
+$radio-on-background-color: rgba(map-get($radio-color-palette, '400'), 0.87) !default;
+$radio-ripple-color: map-get($radio-color-palette, '600') !default;
+$radio-off-border-color: $foreground-secondary-color !default;
+$radio-group-focus-border-color: $foreground-primary-color !default;
+$slider-color-palette: $primary-color-palette !default;
+$slider-background-color: $foreground-tertiary-color !default;
+$slider-track-color: map-get($slider-color-palette, '500') !default;
+$slider-thumb-color: map-get($slider-color-palette, '500') !default;
+$slider-sign-color: map-get($slider-color-palette, '500') !default;
+$slider-sign-text-color: $primary-color-palette-contrast-color !default;
+$slider-focus-thumb-color: $foreground-secondary-color !default;
+$slider-focus-ring-color: $foreground-quarternary-color !default;
+$slider-disabled-color: map-get($foreground-color-palette, '400') !default;
+$subheader-color-palette: $primary-color-palette !default;
+$subheader-text-color: $foreground-secondary-color !default;
+$subheader-primary-text-color: map-get($subheader-color-palette, '500') !default;
+$switch-color: $foreground-secondary-color !default;
+$switch-focus-color: map-get($foreground-color-palette, '1000');
+$tabs-color-palette: $primary-color-palette !default;
+$tabs-header-background-color: map-get($tabs-color-palette, '500') !default;
+$tabs-inactive-color: map-get($tabs-color-palette, '100') !default;
+$tabs-active-color: $primary-color-palette-contrast-color !default;
+$tabs-disabled-color: $foreground-quarternary-color !default;
+$tabs-focus-color: $foreground-primary-color !default;
+$tabs-highlight-color: #ffff85;
+$tff-focus-color: map-get($primary-color-palette, '500') !default;
+$tff-text-color: $foreground-primary-color !default;
+$tff-hint-small-color: mix($foreground-secondary-color, $foreground-tertiary-color, 40%) !default;
+$tff-hint-color: $foreground-tertiary-color !default;
+$tff-line-color: $foreground-quarternary-color !default;
+$tff-disabled-line-color: mix($foreground-tertiary-color, $foreground-quarternary-color) !default;
+$tff-disabled-color: $foreground-quarternary-color !default;
+$toast-background-color: #323232 !default;
+$toast-text-color: white !default;
+$toast-action-color: map-get($primary-color-palette, 'A200') !default;
+$toolbar-background-color: map-get($primary-color-palette, '500') !default;
+$toolbar-text-color: $primary-color-palette-contrast-color;
+$tooltip-color: map-get($foreground-color-palette, 'A100') !default;
+$tooltip-background-color: rgba(black, 0.52);
 
+// Pink
+// ----------------------------
 
 
+// Purple
+// ----------------------------
 
 
 
+// Deep Purple
+// ----------------------------
 
 
+// Indigo
+// ----------------------------
 
 
 
+// Blue
+// ----------------------------
 
-// Layout
-// ------------------------------
 
 
-// Toast
-//--------------------------------------------
+// Light Blue
+// ----------------------------
 
 
-// Button
-//--------------------------------------------
 
+// Cyan
+// ----------------------------
 
 
-// Fab buttons
 
-// App bar variables
+// Teal
+// ----------------------------
 
-// Toolbar variables
 
-// Side nav variables
 
+// Green
+// ----------------------------
 
-// Whiteframes
 
 
-// SubHeader
+// Light Green
+// ----------------------------
 
 
-// Lists and tiles
 
+// Lime
+// ----------------------------
 
 
 
-// Cards
+// Yellow
+// ----------------------------
 
 
-// Tabs
+// Amber
+// ----------------------------
 
 
-// ***********************************
-// Styles for Floating Label Text Fields
-// - Light Theme -
-// ***********************************
-//
-// - `label` element (aka hint)
-// - `input` element
-// - `line` element
 
-// ***********************************
-// Styles for Floating Label Text Fields
-// - Light Theme -
-// ***********************************
-// - `label` element (aka hint)
-// - `input` element
-// - `line` element
+// Orange
+// ----------------------------
 
-// Bottom Sheets
 
-// Forms and inputs
 
+// Deep Orange
+// ----------------------------
 
 
 
+// Brown
+// ----------------------------
 
 
 
+// Grey
+// ----------------------------
 
+// Blue Grey
+// ----------------------------
 
-// Slider
-//--------------------------------------------
 
+// Font Variables
 
 
 
 
 
 
-// Switch
-//--------------------------------------------
+// Layout
+// ------------------------------
 
 
 
-// Checkbox
-//--------------------------------------------
+// App bar variables
 
 
+// Whiteframes
+
 
-// Radio Button
-//--------------------------------------------
 
 
 // Z-indexes
 //--------------------------------------------
 
 
-// Md Design Color Palette
-// -----------------------------
-// http://www.google.com/design/spec/style/color.html
+@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
+  -webkit-margin-before: $before;
+  -webkit-margin-after: $after;
+  -webkit-margin-start: $start;
+  -webkit-margin-end: $end;
+}
 
-// Text
-// ----------------------------
+@mixin not-selectable($value:none) {
+  user-select: $value;
+}
 
+@mixin input-placeholder($color) {
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+}
 
-// Red
-// ----------------------------
 
+md-backdrop.opaque.md-#{$theme-name}-theme {
+  background-color: $backdrop-color;
+}
 
 
-// Pink
-// ----------------------------
+md-bottom-sheet.md-#{$theme-name}-theme {
+  background-color: $bottom-sheet-background-color;
+  border-top-color: $bottom-sheet-border-top-color;
 
+  &.list {
+    md-item {
+      color: $bottom-sheet-list-color;
+    }
+  }
 
+  .md-subheader {
+    background-color: $bottom-sheet-background-color;
+  }
 
-// Purple
-// ----------------------------
+  .md-subheader {
+    color: $bottom-sheet-header-color;
+  }
+}
 
 
 
-// Deep Purple
-// ----------------------------
 
 
 
-// Indigo
-// ----------------------------
+md-button.md-#{$theme-name}-theme {
+  border-radius: $button-border-radius;
 
+  &[disabled] {
+    background-color: $button-disabled-background-color !important;
+    color: $button-disabled-color !important;
+    fill: $button-disabled-color !important;
+    cursor: auto;
+  }
 
+  &:not([disabled]) {
+    &:hover, &.focus {
+      background-color: $button-hover-background-color;
+    }
+  }
 
-// Blue
-// ----------------------------
+  &.md-fab {
+    border-radius: $button-fab-border-radius;
+  }
 
+  &.md-primary {
+    color: $button-primary-color;
+    fill: $button-primary-color;
+  }
 
+  &.md-warn {
+    color: $button-warn-color;
+    fill: $button-warn-color;
+  }
 
-// Light Blue
-// ----------------------------
+  &.md-raised, &.md-fab {
+    background-color: $button-raised-background-color;
 
+    &:not([disabled]) {
+      &:hover, &.focus {
+        background-color: $button-raised-hover-background-color;
+      }
+    }
 
+    &.md-primary {
+      color: $button-primary-raised-color;
+      background-color: $button-primary-raised-background-color;
+      &:not([disabled]) {
+        &:hover, &.focus {
+          background-color: $button-primary-raised-hover-background-color;
+        }
+      }
+    }
 
-// Cyan
-// ----------------------------
+    &.md-warn {
+      color: $button-warn-raised-color;
+      background-color: $button-warn-raised-background-color;
+      &:not([disabled]) {
+        &:hover, &.focus {
+          background-color: $button-warn-raised-hover-background-color;
+        }
+      }
+    }
+  }
+}
 
 
+md-card.md-#{$theme-name}-theme {
+  border-radius: $card-border-radius;
 
-// Teal
-// ----------------------------
+  .md-card-image {
+    border-radius: $card-border-radius $card-border-radius 0 0;
+  }
+}
 
 
+md-checkbox.md-#{$theme-name}-theme {
 
-// Green
-// ----------------------------
+  .md-ripple {
+    color: $checkbox-ripple-color;
+  }
 
+  &.md-checked .md-ripple {
+    color: $checkbox-checked-ripple-color;
+  }
 
+  .md-icon {
+    border-color: $checkbox-border-color;
+  }
 
-// Light Green
-// ----------------------------
+  &.md-checked .md-icon {
+    background-color: $checkbox-checked-background-color;
+  }
 
+  &.md-checked .md-icon:after {
+    border-color: $checkbox-checked-color;
+  }
 
+  &[disabled] {
+    .md-icon {
+      border-color: $checkbox-disabled-border-color;
+    }
 
-// Lime
-// ----------------------------
+    &.md-checked .md-icon {
+      background-color: $checkbox-disabled-border-color;
+    }
+  }
+}
 
 
+md-content.md-#{$theme-name}-theme {
+  background-color: $content-background-color;
+}
 
-// Yellow
-// ----------------------------
 
+md-dialog.md-#{$theme-name}-theme {
+  border-radius: $dialog-border-radius;
+  background-color: $dialog-background-color;
 
+  &.dialog-content-overflow .dialog-actions {
+    border-top-color: $dialog-border-color;
+  }
+}
 
-// Amber
-// ----------------------------
 
 
+md-divider.md-#{$theme-name}-theme {
+  border-top-color: $divider-color;
+}
 
-// Orange
-// ----------------------------
 
+md-progress-circular.md-#{$theme-name}-theme {
+  background-color: $progress-circle-background;
+  .circle .mask .fill {
+    background-color: $progress-circle-color;
+  }
 
+  .inset {
+    background-color: $progress-circle-inset-color;
+  }
+}
 
-// Deep Orange
-// ----------------------------
 
+md-progress-linear.md-#{$theme-name}-theme {
+  .container {
+    background-color: $progress-linear-alt-color;
+  }
 
+  .bar {
+    background-color: $progress-linear-color;
+  }
 
-// Brown
-// ----------------------------
+  &[mode=buffer] {
+    .dashed:before {
+      background: radial-gradient($progress-linear-alt-color 0%, $progress-linear-alt-color 16%, transparent 42%);
+    }
+    .bar1 {
+      background-color: $progress-linear-alt-color;
+    }
+  }
+}
 
 
+md-radio-button.md-#{$theme-name}-theme,
+md-switch.md-#{$theme-name}-theme .md-switch-thumb {
+  .md-container .md-ripple {
+    color: $radio-ripple-color;
+  }
 
-// Grey
-// ----------------------------
+  .md-off {
+    border-color: $radio-off-border-color;
+  }
 
 
+  .md-on {
+    background-color: $radio-on-background-color;
+  }
 
-// Blue Grey
-// ----------------------------
+  &.md-checked .md-off {
+    border-color: $radio-on-background-color;
+  }
 
+  &.md-checked .md-ink-ripple {
+    color: $radio-on-background-color;
+  }
+}
 
-@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
-  -webkit-margin-before: $before;
-  -webkit-margin-after: $after;
-  -webkit-margin-start: $start;
-  -webkit-margin-end: $end;
+md-radio-group.md-#{$theme-name}-theme:focus {
+  border-color: $radio-group-focus-border-color;
 }
 
-@mixin not-selectable($value:none) {
-  user-select: $value;
+
+md-slider.md-#{$theme-name}-theme {
+  .slider-track {
+    background-color: $slider-background-color;
+  }
+
+  .slider-track-fill {
+    background-color: $slider-track-color;
+  }
+
+  .slider-thumb:after {
+    border-color: $slider-thumb-color;
+    background-color: $slider-thumb-color;
+  }
+
+  .slider-sign {
+    background-color: $slider-sign-color;
+
+    &:after {
+      border-top-color: $slider-sign-color;
+    }
+  }
+
+  .slider-thumb-text {
+    color: $slider-sign-text-color;
+  }
+
+  .slider-focus-thumb {
+    background-color: $slider-focus-thumb-color;
+  }
+
+  .slider-focus-ring {
+    border-color: $slider-focus-ring-color;
+  }
+
+  .slider-disabled-thumb {
+    border-color: $background-color-base;
+  }
+
+  &.slider-min .slider-thumb:after {
+    background-color: $background-color-base;
+  }
+
+  &[disabled] {
+    .slider-thumb:after {
+      border-color: $slider-disabled-color;
+    }
+    &:not(.slider-min) .slider-thumb:after {
+      background-color: $slider-disabled-color;
+    }
+  }
 }
 
-@mixin input-placeholder($color) {
-  &:-ms-input-placeholder {
-    color: $color;
+
+.md-subheader.md-#{$theme-name}-theme {
+  color: $subheader-text-color;
+  background-color: $background-color-base;
+
+  &.md-primary {
+    color: $subheader-primary-text-color;
   }
-  &::-webkit-input-placeholder {
-    color: $color;
+}
+
+
+md-switch.md-#{$theme-name}-theme {
+  .md-switch-bar {
+    background-color: $switch-color;
+  }
+  .md-switch-thumb {
+    &:focus .md-label {
+      border: 1px dotted black;
+    }
   }
 }
 
 
+md-tabs.md-#{$theme-name}-theme {
+  .tabs-header {
+    background-color: $tabs-header-background-color;
+  }
 
-// ******************************
-// Mixins: Text Fields
-// ******************************
+  md-tabs-ink-bar {
+    background: $tabs-highlight-color;
+  }
 
-@mixin text-field($color, $borderColor, $transition:false, $borderWidth:1px ) {
-  input, textarea {
-    color: $color;
-    border-color: $borderColor;
-    border-bottom-width: $borderWidth;
+  md-tab {
+    color: $tabs-inactive-color;
+    &.active {
+      color: $tabs-active-color;
+    }
+    &[disabled] {
+      color: $tabs-disabled-color;
+    }
+    &:focus {
+      border-color: $tabs-focus-color;
+    }
 
-    @if( $transition != false ) {
-      transition: $transition;
+    .md-ripple-container {
+      color: $tabs-highlight-color;
     }
   }
 }
 
-@mixin text-hint($color, $size:large, $transition:false ) {
+
+md-input-group.md-#{$theme-name}-theme {
+  input, textarea {
+    text-shadow: $foreground-text-shadow;
+    @include input-placeholder($tff-hint-color);
+  }
+
   label {
-    color: $color;
+    text-shadow: $foreground-text-shadow;
+    color: $tff-hint-color;
+  }
+
+  input, textarea {
+    color: $tff-text-color;
+    border-color: $tff-line-color;
+  }
 
-    @if $size == "small" {
-      transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
-    } @else {
-      transform: translate3d(0, $tff-hint-offset-large, 0);
-      transform-origin: left center;
-      transition: $tff-transition;
+  &.md-input-focused {
+    input, textarea {
+      border-color: $tff-focus-color;
+    }
+    label {
+      color: $tff-focus-color;
     }
+    &.md-input-has-value {
+      @if $dark-theme {
+        label {
+          color: lighten($tff-focus-color, 10%);
+        }
+      }
+    }
+  }
+
+  &.md-input-has-value:not(.md-input-focused) {
+    label {
+      color: $tff-hint-small-color;
+    }
+  }
 
-    @if( $transition != false ) {
-      transition: $transition;
+  &[disabled] {
+    input, textarea {
+      border-bottom-color: $tff-disabled-color;
+      color: $tff-hint-color;
+      background-image: linear-gradient(to right, $tff-disabled-line-color 0%, $tff-disabled-line-color 50%, rgba(0, 0, 0, 0) 0%);
     }
   }
 }
 
-@mixin text-dashed-line( $dotGap, $dotSize, $color ) {
-  background-size: $dotSize $dotGap;
 
-  background-image: linear-gradient(to right, $color 0%, $color 50%, rgba(0, 0, 0, 0) 0%);
-  background-position: 0 bottom;
+md-toast.md-#{$theme-name}-theme {
+  background-color: $toast-background-color;
+  color: $toast-text-color;
 
-  background-size: (1px + 1px) $dotGap;
-  background-repeat: repeat-x;
+  md-button {
+    color: $toast-text-color;
+  }
+
+  .md-action {
+    color: $toast-action-color;
+  }
 }
 
 
-md-toast {
-  height: $toast-height;
+md-toolbar.md-#{$theme-name}-theme {
+  background-color: $toolbar-background-color;
+  color: $primary-color-palette-contrast-color;
+}
+
+
+md-tooltip.md-#{$theme-name}-theme {
+  color: $tooltip-color;
+  .tooltip-background {
+    background-color: $tooltip-background-color;
+  }
 }
diff --git a/themes/green-theme.scss b/themes/green-theme.scss
new file mode 100644
index 00000000000..2683393410b
--- /dev/null
+++ b/themes/green-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'green';
+$primary-color-palette: $color-green;
diff --git a/themes/grey-theme.scss b/themes/grey-theme.scss
new file mode 100644
index 00000000000..ec4ad400f20
--- /dev/null
+++ b/themes/grey-theme.scss
@@ -0,0 +1,3 @@
+$theme-name: 'grey';
+$primary-color-palette: $color-grey;
+$primary-color-palette-contrast-color: rgba(black, 0.73);
diff --git a/themes/indigo-theme.scss b/themes/indigo-theme.scss
new file mode 100644
index 00000000000..f2d14d3363c
--- /dev/null
+++ b/themes/indigo-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'indigo';
+$primary-color-palette: $color-indigo;
diff --git a/themes/light-blue-dark-theme.scss b/themes/light-blue-dark-theme.scss
new file mode 100644
index 00000000000..0ec734a725b
--- /dev/null
+++ b/themes/light-blue-dark-theme.scss
@@ -0,0 +1,8 @@
+$theme-name: "light-blue-dark";
+$dark-theme: true;
+$foreground-base-color: white;
+$foreground-primary-color: #DBDBDB;
+$foreground-secondary-color: #fefefe;
+$foreground-tertiary-color: #696969;
+$foreground-text-shadow: 1px 1px 0px rgba(black, 0.4), -1px -1px 0px rgba(black, 0.4);
+$background-color-base: #333;
diff --git a/themes/light-green-theme.scss b/themes/light-green-theme.scss
new file mode 100644
index 00000000000..5492fcfbd4e
--- /dev/null
+++ b/themes/light-green-theme.scss
@@ -0,0 +1,3 @@
+$theme-name: 'light-green';
+$primary-color-palette: $color-light-green;
+$primary-color-palette-contrast-color: rgba(black, 0.73);
diff --git a/themes/lime-theme.scss b/themes/lime-theme.scss
new file mode 100644
index 00000000000..ae56e7a51ed
--- /dev/null
+++ b/themes/lime-theme.scss
@@ -0,0 +1,3 @@
+$theme-name: 'lime';
+$primary-color-palette: $color-lime;
+$primary-color-palette-contrast-color: rgba(black, 0.73);
diff --git a/themes/orange-theme.scss b/themes/orange-theme.scss
new file mode 100644
index 00000000000..d8a8c50fbe9
--- /dev/null
+++ b/themes/orange-theme.scss
@@ -0,0 +1,3 @@
+$theme-name: 'orange';
+$primary-color-palette: $color-orange;
+$primary-color-palette-contrast-color: rgba(black, 0.73);
diff --git a/themes/pink-theme.scss b/themes/pink-theme.scss
new file mode 100644
index 00000000000..e29dec5977e
--- /dev/null
+++ b/themes/pink-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'pink';
+$primary-color-palette: $color-pink;
diff --git a/themes/purple-theme.scss b/themes/purple-theme.scss
new file mode 100644
index 00000000000..525cc7f260e
--- /dev/null
+++ b/themes/purple-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'purple';
+$primary-color-palette: $color-purple;
diff --git a/themes/red-theme.scss b/themes/red-theme.scss
new file mode 100644
index 00000000000..4a356fe3816
--- /dev/null
+++ b/themes/red-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'red';
+$primary-color-palette: $color-red;
diff --git a/themes/tall-toast-theme.scss b/themes/tall-toast-theme.scss
deleted file mode 100644
index a2892ad900c..00000000000
--- a/themes/tall-toast-theme.scss
+++ /dev/null
@@ -1 +0,0 @@
-$toast-height: 999999px;
diff --git a/themes/teal-theme.scss b/themes/teal-theme.scss
new file mode 100644
index 00000000000..daab7e36572
--- /dev/null
+++ b/themes/teal-theme.scss
@@ -0,0 +1,2 @@
+$theme-name: 'teal';
+$primary-color-palette: $color-teal;
diff --git a/themes/yellow-theme.scss b/themes/yellow-theme.scss
new file mode 100644
index 00000000000..b1ede5ddf99
--- /dev/null
+++ b/themes/yellow-theme.scss
@@ -0,0 +1,3 @@
+$theme-name: 'yellow';
+$primary-color-palette: $color-yellow;
+$primary-color-palette-contrast-color: rgba(black, 0.73);