diff --git a/components/commons.css b/components/commons.css
new file mode 100644
index 000000000..862d5077a
--- /dev/null
+++ b/components/commons.css
@@ -0,0 +1,196 @@
+@import 'normalize.css';
+@import './colors.css';
+@import './variables.css';
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: Roboto, sans-serif;
+  font-size: 1.6rem;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  -webkit-touch-callout: none;
+  width: 100%;
+
+  & * {
+    -webkit-tap-highlight-color: color(var(--color-white) a(0));
+  }
+}
+
+a,
+abbr,
+address,
+article,
+aside,
+audio,
+b,
+blockquote,
+body,
+caption,
+cite,
+code,
+dd,
+del,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+fieldset,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+p,
+pre,
+q,
+samp,
+section,
+small,
+span,
+strong,
+sub,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+ul,
+var,
+video {
+  border: 0;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+label,
+p,
+button,
+abbr,
+a,
+span,
+small {
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  text-size-adjust: 100%;
+}
+
+a {
+  -webkit-tap-highlight-color: color(var(--color-black) a(0%));
+  text-decoration: none;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+button {
+  appearance: none;
+  outline: none;
+  -webkit-tap-highlight-color: color(var(--color-white) a(0%));
+  -webkit-touch-callout: none;
+}
+
+/* Material design font sizes */
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  font-size: 5.6rem;
+  font-weight: 400;
+  letter-spacing: calc(-1 * 0.02em);
+  line-height: 1.35;
+  opacity: 0.54;
+}
+
+h1 {
+  font-size: 5.6rem;
+  font-weight: 400;
+  letter-spacing: calc(-1 * 0.02em);
+  line-height: 1.35;
+}
+
+h2 {
+  font-size: 4.5rem;
+  font-weight: 400;
+  line-height: 4.8rem;
+}
+
+h3 {
+  font-size: 3.4rem;
+  font-weight: 400;
+  line-height: 4rem;
+}
+
+h4 {
+  font-size: 2.4rem;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  line-height: 3.2rem;
+}
+
+h5 {
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+h6 {
+  font-size: 1.6rem;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  line-height: 2.4rem;
+}
+
+p {
+  font-size: 1.4rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 2.4rem;
+}
diff --git a/spec/root.js b/spec/root.js
index ee5c33032..8a691d40b 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -1,5 +1,5 @@
 /* global VERSION */
-import '../components/commons.scss';
+import '../components/commons.css';
 import React from 'react';
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
@@ -27,7 +27,7 @@ import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
-import style from './style';
+import style from './style.css';
 
 const Root = () => (
   <div className={style.app}>
diff --git a/spec/style.scss b/spec/style.css
similarity index 55%
rename from spec/style.scss
rename to spec/style.css
index 612cf8d93..087922d01 100644
--- a/spec/style.scss
+++ b/spec/style.css
@@ -1,107 +1,121 @@
-@import "../components/colors";
-@import "../components/globals";
-@import "../components/mixins";
-@import "../components/button/config";
-
-
-$offset: 1.8 * $unit;
-$button-floating-height: $unit * 5.6;
-$appbar-height: 6.4 * $unit;
+@import '../components/colors.css';
+@import '../components/variables.css';
+@import '../components/button/config.css';
+
+:root {
+  --offset: calc(1.8 * var(--unit));
+  --button-floating-height: calc(5.6 * var(--unit));
+  --appbar-height: calc(6.4 * var(--unit));
+}
 
 .app {
-  @include no-webkit-scrollbar;
-  padding: ($appbar-height + 2) $offset $offset;
   background-color: #f5f5f5;
-  > section, > div > section {
-    padding: $offset;
-    margin-bottom: $offset;
-    background-color: #fff;
-    box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
-    > h5 {
+  padding: calc(var(--appbar-height) + 2) var(--offset) var(--offset);
+
+  & > section,
+  & > div > section {
+    background-color: var(--color-white);
+    box-shadow: 0 1px 2px color(var(--color-black) a(25%));
+    margin-bottom: var(--offset);
+    padding: var(--offset);
+
+    & > h5 {
       color: rgb(48, 63, 159);
+
       &:not(:first-child) {
-        margin-top: 2 * $offset;
+        margin-top: calc(2 * var(--offset));
       }
     }
-    > p {
-      margin: ($offset / 4) 0;
-      opacity: .6;
+
+    & > p {
+      margin: calc(var(--offset) / 4) 0;
+      opacity: 0.6;
     }
-    [data-react-toolbox="card"] {
+
+    & [data-react-toolbox='card'] {
       display: inline-block;
-      margin: $offset $offset 0 0;
+      margin: var(--offset) var(--offset) 0 0;
     }
   }
+
+  &::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+  }
 }
 
 .github {
   position: fixed;
-  top: $appbar-height - ($button-floating-height / 2);
-  right: $button-floating-height / 2;
-  z-index: $z-index-higher;
+  right: calc(var(--button-floating-height) / 2);
+  top: calc(var(--appbar-height) - (var(--button-floating-height) / 2));
+  z-index: var(--z-index-higher);
 }
 
 .appbar {
   display: flex;
-  > h1 {
+
+  & > h1 {
     flex-grow: 1;
-    font-size: 1.8 * $unit;
+    font-size: calc(1.8 * var(--unit));
     font-weight: bold;
-    > small {
-      font-size: 1.8 * $unit;
+
+    & > small {
+      font-size: calc(1.8 * var(--unit));
       font-weight: normal;
     }
   }
 }
 
 .primary {
-  background-color: $color-primary;
+  background-color: var(--color-primary);
 }
 
 .cards {
-  margin-top: 10px;
   background-color: #f8f8f8;
   border: 1px solid #f4f4f4;
+  margin-top: 10px;
 }
 
 .cardsGroup {
-  position: relative;
+  align-items: stretch;
   display: flex;
   flex-wrap: wrap;
-  align-items: stretch;
   justify-content: center;
-  padding: 20px;
   list-style: none;
+  padding: 20px;
+  position: relative;
 }
 
 .cardRow {
-  display: flex;
   align-items: flex-start;
+  display: flex;
   justify-content: space-between;
-  .media {
-    width: 80px;
+
+  & .media {
     height: 80px;
     margin: 16px 16px 0 0;
+    width: 80px;
   }
-  .mediaLarge {
-    width: 140px;
+
+  & .mediaLarge {
     height: 140px;
     margin: 16px;
+    width: 140px;
   }
 }
 
 .cardItem {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-between;
   margin: 0 20px;
 }
 
 .cardItemContent {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
 }
 
@@ -116,10 +130,10 @@ $appbar-height: 6.4 * $unit;
 }
 
 .chipTruncateWrapper {
-  width: 20rem;
-  padding: $offset / 2;
-  margin-top: $offset;
   border: 1px solid #f4f4f4;
+  margin-top: var(--offset);
+  padding: calc(var(--offset) / 2);
+  width: 20rem;
 }
 
 .dropdownTemplate {
@@ -128,12 +142,12 @@ $appbar-height: 6.4 * $unit;
 }
 
 .dropdownTemplateImage {
+  background-color: #ccc;
   display: flex;
-  width: 32px;
-  height: 32px;
   flex-grow: 0;
+  height: 32px;
   margin-right: 8px;
-  background-color: #ccc;
+  width: 32px;
 }
 
 .dropdownTemplateContent {