diff --git a/README.md b/README.md
index 0b2260c3..dabe7aa8 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http
 
 ## Changelog
 
-- `3.2.0` is the latest release.
+- `3.5.0` is the latest release.
 - See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
 
 ## Need more help?
diff --git a/build/utils.js b/build/utils.js
index 5b7f95bf..a26c8371 100644
--- a/build/utils.js
+++ b/build/utils.js
@@ -76,7 +76,7 @@ exports.cssLoaders = function(options) {
     outputStyle: "compressed",
   }
 
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  // https://vue-loader.vuejs.org/guide/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
diff --git a/config/docs.config.js b/config/docs.config.js
index 3fe75ed5..00915ddc 100644
--- a/config/docs.config.js
+++ b/config/docs.config.js
@@ -153,7 +153,7 @@ module.exports = {
     module: {
       rules: [
         {
-          test: /\.(css?|scss)(\?.*)?$/,
+          test: /\.(css?|scss|sass)(\?.*)?$/,
           use: [
             "style-loader",
             "css-loader",
diff --git a/docs/components/status/Components.vue b/docs/components/status/Components.vue
index 4097de73..c53a09bc 100644
--- a/docs/components/status/Components.vue
+++ b/docs/components/status/Components.vue
@@ -2,19 +2,19 @@
   <div class="component-status">
     <ul class="status-list">
       <li>
-        <svg-icon name="ready" fill="#7cb518" size="16px" />
+        <Icon name="ready" fill="#7cb518" size="small" />
         <p>Ready</p>
       </li>
       <li>
-        <svg-icon name="review" :fill="tokens.color_ucla_gold.value" size="16px" />
+        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small" />
         <p>Under review</p>
       </li>
       <li>
-        <svg-icon name="deprecated" :fill="tokens.color_vermilion.value" size="16px" />
+        <Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small" />
       <p>Deprecated</p>
       </li>
       <li>
-        <svg-icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="16px" />
+        <Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
         <p>Prototype</p>
       </li>
       <li>
@@ -46,29 +46,29 @@
           </td>
           <td v-else>N/A</td>
           <td v-if="component.status">
-            <svg-icon
+            <Icon
               v-if="component.status === 'ready'"
               name="ready"
               fill="#7cb518"
-              size="16px"
+              size="small"
             />
-            <svg-icon
+            <Icon
               v-if="component.status === 'under-review' || component.status === 'review'"
               name="review"
               :fill="tokens.color_ucla_gold.value"
-              size="16px"
+              size="small"
             />
-            <svg-icon
+            <Icon
               v-if="component.status === 'prototype'"
               name="prototype"
               :fill="tokens.color_bleu_de_france.value"
-              size="16px"
+              size="small"
             />
-            <svg-icon
+            <Icon
               v-if="component.status === 'deprecated'"
               name="deprecated"
               :fill="tokens.color_vermilion.value"
-              size="16px"
+              size="small"
             />
           </td>
           <td v-else>—</td>
@@ -139,11 +139,11 @@ export default {
 
 .component-status {
   @include reset;
-  font-family: $font-family-heading;
-  font-weight: $font-weight-regular;
-  line-height: $line-height-heading;
+  font-family: $font-heading;
+  font-weight: $weight-normal;
+  line-height: $line-height-xs;
   color: $color-rich-black;
-  margin-bottom: $space-small;
+  margin-bottom: $space-s;
   font-style: normal;
   @media (max-width: 1000px) {
     overflow-x: auto;
@@ -154,14 +154,14 @@ export default {
     width: 100%;
   }
   thead th {
-    padding: $space-small;
+    padding: $space-s;
     background: $color-cloud;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    font-size: $size-s;
+    font-weight: $weight-bold;
     color: $color-oxford-blue;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
@@ -170,12 +170,12 @@ export default {
     position: sticky;
     top: -1px;
     &:first-child {
-      border-top-left-radius: $border-radius-default;
-      border-bottom-left-radius: $border-radius-default;
+      border-top-left-radius: $radius-default;
+      border-bottom-left-radius: $radius-default;
     }
     &:last-child {
-      border-top-right-radius: $border-radius-default;
-      border-bottom-right-radius: $border-radius-default;
+      border-top-right-radius: $radius-default;
+      border-bottom-right-radius: $radius-default;
     }
   }
   tr {
@@ -185,15 +185,15 @@ export default {
     }
   }
   td {
-    font-size: $font-size-small;
-    padding: $space-small;
+    font-size: $size-s;
+    padding: $space-s;
     &:first-child {
-      font-weight: $font-weight-bold;
+      font-weight: $weight-bold;
       white-space: nowrap;
     }
   }
   .status-list {
-    margin: 0 0 $space-small;
+    margin: 0 0 $space-m;
     overflow: hidden;
     padding: 0;
     list-style: none;
@@ -204,9 +204,9 @@ export default {
       display: block;
     }
     li {
-      margin: 0 $space-base 0 0;
+      margin: 0 $space-m 0 0;
       color: $color-silver;
-      font-size: $font-size-small;
+      font-size: $size-s;
       align-items: center;
       display: flex;
       @media (max-width: 1000px) {
@@ -216,11 +216,11 @@ export default {
       }
       svg,
       span {
-        margin: -2px calc(#{$space-small} / 2) 0 0;
+        margin: -2px calc(#{$space-s} / 2) 0 0;
       }
       p {
         @media (max-width: 1000px) {
-          margin: $space-x-small;
+          margin: $space-xs;
         }
       }
     }
diff --git a/docs/components/tokens/All.vue b/docs/components/tokens/All.vue
index 48f5185b..85aa85d8 100644
--- a/docs/components/tokens/All.vue
+++ b/docs/components/tokens/All.vue
@@ -68,11 +68,12 @@ export default {
 
 .all-tokens {
   @include reset;
-  font-family: $font-family-heading;
-  font-weight: $font-weight-regular;
-  line-height: $line-height-heading;
+  margin-top: $space-l;
+  font-family: $font-heading;
+  font-weight: $weight-normal;
+  line-height: $line-height-xs;
   color: $color-rich-black;
-  margin-bottom: $space-small;
+  margin-bottom: $space-s;
   font-style: normal;
   @media (max-width: 1000px) {
     overflow-x: auto;
@@ -83,14 +84,14 @@ export default {
     width: 100%;
   }
   thead th {
-    padding: $space-small $space-large $space-small $space-small;
+    padding: $space-s $space-l $space-s $space-s;
     background: $color-cloud;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    font-size: $size-s;
+    font-weight: $weight-bold;
     color: $color-oxford-blue;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
@@ -99,12 +100,12 @@ export default {
     position: sticky;
     top: -1px;
     &:first-child {
-      border-top-left-radius: $border-radius-default;
-      border-bottom-left-radius: $border-radius-default;
+      border-top-left-radius: $radius-default;
+      border-bottom-left-radius: $radius-default;
     }
     &:last-child {
-      border-top-right-radius: $border-radius-default;
-      border-bottom-right-radius: $border-radius-default;
+      border-top-right-radius: $radius-default;
+      border-bottom-right-radius: $radius-default;
     }
   }
   tr {
@@ -114,26 +115,26 @@ export default {
     }
   }
   td {
-    font-size: $font-size-small;
-    padding: $space-small $space-large $space-small $space-small;
+    font-size: $size-s;
+    padding: $space-s $space-l $space-s $space-s;
     &:first-child {
-      font-weight: $font-weight-bold;
+      font-weight: $weight-bold;
       white-space: nowrap;
     }
   }
   .type {
-    line-height: $line-height-small;
-    max-width: calc(100% - #{$space-base});
+    line-height: $line-height-s;
+    max-width: calc(100% - #{$space-m});
     float: left;
   }
   .example {
-    @include inline-space($space-x-small);
-    border-radius: $border-radius-default;
+    @include inline-space($space-xs);
+    border-radius: $radius-default;
     background: $color-white;
-    box-shadow: $box-shadow-small-inset, $box-shadow-small-inset, $box-shadow-small-inset;
+    box-shadow: $shadow-s-inset, $shadow-s-inset, $shadow-s-inset;
     margin-top: $space-xx-small;
-    width: $space-small;
-    height: $space-small;
+    width: $space-s;
+    height: $space-s;
     float: left;
   }
 }
diff --git a/docs/components/tokens/Color.vue b/docs/components/tokens/Color.vue
index ef734c66..326f8d51 100644
--- a/docs/components/tokens/Color.vue
+++ b/docs/components/tokens/Color.vue
@@ -50,6 +50,7 @@ export default {
 --------------------------------------------- */
 
 .colors {
+  margin-top: $space-l;
   display: block;
   width: 100%;
   @supports (display: grid) {
@@ -58,21 +59,19 @@ export default {
     align-content: stretch;
     justify-content: left;
     grid-template-columns:
-      calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base})
-      calc(20% - #{$space-base});
-    grid-column-gap: $space-base;
+      calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m})
+      calc(20% - #{$space-m});
+    grid-column-gap: $space-m;
     @media (max-width: 1300px) {
-      grid-template-columns: calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(
-          25% - #{$space-base}
+      grid-template-columns: calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(
+          25% - #{$space-m}
         );
     }
     @media (max-width: 1100px) {
-      grid-template-columns: calc(33.333% - #{$space-base}) calc(33.333% - #{$space-base}) calc(
-          33.333% - #{$space-base}
-        );
+      grid-template-columns: calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m});
     }
     @media (max-width: 900px) {
-      grid-template-columns: calc(50% - #{$space-base}) calc(50% - #{$space-base});
+      grid-template-columns: calc(50% - #{$space-m}) calc(50% - #{$space-m});
     }
     @media (max-width: 400px) {
       grid-template-columns: 100%;
@@ -80,17 +79,17 @@ export default {
   }
 }
 .swatch {
-  @include stack-space($space-small);
+  @include stack-space($space-s);
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  height: $space-xx-large;
-  margin-left: -#{$space-small};
-  margin-top: -#{$space-small};
-  width: calc(100% + #{$space-large});
+  height: $space-xxl;
+  margin-left: -#{$space-s};
+  margin-top: -#{$space-s};
+  width: calc(100% + #{$space-l});
   float: left;
 }
 h3 {
   @include reset;
-  @include stack-space($space-x-small);
+  @include stack-space($space-xs);
   text-transform: capitalize;
   line-height: 1.2;
   width: 100%;
@@ -98,15 +97,15 @@ h3 {
 }
 .color {
   @include reset;
-  @include inset-space($space-small);
+  @include inset-space($space-s);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin-bottom: $space-large;
+  margin-bottom: $space-m;
   box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
-  font-size: $font-size-small;
-  font-family: $font-family-text;
+  font-size: $size-s;
+  font-family: $font-text;
   color: $color-rich-black;
-  border-radius: $border-radius-default;
+  border-radius: $radius-default;
   overflow: hidden;
   text-align: left;
   @supports (display: grid) {
@@ -114,7 +113,7 @@ h3 {
     float: left;
   }
   @media (max-width: 400px) {
-    margin-bottom: $space-base;
+    margin-bottom: $space-m;
   }
   &:hover {
     span {
@@ -122,10 +121,10 @@ h3 {
     }
   }
   span {
-    margin-bottom: $space-x-small;
+    margin-bottom: $space-xs;
     line-height: 1.3;
     color: $color-silver;
-    font-size: $font-size-small;
+    font-size: $size-s;
     width: 100%;
     float: left;
   }
diff --git a/docs/components/tokens/FontSize.vue b/docs/components/tokens/FontSize.vue
index 5a3fccf3..523b7571 100644
--- a/docs/components/tokens/FontSize.vue
+++ b/docs/components/tokens/FontSize.vue
@@ -44,21 +44,22 @@ export default {
 --------------------------------------------- */
 
 .font-sizes {
+  margin-top: $space-l;
   overflow: hidden;
   width: 100%;
 }
 .font {
   @include reset;
-  font-family: $font-family-heading;
-  font-weight: $font-weight-bold;
-  line-height: $line-height-heading;
+  font-family: $font-heading;
+  font-weight: $weight-bold;
+  line-height: $line-height-xs;
   color: $color-rich-black;
-  margin-bottom: $space-small;
+  margin-bottom: $space-s;
   font-style: normal;
   span {
     letter-spacing: -0.02em;
     margin-left: 10px;
-    font-weight: $font-weight-regular;
+    font-weight: $weight-normal;
     color: $color-silver;
   }
 }
diff --git a/docs/components/tokens/Spacing.vue b/docs/components/tokens/Spacing.vue
index 99b05078..60147f31 100644
--- a/docs/components/tokens/Spacing.vue
+++ b/docs/components/tokens/Spacing.vue
@@ -45,6 +45,7 @@ export default {
 --------------------------------------------- */
 
 .spacing {
+  margin-top: $space-l;
   overflow: hidden;
   max-width: 1176px;
   width: 100%;
@@ -52,11 +53,11 @@ export default {
 .space {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  border-radius: $border-radius-default;
-  box-shadow: $box-shadow-small-inset;
-  margin-bottom: $space-x-small;
-  font-size: $font-size-small;
-  font-family: $font-family-text;
+  border-radius: $radius-default;
+  box-shadow: $shadow-s-inset;
+  margin-bottom: $space-xs;
+  font-size: $size-s;
+  font-family: $font-text;
   color: $color-rich-black;
   background: tint(#c4cdd5, 85%);
   text-align: center;
diff --git a/docs/docs.styles.scss b/docs/docs.styles.scss
index 5d4e88b4..4e2f4671 100644
--- a/docs/docs.styles.scss
+++ b/docs/docs.styles.scss
@@ -16,20 +16,11 @@ $docs-status-ready: #7cb518;
 $docs-breakpoint: 800px;
 $docs-breakpoint-small: 600px;
 $docs-color-heading: rgb(30, 30, 30);
-$docs-color-text: shade($color-silver, 50%);
+$docs-color-text: shade($color-silver, 70%);
 
 /* BASE
 --------------------------------------------- */
 
-::-moz-selection {
-  background: $color-bleu-de-france;
-  color: $color-white;
-}
-::selection {
-  background: $color-bleu-de-france;
-  color: $color-white;
-}
-
 div.rsg--root-1 {
   background: $color-white;
 }
@@ -45,9 +36,9 @@ div[class^="rsg--root"] {
 
 main[class^="rsg--content"] {
   display: block; /* IE11 fix */
-  padding: $space-small $space-x-large;
+  padding: $space-s $space-xl;
   @media (max-width: #{$docs-breakpoint}) {
-    padding: $space-small $space-base;
+    padding: $space-s $space-m;
   }
 }
 
@@ -72,24 +63,24 @@ div[class^="rsg--wrapper"] > h2[class^="rsg--heading"] {
   display: block;
   width: 100%;
   border: 0;
-  line-height: $line-height-small;
-  padding: $space-x-large $space-x-large;
-  width: calc(100% + #{$space-x-large * 2});
-  margin: -#{$space-small} -#{$space-x-large} $space-large -#{$space-x-large};
+  line-height: $line-height-s;
+  padding: $space-xl $space-xl;
+  width: calc(100% + #{$space-xl * 2});
+  margin: -#{$space-s} -#{$space-xl} $space-l -#{$space-xl};
   background: $color-cloud;
-  font-size: $font-size-xx-large;
+  font-size: $size-xxl;
   a:hover {
     text-decoration: none;
     cursor: default;
   }
   @media (max-width: 1300px) {
-    padding: $space-large $space-x-large;
+    padding: $space-l $space-xl;
   }
   @media (max-width: #{$docs-breakpoint}) {
-    font-size: $font-size-x-large / 1.2;
-    width: calc(100% + #{$space-x-large});
-    padding: $space-large $space-base;
-    margin: -#{$space-small} -#{$space-base} $space-base;
+    font-size: $size-xl / 1.2;
+    width: calc(100% + #{$space-xl});
+    padding: $space-l $space-m;
+    margin: -#{$space-s} -#{$space-m} $space-m;
   }
 }
 
@@ -97,7 +88,7 @@ header[class^="rsg--header"] {
   margin: 0;
 }
 div[class^="rsg--wrapper"] > h1[class^="rsg--heading"] a {
-  font-weight: $font-weight-regular;
+  font-weight: $weight-normal;
   color: $color-oxford-blue;
   letter-spacing: -1px;
   &:hover {
@@ -109,18 +100,18 @@ div[class^="rsg--wrapper"] > h1[class^="rsg--heading"] a {
 // Heading, level 2
 h2[class^="rsg--heading"] {
   border-bottom: 1px solid $docs-grey;
-  padding-bottom: $space-small;
-  margin: $space-large 0 $space-base;
-  font-size: $font-size-x-large;
-  line-height: $line-height-small;
-  font-weight: $font-weight-regular;
+  padding-bottom: $space-s;
+  margin: $space-l 0 $space-m;
+  font-size: $size-xl;
+  line-height: $line-height-s;
+  font-weight: $weight-normal;
   letter-spacing: -0.5px;
   width: 100%;
   @media (max-width: #{$docs-breakpoint}) {
-    font-size: $font-size-x-large / 1.3;
+    font-size: $size-xl / 1.3;
   }
   @media (max-width: #{$docs-breakpoint-small}) {
-    font-size: $font-size-x-large / 1.6;
+    font-size: $size-xl / 1.6;
   }
   a {
     color: $docs-color-heading;
@@ -131,35 +122,42 @@ h2[class^="rsg--heading"] {
 h3[class^="rsg--heading"],
 h3[class^="rsg--heading"] a {
   -webkit-font-smoothing: subpixel-antialiased;
-  font-weight: $font-weight-light;
-  line-height: $line-height-base;
-  margin: 0 0 $space-large;
-  font-size: $font-size-large;
+  -moz-osx-font-smoothing: auto;
+  font-weight: $weight-light;
+  line-height: $line-height-m;
+  margin: 0 0 $space-l;
+  font-size: $size-l;
   color: $docs-color-text;
   @media (max-width: #{$docs-breakpoint}) {
-    font-size: $font-size-large / 1.2;
-    margin: 0 0 $space-base;
+    font-size: $size-l / 1.2;
+    margin: 0 0 $space-m;
   }
 }
 
 // Heading, level 4
 h4[class^="rsg--heading"],
 h4[class^="rsg--heading"] a {
-  font-weight: $font-weight-semi-bold;
+  font-weight: $weight-semi-bold;
   letter-spacing: 0;
-  margin: $space-large 0 $space-base;
-  font-size: $font-size-large;
-  line-height: $line-height-small;
+  margin: $space-l 0 $space-m;
+  font-size: $size-l;
+  line-height: $line-height-s;
   color: $docs-color-heading;
 }
 
 // Paragraphs
 p[class^="rsg--para"] {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   color: $docs-color-text;
-  margin-bottom: $space-small;
-  line-height: $line-height-base;
+  margin-bottom: $space-s;
+  line-height: $line-height-m;
   strong a[class^="rsg--link"] {
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
+  }
+  code {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
   }
   a {
     overflow-wrap: break-word;
@@ -190,14 +188,14 @@ td[class^="rsg--cell"] p {
 }
 
 pre + p[class^="rsg--para"] {
-  margin-top: $space-small;
+  margin-top: $space-s;
 }
 
 p[class^="rsg--para"] code {
   background: tint($docs-grey, 75%);
   color: shade($color-silver, 20%);
   padding: $space-xx-small;
-  border-radius: $border-radius-default;
+  border-radius: $radius-default;
   font-size: 87.5%;
 }
 
@@ -208,10 +206,10 @@ div[class^="rsg--sidebar"] {
   background: mix($color-bleu-de-france, $color-rich-black, 5%);
   border: 0;
   @media (max-width: #{$docs-breakpoint}) {
-    padding-bottom: $space-large;
+    padding-bottom: $space-l;
   }
   a[class^="rsg--link"] {
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
     color: $color-bleu-de-france;
     &:hover {
       color: $color-bleu-de-france-lighter;
@@ -238,24 +236,25 @@ div[class^="rsg--sidebar"] {
   ul[class^="rsg--list"] {
     padding-left: 0;
     ul {
-      padding-left: $space-small;
+      padding-left: $space-s;
+      line-height: $line-height-s;
       @media (max-width: #{$docs-breakpoint-small}) {
-        padding: 0 0 0 $space-large;
+        padding: 0 0 0 $space-l;
         width: 90%;
         li {
           display: inline;
-          line-height: $line-height-base;
+          line-height: $line-height-m;
         }
       }
       // Second level links
       a[class*="rsg--link"] {
-        font-size: $font-size-small;
-        font-weight: $font-weight-regular;
+        font-size: $size-s;
+        font-weight: $weight-normal;
         -webkit-font-smoothing: subpixel-antialiased;
         -moz-osx-font-smoothing: auto;
         @media (max-width: #{$docs-breakpoint-small}) {
           float: left;
-          padding: 0 $space-x-small 0 0;
+          padding: 0 $space-xs 0 0;
         }
       }
     }
@@ -272,27 +271,27 @@ div[class^="rsg--sidebar"] {
     }
     // First level links
     a[class*="rsg--link"] {
-      padding: $space-xx-small $space-base;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
+      padding: $space-xx-small $space-m;
     }
   }
 }
 
 // Sidebar logo
 div[class^="rsg--logo"] {
-  @include inset-space($space-base);
+  @include inset-space($space-m);
   border-bottom: 1px solid rgba($color-white, 0.1);
   h1 {
     color: $color-white;
     color: tint($color-bleu-de-france, 90%);
-    font-weight: $font-weight-regular;
+    font-weight: $weight-normal;
   }
 }
 
 // Sidebar search
 div[class^="rsg--search"] input {
-  @include inset-squish-space($space-small);
+  @include inset-squish-space($space-s);
   color: $color-white;
   border: 1px solid transparent;
   background: mix($color-bleu-de-france, $color-rich-black, 20%);
@@ -320,7 +319,7 @@ div[class^="rsg--search"] input {
 // Sidebar 1st level section links
 ul[class^="rsg--list"] a[class*=" rsg--heading"],
 div[class^="rsg--root"] > ul[class^="rsg--list"] > li > a {
-  font-weight: $font-weight-semi-bold;
+  font-weight: $weight-semi-bold;
 }
 
 /* CODE PREVIEWS
@@ -328,16 +327,16 @@ div[class^="rsg--root"] > ul[class^="rsg--list"] > li > a {
 
 pre[class^="rsg--pre"],
 div[class^="rsg--preview"] {
-  padding: $space-base;
+  padding: $space-l / 1.2;
   background-color: tint($docs-grey, 90%);
   border: 1px solid tint($docs-grey, 50%);
-  box-shadow: inset 0 0 $space-x-small rgba($color-rich-black, 0.05);
-  margin: $space-small 0 0;
+  box-shadow: inset 0 0 $space-xs rgba($color-rich-black, 0.05);
+  margin: $space-s 0 0;
   border-radius: 0;
   display: block;
   width: 100%;
-  border-top-left-radius: $border-radius-default;
-  border-top-right-radius: $border-radius-default;
+  border-top-left-radius: $radius-default;
+  border-top-right-radius: $radius-default;
 }
 
 // If you edit the section names you might have to edit
@@ -369,7 +368,7 @@ div[data-preview]:after {
 // Code tabs and table
 div[class^="rsg--tabs"],
 table[class^="rsg--table"] {
-  margin-bottom: $space-small;
+  margin-bottom: $space-s;
   overflow-x: auto;
 }
 thead[class^="rsg--tableHead"] {
@@ -380,18 +379,20 @@ thead[class^="rsg--tableHead"] {
 .vueds-html.cm-s-night.CodeMirror,
 .react-codemirror2 .CodeMirror.CodeMirror {
   background: mix($color-bleu-de-france, $color-rich-black, 10%);
-  border-bottom-left-radius: $border-radius-default;
-  border-bottom-right-radius: $border-radius-default;
+  border-bottom-left-radius: $radius-default;
+  border-bottom-right-radius: $radius-default;
   box-sizing: border-box;
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
   height: auto;
   border: 0;
   font-family: Consolas, "Liberation Mono", Menlo, monospace;
-  font-size: $font-size-small;
+  font-size: $size-s;
   margin: 0;
-  min-height: $space-xx-large / 1.5;
-  margin-bottom: $space-base;
+  min-height: $space-xxl / 1.5;
+  margin-bottom: $space-m;
   color: $color-white;
-  padding: $space-base $space-base * 7 $space-base $space-base;
+  padding: $space-m $space-m * 7 $space-m $space-m;
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;
@@ -400,29 +401,30 @@ thead[class^="rsg--tableHead"] {
     overflow: hidden;
   }
 }
+.vueds-html.cm-s-night.CodeMirror {
+  padding-left: $space-m - 4px;
+}
 
 // Code tabs
 div[class^="rsg--tab"] {
   position: relative;
   .vueds-tabs {
     z-index: 5;
-    border-radius: $border-radius-default;
+    border-radius: $radius-default;
     box-shadow: 0 2px 8px rgba($color-rich-black, 0.8);
     overflow: hidden;
     position: absolute;
-    top: $space-base;
-    right: $space-base;
+    top: $space-m;
+    right: $space-m;
     .vueds-tab {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
       border: 0;
       margin: 0;
-      letter-spacing: $letter-spacing-large;
-      font-size: $font-size-small;
-      font-weight: $font-weight-semi-bold;
-      font-family: $font-family-text;
-      line-height: $line-height-small;
-      @include inset-squish-space($space-small);
+      letter-spacing: $spacing-l;
+      font-size: $size-s;
+      font-weight: $weight-normal;
+      font-family: $font-text;
+      line-height: $line-height-s;
+      @include inset-squish-space($space-s);
       cursor: pointer;
       background: mix($color-bleu-de-france, $color-rich-black, 50%);
       color: $color-white;
@@ -444,6 +446,8 @@ div[class^="rsg--tab"] {
   opacity: 0;
   visibility: hidden;
   z-index: -1;
+  top: -10000px;
+  left: 0;
   position: absolute !important;
 }
 
@@ -472,9 +476,7 @@ code[class^="rsg--code"] {
 }
 span[class^="rsg--name"] code[class^="rsg--code"],
 code.name {
-  font-weight: $font-weight-bold;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-weight: $weight-bold;
   color: shade($color-silver, 50%);
 }
 span[class^="rsg--type"] code[class^="rsg--code"],
@@ -482,7 +484,7 @@ code.type {
   background: tint($docs-grey, 75%);
   color: shade($color-silver, 20%);
   padding: $space-xx-small;
-  border-radius: $border-radius-default;
+  border-radius: $radius-default;
 }
 
 /* COMPONENT STATUS LABELS
@@ -504,28 +506,28 @@ div[class^="rsg--root"] div[class^="rsg--tabs"] {
 
 .status {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
-  font-weight: $font-weight-regular;
+  font-weight: $weight-normal;
   order: 1;
   align-self: flex-end;
   cursor: help;
-  line-height: $line-height-heading;
+  line-height: $line-height-xs;
   background: tint($docs-grey, 50%);
-  padding: $space-x-small $space-small $space-x-small/1.2;
+  padding: $space-xs $space-s $space-xs/1.2;
   text-transform: uppercase;
   letter-spacing: 1px;
-  font-size: $font-size-x-small;
-  border-radius: $border-radius-default;
+  font-size: $size-xs;
+  border-radius: $radius-default;
   color: $color-rich-black;
   position: absolute;
-  right: $space-x-large;
-  top: $space-x-large * 1.2;
+  right: $space-xl;
+  top: $space-xl * 1.2;
   z-index: 2;
   @media (max-width: 1300px) {
-    top: $space-x-large;
+    top: $space-xl;
   }
   @media (max-width: #{$docs-breakpoint}) {
-    top: $space-large * 1.2;
-    right: $space-base;
+    top: $space-l * 1.2;
+    right: $space-m;
   }
   &-ready {
     background: $docs-status-ready;
@@ -561,14 +563,12 @@ table[class^="rsg--table"] {
   border-spacing: 0;
   width: 100%;
   th {
-    padding: $space-small $space-large $space-small $space-small;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    padding: $space-s $space-l $space-s $space-s;
+    font-size: $size-s;
+    font-weight: $weight-bold;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $font-weight-semi-bold;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    font-weight: $weight-semi-bold;
     border-radius: 0;
     background: $color-cloud;
     color: tint($color-oxford-blue, 10%);
@@ -576,14 +576,14 @@ table[class^="rsg--table"] {
   }
   th[class^="rsg--cellHeading"],
   td {
-    padding: $space-small $space-large $space-small $space-small;
+    padding: $space-s $space-l $space-s $space-s;
     background: transparent;
   }
   td {
-    font-size: $font-size-small;
-    padding: $space-small $space-large $space-small $space-small;
+    font-size: $size-s;
+    padding: $space-s $space-l $space-s $space-s;
     &:first-child {
-      font-weight: $font-weight-bold;
+      font-weight: $weight-bold;
       white-space: nowrap;
     }
   }
@@ -597,12 +597,12 @@ table[class^="rsg--table"] {
 
 thead[class^="rsg--thead"] {
   th:first-child {
-    border-top-left-radius: $border-radius-default;
-    border-bottom-left-radius: $border-radius-default;
+    border-top-left-radius: $radius-default;
+    border-bottom-left-radius: $radius-default;
   }
   th:last-child {
-    border-top-right-radius: $border-radius-default;
-    border-bottom-right-radius: $border-radius-default;
+    border-top-right-radius: $radius-default;
+    border-bottom-right-radius: $radius-default;
   }
 }
 
diff --git a/docs/docs.tokens.scss b/docs/docs.tokens.scss
index ad6fdd6d..5986a8b1 100644
--- a/docs/docs.tokens.scss
+++ b/docs/docs.tokens.scss
@@ -25,42 +25,42 @@ $color-cloud: rgb(233, 243, 253) !default;
 $color-oxford-blue: rgb(0, 38, 77) !default;
 $color-vermilion: rgb(235, 59, 36) !default;
 
-$font-size-xxx-large: 64px !default;
-$font-size-xx-large: 48px !default;
-$font-size-x-large: 36px !default;
-$font-size-large: 24px !default;
-$font-size-base: 16px !default;
-$font-size-small: 13px !default;
-$font-size-x-small: 11px !default;
+$size-xxxl: 64px !default;
+$size-xxl: 48px !default;
+$size-xl: 36px !default;
+$size-l: 24px !default;
+$size-m: 16px !default;
+$size-s: 13px !default;
+$size-xs: 11px !default;
 
-$font-family-heading: "Fira Sans", Helvetica, Arial, sans-serif !default;
-$font-family-text: "Fira Sans", Helvetica, Arial, sans-serif !default;
+$font-heading: "Fira Sans", Helvetica, Arial, sans-serif !default;
+$font-text: "Fira Sans", Helvetica, Arial, sans-serif !default;
 
-$font-weight-bold: 700 !default;
-$font-weight-semi-bold: 600 !default;
-$font-weight-regular: 400 !default;
-$font-weight-light: 300 !default;
+$weight-bold: 700 !default;
+$weight-semi-bold: 600 !default;
+$weight-normal: 400 !default;
+$weight-light: 300 !default;
 
-$box-shadow-small: 0 0 0 1px rgba(92, 106, 196, 0.1) !default;
-$box-shadow-small-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !default;
+$shadow-s: 0 0 0 1px rgba(92, 106, 196, 0.1) !default;
+$shadow-s-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !default;
 
-$letter-spacing-x-large: 2px !default;
-$letter-spacing-large: 1px !default;
-$letter-spacing-base: 0 !default;
-$letter-spacing-small: -0.5px !default;
-$letter-spacing-x-small: -1px !default;
+$spacing-xl: 2px !default;
+$spacing-l: 1px !default;
+$spacing-m: 0 !default;
+$spacing-s: -0.5px !default;
+$spacing-xs: -1px !default;
 
-$border-radius-default: 3px !default;
-$border-radius-circle: 50% !default;
+$radius-default: 3px !default;
+$radius-circle: 50% !default;
 
-$space-xx-large: 128px !default;
-$space-x-large: 64px !default;
-$space-large: 48px !default;
-$space-base: 24px !default;
-$space-small: 16px !default;
-$space-x-small: 8px !default;
+$space-xxl: 128px !default;
+$space-xl: 64px !default;
+$space-l: 48px !default;
+$space-m: 24px !default;
+$space-s: 16px !default;
+$space-xs: 8px !default;
 $space-xx-small: 4px !default;
 
-$line-height-base: 1.6 !default;
-$line-height-small: 1.3 !default;
-$line-height-heading: 1 !default;
+$line-height-m: 1.6 !default;
+$line-height-s: 1.3 !default;
+$line-height-xs: 1 !default;
diff --git a/docs/faq.md b/docs/faq.md
index bbd0d02b..0cd37bd9 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -90,7 +90,7 @@ Once done, you can utilize tokens inside `<template>` like this:
 
 ```html
 <template>
-  <a-thing :style="{color: tokens.color_vermilion.value}" />
+  <Thing :style="{color: tokens.color_vermilion.value}" />
 </template>
 ```
 
@@ -98,9 +98,9 @@ Once done, you can utilize tokens inside `<template>` like this:
 
 ```scss
 .wrapper {
-  padding: $space-large;
-  @media #{$media-query-large} {
-    padding: $space-x-large;
+  padding: $space-l;
+  @media #{$media-query-l} {
+    padding: $space-xl;
   }
 }
 ```
diff --git a/docs/patterns.md b/docs/patterns.md
index b52536b4..12ac6874 100644
--- a/docs/patterns.md
+++ b/docs/patterns.md
@@ -1,6 +1,6 @@
 ### Patterns are UI Patterns that fall on the more complex side of the spectrum. Date pickers, data tables, and visualizations are good examples. Patterns utilize both elements and design tokens.
 
-You’re looking at Vue Design System’s demo <code>UI Patterns</code>. If you wonder whether something should be called an element or a pattern, ask yourself this question: _“Can this be broken down into smaller pieces?”_ If the answer is yes, it should most likely be a pattern in Vue Design System. Everything you see here is editable in Markdown format. To change or remove this content, see [/docs/patterns.md](https://github.com/viljamis/vue-design-system/blob/master/docs/patterns.md). The documentation you see below is auto generated by Vue Styleguidist. To edit how it’s formatted, see [/docs/docs.styles.scss](https://github.com/viljamis/vue-design-system/blob/master/docs/docs.styles.scss).
+You’re looking at Vue Design System’s demo <code>UI Patterns</code>. If you wonder whether something should be called an element or a pattern, ask yourself this question: _“Can this be broken down into smaller pieces?”_ If the answer is yes, it should most likely be a pattern in Vue Design System. Everything you see here is editable in Markdown format. To change or remove this content, see [/docs/patterns.md](https://github.com/viljamis/vue-design-system/blob/master/docs/patterns.md). The documentation you see below is auto generated by Vue Design System. To edit how it’s formatted, see [/docs/docs.styles.scss](https://github.com/viljamis/vue-design-system/blob/master/docs/docs.styles.scss).
 
 ## Overview
 
diff --git a/docs/templates.md b/docs/templates.md
index 152ef609..cf0d1e67 100644
--- a/docs/templates.md
+++ b/docs/templates.md
@@ -1,6 +1,6 @@
 ### Templates exist to document the layout and structure of a section. These are not called “pages” for a reason. While they can be pages, that’s not their only functionality. Templates consist of design tokens, elements, and&nbsp;patterns.
 
-You’re looking at Vue Design System’s demo <code>UI Templates</code>. Everything you see here is editable in Markdown format. To change or remove this content, see [/docs/templates.md](https://github.com/viljamis/vue-design-system/blob/master/docs/templates.md). The documentation you see below is auto generated by Vue Styleguidist. To edit how it’s formatted, see [/docs/docs.styles.scss](https://github.com/viljamis/vue-design-system/blob/master/docs/docs.styles.scss).
+You’re looking at Vue Design System’s demo <code>UI Templates</code>. Everything you see here is editable in Markdown format. To change or remove this content, see [/docs/templates.md](https://github.com/viljamis/vue-design-system/blob/master/docs/templates.md). The documentation you see below is auto generated by Vue Design System. To edit how it’s formatted, see [/docs/docs.styles.scss](https://github.com/viljamis/vue-design-system/blob/master/docs/docs.styles.scss).
 
 ## Overview
 
diff --git a/package-lock.json b/package-lock.json
index 44b17f07..be1aae13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-design-system",
-  "version": "3.2.0",
+  "version": "3.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1205,179 +1205,174 @@
       }
     },
     "@webassemblyjs/ast": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.6.tgz",
-      "integrity": "sha512-8nkZS48EVsMUU0v6F1LCIOw4RYWLm2plMtbhFTjNgeXmsTNLuU3xTRtnljt9BFQB+iPbLRobkNrCWftWnNC7wQ==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.8.tgz",
+      "integrity": "sha512-dOrtdtEyB8sInpl75yLPNksY4sRl0j/+t6aHyB/YA+ab9hV3Fo7FmG12FHzP+2MvWVAJtDb+6eXR5EZbZJ+uVg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.7.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.6",
-        "@webassemblyjs/wast-parser": "1.7.6",
-        "mamacro": "^0.0.3"
+        "@webassemblyjs/helper-module-context": "1.7.8",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
+        "@webassemblyjs/wast-parser": "1.7.8"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.6.tgz",
-      "integrity": "sha512-VBOZvaOyBSkPZdIt5VBMg3vPWxouuM13dPXGWI1cBh3oFLNcFJ8s9YA7S9l4mPI7+Q950QqOmqj06oa83hNWBA==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.8.tgz",
+      "integrity": "sha512-kn2zNKGsbql5i56VAgRYkpG+VazqHhQQZQycT2uXAazrAEDs23gy+Odkh5VblybjnwX2/BITkDtNmSO76hdIvQ==",
       "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.6.tgz",
-      "integrity": "sha512-SCzhcQWHXfrfMSKcj8zHg1/kL9kb3aa5TN4plc/EREOs5Xop0ci5bdVBApbk2yfVi8aL+Ly4Qpp3/TRAUInjrg==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.8.tgz",
+      "integrity": "sha512-xUwxDXsd1dUKArJEP5wWM5zxgCSwZApSOJyP1XO7M8rNUChUDblcLQ4FpzTpWG2YeylMwMl1MlP5Ztryiz1x4g==",
       "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.6.tgz",
-      "integrity": "sha512-1/gW5NaGsEOZ02fjnFiU8/OEEXU1uVbv2um0pQ9YVL3IHSkyk6xOwokzyqqO1qDZQUAllb+V8irtClPWntbVqw==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.8.tgz",
+      "integrity": "sha512-WXiIMnuvuwlhWvVOm8xEXU9DnHaa3AgAU0ZPfvY8vO1cSsmYb2WbGbHnMLgs43vXnA7XAob9b56zuZaMkxpCBg==",
       "dev": true
     },
     "@webassemblyjs/helper-code-frame": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.6.tgz",
-      "integrity": "sha512-+suMJOkSn9+vEvDvgyWyrJo5vJsWSDXZmJAjtoUq4zS4eqHyXImpktvHOZwXp1XQjO5H+YQwsBgqTQEc0J/5zg==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.8.tgz",
+      "integrity": "sha512-TLQxyD9qGOIdX5LPQOPo0Ernd88U5rHkFb8WAjeMIeA0sPjCHeVPaGqUGGIXjUcblUkjuDAc07bruCcNHUrHDA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/wast-printer": "1.7.6"
+        "@webassemblyjs/wast-printer": "1.7.8"
       }
     },
     "@webassemblyjs/helper-fsm": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.6.tgz",
-      "integrity": "sha512-HCS6KN3wgxUihGBW7WFzEC/o8Eyvk0d56uazusnxXthDPnkWiMv+kGi9xXswL2cvfYfeK5yiM17z2K5BVlwypw==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.8.tgz",
+      "integrity": "sha512-TjK0CnD8hAPkV5mbSp5aWl6SO1+H3WFcjWtixWoy8EMA99YnNzYhpc/WSYWhf7yrhpzkq5tZB0tvLK3Svr3IXA==",
       "dev": true
     },
     "@webassemblyjs/helper-module-context": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.6.tgz",
-      "integrity": "sha512-e8/6GbY7OjLM+6OsN7f2krC2qYVNaSr0B0oe4lWdmq5sL++8dYDD1TFbD1TdAdWMRTYNr/Qq7ovXWzia2EbSjw==",
-      "dev": true,
-      "requires": {
-        "mamacro": "^0.0.3"
-      }
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.8.tgz",
+      "integrity": "sha512-uCutAKR7Nm0VsFixcvnB4HhAyHouNbj0Dx1p7eRjFjXGGZ+N7ftTaG1ZbWCasAEbtwGj54LP8+lkBZdTCPmLGg==",
+      "dev": true
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.6.tgz",
-      "integrity": "sha512-PzYFCb7RjjSdAOljyvLWVqd6adAOabJW+8yRT+NWhXuf1nNZWH+igFZCUK9k7Cx7CsBbzIfXjJc7u56zZgFj9Q==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.8.tgz",
+      "integrity": "sha512-AdCCE3BMW6V34WYaKUmPgVHa88t2Z14P4/0LjLwuGkI0X6pf7nzp0CehzVVk51cKm2ymVXjl9dCG+gR1yhITIQ==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.6.tgz",
-      "integrity": "sha512-3GS628ppDPSuwcYlQ7cDCGr4W2n9c4hLzvnRKeuz+lGsJSmc/ADVoYpm1ts2vlB1tGHkjtQMni+yu8mHoMlKlA==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.8.tgz",
+      "integrity": "sha512-BkBhYQuzyl4hgTGOKo87Vdw6f9nj8HhI7WYpI0MCC5qFa5ahrAPOGgyETVdnRbv+Rjukl9MxxfDmVcVC435lDg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/helper-buffer": "1.7.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.6",
-        "@webassemblyjs/wasm-gen": "1.7.6"
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/helper-buffer": "1.7.8",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
+        "@webassemblyjs/wasm-gen": "1.7.8"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.7.6.tgz",
-      "integrity": "sha512-V4cIp0ruyw+hawUHwQLn6o2mFEw4t50tk530oKsYXQhEzKR+xNGDxs/SFFuyTO7X3NzEu4usA3w5jzhl2RYyzQ==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.7.8.tgz",
+      "integrity": "sha512-tOarWChdG1a3y1yqCX0JMDKzrat5tQe4pV6K/TX19BcXsBLYxFQOL1DEDa5KG9syeyvCrvZ+i1+Mv1ExngvktQ==",
       "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.7.6.tgz",
-      "integrity": "sha512-ojdlG8WpM394lBow4ncTGJoIVZ4aAtNOWHhfAM7m7zprmkVcKK+2kK5YJ9Bmj6/ketTtOn7wGSHCtMt+LzqgYQ==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.7.8.tgz",
+      "integrity": "sha512-GCYeGPgUFWJiZuP4NICbcyUQNxNLJIf476Ei+K+jVuuebtLpfvwkvYT6iTUE7oZYehhkor4Zz2g7SJ/iZaPudQ==",
       "dev": true,
       "requires": {
         "@xtuc/long": "4.2.1"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.7.6.tgz",
-      "integrity": "sha512-oId+tLxQ+AeDC34ELRYNSqJRaScB0TClUU6KQfpB8rNT6oelYlz8axsPhf6yPTg7PBJ/Z5WcXmUYiHEWgbbHJw==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.7.8.tgz",
+      "integrity": "sha512-9X+f0VV+xNXW2ujfIRSXBJENGE6Qh7bNVKqu3yDjTFB3ar3nsThsGBBKdTG58aXOm2iUH6v28VIf88ymPXODHA==",
       "dev": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.6.tgz",
-      "integrity": "sha512-pTNjLO3o41v/Vz9VFLl+I3YLImpCSpodFW77pNoH4agn5I6GgSxXHXtvWDTvYJFty0jSeXZWLEmbaSIRUDlekg==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.8.tgz",
+      "integrity": "sha512-6D3Hm2gFixrfyx9XjSON4ml1FZTugqpkIz5Awvrou8fnpyprVzcm4X8pyGRtA2Piixjl3DqmX/HB1xdWyE097A==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/helper-buffer": "1.7.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.6",
-        "@webassemblyjs/helper-wasm-section": "1.7.6",
-        "@webassemblyjs/wasm-gen": "1.7.6",
-        "@webassemblyjs/wasm-opt": "1.7.6",
-        "@webassemblyjs/wasm-parser": "1.7.6",
-        "@webassemblyjs/wast-printer": "1.7.6"
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/helper-buffer": "1.7.8",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
+        "@webassemblyjs/helper-wasm-section": "1.7.8",
+        "@webassemblyjs/wasm-gen": "1.7.8",
+        "@webassemblyjs/wasm-opt": "1.7.8",
+        "@webassemblyjs/wasm-parser": "1.7.8",
+        "@webassemblyjs/wast-printer": "1.7.8"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.6.tgz",
-      "integrity": "sha512-mQvFJVumtmRKEUXMohwn8nSrtjJJl6oXwF3FotC5t6e2hlKMh8sIaW03Sck2MDzw9xPogZD7tdP5kjPlbH9EcQ==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.8.tgz",
+      "integrity": "sha512-a7O/wE6eBeVKKUYgpMK7NOHmMADD85rSXLe3CqrWRDwWff5y3cSVbzpN6Qv3z6C4hdkpq9qyij1Ga1kemOZGvQ==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.6",
-        "@webassemblyjs/ieee754": "1.7.6",
-        "@webassemblyjs/leb128": "1.7.6",
-        "@webassemblyjs/utf8": "1.7.6"
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
+        "@webassemblyjs/ieee754": "1.7.8",
+        "@webassemblyjs/leb128": "1.7.8",
+        "@webassemblyjs/utf8": "1.7.8"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.6.tgz",
-      "integrity": "sha512-go44K90fSIsDwRgtHhX14VtbdDPdK2sZQtZqUcMRvTojdozj5tLI0VVJAzLCfz51NOkFXezPeVTAYFqrZ6rI8Q==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.8.tgz",
+      "integrity": "sha512-3lbQ0PT81NHCdi1sR/7+SNpZadM4qYcTSr62nFFAA7e5lFwJr14M1Gi+A/Y3PgcDWOHYjsaNGPpPU0H03N6Blg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/helper-buffer": "1.7.6",
-        "@webassemblyjs/wasm-gen": "1.7.6",
-        "@webassemblyjs/wasm-parser": "1.7.6"
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/helper-buffer": "1.7.8",
+        "@webassemblyjs/wasm-gen": "1.7.8",
+        "@webassemblyjs/wasm-parser": "1.7.8"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.6.tgz",
-      "integrity": "sha512-t1T6TfwNY85pDA/HWPA8kB9xA4sp9ajlRg5W7EKikqrynTyFo+/qDzIpvdkOkOGjlS6d4n4SX59SPuIayR22Yg==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.8.tgz",
+      "integrity": "sha512-rZ/zlhp9DHR/05zh1MbAjT2t624sjrPP/OkJCjXqzm7ynH+nIdNcn9Ixc+qzPMFXhIrk0rBoQ3to6sEIvHh9jQ==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/helper-api-error": "1.7.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.6",
-        "@webassemblyjs/ieee754": "1.7.6",
-        "@webassemblyjs/leb128": "1.7.6",
-        "@webassemblyjs/utf8": "1.7.6"
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/helper-api-error": "1.7.8",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
+        "@webassemblyjs/ieee754": "1.7.8",
+        "@webassemblyjs/leb128": "1.7.8",
+        "@webassemblyjs/utf8": "1.7.8"
       }
     },
     "@webassemblyjs/wast-parser": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.7.6.tgz",
-      "integrity": "sha512-1MaWTErN0ziOsNUlLdvwS+NS1QWuI/kgJaAGAMHX8+fMJFgOJDmN/xsG4h/A1Gtf/tz5VyXQciaqHZqp2q0vfg==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.7.8.tgz",
+      "integrity": "sha512-Q/zrvtUvzWuSiJMcSp90fi6gp2nraiHXjTV2VgAluVdVapM4gy1MQn7akja2p6eSBDQpKJPJ6P4TxRkghRS5dg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/floating-point-hex-parser": "1.7.6",
-        "@webassemblyjs/helper-api-error": "1.7.6",
-        "@webassemblyjs/helper-code-frame": "1.7.6",
-        "@webassemblyjs/helper-fsm": "1.7.6",
-        "@xtuc/long": "4.2.1",
-        "mamacro": "^0.0.3"
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/floating-point-hex-parser": "1.7.8",
+        "@webassemblyjs/helper-api-error": "1.7.8",
+        "@webassemblyjs/helper-code-frame": "1.7.8",
+        "@webassemblyjs/helper-fsm": "1.7.8",
+        "@xtuc/long": "4.2.1"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.7.6.tgz",
-      "integrity": "sha512-vHdHSK1tOetvDcl1IV1OdDeGNe/NDDQ+KzuZHMtqTVP1xO/tZ/IKNpj5BaGk1OYFdsDWQqb31PIwdEyPntOWRQ==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.7.8.tgz",
+      "integrity": "sha512-GllIthRtwTxRDAURRNXscu7Napzmdf1jt1gpiZiK/QN4fH0lSGs3OTmvdfsMNP7tqI4B3ZtfaaWRlNIQug6Xyg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/wast-parser": "1.7.6",
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/wast-parser": "1.7.8",
         "@xtuc/long": "4.2.1"
       }
     },
@@ -2452,9 +2447,9 @@
       "dev": true
     },
     "babel-eslint": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-9.0.0.tgz",
-      "integrity": "sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.1.tgz",
+      "integrity": "sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -2666,9 +2661,9 @@
       }
     },
     "babel-loader": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.2.tgz",
-      "integrity": "sha512-Law0PGtRV1JL8Y9Wpzc0d6EE0GD7LzXWCfaeWwboUMcBWNG6gvaWTK1/+BK7a4X5EmeJiGEuDDFxUsOa8RSWCw==",
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.4.tgz",
+      "integrity": "sha512-fhBhNkUToJcW9nV46v8w87AJOwAJDz84c1CL57n3Stj73FANM/b9TbCUK4YhdOwEyZ+OxhYpdeZDNzSI29Firw==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^1.0.0",
@@ -6066,16 +6061,16 @@
       }
     },
     "eslint": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.6.0.tgz",
-      "integrity": "sha512-/eVYs9VVVboX286mBK7bbKnO1yamUy2UCRjiY6MryhQL2PaaXCExsCQ2aO83OeYRhU2eCU/FMFP+tVMoOrzNrA==",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.6.1.tgz",
+      "integrity": "sha512-hgrDtGWz368b7Wqf+v1Z69O3ZebNR0+GA7PtDdbmuz4rInFVUV9uw7whjZEiWyLzCjVb5Rs5WRN1TAS6eo7AYA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "ajv": "^6.5.3",
         "chalk": "^2.1.0",
         "cross-spawn": "^6.0.5",
-        "debug": "^3.1.0",
+        "debug": "^4.0.1",
         "doctrine": "^2.1.0",
         "eslint-scope": "^4.0.0",
         "eslint-utils": "^1.3.1",
@@ -6118,9 +6113,9 @@
           "dev": true
         },
         "debug": {
-          "version": "3.2.5",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.5.tgz",
-          "integrity": "sha512-D61LaDQPQkxJ5AUM2mbSJRbPkNs/TmdmOeLAi1hgDkpDfIfetSrjmWhccwtuResSwMbACjx/xXQofvM9CE/aeg==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.0.1.tgz",
+          "integrity": "sha512-K23FHJ/Mt404FSlp6gSZCevIbTMLX0j3fmHhUEhQ3Wq0FMODW3+cUSoLdy1Gx4polAf4t/lphhmHH35BB8cLYw==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -9185,20 +9180,139 @@
       "dev": true
     },
     "husky": {
-      "version": "0.14.3",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
-      "integrity": "sha512-e21wivqHpstpoiWA/Yi8eFti8E+sQDSS53cpJsPptPs295QTOQR0ZwnHo2TXy1XOpZFD9rPOd3NpmqTK6uMLJA==",
-      "dev": true,
-      "requires": {
-        "is-ci": "^1.0.10",
-        "normalize-path": "^1.0.0",
-        "strip-indent": "^2.0.0"
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-1.0.1.tgz",
+      "integrity": "sha512-MxwLwwwgY7mqV4auSpGWKPTCkZ9RmsdGojQQBvRtr6vxnjSOyI5l/M58QdUz0vRKb0igTpbzBeoUsScx4XJwQg==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.6",
+        "execa": "^0.9.0",
+        "find-up": "^3.0.0",
+        "get-stdin": "^6.0.0",
+        "is-ci": "^1.2.1",
+        "pkg-dir": "^3.0.0",
+        "please-upgrade-node": "^3.1.1",
+        "read-pkg": "^4.0.1",
+        "run-node": "^1.0.0",
+        "slash": "^2.0.0"
       },
       "dependencies": {
-        "normalize-path": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-1.0.0.tgz",
-          "integrity": "sha1-MtDkcvkf80VwHBWoMRAY07CpA3k=",
+        "cosmiconfig": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.0.6.tgz",
+          "integrity": "sha512-6DWfizHriCrFWURP1/qyhsiFvYdlJzbCzmtFWh744+KyWsJo5+kPzUZZaMRSSItoYc0pxFX7gEO7ZC1/gN/7AQ==",
+          "dev": true,
+          "requires": {
+            "is-directory": "^0.3.1",
+            "js-yaml": "^3.9.0",
+            "parse-json": "^4.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.9.0.tgz",
+          "integrity": "sha512-BbUMBiX4hqiHZUA5+JujIjNb6TyAlp2D5KLheMjMluwOuzcnylDL4AxZYLLn1n2AGB49eSWwyKvvEQoRpnAtmA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-stdin": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
+          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
+          "dev": true
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        },
+        "read-pkg": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
+          "integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
+          "dev": true,
+          "requires": {
+            "normalize-package-data": "^2.3.2",
+            "parse-json": "^4.0.0",
+            "pify": "^3.0.0"
+          }
+        },
+        "slash": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -11167,12 +11281,6 @@
         "tmpl": "1.0.x"
       }
     },
-    "mamacro": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
-      "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==",
-      "dev": true
-    },
     "map-age-cleaner": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
@@ -12661,9 +12769,9 @@
       }
     },
     "pbkdf2": {
-      "version": "3.0.16",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.16.tgz",
-      "integrity": "sha512-y4CXP3thSxqf7c0qmOF+9UeOTrifiVTIM+u7NWlq+PRsHbr7r7dpCmvzrZxa96JJUNi0Y5w9VqG5ZNeCVMoDcA==",
+      "version": "3.0.17",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
+      "integrity": "sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==",
       "dev": true,
       "requires": {
         "create-hash": "^1.1.2",
@@ -12717,6 +12825,15 @@
         "find-up": "^2.1.0"
       }
     },
+    "please-upgrade-node": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz",
+      "integrity": "sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==",
+      "dev": true,
+      "requires": {
+        "semver-compare": "^1.0.0"
+      }
+    },
     "pluralize": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
@@ -16552,6 +16669,12 @@
         "is-promise": "^2.1.0"
       }
     },
+    "run-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz",
+      "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==",
+      "dev": true
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -16577,9 +16700,9 @@
       }
     },
     "rxjs": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.2.tgz",
-      "integrity": "sha512-hV7criqbR0pe7EeL3O66UYVg92IR0XsA97+9y+BWTePK9SKmEI5Qd3Zj6uPnGkNzXsBywBQWTvujPl+1Kn9Zjw==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz",
+      "integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
@@ -17141,6 +17264,12 @@
       "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==",
       "dev": true
     },
+    "semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+      "dev": true
+    },
     "send": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
@@ -17985,12 +18114,6 @@
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
-    "strip-indent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
-      "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
-      "dev": true
-    },
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -19070,12 +19193,6 @@
         }
       }
     },
-    "url-join": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
-      "integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=",
-      "dev": true
-    },
     "url-loader": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.1.tgz",
@@ -21160,15 +21277,15 @@
       "dev": true
     },
     "webpack": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.19.1.tgz",
-      "integrity": "sha512-j7Q/5QqZRqIFXJvC0E59ipLV5Hf6lAnS3ezC3I4HMUybwEDikQBVad5d+IpPtmaQPQArvgUZLXIN6lWijHBn4g==",
+      "version": "4.20.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.20.2.tgz",
+      "integrity": "sha512-75WFUMblcWYcocjSLlXCb71QuGyH7egdBZu50FtBGl2Nso8CK3Ej+J7bTZz2FPFq5l6fzCisD9modB7t30ikuA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.6",
-        "@webassemblyjs/helper-module-context": "1.7.6",
-        "@webassemblyjs/wasm-edit": "1.7.6",
-        "@webassemblyjs/wasm-parser": "1.7.6",
+        "@webassemblyjs/ast": "1.7.8",
+        "@webassemblyjs/helper-module-context": "1.7.8",
+        "@webassemblyjs/wasm-edit": "1.7.8",
+        "@webassemblyjs/wasm-parser": "1.7.8",
         "acorn": "^5.6.2",
         "acorn-dynamic-import": "^3.0.0",
         "ajv": "^6.1.0",
@@ -21188,7 +21305,7 @@
         "tapable": "^1.1.0",
         "uglifyjs-webpack-plugin": "^1.2.4",
         "watchpack": "^1.5.0",
-        "webpack-sources": "^1.2.0"
+        "webpack-sources": "^1.3.0"
       },
       "dependencies": {
         "arr-diff": {
@@ -21836,9 +21953,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.8.tgz",
-      "integrity": "sha512-c+tcJtDqnPdxCAzEEZKdIPmg3i5i7cAHe+B+0xFNK0BlCc2HF/unYccbU7xTgfGc5xxhCztCQzFmsqim+KhI+A==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.9.tgz",
+      "integrity": "sha512-fqPkuNalLuc/hRC2QMkVYJkgNmRvxZQo7ykA2e1XRg/tMJm3qY7ZaD6d89/Fqjxtj9bOrn5wZzLD2n84lJdvWg==",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
@@ -21866,7 +21983,7 @@
         "spdy": "^3.4.1",
         "strip-ansi": "^3.0.0",
         "supports-color": "^5.1.0",
-        "webpack-dev-middleware": "3.2.0",
+        "webpack-dev-middleware": "3.4.0",
         "webpack-log": "^2.0.0",
         "yargs": "12.0.2"
       },
@@ -22377,17 +22494,14 @@
           }
         },
         "webpack-dev-middleware": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.2.0.tgz",
-          "integrity": "sha512-YJLMF/96TpKXaEQwaLEo+Z4NDK8aV133ROF6xp9pe3gQoS7sxfpXh4Rv9eC+8vCvWfmDjRQaMSlRPbO+9G6jgA==",
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz",
+          "integrity": "sha512-Q9Iyc0X9dP9bAsYskAVJ/hmIZZQwf/3Sy4xCAZgL5cUkjZmUZLt4l5HpbST/Pdgjn3u6pE7u5OdGd1apgzRujA==",
           "dev": true,
           "requires": {
-            "loud-rejection": "^1.6.0",
             "memory-fs": "~0.4.1",
             "mime": "^2.3.1",
-            "path-is-absolute": "^1.0.0",
             "range-parser": "^1.0.3",
-            "url-join": "^4.0.0",
             "webpack-log": "^2.0.0"
           }
         },
@@ -22433,9 +22547,9 @@
       },
       "dependencies": {
         "ansi-colors": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.0.6.tgz",
-          "integrity": "sha512-rY3B55KSBMMARmGXtzaG5o+kqnCrEF99rngBq5fV+cbwJepVGhDT8eB7UhSDwsJxNsMzSQDLQAyWmgi9pfzssQ==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.1.0.tgz",
+          "integrity": "sha512-hTv1qPdi+sVEk3jYsdjox5nQI0C9HTbjKShbCdYLKb1LOfNbb7wsF4d7OEKIZoxIHx02tSp3m94jcPW2EfMjmA==",
           "dev": true
         }
       }
diff --git a/package.json b/package.json
index d78959c5..0d82a999 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-design-system",
-  "version": "3.2.0",
+  "version": "3.5.0",
   "description": "Vue Design System is an open-source tool for building Design Systems with Vue.js",
   "author": "viljamis <me@viljamis.com>",
   "main": "dist/system/system.js",
@@ -133,15 +133,15 @@
     "@vue/test-utils": "^1.0.0-beta.25",
     "autoprefixer": "^9.1.5",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.2",
+    "babel-loader": "^8.0.4",
     "chalk": "^2.4.1",
     "codemirror": "^5.40.2",
     "compression-webpack-plugin": "^2.0.0",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
-    "eslint": "^5.6.0",
+    "eslint": "^5.6.1",
     "eslint-plugin-compat": "^2.5.1",
     "eslint-plugin-es5": "^1.3.1",
     "eslint-plugin-import": "^2.14.0",
@@ -151,7 +151,7 @@
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.19.0",
-    "husky": "^0.14.3",
+    "husky": "^1.0.1",
     "jest": "^23.6.0",
     "jest-serializer-vue": "^2.0.2",
     "node-notifier": "^5.2.1",
@@ -177,10 +177,10 @@
     "vue-style-loader": "^4.1.2",
     "vue-styleguidist": "^1.8.2",
     "vue-template-compiler": "^2.5.17",
-    "webpack": "^4.19.1",
+    "webpack": "^4.20.2",
     "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.8",
+    "webpack-dev-server": "^3.1.9",
     "webpack-merge": "^4.1.4",
     "webpack-merge-and-include-globally": "^2.0.11"
   },
diff --git a/src/ExampleComponent.vue b/src/ExampleComponent.vue
index 75fc7829..2b6ea845 100644
--- a/src/ExampleComponent.vue
+++ b/src/ExampleComponent.vue
@@ -66,10 +66,10 @@ export default {
  */
 .example {
   @include reset;
-  @include stack-space($space-small);
+  @include stack-space($space-s);
   color: set-text-color($color-rich-black, $color-white);
-  @media #{$media-query-medium} {
-    @include stack-space($space-base);
+  @media #{$media-query-m} {
+    @include stack-space($space-m);
   }
 }
 </style>
diff --git a/src/elements/Button.vue b/src/elements/Button.vue
new file mode 100644
index 00000000..f2a0fa40
--- /dev/null
+++ b/src/elements/Button.vue
@@ -0,0 +1,191 @@
+<template>
+  <component
+    :is="type"
+    :href="href"
+    :type="submit"
+    :class="['button', size, state, variation]">
+      <slot/>
+  </component>
+</template>
+
+<script>
+/**
+ * Buttons are generally used for interface actions. Suitable for all-purpose use.
+ * Defaults to appearance that has white background with grey border. Primary style should be used only once per view for main call-to-action.
+ */
+export default {
+  name: "Button",
+  status: "prototype",
+  release: "1.0.0",
+  props: {
+    /**
+     * The html element used for the button.
+     * `button, a`
+     */
+    type: {
+      type: String,
+      default: "button",
+      validator: value => {
+        return value.match(/(button|a)/)
+      },
+    },
+    /**
+     * The size of the button. Defaults to medium.
+     * `small, medium, large`
+     */
+    size: {
+      type: String,
+      default: "medium",
+      validator: value => {
+        return value.match(/(small|medium|large)/)
+      },
+    },
+    /**
+     * When setting the button’s type to a link, use this option to give a href.
+     */
+    href: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Set the button’s type to “submit”.
+     */
+    submit: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(null|submit)/)
+      },
+    },
+    /**
+     * Manually trigger various states of the button.
+     * `hover, active, focus`
+     */
+    state: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(hover|active|focus)/)
+      },
+    },
+    /**
+     * Style variation to give additional meaning.
+     * `primary, secondary`
+     */
+    variation: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(primary|secondary)/)
+      },
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  @include reset;
+  @include stack-space($space-m);
+  @include inline-space($space-xs);
+  will-change: transform;
+  transition: all 0.2s ease;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: $weight-semi-bold;
+  font-size: $size-m;
+  font-family: $font-text;
+  line-height: $line-height-m;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  box-shadow: inset 0 0 0 2px $color-bleu-de-france;
+  border-radius: $radius-default;
+  background: transparent;
+  color: $color-bleu-de-france;
+  cursor: pointer;
+  &:hover,
+  &.hover {
+    color: $color-white;
+    background: $color-bleu-de-france;
+    transform: translateZ(0) scale(1.03);
+  }
+  &:active,
+  &.active {
+    transition: none;
+    background: $color-bleu-de-france-dark;
+    box-shadow: none;
+    color: $color-white;
+    transform: translateZ(0) scale(1);
+  }
+
+  &:focus,
+  &.focus {
+    background: $color-bleu-de-france-darker;
+    box-shadow: none;
+    color: $color-white;
+    transform: translateZ(0) scale(1);
+    outline: 0;
+  }
+
+  // For icons inside buttons
+  .icon {
+    float: right;
+    margin: -#{$space-xs} -#{$space-xs} -#{$space-s} $space-xs/2;
+    color: $color-bleu-de-france;
+  }
+
+  // Various button sizes
+  &.large {
+    @include inset-squish-space($space-s);
+    font-size: $size-l;
+  }
+  &.medium {
+    @include inset-squish-space($space-s);
+    font-size: $size-m;
+  }
+  &.small {
+    @include inset-squish-space($space-xs);
+    font-size: $size-s;
+  }
+
+  // Primary button
+  &.primary {
+    background: $color-bleu-de-france;
+    color: $color-white;
+    box-shadow: none;
+    &:hover,
+    &.hover {
+      background-color: shade($color-bleu-de-france, 12%);
+    }
+    &:active,
+    &.active {
+      background-color: shade($color-bleu-de-france, 20%);
+      transition: none;
+    }
+    &:focus {
+      outline: 0;
+    }
+    .user-is-tabbing &:focus,
+    &.focus {
+    }
+  }
+}
+</style>
+
+<docs>
+  ```jsx
+  <div>
+    <Button variation="primary" size="large">Primary Button</Button>
+    <Button variation="primary" size="medium">Medium</Button>
+    <Button variation="primary" size="small">Small</Button>
+    <br />
+    <Button>Default Button</Button>
+    <Button state="hover">:hover</Button>
+    <Button state="active">:active</Button>
+    <Button state="focus">:focus</Button>
+  </div>
+  ```
+</docs>
diff --git a/src/elements/Heading.vue b/src/elements/Heading.vue
index 3c877853..6abfd469 100644
--- a/src/elements/Heading.vue
+++ b/src/elements/Heading.vue
@@ -33,52 +33,52 @@ export default {
 <style lang="scss" scoped>
 .heading {
   @include reset;
-  @include stack-space($space-base);
-  font-family: $font-family-heading;
-  line-height: $line-height-heading;
+  @include stack-space($space-m);
+  font-family: $font-heading;
+  line-height: $line-height-xs;
   color: $color-rich-black;
-  @media #{$media-query-large} {
+  @media #{$media-query-l} {
     // This is how you’d use design tokens with media queries
   }
 }
 h1 {
-  letter-spacing: $letter-spacing-x-small;
-  font-size: $font-size-xx-large;
-  font-weight: $font-weight-bold;
-  @media #{$media-query-large} {
-    font-size: $font-size-xxx-large;
+  letter-spacing: $spacing-xs;
+  font-size: $size-xxl;
+  font-weight: $weight-semi-bold;
+  @media #{$media-query-l} {
+    font-size: $size-xxxl;
   }
 }
 h2 {
-  letter-spacing: $letter-spacing-small;
-  font-size: $font-size-xx-large;
-  font-weight: $font-weight-bold;
+  letter-spacing: $spacing-s;
+  font-size: $size-xxl;
+  font-weight: $weight-semi-bold;
 }
 h3 {
-  font-size: $font-size-x-large;
-  font-weight: $font-weight-bold;
+  font-size: $size-xl;
+  font-weight: $weight-semi-bold;
 }
 h4 {
-  font-size: $font-size-large;
-  font-weight: $font-weight-semi-bold;
+  font-size: $size-l;
+  font-weight: $weight-semi-bold;
 }
 h5 {
-  font-size: $font-size-base;
-  font-weight: $font-weight-regular;
+  font-size: $size-m;
+  font-weight: $weight-normal;
 }
 h6 {
-  font-size: $font-size-small;
-  font-weight: $font-weight-regular;
+  font-size: $size-s;
+  font-weight: $weight-normal;
 }
 </style>
 
 <docs>
   ```jsx
   <div>
-    <heading level="h1">The quick brown fox</heading>
-    <heading level="h2">The quick brown fox</heading>
-    <heading level="h3">The quick brown fox</heading>
-    <heading level="h4">The quick brown fox</heading>
+    <Heading>The quick brown fox</Heading>
+    <Heading level="h2">The quick brown fox</Heading>
+    <Heading level="h3">The quick brown fox</Heading>
+    <Heading level="h4">The quick brown fox</Heading>
   </div>
   ```
 </docs>
diff --git a/src/elements/Icon.vue b/src/elements/Icon.vue
new file mode 100644
index 00000000..6bd7fe94
--- /dev/null
+++ b/src/elements/Icon.vue
@@ -0,0 +1,100 @@
+<template>
+  <component
+    :is="type"
+    :aria-label="ariaLabel"
+    :class="['icon', size]"
+    v-html="svg"
+  />
+</template>
+
+<script>
+const req = require.context("@/assets/icons/", true, /^\.\/.*\.svg$/)
+
+/**
+ * Icons are used to visually communicate core parts of the product and
+ * available actions. They can act as wayfinding tools to help users more
+ * easily understand where they are in the product.
+ */
+export default {
+  name: "Icon",
+  status: "review",
+  release: "1.0.0",
+  props: {
+    /**
+     * The name of the icon to display.
+     */
+    name: {
+      required: true,
+      default: "settings",
+    },
+    /**
+     * The fill color of the SVG icon.
+     */
+    fill: {
+      type: String,
+      default: "currentColor",
+    },
+    /**
+     * Descriptive text to be read to screenreaders.
+     */
+    ariaLabel: {
+      type: String,
+      default: "icon",
+    },
+    /**
+     * The html element name used for the icon.
+     */
+    type: {
+      type: String,
+      default: "span",
+    },
+    /**
+     * The size of the icon. Defaults to medium.
+     * `small, medium, large`
+     */
+    size: {
+      type: String,
+      default: "medium",
+      validator: value => {
+        return value.match(/(small|medium|large)/)
+      },
+    },
+  },
+  data() {
+    return {
+      svg: req("./" + this.name + ".svg").replace(/^<svg /, `<svg style="fill: ${this.fill}" `),
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+// We don’t want to use scoped since these styles need to cascade down to SVGs.
+// We also want to be able to style .icon inside buttons etc.
+.icon {
+  @include reset;
+  &.large svg {
+    width: $space-l;
+    height: $space-l;
+  }
+  &.medium svg {
+    width: $space-m;
+    height: $space-m;
+  }
+  &.small svg {
+    width: $space-s;
+    height: $space-s;
+  }
+}
+</style>
+
+<docs>
+  ```jsx
+  <div>
+    <Icon name="ready" aria-label="Component is ready" fill="#7cb518" />
+    <Icon name="review" fill="rgb(255,186,10)" />
+    <Icon name="deprecated" fill="rgb(235,59,36)" />
+    <Icon name="prototype" fill="rgb(37,138,239)" />
+  </div>
+  ```
+</docs>
diff --git a/src/elements/FormInput.vue b/src/elements/Input.vue
similarity index 69%
rename from src/elements/FormInput.vue
rename to src/elements/Input.vue
index 1082da1e..eb37549b 100644
--- a/src/elements/FormInput.vue
+++ b/src/elements/Input.vue
@@ -1,18 +1,16 @@
 <template>
-  <component :is="wrapper" class="input">
-    <label v-if="label">{{ label }}</label>
+  <component :is="wrapper" :class="['input', {'input-expand': width === 'expand'}]">
+    <label :for="id" v-if="label">{{ label }}</label>
     <input
       :id="id"
       :disabled="disabled"
       :type="type"
-      :hover="hover"
-      :focus="focus"
       :value="value"
+      :class="state"
       :placeholder="placeholder"
-      :class="['input', {'input-expand': width === 'expand'}]"
       @input="onInput($event.target.value)"
       @focus="onFocus($event.target.value)"
-      />
+    />
   </component>
 </template>
 
@@ -20,10 +18,10 @@
 /**
  * Form Inputs are used to allow users to provide text input when the expected
  * input is short. Form Input has a range of options and supports several text
- * formats including numbers. For longer input, use the `FormTextarea` element.
+ * formats including numbers. For longer input, use the form `Textarea` element.
  */
 export default {
-  name: "FormInput",
+  name: "Input",
   status: "ready",
   release: "1.0.0",
   props: {
@@ -97,20 +95,15 @@ export default {
       default: false,
     },
     /**
-     * Manually trigger input field’s hover state.
-     * `true, false`
-     */
-    hover: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Manually trigger input field’s focus state.
-     * `true, false`
+     * Manually trigger various states of the input.
+     * `hover, active, focus`
      */
-    focus: {
-      type: Boolean,
-      default: false,
+    state: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(hover|active|focus)/)
+      },
     },
   },
   methods: {
@@ -129,31 +122,34 @@ export default {
 $color-placeholder: tint($color-silver, 50%);
 
 .input {
-  @include stack-space($space-small);
-  font-weight: $font-weight-regular;
-  font-family: $font-family-text;
-  font-size: $font-size-base;
-  line-height: $line-height-heading;
+  @include stack-space($space-s);
+  font-weight: $weight-normal;
+  font-family: $font-text;
+  font-size: $size-m;
+  line-height: $line-height-xs;
   width: auto;
-  &.input-expand {
+  &-expand {
     width: 100%;
   }
   label {
+    cursor: pointer;
     display: block;
-    font-size: $font-size-small;
+    font-size: $size-s;
     color: tint($color-rich-black, 20%);
-    @include stack-space($space-x-small);
+    @include stack-space($space-xs);
   }
   input {
     @include reset;
-    @include inset-squish-space($space-small);
+    @include inset-squish-space($space-s);
     transition: all 0.2s ease;
     -webkit-appearance: none;
     appearance: none;
-    font-family: $font-family-text;
+    font-size: $size-m;
+    font-family: $font-text;
     background: $color-white;
-    border-radius: $border-radius-default;
+    border-radius: $radius-default;
     color: set-text-color($color-rich-black, $color-white);
+    width: 100%;
     margin: 0;
     border: 0;
     box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 80%);
@@ -170,20 +166,23 @@ $color-placeholder: tint($color-silver, 50%);
       opacity: 1;
     }
     &:hover,
-    &[hover] {
+    &.hover {
       box-shadow: 0 1px 5px 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 60%);
     }
     &:focus,
-    &[focus] {
+    &.focus {
       transition: box-shadow 0.2s ease;
       box-shadow: inset 0 0 0 1px $color-bleu-de-france, 0 0 0 1px $color-bleu-de-france;
       outline: 0;
     }
     &[disabled] {
-      box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 80%);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      box-shadow: 0 0 0 1px tint($color-rich-black, 80%);
       background: lighten($color-placeholder, 42%);
+      color: tint($color-placeholder, 20%);
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: 0.7;
     }
   }
 }
@@ -193,10 +192,10 @@ $color-placeholder: tint($color-silver, 50%);
 <docs>
   ```jsx
   <div>
-    <form-input label="Input" placeholder="Write your text" />
-    <form-input label=":hover" hover placeholder="Write your text" />
-    <form-input label=":focus" focus placeholder="Write your text" />
-    <form-input label="[disabled]" disabled placeholder="Disabled input" />
+    <Input label="Default input" placeholder="Write your text" id="input-1" />
+    <Input label=":hover" state="hover" placeholder="Write your text" id="input-2" />
+    <Input label=":focus" state="focus" placeholder="Write your text" id="input-3" />
+    <Input label="[disabled]" disabled value="Write your text" id="input-4" />
   </div>
   ```
 </docs>
diff --git a/src/elements/Paragraph.vue b/src/elements/Paragraph.vue
new file mode 100644
index 00000000..0970f275
--- /dev/null
+++ b/src/elements/Paragraph.vue
@@ -0,0 +1,83 @@
+<template>
+  <component :is="type" :class="['paragraph', variation]">
+    <slot/>
+  </component>
+</template>
+
+<script>
+export default {
+  name: "Paragraph",
+  status: "prototype",
+  release: "1.0.0",
+  props: {
+    /**
+     * The html element used for the text.
+     * `p, span`
+     */
+    type: {
+      type: String,
+      default: "p",
+      validator: value => {
+        return value.match(/(p|span)/)
+      },
+    },
+    /**
+     * Style variation to give additional meaning.
+     * `intro, small, medium, large`
+     */
+    variation: {
+      type: String,
+      default: "medium",
+      validator: value => {
+        return value.match(/(medium|intro|large|small)/)
+      },
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.paragraph {
+  @include reset;
+  @include stack-space($space-m);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: color 0.3s ease;
+  font-family: $font-text;
+  font-weight: $weight-normal;
+  line-height: $line-height-m;
+  color: shade($color-silver, 70%);
+  a {
+    color: $color-bleu-de-france;
+    text-decoration: none;
+    &:hover {
+      color: darken($color-bleu-de-france, 20%);
+    }
+  }
+  &.intro {
+    @include stack-space($space-m);
+    font-family: $font-heading;
+    font-weight: $weight-light;
+    font-size: $size-l;
+  }
+  &.large {
+    font-size: $size-l;
+  }
+  &.small {
+    font-size: $size-s;
+  }
+}
+</style>
+
+<docs>
+  ```jsx
+  <div>
+    <Paragraph>
+      Design isn’t just about the look and feel. Design is <a href="https://viljamis.com/2017/design-tools-processes/">how it works</a>, and we believe the best way to focus on this is to work as close to the end result as possible. That’s <a href="https://viljamisdesign.com/process/">why we start</a> all our projects with simple sketches, and quickly transition into designing working prototypes in code. This is done by the same designers who started the work, which ensures that our original design intent is carried all the way to the end product.
+    </Paragraph>
+    <Paragraph>
+      Our core belief is that the products we design should work across anything that can access the web. Whether it’s a laptop, a smartphone, a watch, or even a browser integrated into a car’s dashboard.
+    </Paragraph>
+  </div>
+  ```
+</docs>
diff --git a/src/elements/SvgIcon.vue b/src/elements/SvgIcon.vue
deleted file mode 100644
index 452b60ca..00000000
--- a/src/elements/SvgIcon.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <component :is="type" :aria-label="ariaLabel" class="svg-icon" v-html="svg" />
-</template>
-
-<script>
-const req = require.context("@/assets/icons/", true, /^\.\/.*\.svg$/)
-
-/**
- * Icons are used to visually communicate core parts of the product and
- * available actions. They can act as wayfinding tools to help users more
- * easily understand where they are in the product.
- */
-export default {
-  name: "SvgIcon",
-  status: "review",
-  release: "1.0.0",
-  props: {
-    /**
-     * The name of the icon to display.
-     */
-    name: {
-      required: true,
-      default: "settings",
-    },
-    /**
-     * The fill color of the SVG icon.
-     */
-    fill: {
-      type: String,
-      default: "#00264c",
-    },
-    /**
-     * Descriptive text to be read to screenreaders.
-     */
-    ariaLabel: {
-      type: String,
-      default: "icon",
-    },
-    /**
-     * The html element name used for the icon.
-     */
-    type: {
-      type: String,
-      default: "span",
-    },
-    /**
-     * The size of the icon.
-     */
-    size: {
-      type: String,
-      default: "16px",
-    },
-  },
-  data() {
-    return {
-      svg: req("./" + this.name + ".svg").replace(
-        /^<svg /,
-        `<svg style="width: ${this.size}; height: ${this.size}; fill: ${this.fill}" `
-      ),
-    }
-  },
-}
-</script>
-
-<docs>
-  ```jsx
-  <div>
-    <svg-icon name="ready" aria-label="Component is ready" fill="#7cb518" size="24px" />
-    <svg-icon name="review" fill="rgb(255, 186, 10)" size="24px" />
-    <svg-icon name="deprecated" fill="rgb(235, 59, 36)" size="24px" />
-    <svg-icon name="prototype" fill="rgb(37, 138, 239)" size="24px" />
-  </div>
-  ```
-</docs>
diff --git a/src/elements/TextStyle.vue b/src/elements/TextStyle.vue
index 0ce12b40..e815baa7 100644
--- a/src/elements/TextStyle.vue
+++ b/src/elements/TextStyle.vue
@@ -16,11 +16,15 @@ export default {
   release: "1.0.0",
   props: {
     /**
-     * The html element name used for the text
+     * The html element used for the text style.
+     * `span, em, i, strong`
      */
     type: {
       type: String,
-      default: "p",
+      default: "span",
+      validator: value => {
+        return value.match(/(span|em|i|strong)/)
+      },
     },
     /**
      * Style variation to give additional meaning.
@@ -43,13 +47,13 @@ $positive-text: #7cb518;
 
 .text-style {
   @include reset;
-  @include stack-space($space-small);
+  @include stack-space($space-s);
   color: $color-rich-black;
-  font-family: $font-family-text;
-  font-weight: $font-weight-regular;
-  font-size: $font-size-base;
-  line-height: $line-height-base;
-  @media #{$media-query-large} {
+  font-family: $font-text;
+  font-weight: $weight-normal;
+  font-size: $size-m;
+  line-height: $line-height-m;
+  @media #{$media-query-l} {
     // This is how you’d use design tokens with media queries
   }
   &.disabled {
@@ -57,7 +61,7 @@ $positive-text: #7cb518;
     text-decoration: line-through;
   }
   &.strong {
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
   }
   &.positive {
     color: shade($positive-text, 20%);
@@ -72,9 +76,11 @@ $positive-text: #7cb518;
 <docs>
   ```jsx
   <div>
-    <text-style variation="default">Design isn’t just about the look and feel. Design is how it works.</text-style>
-    <text-style variation="disabled">Design isn’t just about the look and feel.</text-style>
-    <text-style variation="strong">Design isn’t just about</text-style>
+    <TextStyle variation="default">Design isn’t just about the look and feel.</TextStyle>
+    <br />
+    <TextStyle variation="disabled">Design isn’t just about</TextStyle>
+    <br />
+    <TextStyle variation="strong">Design isn’t</TextStyle>
   </div>
   ```
 </docs>
diff --git a/src/elements/Textarea.vue b/src/elements/Textarea.vue
new file mode 100644
index 00000000..3aa780f1
--- /dev/null
+++ b/src/elements/Textarea.vue
@@ -0,0 +1,189 @@
+<template>
+  <component :is="wrapper" :class="['textarea', {'textarea-expand': width === 'expand'}]">
+    <label :for="id" v-if="label">{{ label }}</label>
+    <textarea
+      :id="id"
+      :disabled="disabled"
+      :class="state"
+      :placeholder="placeholder"
+      @input="onInput($event.target.value)"
+      @focus="onFocus($event.target.value)"
+      v-model="value"
+    />
+  </component>
+</template>
+
+<script>
+/**
+ * Textareas are used to allow users to provide text input when the expected
+ * input is long. Textarea has a range of options. For shorter input,
+ * use the `Input` element.
+ */
+export default {
+  name: "Textarea",
+  status: "ready",
+  release: "1.0.0",
+  props: {
+    /**
+     * Text value of the form textarea.
+     */
+    value: {
+      type: String,
+      default: null,
+    },
+    /**
+     * The placeholder value for the form textarea.
+     */
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    /**
+     * The label of the form textarea.
+     */
+    label: {
+      type: String,
+      default: null,
+    },
+    /**
+     * The html element name used for the wrapper.
+     * `div, section`
+     */
+    wrapper: {
+      type: String,
+      default: "div",
+      validator: value => {
+        return value.match(/(div|section)/)
+      },
+    },
+    /**
+     * Unique identifier of the form textarea.
+     */
+    id: {
+      type: String,
+      default: null,
+    },
+    /**
+     * The width of the form textarea.
+     * `auto, expand`
+     */
+    width: {
+      type: String,
+      default: "expand",
+      validator: value => {
+        return value.match(/(auto|expand)/)
+      },
+    },
+    /**
+     * Whether the form textarea is disabled or not.
+     * `true, false`
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Manually trigger various states of the textarea.
+     * `hover, active, focus`
+     */
+    state: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(hover|active|focus)/)
+      },
+    },
+  },
+  methods: {
+    onInput(value) {
+      this.$emit("change", value)
+    },
+    onFocus(value) {
+      this.$emit("focus", value)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// Design Tokens with local scope
+$color-placeholder: tint($color-silver, 50%);
+
+.textarea {
+  @include stack-space($space-s);
+  font-weight: $weight-normal;
+  font-family: $font-text;
+  font-size: $size-m;
+  line-height: $line-height-xs;
+  width: auto;
+  &-expand {
+    width: 100%;
+  }
+  label {
+    cursor: pointer;
+    display: block;
+    font-size: $size-s;
+    color: tint($color-rich-black, 20%);
+    @include stack-space($space-xs);
+  }
+  textarea {
+    @include reset;
+    @include inset-squish-space($space-s);
+    transition: all 0.2s ease;
+    -webkit-appearance: none;
+    appearance: none;
+    resize: vertical;
+    min-height: $space-xxl;
+    font-size: $size-m;
+    font-family: $font-text;
+    background: $color-white;
+    border-radius: $radius-default;
+    color: set-text-color($color-rich-black, $color-white);
+    width: 100%;
+    margin: 0;
+    border: 0;
+    box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 80%);
+    &::-webkit-input-placeholder {
+      -webkit-font-smoothing: antialiased;
+      color: $color-placeholder;
+    }
+    &:-ms-input-placeholder {
+      color: $color-placeholder;
+    }
+    &::-moz-placeholder {
+      color: $color-placeholder;
+      -moz-osx-font-smoothing: grayscale;
+      opacity: 1;
+    }
+    &:hover,
+    &.hover {
+      box-shadow: 0 1px 5px 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 60%);
+    }
+    &:focus,
+    &.focus {
+      transition: box-shadow 0.2s ease;
+      box-shadow: inset 0 0 0 1px $color-bleu-de-france, 0 0 0 1px $color-bleu-de-france;
+      outline: 0;
+    }
+    &[disabled] {
+      -webkit-font-smoothing: antialiased;
+      box-shadow: 0 0 0 1px tint($color-rich-black, 80%);
+      background: lighten($color-placeholder, 42%);
+      color: tint($color-placeholder, 20%);
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+  }
+}
+</style>
+
+
+<docs>
+  ```jsx
+  <div>
+    <Textarea label="Default textarea" placeholder="Write your text" id="textarea-1" />
+    <Textarea label=":focus" state="focus" placeholder="Write your text" id="textarea-2" />
+    <Textarea label="[disabled]" disabled value="Write your text" id="textarea-3" />
+  </div>
+  ```
+</docs>
diff --git a/src/elements/Wrapper.vue b/src/elements/Wrapper.vue
index 5c84ed48..798867ae 100644
--- a/src/elements/Wrapper.vue
+++ b/src/elements/Wrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <component :is="type" class="wrapper">
-    <slot/>
+    <slot />
   </component>
 </template>
 
@@ -28,14 +28,14 @@ export default {
 <style lang="scss" scoped>
 .wrapper {
   @include reset;
-  @include inset-space($space-large);
-  font-family: $font-family-text;
-  font-weight: $font-weight-regular;
-  font-size: $font-size-base;
-  line-height: $line-height-base;
+  @include inset-space($space-l);
+  font-family: $font-text;
+  font-weight: $weight-normal;
+  font-size: $size-m;
+  line-height: $line-height-m;
   width: 100%;
-  @media #{$media-query-large} {
-    @include inset-space($space-x-large);
+  @media #{$media-query-l} {
+    @include inset-space($space-xl);
   }
 }
 </style>
@@ -43,6 +43,6 @@ export default {
 
 <docs>
   ```jsx
-  <wrapper type="div">Wrapper can be used to wrap any components together.</wrapper>
+  <Wrapper>Wrapper can be used to wrap any components together.</Wrapper>
   ```
 </docs>
diff --git a/src/patterns/NavBar.vue b/src/patterns/NavBar.vue
index 93ac4f37..d812d5a2 100644
--- a/src/patterns/NavBar.vue
+++ b/src/patterns/NavBar.vue
@@ -63,20 +63,20 @@ $color-nav-link: $color-bleu-de-france;
 $color-nav-link-active: $color-bleu-de-france;
 
 .nav {
-  @include stack-space($space-base);
-  font-family: $font-family-text;
-  font-size: $font-size-small;
-  line-height: $line-height-base;
+  @include stack-space($space-m);
+  font-family: $font-text;
+  font-size: $size-s;
+  line-height: $line-height-m;
   color: $color-white;
   text-align: center;
   width: 100%;
-  @media #{$media-query-large} {
+  @media #{$media-query-l} {
     // This is how you’d use design tokens with media queries
   }
   a {
     color: $color-nav-link;
-    padding: $space-x-small 0;
-    margin: 0 $space-x-small;
+    padding: $space-xs 0;
+    margin: 0 $space-xs;
     text-decoration: none;
     display: inline-block;
     &:hover {
@@ -84,7 +84,7 @@ $color-nav-link-active: $color-bleu-de-france;
     }
     &.active {
       border-bottom: 2px solid $color-nav-link;
-      font-weight: $font-weight-bold;
+      font-weight: $weight-bold;
       color: $color-nav-link;
     }
   }
@@ -93,7 +93,7 @@ $color-nav-link-active: $color-bleu-de-france;
 
 <docs>
   ```jsx
-  <nav-bar active="Dashboard" :navItems="[
+  <NavBar active="Dashboard" :navItems="[
     {name: 'Dashboard', component: 'Dashboard', href: '/example/'},
     {name: 'Posts', component: 'Posts', href: '/example/'},
     {name: 'Users', component: 'Users', href: '/example/'},
diff --git a/src/styles/_functions.scss b/src/styles/_functions.scss
index 5f10d144..1f4073fa 100644
--- a/src/styles/_functions.scss
+++ b/src/styles/_functions.scss
@@ -77,7 +77,7 @@
   @if $unit == "rem" {
     @return $value;
   } @else if $unit == "px" {
-    @return $value / $font-size-base * 1rem;
+    @return $value / $size-m * 1rem;
   } @else if $unit == "em" {
     @return $unit / 1em * 1rem;
   } @else {
@@ -94,9 +94,9 @@
   @if $unit == "px" {
     @return $value;
   } @else if $unit == "em" {
-    @return ($value / 1em) * $font-size-base;
+    @return ($value / 1em) * $size-m;
   } @else if $unit == "rem" {
-    @return ($value / 1rem) * $font-size-base;
+    @return ($value / 1rem) * $size-m;
   } @else {
     @error "Value must be in rem, em, or px.";
   }
diff --git a/src/styles/_spacing.scss b/src/styles/_spacing.scss
index 7f705ae9..d04460b0 100644
--- a/src/styles/_spacing.scss
+++ b/src/styles/_spacing.scss
@@ -1,7 +1,7 @@
 /* VUE DESIGN SYSTEM SPACING HELPERS
 --------------------------------------------- */
 
-$spacing-ratio: 1.618;
+$spacing-ratio: 1.7;
 
 /*
   INSET-SPACE: For interface containers.
@@ -21,7 +21,7 @@ $spacing-ratio: 1.618;
 //
 // @param  {Number} inset-squish-space to set
 @mixin inset-squish-space($value) {
-  padding: round($value / $spacing-ratio) $value;
+  padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
 }
 
 // Create stack-space
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 98643536..7e320737 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -3,8 +3,7 @@
  * It is recommended to only include variables,
  * mixins, etc. in this file, to prevent duplicated
  * CSS in your final, compiled files.
- *
---------------------------------------------- */
+ */
 
 @import "../styles/functions";
 @import "../styles/mixins";
diff --git a/src/templates/Index.vue b/src/templates/Index.vue
index 99c33e47..4ca2a785 100644
--- a/src/templates/Index.vue
+++ b/src/templates/Index.vue
@@ -1,13 +1,13 @@
 <template>
   <component :is="type" class="index">
-    <nav-bar active="Index" :navItems="[
+    <NavBar active="Index" :navItems="[
       {name: 'Template', component: 'Index', href: '/#/'},
-      {name: 'Living Docs', href: 'http://localhost:6060/'}
+      {name: 'Documentation', href: 'http://localhost:6060/'}
     ]"/>
-    <wrapper>
-      <heading level="h1">Vue Design System</heading>
-      <text-style><a href="https://vueds.com">Vue Design System</a> is an open-source tool for building design systems with Vue.js. It provides you and your team a set of organized tools, patterns &amp; practices. It works as the foundation for your application development.</text-style>
-    </wrapper>
+    <Wrapper>
+      <Heading>Vue Design System</Heading>
+      <Paragraph><a href="https://vueds.com">Vue Design System</a> is an open-source tool for building design systems with Vue.js. It provides you and your team a set of organized tools, patterns &amp; practices. It works as the foundation for your application development.</Paragraph>
+    </Wrapper>
   </component>
 </template>
 
@@ -47,8 +47,8 @@ $color-template-link: $color-bleu-de-france;
 
 .index {
   @include reset;
-  @include inset-space($space-base);
-  min-height: $space-xx-large * 4;
+  @include inset-space($space-m);
+  min-height: $space-xxl * 4;
   background: $color-template-background;
   background: linear-gradient(0deg, $color-template-background-bottom, $color-template-background-top 100%);
   text-align: center;
@@ -56,27 +56,29 @@ $color-template-link: $color-bleu-de-france;
   float: left;
   height: 100%;
   width: 100%;
-  @media #{$media-query-large} {
+  @media #{$media-query-l} {
     // This is how you’d use design tokens with media queries
   }
   .heading {
     color: $color-template-text;
   }
-  .text-style {
+  .paragraph {
     color: $color-template-text;
   }
   .text-link {
     color: $color-template-link;
   }
   .wrapper {
-    max-width: $space-xx-large * 4.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    max-width: $space-xxl * 4.5;
     transform: translateX(-50%) translateY(-50%);
     position: absolute;
     left: 50%;
     top: 50%;
   }
   a {
-    font-family: $font-family-text;
+    font-family: $font-text;
     color: $color-bleu-de-france;
     text-decoration: underline;
   }
@@ -85,6 +87,6 @@ $color-template-link: $color-bleu-de-france;
 
 <docs>
   ```jsx
-  <index />
+  <Index />
   ```
 </docs>
diff --git a/src/templates/NotFound.vue b/src/templates/NotFound.vue
index 3e8fd5e7..bfee2082 100644
--- a/src/templates/NotFound.vue
+++ b/src/templates/NotFound.vue
@@ -1,13 +1,13 @@
 <template>
   <component :is="type" class="not-found">
-    <nav-bar active="NotFound" :navItems="[
+    <NavBar active="NotFound" :navItems="[
       {name: 'Template', component: 'Index', href: '/#/'},
-      {name: 'Living Docs', href: 'http://localhost:6060/'}
+      {name: 'Documentation', href: 'http://localhost:6060/'}
     ]"/>
-    <wrapper>
-      <heading level="h1">404 Error</heading>
-      <text-style>Couldn’t find a component that would match the URL you entered. Double check configuration in router/index.js.</text-style>
-    </wrapper>
+    <Wrapper>
+      <Heading>404 Error</Heading>
+      <Paragraph>Couldn’t find a component that would match the URL you entered. Double check configuration in router/index.js.</Paragraph>
+    </Wrapper>
   </component>
 </template>
 
@@ -45,8 +45,8 @@ $color-template-link: $color-bleu-de-france;
 
 .not-found {
   @include reset;
-  @include inset-space($space-base);
-  min-height: $space-xx-large * 4;
+  @include inset-space($space-m);
+  min-height: $space-xxl * 4;
   background: $color-template-background;
   background: linear-gradient(0deg, $color-template-background-bottom, $color-template-background-top 100%);
   text-align: center;
@@ -57,14 +57,16 @@ $color-template-link: $color-bleu-de-france;
   .heading {
     color: $color-template-text;
   }
-  .text-style {
+  .paragraph {
     color: $color-template-text;
   }
   .text-link {
     color: $color-template-link;
   }
   .wrapper {
-    max-width: $space-xx-large * 4.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    max-width: $space-xxl * 4.5;
     transform: translateX(-50%) translateY(-50%);
     position: absolute;
     left: 50%;
@@ -75,6 +77,6 @@ $color-template-link: $color-bleu-de-france;
 
 <docs>
   ```jsx
-  <not-found />
+  <NotFound />
   ```
 </docs>
diff --git a/src/tokens/border-radius.yml b/src/tokens/border-radius.yml
index dde40b68..40644a29 100644
--- a/src/tokens/border-radius.yml
+++ b/src/tokens/border-radius.yml
@@ -4,9 +4,9 @@
 #
 
 props:
-  border_radius_default:
+  radius_default:
     value: "3px"
-  border_radius_circle:
+  radius_circle:
     value: "50%"
 global:
   type: number
diff --git a/src/tokens/box-shadow.yml b/src/tokens/box-shadow.yml
index 9c1f89dd..9a6b01f2 100644
--- a/src/tokens/box-shadow.yml
+++ b/src/tokens/box-shadow.yml
@@ -4,10 +4,8 @@
 #
 
 props:
-  box_shadow_small:
+  shadow_s:
     value: "0 0 0 1px rgba(92,106,196,.1)"
-  box_shadow_small_inset:
-    value: "inset 0 0 0 1px rgba(0,0,0,.05)"
 global:
   type: ...
   category: box-shadow
diff --git a/src/tokens/font-size.yml b/src/tokens/font-size.yml
index 75360d5e..bc11cfed 100644
--- a/src/tokens/font-size.yml
+++ b/src/tokens/font-size.yml
@@ -4,19 +4,19 @@
 #
 
 props:
-  font_size_xxx_large:
+  size_xxxl:
     value: "64px"
-  font_size_xx_large:
+  size_xxl:
     value: "48px"
-  font_size_x_large:
+  size_xl:
     value: "36px"
-  font_size_large:
+  size_l:
     value: "24px"
-  font_size_base:
+  size_m:
     value: "16px"
-  font_size_small:
+  size_s:
     value: "13px"
-  font_size_x_small:
+  size_xs:
     value: "11px"
 global:
   type: number
diff --git a/src/tokens/font.yml b/src/tokens/font.yml
index b52679bf..8f9e05a4 100644
--- a/src/tokens/font.yml
+++ b/src/tokens/font.yml
@@ -4,17 +4,17 @@
 #
 
 props:
-  font_family_heading:
+  font_heading:
     value: "'Fira Sans', Helvetica, Arial, sans-serif"
-  font_family_text:
+  font_text:
     value: "'Fira Sans', Helvetica, Arial, sans-serif"
-  font_weight_bold:
+  weight_bold:
     value: "700"
-  font_weight_semi_bold:
+  weight_semi_bold:
     value: "600"
-  font_weight_regular:
+  weight_normal:
     value: "400"
-  font_weight_light:
+  weight_light:
     value: "300"
 global:
   type: ...
diff --git a/src/tokens/letter-spacing.yml b/src/tokens/letter-spacing.yml
index 7154583e..48a282f6 100644
--- a/src/tokens/letter-spacing.yml
+++ b/src/tokens/letter-spacing.yml
@@ -4,15 +4,15 @@
 #
 
 props:
-  letter_spacing_x_large:
+  spacing_xl:
     value: "2px"
-  letter_spacing_large:
+  spacing_l:
     value: "1px"
-  letter_spacing_base:
+  spacing_m:
     value: "0"
-  letter_spacing_small:
+  spacing_s:
     value: "-0.5px"
-  letter_spacing_x_small:
+  spacing_xs:
     value: "-1px"
 global:
   type: number
diff --git a/src/tokens/line-height.yml b/src/tokens/line-height.yml
index e3835f84..742ddec6 100644
--- a/src/tokens/line-height.yml
+++ b/src/tokens/line-height.yml
@@ -4,11 +4,11 @@
 #
 
 props:
-  line_height_base:
+  line_height_m:
     value: "1.6"
-  line_height_small:
+  line_height_s:
     value: "1.3"
-  line_height_heading:
+  line_height_xs:
     value: "1"
 global:
   type: number
diff --git a/src/tokens/media-query.yml b/src/tokens/media-query.yml
index 326a7060..27cbd3a9 100644
--- a/src/tokens/media-query.yml
+++ b/src/tokens/media-query.yml
@@ -4,9 +4,9 @@
 #
 
 props:
-  media_query_medium:
+  media_query_m:
     value: "(min-width: 768px)"
-  media_query_large:
+  media_query_l:
     value: "(min-width: 1024px)"
 global:
   type: ...
diff --git a/src/tokens/spacing.yml b/src/tokens/spacing.yml
index 0b9c46aa..ee3cd1a9 100644
--- a/src/tokens/spacing.yml
+++ b/src/tokens/spacing.yml
@@ -4,19 +4,19 @@
 #
 
 props:
-  space_xx_large:
+  space_xxl:
     value: "128px"
-  space_x_large:
+  space_xl:
     value: "64px"
-  space_large:
+  space_l:
     value: "48px"
-  space_base:
+  space_m:
     value: "24px"
-  space_small:
+  space_s:
     value: "16px"
-  space_x_small:
+  space_xs:
     value: "8px"
-  space_xx_small:
+  space_xxs:
     value: "4px"
 global:
   type: number