diff --git a/.prettierrc b/.prettierrc
index a59be13..0776017 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
   "singleQuote": false,
   "trailingComma": "es5",
   "bracketSpacing": true,
diff --git a/build/check-versions.js b/build/check-versions.js
index eb9dabc..acc84fa 100644
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -32,7 +32,11 @@ module.exports = function() {
     const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(
-        mod.name + ": " + chalk.red(mod.currentVersion) + " should be " + chalk.green(mod.versionRequirement)
+        mod.name +
+          ": " +
+          chalk.red(mod.currentVersion) +
+          " should be " +
+          chalk.green(mod.versionRequirement)
       )
     }
   }
diff --git a/build/utils.js b/build/utils.js
index a26c837..af1c44f 100644
--- a/build/utils.js
+++ b/build/utils.js
@@ -6,7 +6,9 @@ const packageConfig = require("../package.json")
 
 exports.assetsPath = function(_path) {
   const assetsSubDirectory =
-    process.env.NODE_ENV === "production" ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
+    process.env.NODE_ENV === "production"
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory
   return path.posix.join(assetsSubDirectory, _path)
 }
 
@@ -80,7 +82,9 @@ exports.cssLoaders = function(options) {
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)).concat(sassResourcesConfig),
+    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)).concat(
+      sassResourcesConfig
+    ),
     scss: generateLoaders("sass", sassOptions).concat(sassResourcesConfig),
   }
 }
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 2fb42c2..9064254 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -18,7 +18,10 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: "[name].js",
-    publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    publicPath:
+      process.env.NODE_ENV === "production"
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath,
   },
   resolve: {
     extensions: [".js", ".vue", ".json"],
@@ -45,7 +48,12 @@ module.exports = {
       {
         test: /\.js$/,
         loader: "babel-loader",
-        include: [resolve("docs"), resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")],
+        include: [
+          resolve("docs"),
+          resolve("src"),
+          resolve("test"),
+          resolve("node_modules/webpack-dev-server/client"),
+        ],
       },
       {
         test: /\.(png|jpe?g|gif)(\?.*)?$/,
diff --git a/config/docs.config.js b/config/docs.config.js
index dabec36..404c95d 100644
--- a/config/docs.config.js
+++ b/config/docs.config.js
@@ -39,7 +39,10 @@ module.exports = {
   /**
    * We’re defining below JS and SCSS requires for the documentation.
    */
-  require: [path.join(__dirname, "../docs/docs.helper.js"), path.join(__dirname, "../docs/docs.styles.scss")],
+  require: [
+    path.join(__dirname, "../docs/docs.helper.js"),
+    path.join(__dirname, "../docs/docs.styles.scss"),
+  ],
   /**
    * Enabling the following option splits sections into separate views.
    */
diff --git a/docs/components/status/Components.vue b/docs/components/status/Components.vue
index 14d5c23..bcfa5ab 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>
-        <Icon name="ready" fill="#7cb518" size="small" />
+        <Icon name="ready" fill="#7cb518" size="small"/>
         <p>Ready</p>
       </li>
       <li>
-        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small" />
+        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small"/>
         <p>Under review</p>
       </li>
       <li>
-        <Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small" />
-      <p>Deprecated</p>
+        <Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small"/>
+        <p>Deprecated</p>
       </li>
       <li>
-        <Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
+        <Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small"/>
         <p>Prototype</p>
       </li>
       <li>
@@ -36,22 +36,13 @@
       <tbody>
         <tr v-for="(component, index) in components" :key="index" class="component">
           <td v-if="component.name">
-            <code class="name">
-              {{component.name}}
-            </code>
+            <code class="name">{{component.name}}</code>
           </td>
           <td v-else>N/A</td>
-          <td v-if="component.release">
-            {{component.release}}
-          </td>
+          <td v-if="component.release">{{component.release}}</td>
           <td v-else>N/A</td>
           <td v-if="component.status">
-            <Icon
-              v-if="component.status === 'ready'"
-              name="ready"
-              fill="#7cb518"
-              size="small"
-            />
+            <Icon v-if="component.status === 'ready'" name="ready" fill="#7cb518" size="small"/>
             <Icon
               v-if="component.status === 'under-review' || component.status === 'review'"
               name="review"
diff --git a/docs/components/tokens/All.vue b/docs/components/tokens/All.vue
index 0c05870..12c3479 100644
--- a/docs/components/tokens/All.vue
+++ b/docs/components/tokens/All.vue
@@ -15,12 +15,22 @@
           </td>
           <td v-else>N/A</td>
           <td v-if="token.value">
-            <div v-if="token.type === 'color'" class="example color" :style="{ backgroundColor: token.value }" />
-            <div v-if="token.category === 'border-radius'" class="example border-radius" :style="{ borderRadius: token.value }" />
-            <div v-if="token.category === 'box-shadow'" class="example box-shadow" :style="{ boxShadow: token.value }" />
-            <code class="type">
-              {{token.value}}
-            </code>
+            <div
+              v-if="token.type === 'color'"
+              class="example color"
+              :style="{ backgroundColor: token.value }"
+            />
+            <div
+              v-if="token.category === 'border-radius'"
+              class="example border-radius"
+              :style="{ borderRadius: token.value }"
+            />
+            <div
+              v-if="token.category === 'box-shadow'"
+              class="example box-shadow"
+              :style="{ boxShadow: token.value }"
+            />
+            <code class="type">{{token.value}}</code>
           </td>
           <td v-else>N/A</td>
           <td v-if="token.category">{{token.category}}</td>
diff --git a/docs/components/tokens/Color.vue b/docs/components/tokens/Color.vue
index 9687e44..70dfc4b 100644
--- a/docs/components/tokens/Color.vue
+++ b/docs/components/tokens/Color.vue
@@ -5,11 +5,18 @@
       :key="index"
       class="color"
       :class="prop.category"
-      v-if="prop.type === 'color'">
-        <div class="swatch" :style="{ backgroundColor: prop.value }" />
-        <h3>{{prop.name.replace(/_/g, " ").replace(/color/g, "")}}</h3>
-        <span><em>RGB: </em>{{prop.value}}</span>
-        <span><em>SCSS: </em>${{prop.name.replace(/_/g, "-")}}</span>
+      v-if="prop.type === 'color'"
+    >
+      <div class="swatch" :style="{ backgroundColor: prop.value }"/>
+      <h3>{{prop.name.replace(/_/g, " ").replace(/color/g, "")}}</h3>
+      <span>
+        <em>RGB:</em>
+        {{prop.value}}
+      </span>
+      <span>
+        <em>SCSS:</em>
+        ${{prop.name.replace(/_/g, "-")}}
+      </span>
     </div>
   </div>
 </template>
@@ -59,19 +66,29 @@ export default {
     align-content: stretch;
     justify-content: left;
     grid-template-columns:
-      calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m})
+      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-m}) calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(
-          25% - #{$space-m}
-        );
+      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-m}) calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m});
+      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-m}) calc(50% - #{$space-m});
+      grid-template-columns:
+        calc(50% - #{$space-m})
+        calc(50% - #{$space-m});
     }
     @media (max-width: 400px) {
       grid-template-columns: 100%;
diff --git a/docs/components/tokens/FontSize.vue b/docs/components/tokens/FontSize.vue
index a095408..dab3362 100644
--- a/docs/components/tokens/FontSize.vue
+++ b/docs/components/tokens/FontSize.vue
@@ -5,8 +5,10 @@
       :key="index"
       class="font"
       v-if="prop.category === 'font-size'"
-      :style="{ fontSize: prop.value }">
-        ${{prop.name.replace(/_/g, "-")}}<span> ({{prop.value}})</span>
+      :style="{ fontSize: prop.value }"
+    >
+      ${{prop.name.replace(/_/g, "-")}}
+      <span>({{prop.value}})</span>
     </div>
   </div>
 </template>
diff --git a/docs/components/tokens/Spacing.vue b/docs/components/tokens/Spacing.vue
index bae0f24..5a45025 100644
--- a/docs/components/tokens/Spacing.vue
+++ b/docs/components/tokens/Spacing.vue
@@ -5,8 +5,10 @@
       :key="index"
       class="space"
       v-if="prop.category === 'space'"
-      :style="{ lineHeight: prop.value, height: prop.value }">
-        ${{prop.name.replace(/_/g, "-")}}<span> ({{prop.value}})</span>
+      :style="{ lineHeight: prop.value, height: prop.value }"
+    >
+      ${{prop.name.replace(/_/g, "-")}}
+      <span>({{prop.value}})</span>
     </div>
   </div>
 </template>
diff --git a/docs/docs.styles.scss b/docs/docs.styles.scss
index 4aa517d..9e1fdf1 100644
--- a/docs/docs.styles.scss
+++ b/docs/docs.styles.scss
@@ -64,7 +64,6 @@ div[class^="rsg--root"] a[class^="rsg--link"] {
 div[class^="rsg--wrapper"] > h1[class^="rsg--heading"],
 div[class^="rsg--wrapper"] > h2[class^="rsg--heading"] {
   display: block;
-  width: 100%;
   border: 0;
   line-height: $line-height-s;
   padding: $space-xl $space-xl;
@@ -211,7 +210,6 @@ div[class^="rsg--logo"] {
   @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: $weight-normal;
   }
@@ -605,10 +603,9 @@ table[class^="rsg--table"] {
   th {
     padding: $space-s $space-l $space-s $space-s;
     font-size: $size-s;
-    font-weight: $weight-bold;
+    font-weight: $weight-semi-bold;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $weight-semi-bold;
     border-radius: 0;
     background: $color-cloud;
     color: tint($color-oxford-blue, 10%);
diff --git a/docs/downloads.md b/docs/downloads.md
index 02ac5a2..fbb440a 100644
--- a/docs/downloads.md
+++ b/docs/downloads.md
@@ -4,5 +4,5 @@ You’re looking at Vue Design System’s demo downloads section. Everything you
 
 ## Vue Design System (zip)
 
-* [Download latest version](https://github.com/viljamis/vue-design-system/archive/master.zip)
-* [All versions](https://github.com/viljamis/vue-design-system/releases)
+- [Download latest version](https://github.com/viljamis/vue-design-system/archive/master.zip)
+- [All versions](https://github.com/viljamis/vue-design-system/releases)
diff --git a/docs/utils/activeNav.js b/docs/utils/activeNav.js
index 232b732..b0d4e14 100644
--- a/docs/utils/activeNav.js
+++ b/docs/utils/activeNav.js
@@ -34,7 +34,8 @@ export default {
       if (process && process.env && process.env.NODE_ENV === "test") {
         currentURL = "/example/"
       } else {
-        currentURL = window.location.pathname + window.location.hash.split("?")[0].replace(/%20/g, " ")
+        currentURL =
+          window.location.pathname + window.location.hash.split("?")[0].replace(/%20/g, " ")
       }
 
       if (sidebar) {
diff --git a/docs/utils/filterSearch.js b/docs/utils/filterSearch.js
index 4bce382..1708a71 100644
--- a/docs/utils/filterSearch.js
+++ b/docs/utils/filterSearch.js
@@ -6,7 +6,9 @@
 export default {
   methods: {
     showLinks() {
-      const links = document.querySelectorAll("div[class^='rsg--sidebar'] ul ul[class^='rsg--list']")
+      const links = document.querySelectorAll(
+        "div[class^='rsg--sidebar'] ul ul[class^='rsg--list']"
+      )
       if (links) {
         ;[].forEach.call(links, function(element) {
           element.classList.add("vueds-visible")
diff --git a/src/App.vue b/src/App.vue
index 7fd65ac..3c26bb8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view class="view" />
+    <router-view class="view"/>
   </div>
 </template>
 
diff --git a/src/ExampleComponent.vue b/src/ExampleComponent.vue
index d561da4..7bbd4f2 100644
--- a/src/ExampleComponent.vue
+++ b/src/ExampleComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="type" :class="['example', variation]">
     <div id="Example-container">
-      <slot />
+      <slot/>
     </div>
   </component>
 </template>
diff --git a/src/elements/Button.vue b/src/elements/Button.vue
index dee7f27..df9eba8 100644
--- a/src/elements/Button.vue
+++ b/src/elements/Button.vue
@@ -1,17 +1,14 @@
 <template>
-  <component
-    :is="type"
-    :href="href"
-    :type="submit"
-    :class="['button', size, state, variation]">
-      <slot/>
+  <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.
+ * 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",
diff --git a/src/elements/Icon.vue b/src/elements/Icon.vue
index ca85eb6..91afba8 100644
--- a/src/elements/Icon.vue
+++ b/src/elements/Icon.vue
@@ -1,10 +1,5 @@
 <template>
-  <component
-    :is="type"
-    :aria-label="ariaLabel"
-    :class="['icon', size]"
-    v-html="svg"
-  />
+  <component :is="type" :aria-label="ariaLabel" :class="['icon', size]" v-html="svg"/>
 </template>
 
 <script>
diff --git a/src/elements/Input.vue b/src/elements/Input.vue
index eb37549..47a1221 100644
--- a/src/elements/Input.vue
+++ b/src/elements/Input.vue
@@ -10,7 +10,7 @@
       :placeholder="placeholder"
       @input="onInput($event.target.value)"
       @focus="onFocus($event.target.value)"
-    />
+    >
   </component>
 </template>
 
@@ -152,7 +152,8 @@ $color-placeholder: tint($color-silver, 50%);
     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%);
+    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;
diff --git a/src/elements/Textarea.vue b/src/elements/Textarea.vue
index 022e380..2d985da 100644
--- a/src/elements/Textarea.vue
+++ b/src/elements/Textarea.vue
@@ -142,7 +142,8 @@ $color-placeholder: tint($color-silver, 50%);
     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%);
+    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;
diff --git a/src/elements/Wrapper.vue b/src/elements/Wrapper.vue
index 798867a..cbfe52f 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>
 
diff --git a/src/patterns/NavBar.vue b/src/patterns/NavBar.vue
index d812d5a..7ec9cd5 100644
--- a/src/patterns/NavBar.vue
+++ b/src/patterns/NavBar.vue
@@ -5,8 +5,8 @@
       :key="index"
       :href="item.href"
       :class="{active: localActive === item.component}"
-      v-html="item.name">
-    </a>
+      v-html="item.name"
+    />
   </component>
 </template>
 
diff --git a/src/templates/Index.vue b/src/templates/Index.vue
index 4ca2a78..a2a8f21 100644
--- a/src/templates/Index.vue
+++ b/src/templates/Index.vue
@@ -1,12 +1,17 @@
 <template>
   <component :is="type" class="index">
-    <NavBar active="Index" :navItems="[
-      {name: 'Template', component: 'Index', href: '/#/'},
-      {name: 'Documentation', href: 'http://localhost:6060/'}
-    ]"/>
+    <NavBar
+      active="Index"
+      :navItems="[
+        {name: 'Template', component: 'Index', href: '/#/'},
+        {name: 'Documentation', href: 'http://localhost:6060/'}
+      ]"
+    />
     <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>
+      <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>
@@ -50,7 +55,11 @@ $color-template-link: $color-bleu-de-france;
   @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%);
+  background: linear-gradient(
+    0deg,
+    $color-template-background-bottom,
+    $color-template-background-top 100%
+  );
   text-align: center;
   position: relative;
   float: left;
diff --git a/src/templates/NotFound.vue b/src/templates/NotFound.vue
index bfee208..d008b79 100644
--- a/src/templates/NotFound.vue
+++ b/src/templates/NotFound.vue
@@ -1,9 +1,12 @@
 <template>
   <component :is="type" class="not-found">
-    <NavBar active="NotFound" :navItems="[
-      {name: 'Template', component: 'Index', href: '/#/'},
-      {name: 'Documentation', href: 'http://localhost:6060/'}
-    ]"/>
+    <NavBar
+      active="NotFound"
+      :navItems="[
+        {name: 'Template', component: 'Index', href: '/#/'},
+        {name: 'Documentation', href: 'http://localhost:6060/'}
+      ]"
+    />
     <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>
@@ -48,7 +51,11 @@ $color-template-link: $color-bleu-de-france;
   @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%);
+  background: linear-gradient(
+    0deg,
+    $color-template-background-bottom,
+    $color-template-background-top 100%
+  );
   text-align: center;
   position: relative;
   float: left;