diff --git a/src/webui/app.js b/src/webui/app.js
index 0f696b527..0272e070a 100644
--- a/src/webui/app.js
+++ b/src/webui/app.js
@@ -7,13 +7,13 @@ i18n.use(locale);
 
 import Route from './router';
 
-import './styles/global.scss';
+import './styles/main.scss';
 import 'normalize.css';
 
 export default class App extends React.Component {
   render() {
     return (
-        <Route/>
+      <Route />
     );
   }
 }
diff --git a/src/webui/components/Footer/footer.scss b/src/webui/components/Footer/footer.scss
index 1ad2f53ab..7a218ac99 100644
--- a/src/webui/components/Footer/footer.scss
+++ b/src/webui/components/Footer/footer.scss
@@ -1,17 +1,19 @@
-@import '../../styles/variable';
+@import '../../styles/variables';
+@import '../../styles/mixins';
 
 .wrap {
   margin-top: auto;
-  border-top: 1px solid $border-color;
-  background: #f9f9f9;
+  background: $snow;
+  @include border(top, 1px, solid, $greyGainsboro);
 }
+
 footer.footer {
   display: flex;
   margin-top: 0;
   padding: 20px 0;
-  font-size: 14px;
+  font-size: $font-size-sm;
   height: 18px;
-  color: #999;
+  color: $nobel-01;
 
   span {
     display: inline-block;
@@ -25,7 +27,7 @@ footer.footer {
     position: relative;
     margin-top: -2px;
     height: 20px;
-    background: #d3dddd;
+    background: $greyAthens;
     padding: 1px 4px;
     border-radius: 2px;
     transform: scaleX(0);
@@ -33,14 +35,14 @@ footer.footer {
     transform-origin: left;
 
     &:before {
+      content: '';
       position: absolute;
       top: 3px;
       left: -7px;
       display: block;
-      content: '';
       width: 7px;
       height: 15px;
-      background: #d3dddd;
+      background: $greyAthens;
       background-image: linear-gradient(45deg, white, white 30%, transparent 30%), linear-gradient(-225deg, white, white 30%, transparent 30%);
     }
 
diff --git a/src/webui/components/Header/header.scss b/src/webui/components/Header/header.scss
index 0f53c2263..230ba0acf 100644
--- a/src/webui/components/Header/header.scss
+++ b/src/webui/components/Header/header.scss
@@ -1,4 +1,5 @@
-@import '../../styles/variable';
+@import '../../styles/variables';
+@import '../../styles/mixins';
 
 .header {
   display: flex;
@@ -6,20 +7,19 @@ .header {
   width: 100%;
   align-items: center;
   background: $primary-color;
-  color: #fff;
+  color: $white;
 
   figure {
     margin: 0 0 0 10px;
-    font-size: 14px;
-    line-height: 18px;
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
     padding: 8px 0;
   }
 
   .headerWrap {
     display: flex;
     align-items: center;
-
-    @include container-size();
+    @include container-size;
   }
 
   .headerRight {
@@ -32,13 +32,13 @@ .header {
 
   .headerButton {
     color: inherit;
-    border-color: #fff;
+    border-color: $white;
     background-color: transparent;
 
     &:hover, &:focus {
       color: $primary-color;
-      border-color: #f7f8f6;
-      background-color: #f7f8f6;
+      border-color: $saltpan;
+      background-color: $saltpan;
     }
   }
 }
diff --git a/src/webui/components/Help/help.scss b/src/webui/components/Help/help.scss
index c7109158a..5d88beb6c 100644
--- a/src/webui/components/Help/help.scss
+++ b/src/webui/components/Help/help.scss
@@ -1,22 +1,25 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
 .help {
   .noPkg {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 30px 0;
-    font-size: 20px;
-    color: #9f9f9f;
+    font-size: $font-size-lg;
+    color: $nobel-02;
 
     .noPkgTitle {
       margin: 1em 0;
       padding: 0;
-      font-size: 24px;
+      font-size: $font-size-xl;
     }
 
     .noPkgIntro {
-      line-height: 1.5;
+      line-height: $line-height-xxs;
       margin: 0 auto;
-      font-size: 14px;
+      font-size: $font-size-sm;
     }
 
     code {
diff --git a/src/webui/components/NotFound/404.scss b/src/webui/components/NotFound/404.scss
index deb0ce519..145ef0f56 100644
--- a/src/webui/components/NotFound/404.scss
+++ b/src/webui/components/NotFound/404.scss
@@ -1,14 +1,15 @@
-@import '../../styles/variable';
+@import '../../styles/variables';
+@import '../../styles/mixins';
 
 .notFound {
   width: 100%;
-  font-size: 18px;
-  line-height: 30px;
+  font-size: $font-size-md;
+  line-height: $line-height-xl;
   border: none;
-  border-bottom: 1px solid lightgrey;
   outline: none;
+  @include border-bottom-default($grey-light);
 
   &:focus {
-    border-bottom: 1px solid grey;
+    @include border-bottom-default($grey);
   }
 }
diff --git a/src/webui/components/Package/package.scss b/src/webui/components/Package/package.scss
index 3d0c4741f..bd06de98e 100644
--- a/src/webui/components/Package/package.scss
+++ b/src/webui/components/Package/package.scss
@@ -1,4 +1,5 @@
-@import '../../styles/variable';
+@import '../../styles/variables';
+@import '../../styles/mixins';
 
 .package {
   .header {
@@ -12,15 +13,15 @@ .package {
     p.description {
       width: 100%;
       margin-bottom: 0;
-      font-size: 14px;
-      color: darkgray;
+      font-size: $font-size-sm;
+      color: $grey-dark;
     }
   }
 
   .details {
     display: flex;
     font-size: 80%;
-    color: $description_color;
+    color: $grey-light;
     padding-top: 5px;
     .license {
       width: 20%;
@@ -45,7 +46,7 @@ .package {
       width: 100%;
 
       h1 {
-        font-size: 18px;
+        font-size: $font-size-md;
         margin: 0;
 
         :global {
@@ -57,7 +58,7 @@ .package {
     }
 
     .author {
-      color: $description_color;
+      color: $grey-light;
       font-size: inherit;
       width: 30%;
       text-align: right;
@@ -65,25 +66,21 @@ .package {
 
     &:hover {
       &::before {
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: rgba(255, 255, 255, 0.7);
         content: '';
+        display: block;
+        background: rgba(255, 255, 255, 0.7);
+        @include fullSize;
       }
 
       &::after {
         display: block;
         position: absolute;
         top: 50%;
-        transform: translateY(-50%);
         right: 0;
         left: 0;
         text-align: center;
-        font-size: 18px;
+        transform: translateY(-50%);
+        font-size: $font-size-md;
       }
     }
   }
diff --git a/src/webui/components/PackageDetail/packageDetail.scss b/src/webui/components/PackageDetail/packageDetail.scss
index 14c64dba0..c918115c8 100644
--- a/src/webui/components/PackageDetail/packageDetail.scss
+++ b/src/webui/components/PackageDetail/packageDetail.scss
@@ -1,12 +1,13 @@
-@import '../../styles/variable';
+@import '../../styles/variables';
+@import '../../styles/mixins';
 
 .pkgDetail {
   .title {
-    font-size: 26px;
-    border-bottom: 1px solid $border-color;
-    font-weight: 600;
+    font-size: $font-size-xxl;
+    font-weight: $font-weight-semibold;
     margin: 0 0 40px;
     padding-bottom: 5px;
+    @include border-bottom-default($greyGainsboro);
   }
 
   .readme {
diff --git a/src/webui/components/PackageList/packageList.scss b/src/webui/components/PackageList/packageList.scss
index 2bf00468d..fb6ffc6d4 100644
--- a/src/webui/components/PackageList/packageList.scss
+++ b/src/webui/components/PackageList/packageList.scss
@@ -1,9 +1,12 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
 .pkgContainer {
   margin: 0;
   padding: 0;
 
   li {
-    border-bottom: 1px solid #e4e8f1;
+    @include border-bottom-default($paleNavy);
     list-style: none;
 
     &:last-child {
@@ -12,8 +15,8 @@ .pkgContainer {
   }
 
   .listTitle {
-    font-weight: normal;
-    font-size: 24px;
+    font-weight: $font-weight-regular;
+    font-size: $font-size-xl;
     margin-top: 30px;
     margin-bottom: 0;
   }
diff --git a/src/webui/components/PackageSidebar/Module/style.scss b/src/webui/components/PackageSidebar/Module/style.scss
index aae88c24c..80164c74c 100644
--- a/src/webui/components/PackageSidebar/Module/style.scss
+++ b/src/webui/components/PackageSidebar/Module/style.scss
@@ -1,4 +1,5 @@
-@import '../../../styles/variable';
+@import '../../../styles/variables';
+@import '../../../styles/mixins';
 
 .module {
 
@@ -7,17 +8,17 @@ .module {
   .moduleTitle {
     display: flex;
     align-items: flex-end;
-    font-size: 21px;
+    font-size: $font-size-lg;
     margin: 0 0 10px;
     padding: 5px 0;
-    font-weight: 600;
-    border-bottom: 1px solid $border-color;
+    font-weight: $font-weight-semibold;
+    @include border-bottom-default($greyGainsboro);
 
     span { // description
-      font-size: 14px;
-      color: $text-grey;
+      font-size: $font-size-sm;
+      color: $greyChateau;
       margin-left: auto;
-      font-weight: lighter;
+      font-weight: $font-weight-light;
     }
   }
 }
diff --git a/src/webui/components/PackageSidebar/ModuleContentPlaceholder/style.scss b/src/webui/components/PackageSidebar/ModuleContentPlaceholder/style.scss
index 0f87c439b..7980ba7c3 100644
--- a/src/webui/components/PackageSidebar/ModuleContentPlaceholder/style.scss
+++ b/src/webui/components/PackageSidebar/ModuleContentPlaceholder/style.scss
@@ -1,8 +1,8 @@
-@import '../../../styles/variable';
+@import '../../../styles/variables';
 
 .emptyPlaceholder {
   text-align: center;
   margin: 20px 0;
-  font-size: 16px;
-  color: $text-grey;
+  font-size: $font-size-base;
+  color: $greyChateau;
 }
diff --git a/src/webui/components/PackageSidebar/modules/Dependencies/style.scss b/src/webui/components/PackageSidebar/modules/Dependencies/style.scss
index 5fbefac14..8c8f84aa4 100644
--- a/src/webui/components/PackageSidebar/modules/Dependencies/style.scss
+++ b/src/webui/components/PackageSidebar/modules/Dependencies/style.scss
@@ -1,10 +1,10 @@
-@import '../../../../styles/variable';
+@import '../../../../styles/variables';
 
 .dependenciesModule {
   li {
     display: inline-block;
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: $font-size-sm;
+    line-height: $line-height-xxs;
 
     a {
       color: inherit;
diff --git a/src/webui/components/PackageSidebar/modules/Infos/style.scss b/src/webui/components/PackageSidebar/modules/Infos/style.scss
index 0e0add1af..13c8aa245 100644
--- a/src/webui/components/PackageSidebar/modules/Infos/style.scss
+++ b/src/webui/components/PackageSidebar/modules/Infos/style.scss
@@ -1,17 +1,16 @@
-@import '../../../../styles/variable';
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
 
 .infosModule {
   li {
     display: flex;
-    font-size: 14px;
-    line-height: 2;
+    font-size: $font-size-sm;
+    line-height: $line-height-xs;
 
     a {
       color: inherit;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       max-width: 150px;
+      @include ellipsis;
     }
     
     a:last-child,
diff --git a/src/webui/components/PackageSidebar/modules/LastSync/style.scss b/src/webui/components/PackageSidebar/modules/LastSync/style.scss
index 300b9622b..f7823ccd5 100644
--- a/src/webui/components/PackageSidebar/modules/LastSync/style.scss
+++ b/src/webui/components/PackageSidebar/modules/LastSync/style.scss
@@ -1,8 +1,11 @@
+@import '../../../../styles/variables';
+
 .releasesModule {
   li {
     display: flex;
-    font-size: 14px;
-    line-height: 2;
+    font-size: $font-size-sm;
+    line-height: $line-height-xs;
+
     span:last-child {
       margin-left: auto;
     }
diff --git a/src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/style.scss b/src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/style.scss
index 538829df1..dc1805d3d 100644
--- a/src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/style.scss
+++ b/src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/style.scss
@@ -1,7 +1,9 @@
+@import '../../../../../styles/variables';
+@import '../../../../../styles/mixins';
+
 .maintainer {
-  $mine-height: 30px;
   display: flex;
-  line-height: $mine-height;
+  line-height: $line-height-xl;
   cursor: default;
 
   &:not(:last-child) {
@@ -9,19 +11,16 @@ .maintainer {
   }
 
   img {
-    width: $mine-height;
-    height: $mine-height;
+    width: 30px;
+    height: 30px;
     margin-right: 10px;
     border-radius: 100%;
     flex-shrink: 0;
   }
 
   span {
-    font-size: 14px;
+    font-size: $font-size-sm;
     flex-shrink: 1;
-    white-space: nowrap;
-    word-break: break-all;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
 }
diff --git a/src/webui/components/PackageSidebar/modules/Maintainers/style.scss b/src/webui/components/PackageSidebar/modules/Maintainers/style.scss
index 2e3895e3f..62949040e 100644
--- a/src/webui/components/PackageSidebar/modules/Maintainers/style.scss
+++ b/src/webui/components/PackageSidebar/modules/Maintainers/style.scss
@@ -1,4 +1,4 @@
-@import '../../../../styles/variable';
+@import '../../../../styles/variables';
 
 .maintainersModule {
   .showAllContributors {
@@ -6,7 +6,7 @@ .maintainersModule {
     width: 100%;
     background: none;
     border: none;
-    font-size: 14px;
+    font-size: $font-size-sm;
     text-align: center;
     padding: 10px 0;
   }
diff --git a/src/webui/components/Readme/readme.scss b/src/webui/components/Readme/readme.scss
index 10711f3eb..9c6b1d541 100644
--- a/src/webui/components/Readme/readme.scss
+++ b/src/webui/components/Readme/readme.scss
@@ -1,14 +1,6 @@
-@import '../../styles/variable';
+@import '../../styles/mixins';
 
 .searchBox {
-  width: 100%;
-  font-size: 18px;
-  line-height: 30px;
-  border: none;
-  border-bottom: 1px solid lightgrey;
-  outline: none;
-
-  &:focus {
-    border-bottom: 1px solid grey;
-  }
+  @include searchBox;
 }
+
diff --git a/src/webui/components/Search/search.scss b/src/webui/components/Search/search.scss
index 10711f3eb..34cb44112 100644
--- a/src/webui/components/Search/search.scss
+++ b/src/webui/components/Search/search.scss
@@ -1,14 +1,5 @@
-@import '../../styles/variable';
+@import '../../styles/mixins';
 
 .searchBox {
-  width: 100%;
-  font-size: 18px;
-  line-height: 30px;
-  border: none;
-  border-bottom: 1px solid lightgrey;
-  outline: none;
-
-  &:focus {
-    border-bottom: 1px solid grey;
-  }
+  @include searchBox;
 }
diff --git a/src/webui/modules/detail/detail.scss b/src/webui/modules/detail/detail.scss
index f190f8634..dca1d4e5e 100644
--- a/src/webui/modules/detail/detail.scss
+++ b/src/webui/modules/detail/detail.scss
@@ -1,7 +1,8 @@
-@import '../../styles/variable';
+@import '../../styles/variables';
+@import '../../styles/mixins';
 
 .twoColumn {
-  @include container-size();
+  @include container-size;
   margin: auto 10px;
   display: flex;
 
diff --git a/src/webui/modules/home/home.scss b/src/webui/modules/home/home.scss
deleted file mode 100644
index 11f0bc216..000000000
--- a/src/webui/modules/home/home.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../styles/variable';
diff --git a/src/webui/modules/home/index.js b/src/webui/modules/home/index.js
index 31be75219..8a916fa10 100644
--- a/src/webui/modules/home/index.js
+++ b/src/webui/modules/home/index.js
@@ -9,8 +9,6 @@ import API from '../../utils/api';
 import PackageList from '../../components/PackageList';
 import Search from '../../components/Search';
 
-import classes from './home.scss';
-
 
 export default class Home extends React.Component {
   static propTypes = {
@@ -69,24 +67,24 @@ export default class Home extends React.Component {
   }
 
   async searchPackage(query) {
-   try {
-     this.req = await API.request(`/search/${query}`, 'GET');
+    try {
+      this.req = await API.request(`/search/${query}`, 'GET');
 
-     // Implement cancel feature later
-     if (this.state.query === query) {
-       this.setState({
-         packages: this.req,
-         fistTime: false,
-         loading: false
-       });
-     }
-   } catch (err) {
-     MessageBox.msgbox({
-       type: 'error',
-       title: 'Warning',
-       message: 'Unable to get search result, please try again later.'
-     });
-   }
+      // Implement cancel feature later
+      if (this.state.query === query) {
+        this.setState({
+          packages: this.req,
+          fistTime: false,
+          loading: false
+        });
+      }
+    } catch (err) {
+      MessageBox.msgbox({
+        type: 'error',
+        title: 'Warning',
+        message: 'Unable to get search result, please try again later.'
+      });
+    }
   }
 
   handleSearchInput(e) {
@@ -101,10 +99,10 @@ export default class Home extends React.Component {
 
   render() {
     return (
-        <div className={ classes.container }>
-          { this.renderSearchBar() }
-          { this.state.loading ? this.renderLoading() : this.renderPackageList() }
-        </div>
+      <div>
+        {this.renderSearchBar()}
+        {this.state.loading ? this.renderLoading() : this.renderPackageList()}
+      </div>
     );
   }
 
@@ -112,7 +110,7 @@ export default class Home extends React.Component {
     if (this.isTherePackages() && this.state.fistTime) {
       return;
     }
-    return <Search handleSearchInput={ this.handleSearchInput } />;
+    return <Search handleSearchInput={this.handleSearchInput} />;
   }
 
   renderLoading() {
diff --git a/src/webui/styles/core.scss b/src/webui/styles/core.scss
new file mode 100644
index 000000000..4eddaac02
--- /dev/null
+++ b/src/webui/styles/core.scss
@@ -0,0 +1,22 @@
+@import "variables";
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    color: $text-color;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+strong {
+    font-weight: $font-weight-semibold;
+}
diff --git a/src/webui/styles/global.scss b/src/webui/styles/global.scss
index c935d7e56..a99c3a176 100644
--- a/src/webui/styles/global.scss
+++ b/src/webui/styles/global.scss
@@ -1,22 +1,11 @@
-@import "variable";
-
-body {
-  font-family: $font;
-  font-size: 12px;
-  color: $text-black;
-}
-
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+@import "variables";
+@import "mixins";
 
 :global {
   .container {
     margin-top: $space-lg;
 
-    @include container-size();
+    @include container-size;
 
     .el-loading-spinner {
       margin-top: 0 !important;
@@ -43,6 +32,6 @@ :global {
   }
 
   .el-dialog__headerbtn:hover .el-dialog__close {
-    color: $text-black;
+    color: $eclipse;
   }
 }
diff --git a/src/webui/styles/main.scss b/src/webui/styles/main.scss
new file mode 100644
index 000000000..555460d94
--- /dev/null
+++ b/src/webui/styles/main.scss
@@ -0,0 +1,2 @@
+@import "core";
+@import "global";
diff --git a/src/webui/styles/mixins.scss b/src/webui/styles/mixins.scss
new file mode 100644
index 000000000..3017203a5
--- /dev/null
+++ b/src/webui/styles/mixins.scss
@@ -0,0 +1,48 @@
+@import "variables";
+
+@mixin border($direction, $width, $style, $color) {
+    border-#{$direction}: $width $style $color;
+}
+
+@mixin border-bottom-default($color) {
+    border-bottom: 1px solid $color;
+}
+
+@mixin searchBox {
+    width: 100%;
+    font-size: $font-size-md;
+    line-height: $line-height-xl;
+    border: none;
+    @include border-bottom-default($grey-light);
+    outline: none;
+
+    &:focus {
+        @include border-bottom-default($grey);
+    }
+}
+
+@mixin ellipsis {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin fullSize {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@mixin container-size {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    min-width: 400px;
+    max-width: $break-sm;
+    @media screen and (min-width: $break-lg) {
+        max-width: $break-lg;
+    }
+}
diff --git a/src/webui/styles/variable.scss b/src/webui/styles/variable.scss
deleted file mode 100644
index 52a1f863b..000000000
--- a/src/webui/styles/variable.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*  Variables */
-
-$break-small: 800px;
-$break-large: 1240px;
-$description_color: lightgrey;
-
-@mixin container-size {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  min-width: 400px;
-  max-width: $break-small;
-
-  @media screen and (min-width: $break-large) {
-    max-width: $break-large;
-  }
-}
-
-$space-lg: 30px;
-// Font family from Bootstrap v4 Reboot.css
-$font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-/* Colors */
-$primary-color: #4b5e40;
-$border-color: #e3e3e3;
-$text-black: #3c3c3c;
-$text-grey: #95989A;
diff --git a/src/webui/styles/variables.scss b/src/webui/styles/variables.scss
new file mode 100644
index 000000000..469d25a3e
--- /dev/null
+++ b/src/webui/styles/variables.scss
@@ -0,0 +1,64 @@
+// Verdaccio
+// -------------------------
+
+$black:         #000;
+$white:         #fff;
+$grey:          #808080;
+$grey-light:    #d3d3d3;
+$grey-dark:     #a9a9a9;
+
+$greyChateau:   #95989a;
+$greyGainsboro: #e3e3e3;
+$greyAthens:    #d3dddd;
+
+$eclipse:       #3c3c3c;
+$paleNavy:      #e4e8f1;
+$saltpan:       #f7f8f6;
+$snow:          #f9f9f9;
+
+$nobel-01:      #999999;
+$nobel-02:      #9f9f9f;
+
+// Main colors
+// -------------------------
+
+$primary-color: #4b5e40;
+$seconday-color:#20232a;
+
+// Scaffolding
+// -------------------------
+
+$body-bg:     $white; 
+$text-color:  $eclipse;
+
+// Typography
+// -------------------------
+
+ // Font Family from Bootstrap v4 Reboot.css
+$font-family-reboot: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-base: $font-family-reboot;
+
+$font-size-xxl:   26px;
+$font-size-xl:    24px;
+$font-size-lg:    21px;
+$font-size-md:    18px;
+$font-size-base:  16px;
+$font-size-sm:    14px;
+
+$line-height-xl:  30px;
+$line-height-sm:  18px;
+$line-height-xs:  2;
+$line-height-xxs: 1.5;
+
+$font-weight-light:     400;
+$font-weight-regular:   400;
+$font-weight-semibold:  600;
+$font-weight-bold:      700;
+
+$break-sm: 800px;
+$break-lg: 1240px;
+
+// Spacing
+// -------------------------
+
+$space-lg: 30px;