diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index e1a8f226..41bcea68 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,11 +1,9 @@
 @import "~react-toolbox/base";
 
 $unit: 1rem;
-$color-primary-dark: #303f9f;
-$color-primary-light: #3f51b5;
-$color-primary-contrast: #fff;
+$color-primary-dark: unquote("rgb(#{$color-primary-dark})");
+$color-primary-light: unquote("rgb(#{$color-primary-light})");
+$color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
 $color-accent: unquote("rgb(#{$color-accent})");
 $color-divider: $color-divider;
 $color-content: #fafafa;
-$animation-duration: 250ms;
-$animation-ease: ease-in-out;
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 14335e61..42c11ffd 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -19,7 +19,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  transition: all $animation-duration $animation-ease;
+  transition: all $animation-duration $animation-curve-default;
 }
 
 .navigation {
@@ -29,7 +29,7 @@
   left: 0;
   z-index: $z-index-high;
   box-shadow: $documentation-left-shadow;
-  transition: all $animation-duration $animation-ease;
+  transition: all $animation-duration $animation-curve-default;
 }
 
 .playground {
@@ -40,7 +40,7 @@
   width: $playground-width;
   background: $color-background;
   box-shadow: $documentation-right-shadow;
-  transition: right $animation-duration $animation-ease;
+  transition: right $animation-duration $animation-curve-default;
 }
 
 .root {
diff --git a/docs/package.json b/docs/package.json
index 8472430b..7b9e839a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -39,6 +39,7 @@
     "redbox-react": "^1.1.1",
     "sass-loader": "^3.0.0",
     "style-loader": "^0.13.0",
+    "toolbox-loader": "0.0.2",
     "transfer-webpack-plugin": "^0.1.4",
     "webpack": "^1.12.0",
     "webpack-dev-middleware": "^1.2.0",
diff --git a/docs/theme.scss b/docs/theme.scss
new file mode 100644
index 00000000..bb55b924
--- /dev/null
+++ b/docs/theme.scss
@@ -0,0 +1,7 @@
+$color-primary: $palette-indigo-500;
+$color-primary-dark: $palette-indigo-700;
+$color-primary-light: $palette-indigo-200;
+$color-accent: $palette-pink-a200;
+$color-accent-dark: $palette-pink-700;
+$color-primary-contrast: $color-dark-contrast;
+$color-accent-contrast: $color-dark-contrast;
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index 4fa41b29..efc2907c 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -35,7 +35,7 @@ module.exports = {
         loader: 'babel'
       }, {
         test: /(\.scss|\.css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
       }, {
         test: /(\.txt)$/,
         loader: 'raw',
diff --git a/package.json b/package.json
index dc8c598b..2222ca9d 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "sass-loader": "^3.0.0",
     "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
     "style-loader": "^0.13.0",
+    "toolbox-loader": "0.0.2",
     "webpack": "^1.12.0",
     "webpack-dev-middleware": "^1.2.0",
     "webpack-hot-middleware": "^2.4.1"