diff --git a/demos/src/_variables.css b/demos/src/_variables.css
new file mode 100644
index 0000000..4360544
--- /dev/null
+++ b/demos/src/_variables.css
@@ -0,0 +1,7 @@
+$color-1: #1BBC9B;
+$color-2: #69707a;
+$color-3: #393E46;
+
+$font-1: 'Fira Sans', sans-serif;
+$font-2: 'Inconsolata', sans-serif;
+$font-3: 'Nothing You Could Do', cursive;
diff --git a/demos/src/home.css b/demos/src/home.css
index e69de29..e918172 100644
--- a/demos/src/home.css
+++ b/demos/src/home.css
@@ -0,0 +1 @@
+@import './_variables.css';
diff --git a/demos/src/index.css b/demos/src/index.css
index 5f14d57..dc55a9b 100644
--- a/demos/src/index.css
+++ b/demos/src/index.css
@@ -2,11 +2,13 @@
 @import 'https://fonts.googleapis.com/css?family=Fira+Sans';
 @import 'https://fonts.googleapis.com/css?family=Nothing+You+Could+Do';
 
+@import './_variables.css';
+
 body {
   background: linear-gradient(0deg, #DDDDDD, #EEEEEE);
-  color: #393E46;
+  color: $color-3;
   min-height: 100vh;
-  font-family: 'Fira Sans', sans-serif;
+  font-family: $font-1;
 }
 
 #github-corner-link {
@@ -16,63 +18,65 @@ body {
   top: -60px;
   right: -60px;
   border-radius: 50%;
-  background-color: #1BBC9B;
+  background-color: $color-1;
   transition: background-color 0.2s ease-in;
-}
 
-#github-corner-link:hover {
-  background-color: rgba(27, 188, 155, 0.7);
-}
+  &:hover {
+    background-color: rgba(27, 188, 155, 0.7);
+  }
 
-#github-corner-link .github-logo {
-  position: absolute;
-  bottom: 18px;
-  left: 18px;
-  fill: white;
+  .github-logo {
+    position: absolute;
+    bottom: 18px;
+    left: 18px;
+    fill: white;
+  }
 }
 
 .title {
   width: 100%;
-  color: #1BBC9B;
+  color: $color-1;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
 .subtitle {
-  color: #393E46;
+  color: $color-3;
 }
 
 .demo {
   padding: 50px 30px;
-}
 
-.demo .loading-progress {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 30px;
-  color: #1BBC9B;
-  font-size: 18px;
-  font-family: 'Inconsolata', sans-serif;
-  padding: 20px 50px;
-  margin: 20px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 10px;
-}
+  .loading-progress {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 30px;
+    color: $color-1;
+    font-size: 18px;
+    font-family: $font-2;
+    padding: 20px 50px;
+    margin: 30px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 10px;
+  }
 
-/****************************************************************/
-/* MDL overrides */
+  /****************************************************************/
+  /* MDL overrides */
 
-.demo .mdl-switch__label {
-  font-size: 14px !important;
-  color: #69707a;
-}
+  .mdl-switch__label {
+    font-size: 14px !important;
+    color: #69707a;
+  }
 
-.demo .mdl-switch.is-checked .mdl-switch__thumb {
-  background: rgba(27, 188, 155, 0.6);
-}
+  .mdl-switch.is-checked {
+    .mdl-switch__thumb {
+      background: rgba(27, 188, 155, 0.6);
+    }
 
-.demo .mdl-switch.is-checked .mdl-switch__track {
-  background: rgba(27, 188, 155, 0.3);
+    .mdl-switch__track {
+      background: rgba(27, 188, 155, 0.3);
+    }
+  }
 }
diff --git a/demos/src/menu.css b/demos/src/menu.css
index 3669c0e..eb05dd8 100644
--- a/demos/src/menu.css
+++ b/demos/src/menu.css
@@ -1,53 +1,59 @@
+@import './_variables.css';
+
 .menu {
   padding: 50px;
   margin: 20px;
   background: white;
   border-radius: 10px;
-  box-shadow: 6px 8px #CCCCCC;
-}
+  box-shadow: 6px 6px #CCCCCC;
 
-.menu h1 {
-  color: #CCCCCC;
-  font-family: 'Fira Sans', sans-serif;
-  font-size: 1.5rem;
-}
+  h1 {
+    color: #CCCCCC;
+    font-family: $font-1;
+    font-size: 1.5rem;
+  }
 
-.menu-list li {
-  color: #69707a;
-}
+  .menu-list {
+    li {
+      color: $color-2;
+    }
 
-.menu-list a {
-  display: flex;
-  align-items: center;
-}
+    a {
+      display: flex;
+      align-items: center;
 
-.menu-list a:hover {
-  color: #1BBC9B;
-  background-color: whitesmoke;
-}
+      &:hover {
+        color: $color-1;
+        background-color: whitesmoke;
 
-.menu-list a:hover .github-logo {
-  fill: #1BBC9B;
-}
+        .github-logo {
+          fill: $color-1;
+        }
+      }
+    }
 
-.menu-list.contact li {
-  padding: 5px 10px;
-}
+    .github-logo {
+      fill: $color-2;
+      margin: 3px 8px 3px 0;
+    }
+  }
 
-.menu-list.contact a {
-  color: #aaaaaa;
-  padding: 0;
-  display: inline-flex;
-  background-color: none;
-  transition: color 0.2s ease-in;
-}
+  .menu-list.contact {
+    li {
+      padding: 5px 10px;
+    }
 
-.menu-list.contact a:hover {
-  color: #1BBC9B;
-  background: none;
-}
+    a {
+      color: #AAAAAA;
+      padding: 0;
+      display: inline-flex;
+      background-color: none;
+      transition: color 0.2s ease-in;
 
-.menu-list .github-logo {
-  fill: #69707a;
-  margin: 3px 8px 3px 0;
+      &hover {
+        color: $color-1;
+        background: none;
+      }
+    }
+  }
 }
diff --git a/demos/src/mnist-cnn.css b/demos/src/mnist-cnn.css
index 6bae396..a6d8ba7 100644
--- a/demos/src/mnist-cnn.css
+++ b/demos/src/mnist-cnn.css
@@ -1,157 +1,161 @@
-.demo.mnist-cnn .column {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+@import './_variables.css';
 
-.demo.mnist-cnn .column.input-column {
-  justify-content: flex-end;
-}
+.demo.mnist-cnn {
+  .column {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.demo.mnist-cnn .column.controls-column {
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding-top: 80px;
-}
+  .column.input-column {
+    justify-content: flex-end;
 
-.demo.mnist-cnn .column.output-column {
-  justify-content: center;
-}
+    .input-container {
+      display: inline-flex;
+      flex-direction: column;
+      margin: 20px;
+      position: relative;
 
-.demo.mnist-cnn .input-container {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 20px;
-  position: relative;
-}
+      .input-label {
+        font-family: $font-3;
+        font-size: 18px;
+        color: $color-2;
+        text-align: right;
 
-.demo.mnist-cnn .input-label {
-  font-family: 'Nothing You Could Do', cursive;
-  font-size: 18px;
-  color: #69707a;
-  text-align: right;
-}
+        span.arrow {
+          font-size: 36px;
+          color: #CCCCCC;
+          position: absolute;
+          right: -32px;
+          top: 8px;
+        }
+      }
 
-.demo.mnist-cnn .input-label span.arrow {
-  font-size: 36px;
-  color: #CCCCCC;
-  position: absolute;
-  right: -32px;
-  top: 8px;
-}
+      .canvas-container {
+        display: inline-flex;
+        margin: 10px 0;
+        background: white;
+        border: 15px solid rgba(27, 188, 155, 0.3);
+        transition: border-color 0.2s ease-in;
 
-.demo.mnist-cnn .canvas-container {
-  display: inline-flex;
-  margin: 10px 0;
-  background: white;
-  border: 15px solid rgba(27, 188, 155, 0.3);
-  transition: border-color 0.2s ease-in;
-}
+        &:hover {
+          border-color: rgba(27, 188, 155, 0.6);
+        }
 
-.demo.mnist-cnn .canvas-container:hover {
-  border-color: rgba(27, 188, 155, 0.6);
-}
+        canvas:hover {
+          cursor: crosshair;
+        }
+      }
 
-.demo.mnist-cnn .canvas-container canvas:hover {
-  cursor: crosshair;
-}
+      .input-clear {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        color: $color-2;
+        transition: color 0.2s ease-in;
 
-.demo.mnist-cnn .input-clear {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  color: #69707a;
-  transition: color 0.2s ease-in;
-}
+        &:hover {
+          color: rgba(27, 188, 155, 0.3);
+          cursor: pointer;
+        }
+      }
+    }
+  }
 
-.demo.mnist-cnn .input-clear:hover {
-  color: rgba(27, 188, 155, 0.3);
-  cursor: pointer;
-}
+  .column.controls-column {
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding-top: 80px;
+  }
 
-.demo.mnist-cnn .output {
-  height: 160px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: center;
-}
+  .column.output-column {
+    justify-content: center;
 
-.demo.mnist-cnn .output .output-class {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-  border-bottom: 2px solid rgba(27, 188, 155, 0.3);
-}
+    .output {
+      height: 160px;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      justify-content: center;
 
-.demo.mnist-cnn .output .output-class.predicted {
-  border-bottom-color: #1BBC9B;
-}
+      .output-class {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6px;
+        border-bottom: 2px solid rgba(27, 188, 155, 0.3);
 
-.demo.mnist-cnn .output .output-class .output-label {
-  font-family: 'Inconsolata', sans-serif;
-  font-size: 1.5rem;
-  color: #69707a;
-}
+        .output-label {
+          font-family: 'Inconsolata', sans-serif;
+          font-size: 1.5rem;
+          color: $color-2;
+        }
 
-.demo.mnist-cnn .output .output-class .output-bar {
-  width: 8px;
-  background: #EEEEEE;
-  transition: height 0.2s ease-out;
-}
+        .output-bar {
+          width: 8px;
+          background: #EEEEEE;
+          transition: height 0.2s ease-out;
+        }
+      }
 
-.demo.mnist-cnn .output .output-class.predicted .output-label {
-  color: #1BBC9B;
-}
+      .output-class.predicted {
+        border-bottom-color: $color-1;
 
-.demo.mnist-cnn .layer-results-container {
-  position: relative;
-}
+        .output-label {
+          color: $color-1;
+        }
+      }
+    }
+  }
 
-.demo.mnist-cnn .layer-results-container .bg-line {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 50%;
-  background: white;
-  width: 20px;
-  height: 100%;
-}
+  .layer-results-container {
+    position: relative;
 
-.demo.mnist-cnn .layer-result {
-  position: relative;
-  z-index: 1;
-  margin: 30px 20px;
-  background: white;
-  border-radius: 10px;
-  padding: 20px;
-  overflow-x: auto;
-}
+    .bg-line {
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 50%;
+      background: white;
+      width: 20px;
+      height: 100%;
+    }
 
-.demo.mnist-cnn .layer-result-heading {
-  font-size: 1rem;
-  color: #999999;
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-}
+    .layer-result {
+      position: relative;
+      z-index: 1;
+      margin: 30px 20px;
+      background: white;
+      border-radius: 10px;
+      padding: 20px;
+      overflow-x: auto;
 
-.demo.mnist-cnn .layer-result-heading span.layer-class {
-  color: #1BBC9B;
-  font-size: 14px;
-  font-weight: bold;
-}
+      .layer-result-heading {
+        font-size: 1rem;
+        color: #999999;
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
 
-.demo.mnist-cnn .layer-result-canvas-container {
-  display: inline-flex;
-  flex-wrap: wrap;
-  background: white;
-}
+        span.layer-class {
+          color: $color-1;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
 
-.demo.mnist-cnn .layer-result-canvas-container canvas {
-  border: 1px solid lightgray;
-  margin: 1px;
+      .layer-result-canvas-container {
+        display: inline-flex;
+        flex-wrap: wrap;
+        background: white;
+
+        canvas {
+          border: 1px solid lightgray;
+          margin: 1px;
+        }
+      }
+    }
+  }
 }
diff --git a/demos/src/mnist-vae.css b/demos/src/mnist-vae.css
index fd9c33c..d92db3d 100644
--- a/demos/src/mnist-vae.css
+++ b/demos/src/mnist-vae.css
@@ -1,58 +1,71 @@
-.demo.mnist-vae .column {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+@import './_variables.css';
 
-.demo.mnist-vae .column.input-column {
-  justify-content: flex-end;
-}
+.demo.mnist-vae {
+  .column {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.demo.mnist-vae .column.controls-column {
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding-top: 80px;
-}
+  .column.input-column {
+    justify-content: flex-end;
 
-.demo.mnist-vae .column.output-column {
-  justify-content: center;
-}
+    .input-container {
+      display: inline-flex;
+      flex-direction: column;
+      margin: 20px;
+      position: relative;
 
-.demo.mnist-vae .input-container {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 20px;
-  position: relative;
-}
+      .input-label {
+        font-family: $font-3;
+        font-size: 18px;
+        color: $color-2;
+        text-align: right;
 
-.demo.mnist-vae .input-label {
-  font-family: 'Nothing You Could Do', cursive;
-  font-size: 18px;
-  color: #69707a;
-  text-align: right;
-}
+        span.arrow {
+          font-size: 36px;
+          color: #CCCCCC;
+          position: absolute;
+          right: -32px;
+          top: 8px;
+        }
+      }
 
-.demo.mnist-vae .input-label span.arrow {
-  font-size: 36px;
-  color: #CCCCCC;
-  position: absolute;
-  right: -32px;
-  top: 8px;
-}
+      .canvas-container {
+        display: inline-flex;
+        justify-content: flex-end;
+        margin: 10px 0;
 
-.demo.mnist-vae .canvas-container {
-  display: inline-flex;
-  justify-content: flex-end;
-  margin: 10px 0;
-}
+        canvas {
+          background: white;
+          border: 15px solid rgba(27, 188, 155, 0.3);
+          transition: border-color 0.2s ease-in;
 
-.demo.mnist-vae .canvas-container canvas {
-  background: white;
-  border: 15px solid rgba(27, 188, 155, 0.3);
-  transition: border-color 0.2s ease-in;
-}
+          &:hover {
+            border-color: rgba(27, 188, 155, 0.6);
+            cursor: crosshair;
+          }
+        }
+      }
+    }
+  }
 
-.demo.mnist-vae .canvas-container canvas:hover {
-  border-color: rgba(27, 188, 155, 0.6);
-  cursor: crosshair;
+  .column.controls-column {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding-top: 80px;
+
+    .coordinates {
+      margin-left: 5px;
+      margin-top: 45px;
+      font-family: $font-2;
+      font-size: 20px;
+      color: $color-2;
+    }
+  }
+
+  .column.output-column {
+    justify-content: center;
+  }
 }
diff --git a/demos/webpack.dev.config.js b/demos/webpack.dev.config.js
index db21cfa..0896425 100644
--- a/demos/webpack.dev.config.js
+++ b/demos/webpack.dev.config.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
+const precss = require('precss')
 const autoprefixer = require('autoprefixer')
 
 module.exports = {
@@ -31,7 +32,7 @@ module.exports = {
     new webpack.LoaderOptionsPlugin({
       options: {
         context: __dirname,
-        postcss: [autoprefixer]
+        postcss: [precss, autoprefixer]
       }
     }),
     new webpack.DefinePlugin({
diff --git a/demos/webpack.prod.config.js b/demos/webpack.prod.config.js
index 4f7d7e3..07969a3 100644
--- a/demos/webpack.prod.config.js
+++ b/demos/webpack.prod.config.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
+const precss = require('precss')
 const autoprefixer = require('autoprefixer')
 
 module.exports = {
@@ -30,7 +31,7 @@ module.exports = {
     new webpack.LoaderOptionsPlugin({
       options: {
         context: __dirname,
-        postcss: [autoprefixer]
+        postcss: [precss, autoprefixer]
       }
     }),
     new webpack.DefinePlugin({
diff --git a/package.json b/package.json
index 8620261..b0eb202 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "css-loader": "^0.25.0",
     "http-server": "^0.9.0",
     "postcss-loader": "^0.13.0",
+    "precss": "^1.4.0",
     "standard": "^8.3.0",
     "style-loader": "^0.13.1",
     "webpack": "^2.1.0-beta.25"