diff --git a/src/themes/default/components/core/Breadcrumbs.vue b/src/themes/default/components/core/Breadcrumbs.vue
index d2704cc5af..b249c4fe79 100644
--- a/src/themes/default/components/core/Breadcrumbs.vue
+++ b/src/themes/default/components/core/Breadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="breadcrumbs h5 c-darkgray hidden-xs">
+  <div class="breadcrumbs h5 cl-accent hidden-xs">
     <span v-for="link in routes" :key="link.route_link">
       <router-link :to="link.route_link">
         {{ link.name | htmlDecode }}
diff --git a/src/themes/default/components/core/ColorButton.vue b/src/themes/default/components/core/ColorButton.vue
index 38e7bbcf98..07067f6d9c 100644
--- a/src/themes/default/components/core/ColorButton.vue
+++ b/src/themes/default/components/core/ColorButton.vue
@@ -1,12 +1,12 @@
 <template>
   <button
-    class="mr10 mb5 bg-transparent brdr-1 brdr-circle brdr-c-transparent relative inline-flex pointer color"
+    class="mr10 mb5 bg-cl-transparent brdr-1 brdr-circle brdr-cl-transparent :brdr-cl-bg-primary relative inline-flex pointer color"
     @click="switchFilter(id, label)"
     :class="{ active: active }"
     :aria-label="$t('Select color ') + label"
   >
     <div
-      class="absolute brdr-circle brdr-1 brdr-c-alto block color-inside"
+      class="absolute brdr-circle brdr-1 brdr-cl-secondary block color-inside"
       :style="colorFrom(label)"
     />
   </button>
@@ -30,21 +30,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $emperor: map-get($colors, emperor);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $color-active: color(primary);
 
   .color {
     width: 40px;
     height: 40px;
 
-    &:hover,
-    &:focus {
-      border-color: $lightgray-secondary;
-    }
-
     &.active {
-      border-color: $emperor;
+      border-color: $color-active;
     }
   }
 
diff --git a/src/themes/default/components/core/CookieNotification.vue b/src/themes/default/components/core/CookieNotification.vue
index 4b3c61a078..50b81014b4 100644
--- a/src/themes/default/components/core/CookieNotification.vue
+++ b/src/themes/default/components/core/CookieNotification.vue
@@ -1,13 +1,13 @@
 <template>
   <transition name="fade" appear>
-    <div class="cookie fixed w-100 bg-darkgray c-lightgray-secondary" v-if="isOpen">
+    <div class="cookie fixed w-100 bg-cl-th-accent cl-tertiary" v-if="isOpen">
       <div class="container">
         <div class="row between-xs middle-xs px15">
           <div class="col-xs-10 start-xs">
             <span class="pr5">
               {{ message }}
             </span>
-            <router-link :to="detailsLink" :title="detailsLinkText" class="c-gray">
+            <router-link :to="detailsLink" :title="detailsLinkText" class="cl-bg-tertiary">
               {{ detailsLinkText }}
             </router-link>
           </div>
@@ -65,18 +65,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-icon: color(black);
+$bg-icon: color(suva-gray);
 
-  $gray: map-get($colors, gray);
-  $black: map-get($colors, black);
-
-  .cookie {
-    z-index: 2;
-    bottom: 0;
-  }
+.cookie {
+  z-index: 2;
+  bottom: 0;
+}
 
-  .icon:hover {
-    color: $black;
-    background-color: $gray;
-  }
+.icon:hover {
+  color: $color-icon;
+  background-color: $bg-icon;
+}
 </style>
diff --git a/src/themes/default/components/core/Loader.vue b/src/themes/default/components/core/Loader.vue
index becc69937e..9e963930d9 100644
--- a/src/themes/default/components/core/Loader.vue
+++ b/src/themes/default/components/core/Loader.vue
@@ -2,11 +2,11 @@
   <div class="loader-container fixed" v-if="isVisible">
     <div class="loader-inner-container fixed">
       <div class="spinner relative">
-        <div class="double-bounce1 absolute w-100 brdr-circle bg-ocean-green"/>
-        <div class="double-bounce2 absolute w-100 brdr-circle bg-ocean-green"/>
+        <div class="double-bounce1 absolute w-100 brdr-circle bg-cl-th-success"/>
+        <div class="double-bounce2 absolute w-100 brdr-circle bg-cl-th-success"/>
       </div>
       <div
-        class="loader-message-container mt15 py5 px15 align-center h6 c-white"
+        class="loader-message-container mt15 py5 px15 align-center h6 cl-white"
         v-if="message"
       >
         {{ message }}
@@ -25,8 +25,10 @@ export default {
 
 <style lang="scss" scoped>
 @import '~theme/css/base/global_vars';
-$black: map-get($colors, black);
-$ocean-green: map-get($colors, ocean-green);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-container-bg: color(black);
+$color-message-bg: color(success);
 $z-index-loader: map-get($z-index, loader);
 
 .loader-container {
@@ -35,7 +37,7 @@ $z-index-loader: map-get($z-index, loader);
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: rgba($black, 0.65);
+  background-color: rgba($color-container-bg, 0.65);
 }
 
 .loader-inner-container {
@@ -45,7 +47,7 @@ $z-index-loader: map-get($z-index, loader);
 }
 
 .loader-message-container {
-  background-color: rgba($ocean-green, 0.75);
+  background-color: rgba($color-message-bg, 0.75);
   border-radius: 50px;
   letter-spacing: 0.5px;
 }
diff --git a/src/themes/default/components/core/Modal.vue b/src/themes/default/components/core/Modal.vue
index 1a438692b9..b6fae80265 100644
--- a/src/themes/default/components/core/Modal.vue
+++ b/src/themes/default/components/core/Modal.vue
@@ -6,9 +6,9 @@
          @click.self="close">
       <div class="modal-wrapper">
         <div class="modal-center">
-          <div class="modal-container bg-white" ref="modal-content" :style="style">
-            <header class="modal-header py25 px65 h1 serif weight-700 bg-lightgray" v-if="$slots.header">
-              <i slot="close" class="modal-close material-icons p15 c-gray" @click="close">close</i>
+          <div class="modal-container bg-cl-primary" ref="modal-content" :style="style">
+            <header class="modal-header py25 px65 h1 serif weight-700 bg-cl-secondary" v-if="$slots.header">
+              <i slot="close" class="modal-close material-icons p15 cl-bg-tertiary" @click="close">close</i>
               <slot name="header"/>
             </header>
             <div class="modal-content pt30 pb60 px65" v-if="$slots.content || staticData">
diff --git a/src/themes/default/components/core/NewsletterPopup.vue b/src/themes/default/components/core/NewsletterPopup.vue
index bdabb7ef8d..987a85cc8e 100644
--- a/src/themes/default/components/core/NewsletterPopup.vue
+++ b/src/themes/default/components/core/NewsletterPopup.vue
@@ -10,7 +10,7 @@
             {{ $t('Sign up to our newsletter and receive a coupon for 10% off!') }}
           </p>
           <input
-            class="border-box w-100 brdr-none brdr-bottom brdr-c-lightgray-secondary py10 h4 weight-200"
+            class="border-box w-100 brdr-none brdr-bottom brdr-cl-primary py10 h4 weight-200"
             autofocus
             type="email"
             name="email"
@@ -18,8 +18,8 @@
             autocomplete="email"
             :placeholder="$t('E-mail address *')"
           >
-          <p class="m0 c-red h6" v-if="$v.email.$error && !$v.email.required">Field is required.</p>
-          <p class="m0 c-red h6" v-if="!$v.email.email && $v.email.$error">Please provide valid e-mail address.</p>
+          <p class="m0 cl-error h6" v-if="$v.email.$error && !$v.email.required">Field is required.</p>
+          <p class="m0 cl-error h6" v-if="!$v.email.email && $v.email.$error">Please provide valid e-mail address.</p>
         </div>
         <div class="mb35 center-xs">
           <button-full
@@ -81,18 +81,17 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $black: map-get($colors, black);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
 
   input::-webkit-input-placeholder,
   input::-moz-placeholder {
-    color: $lightgray-secondary;
+    color: color(tertiary);
   }
 
   input:focus {
     outline: none;
-    border-color: $black;
+    border-color: color(black);
     transition: 0.3s all;
   }
 </style>
diff --git a/src/themes/default/components/core/Notification.vue b/src/themes/default/components/core/Notification.vue
index 8217fea98c..57a5e43b47 100644
--- a/src/themes/default/components/core/Notification.vue
+++ b/src/themes/default/components/core/Notification.vue
@@ -2,7 +2,7 @@
   <div class="notifications fixed">
     <transition-group name="fade-in-down">
       <div
-        class="notification mt30 border-box c-white"
+        class="notification mt30 border-box cl-white"
         v-for="(notification, index) in notifications"
         :key="index"
         :class="{
@@ -36,12 +36,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '~theme/css/base/global_vars';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
 $z-index-notification: map-get($z-index, notification);
-$red: map-get($colors, red);
-$la-palma: map-get($colors, la-palma);
-$russet: map-get($colors, russet);
-$darkgray: map-get($colors, darkgray);
-$black: map-get($colors, black);
+$color-error: color(error);
+$color-success: color(success);
+$color-warning: color(warning);
+$color-info: color(accent);
+$color-action: color(black);
 
 .notifications {
   top: 100px;
@@ -63,25 +65,25 @@ $black: map-get($colors, black);
   }
 }
 .notification {
-  box-shadow: 0px 0px 35px -5px rgba($black, .7);
+  box-shadow: 0px 0px 35px -5px rgba($color-action, .7);
 
   &:first-child  {
     margin-top: 0;
   }
 }
 .actions {
-  background: rgba($black, .2);
+  background: rgba($color-action, .2);
 }
 .success {
-  background: $la-palma;
+  background: $color-success;
 }
 .error {
-  background: $red;
+  background: $color-error;
 }
 .warning {
-  background: $russet;
+  background: $color-warning;
 }
 .info {
-  background: $darkgray;
+  background: $color-info;
 }
 </style>
diff --git a/src/themes/default/components/core/OfflineBadge.vue b/src/themes/default/components/core/OfflineBadge.vue
index 937c50be27..1e13f251b1 100644
--- a/src/themes/default/components/core/OfflineBadge.vue
+++ b/src/themes/default/components/core/OfflineBadge.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="!isOnline"
-    class="offline-badge fixed w-100 p10 bg-red c-white center-xs"
+    class="offline-badge fixed w-100 p10 bg-cl-th-error cl-white center-xs"
   >
     {{ $t('You are offline, some of the functionalities are limited') }}
   </div>
diff --git a/src/themes/default/components/core/Overlay.vue b/src/themes/default/components/core/Overlay.vue
index 2c5e55ca22..0e0a1b247d 100644
--- a/src/themes/default/components/core/Overlay.vue
+++ b/src/themes/default/components/core/Overlay.vue
@@ -26,14 +26,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~theme/css/base/global_vars';
-$black: map-get($colors, black);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-bg: color(black);
 
 .overlay {
   height: 100vh;
   top: 0;
   left: 0;
-  background-color: rgba($black, 0.4);
+  background-color: rgba($color-bg, 0.4);
   z-index: 3;
 }
 </style>
diff --git a/src/themes/default/components/core/PriceButton.vue b/src/themes/default/components/core/PriceButton.vue
index aa86ccd7ff..2af42b41c9 100644
--- a/src/themes/default/components/core/PriceButton.vue
+++ b/src/themes/default/components/core/PriceButton.vue
@@ -1,11 +1,11 @@
 <template>
   <span @click="switchFilter(id, from, to)">
     <button
-      class="relative brdr-c-gray brdr-1 bg-transparent mr10 pointer price-button"
+      class="relative brdr-cl-bg-tertiary brdr-1 bg-cl-transparent mr10 pointer price-button"
       :class="{ active: active }"
       :aria-label="$t('Price ') + content"
     >
-      <div class="bg-transparent absolute block square"/>
+      <div class="bg-cl-transparent absolute block square"/>
     </button>
     <span>{{ content }}</span>
   </span>
@@ -20,9 +20,10 @@ export default { // TODO: move logic to parent component
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $darkgray: map-get($colors, darkgray);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $color-event: color(tertiary);
+  $color-active: color(accent);
 
   .price-button {
     width: 20px;
@@ -31,13 +32,13 @@ export default { // TODO: move logic to parent component
     &:hover,
     &:focus {
       .square {
-        background-color: $lightgray-secondary;
+        background-color: $color-event;
       }
     }
 
     &.active {
       .square {
-        background-color: $darkgray;
+        background-color: $color-active;
       }
     }
   }
diff --git a/src/themes/default/components/core/ProductAttribute.vue b/src/themes/default/components/core/ProductAttribute.vue
index e371fdcecb..f24e3eeb10 100644
--- a/src/themes/default/components/core/ProductAttribute.vue
+++ b/src/themes/default/components/core/ProductAttribute.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="py10 c-gray-secondary">
+  <li class="py10 cl-secondary">
     <span>{{ label|htmlDecode }} </span>
     <span class="weight-700">{{ value|htmlDecode }}</span>
   </li>
diff --git a/src/themes/default/components/core/ProductLinks.vue b/src/themes/default/components/core/ProductLinks.vue
index 023e416dbf..8553483c54 100644
--- a/src/themes/default/components/core/ProductLinks.vue
+++ b/src/themes/default/components/core/ProductLinks.vue
@@ -4,7 +4,7 @@
       <div class="py10" v-if="productLink.product">
         <div class="row middle-xs h4 mb10">
           <p class="col-xs-7 serif m0">{{ productLink.product.name | htmlDecode }}</p>
-          <div class="col-xs-4 c-gray">
+          <div class="col-xs-4 cl-bg-tertiary">
             <div v-if="productLink.product.special_price && productLink.product.priceInclTax && productLink.product.originalPriceInclTax">
               <span class="price-special">{{ productLink.product.priceInclTax | price }}</span>&nbsp;
               <span class="price-original" >{{ productLink.product.originalPriceInclTax | price }}</span>
@@ -16,12 +16,12 @@
         </div>
 
         <div v-if="productLink.product" class="py5">
-          <p class="h6 c-gray m0">
+          <p class="h6 cl-bg-tertiary m0">
             {{ $t('Quantity') }}
           </p>
           <input
             type="number"
-            class="product-qty py10 brdr-c-lightgray-secondary bg-transparent h4 weight-300"
+            class="product-qty py10 brdr-cl-primary bg-cl-transparent h4 weight-300"
             min="1"
             autofocus
             v-model.number="productLink.product.qty"
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 1d95203364..f85a452ca6 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -13,7 +13,7 @@
         }"
       >
         <div
-          class="product-image relative bg-lightgray"
+          class="product-image relative bg-cl-secondary"
           :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]"
         >
           <transition name="fade" appear>
@@ -34,20 +34,20 @@
             >
           </transition>
         </div>
-        <p class="mb0 c-darkgray">{{ product.name | htmlDecode }}</p>
+        <p class="mb0 cl-accent">{{ product.name | htmlDecode }}</p>
         <span
-          class="price-original mr5 lh30 c-gray-secondary"
+          class="price-original mr5 lh30 cl-secondary"
           v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0"
         >
           {{ product.originalPriceInclTax | price }}
         </span>
         <span
-          class="price-special lh30 c-darkgray weight-700"
+          class="price-special lh30 cl-accent weight-700"
           v-if="product.special_price && parseFloat(product.special_price) > 0"
         >
           {{ product.priceInclTax | price }}
         </span>
-        <span class="lh30 c-gray-secondary" v-if="!product.special_price && parseFloat(product.priceInclTax) > 0">
+        <span class="lh30 cl-secondary" v-if="!product.special_price && parseFloat(product.priceInclTax) > 0">
           {{ product.priceInclTax | price }}
         </span>
       </router-link>
@@ -124,10 +124,12 @@ export default {
 
 <style lang="scss" scoped>
 @import '~theme/css/animations/transitions';
-@import '~theme/css/base/global_vars';
-$lightgray: map-get($colors, lightgray);
-$alto: map-get($colors, alto);
-$white: map-get($colors, white);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+
+$bg-secondary: color(secondary, $colors-background);
+$border-secondary: color(secondary, $colors-border);
+$color-white: color(white);
 
 .product {
   @media (max-width: 700px) {
@@ -148,10 +150,10 @@ $white: map-get($colors, white);
   align-items: center;
   width: 40px;
   height: 40px;
-  background-color: $alto;
+  background-color: $border-secondary;
   transition: 0.3s all $motion-main;
   text-transform: uppercase;
-  color: $white;
+  color: $color-white;
   font-size: 12px;
   font-weight: 400;
 }
@@ -163,7 +165,7 @@ $white: map-get($colors, white);
   transition: 0.3s all $motion-main;
 
   &:hover {
-    background-color: rgba($lightgray, .3);
+    background-color: rgba($bg-secondary, .3);
 
     > img {
       transform: scale(1.1);
diff --git a/src/themes/default/components/core/ProductsSlider.vue b/src/themes/default/components/core/ProductsSlider.vue
index 298aa624ea..98bd5d1d72 100644
--- a/src/themes/default/components/core/ProductsSlider.vue
+++ b/src/themes/default/components/core/ProductsSlider.vue
@@ -3,13 +3,13 @@
     <div class="container">
       <div class="row center-xs">
         <header class="col-md-12 pb15">
-          <h2 class="align-center c-darkgray">
+          <h2 class="align-center cl-accent">
             {{ title }}
           </h2>
         </header>
       </div>
     </div>
-    <div class="bg-lightgray collection-slider">
+    <div class="bg-cl-secondary collection-slider">
       <div class="row">
         <div class="col-md-12">
           <div class="pb20 pt20 center-xs cool-stuff-collection">
@@ -63,47 +63,48 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '~theme/css/base/global_vars';
-  $lightgray: map-get($colors, lightgray);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-product-bg: color(secondary, $colors-background);
 
-  .collection-slider {
-    overflow: hidden;
-  }
+.collection-slider {
+  overflow: hidden;
+}
 
-  .cool-stuff-collection {
-    @media (min-width: 1024px) {
-      margin: 0 -130px;
-    }
+.cool-stuff-collection {
+  @media (min-width: 1024px) {
+    margin: 0 -130px;
+  }
 
-    @media (max-width: 767px) {
-      padding-top: 15px;
-      padding-bottom: 15px;
-    }
+  @media (max-width: 767px) {
+    padding-top: 15px;
+    padding-bottom: 15px;
   }
+}
 
-  .product {
-    &.collection-product {
-      background-color: $lightgray;
-      padding: 15px;
-    }
+.product {
+  &.collection-product {
+    background-color: $color-product-bg;
+    padding: 15px;
+  }
 
-    &.is-muted {
-      @media (min-width: 1024px) {
-        opacity: 0.5;
-      }
+  &.is-muted {
+    @media (min-width: 1024px) {
+      opacity: 0.5;
     }
   }
+}
 
-  .collection-product {
-    .product-image {
-      mix-blend-mode: darken;
-      height: auto;
+.collection-product {
+  .product-image {
+    mix-blend-mode: darken;
+    height: auto;
 
-      img {
-        max-width: 100%;
-        max-height: 100%;
-        height: auto;
-      }
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      height: auto;
     }
   }
+}
 </style>
diff --git a/src/themes/default/components/core/SizeButton.vue b/src/themes/default/components/core/SizeButton.vue
index 397b4c6c11..ded9ceb707 100644
--- a/src/themes/default/components/core/SizeButton.vue
+++ b/src/themes/default/components/core/SizeButton.vue
@@ -1,8 +1,8 @@
 <template>
   <button
     class="
-      p0 bg-white brdr-1 brdr-c-lightgray-secondary
-      brdr-square h5 c-lightgray-secondary size-button
+      p0 bg-cl-primary brdr-1 brdr-cl-primary
+      brdr-square h5 cl-tertiary size-button
     "
     :class="{ active: active }"
     @click="switchFilter(id, label)"
@@ -21,9 +21,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $gray-secondary: map-get($colors, gray-secondary);
-  $alto: map-get($colors, alto);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $color-active: color(secondary);
+  $color-disabled: color(secondary, $colors-border);
 
   .size-button {
     width: 40px;
@@ -35,14 +36,14 @@ export default {
     }
 
     &.active {
-      border-color: $gray-secondary;
+      border-color: $color-active;
       border-width: 2px;
-      color: $gray-secondary;
+      color: $color-active;
     }
 
     &:disabled {
-      border-color: $alto;
-      color: $alto;
+      border-color: $color-disabled;
+      color: $color-disabled;
       cursor: not-allowed;
 
       &:hover,
diff --git a/src/themes/default/components/core/Tooltip.vue b/src/themes/default/components/core/Tooltip.vue
index 2dac183b98..6dc6373c00 100644
--- a/src/themes/default/components/core/Tooltip.vue
+++ b/src/themes/default/components/core/Tooltip.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="tooltip relative">
-    <i class="material-icons icon c-darkgray">info</i>
-    <div class="text absolute p25 h5 bg-darkgray c-white">
+    <i class="material-icons icon cl-accent">info</i>
+    <div class="text absolute p25 h5 bg-cl-th-accent cl-white">
       <slot />
     </div>
   </span>
@@ -16,8 +16,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~theme/css/base/global_vars';
-$darkgray: map-get($colors, darkgray);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-border: color(accent);
 
 .tooltip {
   cursor: default;
@@ -47,7 +48,7 @@ $darkgray: map-get($colors, darkgray);
     height: 0;
     position: absolute;
     border: 10px solid transparent;
-    border-top: 10px solid $darkgray;
+    border-top: 10px solid $color-border;
     left: 50%;
     transform: translateX(-50%);
     bottom: -20px;
diff --git a/src/themes/default/components/core/ValidationError.vue b/src/themes/default/components/core/ValidationError.vue
index 7ac5243cf3..5c4be4e42d 100644
--- a/src/themes/default/components/core/ValidationError.vue
+++ b/src/themes/default/components/core/ValidationError.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="validation-error c-red h6">
+  <div class="validation-error cl-error h6">
     DONT USE THERE WILL BE CHANGES IN API
   </div>
 </template>
diff --git a/src/themes/default/components/core/blocks/Auth/ForgotPass.vue b/src/themes/default/components/core/blocks/Auth/ForgotPass.vue
index b92ebcb1e2..f149151ce1 100644
--- a/src/themes/default/components/core/blocks/Auth/ForgotPass.vue
+++ b/src/themes/default/components/core/blocks/Auth/ForgotPass.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <header class="modal-header py25 px65 h1 serif weight-700 bg-lightgray">
-      <i slot="close" class="modal-close material-icons p15 c-gray" @click="close">close</i>
+    <header class="modal-header py25 px65 h1 serif weight-700 bg-cl-secondary">
+      <i slot="close" class="modal-close material-icons p15 cl-bg-tertiary" @click="close">close</i>
       {{ $t('Reset password') }}
     </header>
 
-    <div class="modal-content pt30 pb60 px65 c-gray-secondary">
+    <div class="modal-content pt30 pb60 px65 cl-secondary">
       <template v-if="!passwordSent">
         <form @submit.prevent="sendEmail" novalidate>
           <div class="mb35">
@@ -14,14 +14,14 @@
             </p>
             <input
               ref="email"
-              class="brdr-none brdr-bottom brdr-c-lightgray-secondary border-box py10 w-100 h4 weight-200 sans-serif"
+              class="brdr-none brdr-bottom brdr-cl-primary border-box py10 w-100 h4 weight-200 sans-serif"
               type="email"
               name="email"
               v-model="email"
               placeholder="E-mail address *"
             >
-            <p class="m0 c-red h6" v-if="!$v.email.required && $v.email.$error">{{ $t('Field is required.') }}</p>
-            <p class="m0 c-red h6" v-if="!$v.email.email && $v.email.$error">{{ $t('Please provide valid e-mail address.') }}</p>
+            <p class="m0 cl-error h6" v-if="!$v.email.required && $v.email.$error">{{ $t('Field is required.') }}</p>
+            <p class="m0 cl-error h6" v-if="!$v.email.email && $v.email.$error">{{ $t('Please provide valid e-mail address.') }}</p>
           </div>
           <div class="mb35">
             <button-full type="submit">
@@ -125,21 +125,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $black: map-get($colors, black);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-placeholder: color(tertiary);
+$color-focus: color(black);
 
-  input::-webkit-input-placeholder {
-    color: $lightgray-secondary;
-  }
+input::-webkit-input-placeholder {
+  color: $color-placeholder;
+}
 
-  input:-moz-placeholder {
-    color: $lightgray-secondary;
-  }
+input:-moz-placeholder {
+  color: $color-placeholder;
+}
 
-  input:focus {
-    outline: none;
-    border-color: $black;
-    transition: 0.3s all;
-  }
+input:focus {
+  outline: none;
+  border-color: $color-focus;
+  transition: 0.3s all;
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/Auth/Login.vue b/src/themes/default/components/core/blocks/Auth/Login.vue
index a77e56b7fd..04349fa1bb 100644
--- a/src/themes/default/components/core/blocks/Auth/Login.vue
+++ b/src/themes/default/components/core/blocks/Auth/Login.vue
@@ -1,33 +1,33 @@
 <template>
   <div>
-    <header class="modal-header py25 px65 h1 serif weight-700 bg-lightgray">
-      <i slot="close" class="modal-close material-icons p15 c-gray" @click="close">close</i>
+    <header class="modal-header py25 px65 h1 serif weight-700 bg-cl-secondary">
+      <i slot="close" class="modal-close material-icons p15 cl-bg-tertiary" @click="close">close</i>
       {{ $t('Log in') }}
     </header>
-    <div class="modal-content pt30 pb60 px65  c-gray-secondary">
+    <div class="modal-content pt30 pb60 px65  cl-secondary">
       <form @submit.prevent="login" novalidate>
         <div class="mb35">
           <input
-            class="py10 w-100 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+            class="py10 w-100 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
             type="email"
             name="email"
             ref="email"
             v-model="email"
             :placeholder="$t('E-mail address *')"
           >
-          <span class="validation-error block h6 c-red" v-if="!$v.email.required && $v.email.$error">{{ $t('Field is required.') }}</span>
-          <span class="validation-error block h6 c-red" v-if="!$v.email.email && $v.email.$error">{{ $t('Please provide valid e-mail address.') }}</span>
+          <span class="validation-error block h6 cl-error" v-if="!$v.email.required && $v.email.$error">{{ $t('Field is required.') }}</span>
+          <span class="validation-error block h6 cl-error" v-if="!$v.email.email && $v.email.$error">{{ $t('Please provide valid e-mail address.') }}</span>
         </div>
         <div class="mb35 relative">
           <input
-            class="py10 w-100 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+            class="py10 w-100 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
             :type="passType"
             name="password"
             v-model="password"
             :placeholder="$t('Password *')"
           >
-          <i class="icon material-icons c-alto absolute pointer" @click="togglePassType">{{ iconName }}</i>
-          <span class="validation-error block h6 c-red" v-if="!$v.password.required && $v.password.$error">{{ $t('Field is required.') }}</span>
+          <i class="icon material-icons cl-brdr-secondary absolute pointer" @click="togglePassType">{{ iconName }}</i>
+          <span class="validation-error block h6 cl-error" v-if="!$v.password.required && $v.password.$error">{{ $t('Field is required.') }}</span>
         </div>
         <div class="row">
           <div class="col-xs-6 mb35">
@@ -159,22 +159,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $gray: map-get($colors, gray);
-  $black: map-get($colors, black);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $color-placeholder: color(tertiary);
+  $color-icon: color(tertiary, $colors-background);
+  $color-focus: color(black);
 
   input::-webkit-input-placeholder {
-    color: $lightgray-secondary;
+    color: $color-placeholder;
   }
 
   input:-moz-placeholder {
-    color: $lightgray-secondary;
+    color: $color-placeholder;
   }
 
   input:focus {
     outline: none;
-    border-color: $black;
+    border-color: $color-focus;
     transition: 0.3s all;
   }
 
@@ -183,7 +184,7 @@ export default {
     top: 10px;
 
     &:hover {
-      color: $gray;
+      color: $color-icon;
     }
   }
 </style>
diff --git a/src/themes/default/components/core/blocks/Auth/Register.vue b/src/themes/default/components/core/blocks/Auth/Register.vue
index 20f763021e..132fe6447f 100644
--- a/src/themes/default/components/core/blocks/Auth/Register.vue
+++ b/src/themes/default/components/core/blocks/Auth/Register.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <header class="modal-header py25 px65 h1 serif weight-700 bg-lightgray">
-      <i slot="close" class="modal-close material-icons p15 c-gray" @click="close">close</i>
+    <header class="modal-header py25 px65 h1 serif weight-700 bg-cl-secondary">
+      <i slot="close" class="modal-close material-icons p15 cl-bg-tertiary" @click="close">close</i>
       {{ $t('Register') }}
     </header>
 
-    <div class="modal-content pt30 pb60 px65 c-gray-secondary">
+    <div class="modal-content pt30 pb60 px65 cl-secondary">
       <form @submit.prevent="register" novalidate>
         <div class="mb35">
           <input
-            class="w-100 py10 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+            class="w-100 py10 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
             type="email"
             name="email"
             ref="email"
@@ -17,61 +17,61 @@
             autocomplete="email"
             :placeholder="$t('E-mail address *')"
           >
-          <span class="validation-error block h6 c-red" v-if="!$v.email.required && $v.email.$error">Field is required.</span>
-          <span class="validation-error block h6 c-red" v-if="!$v.email.email && $v.email.$error">Please provide valid e-mail address.</span>
+          <span class="validation-error block h6 cl-error" v-if="!$v.email.required && $v.email.$error">Field is required.</span>
+          <span class="validation-error block h6 cl-error" v-if="!$v.email.email && $v.email.$error">Please provide valid e-mail address.</span>
         </div>
         <div class="row mb35">
           <div class="col-xs-6">
             <input
-              class="w-100 py10 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+              class="w-100 py10 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
               type="text"
               name="fist-name"
               v-model="firstName"
               autocomplete="given-name"
               :placeholder="$t('First name *')"
             >
-            <span class="validation-error block h6 c-red" v-if="!$v.firstName.required && $v.firstName.$error">Field is required.</span>
+            <span class="validation-error block h6 cl-error" v-if="!$v.firstName.required && $v.firstName.$error">Field is required.</span>
           </div>
           <div class="col-xs-6">
             <input
-              class="w-100 py10 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+              class="w-100 py10 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
               type="text"
               name="last-name"
               v-model="lastName"
               autocomplete="family-name"
               :placeholder="$t('Last name *')"
             >
-            <span class="validation-error block h6 c-red" v-if="!$v.lastName.required && $v.lastName.$error">Field is required.</span>
+            <span class="validation-error block h6 cl-error" v-if="!$v.lastName.required && $v.lastName.$error">Field is required.</span>
           </div>
         </div>
         <div class="mb35 relative">
           <input
-            class="w-100 py10 pr30 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+            class="w-100 py10 pr30 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
             name="password"
             v-model="password"
             :type="passType.pass"
             autocomplete="new-password"
             :placeholder="$t('Password *')"
           >
-          <i class="icon material-icons absolute c-alto pointer" @click="togglePassType('pass')">{{ iconName.pass }}</i>
-          <span class="validation-error block h6 c-red" v-if="!$v.password.required && $v.password.$error">Field is required.</span>
+          <i class="icon material-icons absolute cl-brdr-secondary pointer" @click="togglePassType('pass')">{{ iconName.pass }}</i>
+          <span class="validation-error block h6 cl-error" v-if="!$v.password.required && $v.password.$error">Field is required.</span>
         </div>
         <div class="mb35 relative">
           <input
-            class="w-100 py10 pr30 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4 weight-200 sans-serif"
+            class="w-100 py10 pr30 border-box brdr-none brdr-bottom brdr-cl-primary h4 weight-200 sans-serif"
             name="password-confirm"
             v-model="rPassword"
             :type="passType.repeatPass"
             autocomplete="new-password"
             :placeholder="$t('Repeat password *')"
           >
-          <i class="icon material-icons absolute c-alto pointer" @click="togglePassType('repeatPass')">{{ iconName.repeatPass }}</i>
-          <span class="validation-error block h6 c-red" v-if="!$v.rPassword.sameAsPassword">Passwords must be identical.</span>
+          <i class="icon material-icons absolute cl-brdr-secondary pointer" @click="togglePassType('repeatPass')">{{ iconName.repeatPass }}</i>
+          <span class="validation-error block h6 cl-error" v-if="!$v.rPassword.sameAsPassword">Passwords must be identical.</span>
         </div>
         <div class="mb35">
           <input type="checkbox" name="remember" v-model="conditions" id="remember" @change="$v.conditions.$touch()" @blur="$v.conditions.$reset()">
           <label class="ml10" for="remember">I accept terms and conditions *</label>
-          <span class="validation-error block h6 c-red" v-if="!$v.conditions.required && $v.conditions.$error">
+          <span class="validation-error block h6 cl-error" v-if="!$v.conditions.required && $v.conditions.$error">
             {{ $t('You must accept the terms and conditions.') }}
           </span>
         </div>
@@ -198,32 +198,32 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $gray: map-get($colors, gray);
-  $black: map-get($colors, black);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-placeholder: color(tertiary);
+$color-hover: color(tertiary, $colors-background);
+$color-focus: color(black);
 
-  input::-webkit-input-placeholder {
-    color: $lightgray-secondary;
-  }
+input::-webkit-input-placeholder {
+  color: $color-placeholder;
+}
 
-  input:-moz-placeholder {
-    color: $lightgray-secondary;
-  }
+input:-moz-placeholder {
+  color: $color-placeholder;
+}
 
-  input:focus {
-    outline: none;
-    border-color: $black;
-    transition: 0.3s all;
-  }
+input:focus {
+  outline: none;
+  border-color: $color-focus;
+  transition: 0.3s all;
+}
 
-  .icon {
-    right: 0;
-    top: 10px;
+.icon {
+  right: 0;
+  top: 10px;
 
-    &:hover {
-      color: $gray;
-    }
+  &:hover {
+    color: $color-hover;
   }
-
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/Checkout/CartSummary.vue b/src/themes/default/components/core/blocks/Checkout/CartSummary.vue
index eaf7b738cc..d38239a9aa 100644
--- a/src/themes/default/components/core/blocks/Checkout/CartSummary.vue
+++ b/src/themes/default/components/core/blocks/Checkout/CartSummary.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div class="brdr-bottom brdr-c-lightgray-secondary pb60">
-      <h3 class="c-darkgray ml30 mt50 summary-title">
+    <div class="brdr-bottom brdr-cl-primary pb60">
+      <h3 class="cl-accent ml30 mt50 summary-title">
         {{ $t('Order Summary') }}
       </h3>
       <product v-for="product in items" :key="product.id" :product="product"/>
-      <div v-if="items.length" class="checkout bg-lightgray pt10 serif c-darkgray">
+      <div v-if="items.length" class="checkout bg-cl-secondary pt10 serif cl-accent">
 
         <div v-for="(segment, index) in totals" :key="index" class="row pt15 pb20 pl30 pr55 " v-if="segment.code !== 'grand_total'">
-          <div class="col-xs c-darkgray">
+          <div class="col-xs cl-accent">
             {{ segment.title }}
           </div>
-          <div class="col-xs align-right c-darkgray h4">
+          <div class="col-xs align-right cl-accent h4">
             {{ segment.value | price }}
           </div>
         </div>
@@ -30,21 +30,21 @@
       <h4 class="h3 m0">
         {{ $t('Safety') }}
       </h4>
-      <p class="c-lightgray-secondary lh20">
+      <p class="cl-tertiary lh20">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Nullam sed tempor lorem. Vivamus volutpat eros id est semper accumsan.
       </p>
       <h4 class="h3 mb0">
         {{ $t('Shipping') }}
       </h4>
-      <p class="c-lightgray-secondary lh20">
+      <p class="cl-tertiary lh20">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Nullam sed tempor lorem. Vivamus volutpat eros id est semper accumsan.
       </p>
       <h4 class="h3 mb0">
         {{ $t('Returns') }}
       </h4>
-      <p class="c-lightgray-secondary lh20">
+      <p class="cl-tertiary lh20">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Nullam sed tempor lorem. Vivamus volutpat eros id est semper accumsan.
       </p>
diff --git a/src/themes/default/components/core/blocks/Checkout/OrderReview.vue b/src/themes/default/components/core/blocks/Checkout/OrderReview.vue
index c0dcd57271..abc8946abe 100644
--- a/src/themes/default/components/core/blocks/Checkout/OrderReview.vue
+++ b/src/themes/default/components/core/blocks/Checkout/OrderReview.vue
@@ -3,15 +3,15 @@
     <div class="row pl20">
       <div class="col-xs-1 col-sm-2 col-md-1">
         <div
-          class="number-circle lh35 c-white brdr-circle align-center weight-700"
-          :class="{ 'bg-darkgray' : isActive || isFilled, 'bg-gray' : !isFilled && !isActive }"
+          class="number-circle lh35 cl-white brdr-circle align-center weight-700"
+          :class="{ 'bg-cl-th-accent' : isActive || isFilled, 'bg-cl-tertiary' : !isFilled && !isActive }"
         >
           4
         </div>
       </div>
       <div class="col-xs-11 col-sm-9 col-md-11">
         <div class="row">
-          <div class="col-md-12" :class="{ 'c-gray' : !isFilled && !isActive }">
+          <div class="col-md-12" :class="{ 'cl-bg-tertiary' : !isFilled && !isActive }">
             <h3 class="m0">
               {{ $t('Review order') }}
             </h3>
@@ -31,13 +31,13 @@
               <div class="cartsummary-wrapper">
                 <cart-summary />
               </div>
-              <div class="col-xs-11 col-sm-12 col-md-8 bg-lightgray p15 mb35 ml10">
+              <div class="col-xs-11 col-sm-12 col-md-8 bg-cl-secondary p15 mb35 ml10">
                 <div class="checkboxStyled relative">
                   <input type="checkbox" v-model="orderReview.terms" id="acceptTermsCheckbox" @blur="$v.orderReview.terms.$touch()">
-                  <label class="absolute brdr-gray bg-lightgray pointer" for="acceptTermsCheckbox"/>
+                  <label class="absolute brdr-gray bg-cl-secondary pointer" for="acceptTermsCheckbox"/>
                 </div>
                 <div class="checkboxText ml15 lh25 pointer">
-                  <span class="fs16 c-darkgray" @click="orderReview.terms = !orderReview.terms">
+                  <span class="fs16 cl-accent" @click="orderReview.terms = !orderReview.terms">
                     {{ $t('I agree to') }}
                     <span class="link pointer" @click.stop="$bus.$emit('modal-toggle', 'modal-terms')">
                       {{ $t('Terms and conditions') }}
diff --git a/src/themes/default/components/core/blocks/Checkout/Payment.vue b/src/themes/default/components/core/blocks/Checkout/Payment.vue
index 64804ecdb7..fcecf287fd 100644
--- a/src/themes/default/components/core/blocks/Checkout/Payment.vue
+++ b/src/themes/default/components/core/blocks/Checkout/Payment.vue
@@ -3,26 +3,26 @@
     <div class="row pl20">
       <div class="col-xs-1 col-sm-2 col-md-1">
         <div
-          class="number-circle lh35 c-white brdr-circle align-center weight-700"
-          :class="{ 'bg-darkgray' : isActive || isFilled, 'bg-gray' : !isFilled && !isActive }"
+          class="number-circle lh35 cl-white brdr-circle align-center weight-700"
+          :class="{ 'bg-cl-th-accent' : isActive || isFilled, 'bg-cl-tertiary' : !isFilled && !isActive }"
         >
           3
         </div>
       </div>
       <div class="col-xs-11 col-sm-9 col-md-11">
         <div class="row mb15">
-          <div class="col-xs-12 col-md-6" :class="{ 'c-gray' : !isFilled && !isActive }">
+          <div class="col-xs-12 col-md-6" :class="{ 'cl-bg-tertiary' : !isFilled && !isActive }">
             <h3 class="m0 mb5">
               {{ $t('Payment') }}
             </h3>
           </div>
           <div class="col-xs-12 col-md-6 pr30">
             <div class="lh30 flex end-md" v-if="isFilled && !isActive">
-              <a href="#" class="c-lightgray-secondary flex" @click.prevent="edit">
+              <a href="#" class="cl-tertiary flex" @click.prevent="edit">
                 <span class="pr5">
                   {{ $t('Edit payment') }}
                 </span>
-                <i class="material-icons c-lightgray-secondary">edit</i>
+                <i class="material-icons cl-tertiary">edit</i>
               </a>
             </div>
           </div>
@@ -44,7 +44,7 @@
               <label for="sendToShippingAddressCheckbox"/>
             </div>
             <div class="checkboxText ml15 lh25" @click="useShippingAddress">
-              <span class="fs16 c-darkgray"> {{ $t('Copy address data from shipping') }}</span>
+              <span class="fs16 cl-accent">{{ $t('Copy address data from shipping') }}</span>
             </div>
           </div>
           <div class="col-xs-12 col-sm-12 mb15" v-show="hasBillingData()">
@@ -58,7 +58,7 @@
               <label for="sendToBillingAddressCheckbox"/>
             </div>
             <div class="checkboxText ml15 lh25" @click="useBillingAddress">
-              <span class="fs16 c-darkgray"> {{ $t('Use my billing data') }}</span>
+              <span class="fs16 cl-accent">{{ $t('Use my billing data') }}</span>
             </div>
           </div>
           <div class="col-xs-12 col-sm-6 mb25">
@@ -181,7 +181,7 @@
           <div class="col-xs-12 col-sm-6 mb25">
             <select
               name="countries"
-              :class="{'c-lightgray-secondary' : payment.country.length === 0}"
+              :class="{'cl-tertiary' : payment.country.length === 0}"
               v-model="payment.country"
               @change="$v.payment.country.$touch()"
               autocomplete="country"
@@ -202,7 +202,7 @@
               <label for="generateInvoiceCheckbox"/>
             </div>
             <div class="checkboxText ml15 lh25" @click="useGenerateInvoice">
-              <span class="fs16 c-darkgray"> {{ $t('I want to generate an invoice for the company') }}</span>
+              <span class="fs16 cl-accent">{{ $t('I want to generate an invoice for the company') }}</span>
             </div>
           </div>
           <div class="col-xs-12 col-sm-12 mb25" v-show="generateInvoice">
diff --git a/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue b/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue
index 153be672d9..7dda0a8aa3 100644
--- a/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue
+++ b/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue
@@ -3,26 +3,26 @@
     <div class="row pl20">
       <div class="col-xs-1 col-sm-2 col-md-1">
         <div
-          class="number-circle lh35 c-white brdr-circle align-center weight-700"
-          :class="{ 'bg-darkgray' : isActive || isFilled, 'bg-gray' : !isFilled && !isActive }"
+          class="number-circle lh35 cl-white brdr-circle align-center weight-700"
+          :class="{ 'bg-cl-th-accent' : isActive || isFilled, 'bg-cl-tertiary' : !isFilled && !isActive }"
         >
           1
         </div>
       </div>
       <div class="col-xs-11 col-sm-9 col-md-11">
         <div class="row mb15">
-          <div class="col-xs-12 col-md-6" :class="{ 'c-gray' : !isFilled && !isActive }">
+          <div class="col-xs-12 col-md-6" :class="{ 'cl-bg-tertiary' : !isFilled && !isActive }">
             <h3 class="m0 mb5">
               {{ $t('Personal Details') }}
             </h3>
           </div>
           <div class="col-xs-12 col-md-6 pr30">
             <div class="lh30 flex end-md" v-if="isFilled && !isActive">
-              <a href="#" class="c-lightgray-secondary flex" @click.prevent="edit">
+              <a href="#" class="cl-tertiary flex" @click.prevent="edit">
                 <span class="pr5">
                   {{ $t('Edit personal details') }}
                 </span>
-                <i class="material-icons c-lightgray-secondary">edit</i>
+                <i class="material-icons cl-tertiary">edit</i>
               </a>
             </div>
           </div>
@@ -35,7 +35,7 @@
         <div class="row">
           <div class="col-xs-12 col-sm-12 col-md-6 mb25">
             <input
-              class="py10 brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+              class="py10 brdr-none brdr-bottom brdr-cl-primary h4"
               type="text"
               name="first-name"
               :placeholder="$t('First name *')"
@@ -55,7 +55,7 @@
           </div>
           <div class="col-xs-12 col-sm-12 col-md-6 mb25">
             <input
-              class="py10 brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+              class="py10 brdr-none brdr-bottom brdr-cl-primary h4"
               type="text"
               name="last-name"
               :placeholder="$t('Last name *')"
@@ -72,7 +72,7 @@
           </div>
           <div class="col-xs-12 col-sm-12 mb25">
             <input
-              class="py10 brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+              class="py10 brdr-none brdr-bottom brdr-cl-primary h4"
               type="email"
               name="email-address"
               :placeholder="$t('Email address *')"
@@ -96,13 +96,13 @@
               <label for="createAccountCheckbox"/>
             </div>
             <div class="checkboxText ml15 lh25" @click="createAccount = !createAccount">
-              <span v-if="!isFilled" class="fs16 c-darkgray">{{ $t('I want to create an account') }}</span>
+              <span v-if="!isFilled" class="fs16 cl-accent">{{ $t('I want to create an account') }}</span>
             </div>
           </div>
           <div class="col-xs-12 col-sm-12 mb25 mt10" v-show="createAccount && !currentUser">
             <div class="pass-container relative mr35">
               <input
-                class="pr30 py10 w-100 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+                class="pr30 py10 w-100 border-box brdr-none brdr-bottom brdr-cl-primary h4"
                 name="password"
                 v-model="password"
                 :type="passType.pass"
@@ -110,7 +110,7 @@
                 @blur="$v.password.$touch()"
                 autocomplete="new-password"
               >
-              <div class="icon absolute c-lightgray-secondary pointer">
+              <div class="icon absolute cl-tertiary pointer">
                 <i class="material-icons" @click="togglePassType('pass')">{{ iconName.pass }}</i>
               </div>
             </div>
@@ -119,14 +119,14 @@
           <div class="col-xs-12 col-sm-12 mb25" v-show="createAccount && !currentUser">
             <div class="pass-container relative mr35">
               <input
-                class="pr30 py10 w-100 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+                class="pr30 py10 w-100 border-box brdr-none brdr-bottom brdr-cl-primary h4"
                 name="password-confirm"
                 v-model="rPassword"
                 :type="passType.repeatPass"
                 :placeholder="$t('Repeat password *')"
                 autocomplete="new-password"
               >
-              <i class="icon absolute material-icons c-lightgray-secondary pointer" @click="togglePassType('repeatPass')">
+              <i class="icon absolute material-icons cl-tertiary pointer" @click="togglePassType('repeatPass')">
                 {{ iconName.repeatPass }}
               </i>
             </div>
@@ -138,8 +138,8 @@
               <label for="acceptConditions"/>
             </div>
             <div class="checkboxText ml15 lh25" @click="acceptConditions = !acceptConditions">
-              <span class="fs16 c-darkgray">
-                {{ $t('I accept ') }}<a class="no-underline link" href="#" @click.stop="$bus.$emit('modal-toggle', 'modal-terms')">{{ $t('terms and conditions') }}</a> *
+              <span class="fs16 cl-accent">
+                {{ $t('I accept ') }} <a class="no-underline link" href="#" @click.stop="$bus.$emit('modal-toggle', 'modal-terms')">terms and conditions</a> *
               </span>
             </div>
             <span class="validation-error" v-if="!$v.acceptConditions.required && $v.acceptConditions.$error">{{ $t('You must accept the terms and conditions.') }}</span>
@@ -160,9 +160,9 @@
             </button-full>
           </div>
           <div class="col-xs-12 col-md-12 col-lg-6 pl20 login-prompt bottom-button" v-show="!currentUser">
-            <p class="h4 c-darkgray">
+            <p class="h4 cl-accent">
               {{ $t('or') }}
-              <a v-if="true" href="#" @click="gotoAccount" class="link no-underline fs16 c-darkgray">
+              <a v-if="true" href="#" @click="gotoAccount" class="link no-underline fs16 cl-accent">
                 {{ $t('login to your account') }}
               </a>
             </p>
@@ -188,9 +188,9 @@
                 <label for="createAccountCheckbox2"/>
               </div>
               <div class="checkboxText ml15 lh25">
-                <span class="fs16 c-darkgray">Create a new account</span>
+                <span class="fs16 cl-accent">Create a new account</span>
               </div>
-              <p class="h5 c-lightgray-secondary">
+              <p class="h5 cl-tertiary">
                 {{ $t('The new account will be created with the purchase. You will receive details on e-mail.') }}
               </p>
             </div>
@@ -270,43 +270,44 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $black: map-get($colors, black);
-  $gray: map-get($colors, gray);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-hover: color(tertiary, $colors-background);
+$color-focus: color(black);
 
-  .pass-container {
-    input[type=password], input[type=text] {
-      &:focus {
-        outline: none;
-        border-color: $black;
-        transition: 0.3s all;
-      }
+.pass-container {
+  input[type=password], input[type=text] {
+    &:focus {
+      outline: none;
+      border-color: $color-focus;
+      transition: 0.3s all;
     }
+  }
 
-    .icon {
-      right: 0;
-      top: 10px;
+  .icon {
+    right: 0;
+    top: 10px;
 
-      &:hover {
-        color: $gray;
-      }
+    &:hover {
+      color: $color-hover;
     }
   }
+}
 
-  .link {
-    text-decoration: underline;
-  }
+.link {
+  text-decoration: underline;
+}
 
-  .login-prompt {
-    @media (min-width: 1200px) {
-      margin-top: 30px;
-    }
+.login-prompt {
+  @media (min-width: 1200px) {
+    margin-top: 30px;
   }
+}
 
-  .button-container {
-    @media (max-width: 1200px) {
-      margin-bottom: 10px;
-      margin-top: 15px;
-    }
+.button-container {
+  @media (max-width: 1200px) {
+    margin-bottom: 10px;
+    margin-top: 15px;
   }
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/Checkout/Product.vue b/src/themes/default/components/core/blocks/Checkout/Product.vue
index ee094c2c38..6a1c049edd 100644
--- a/src/themes/default/components/core/blocks/Checkout/Product.vue
+++ b/src/themes/default/components/core/blocks/Checkout/Product.vue
@@ -5,15 +5,15 @@
       <div class="row">
         <div class="col-xs-12 col-md-9 pb15">
           <div class="mb15">
-            <div class="h4 weight-400 c-darkgray serif">{{ product.name | htmlDecode }}</div>
+            <div class="h4 weight-400 cl-accent serif">{{ product.name | htmlDecode }}</div>
             <div class="error" v-if="product.warning_message">
               {{ product.warning_message }}
             </div>
-            <div class="h5 c-lightgray-secondary pt5">{{ product.sku }}</div>
+            <div class="h5 cl-tertiary pt5">{{ product.sku }}</div>
           </div>
           <div>
             <div>
-              <span class="h5 c-gray-secondary">
+              <span class="h5 cl-secondary">
                 {{ $t('Qty') }}
                 <span class="weight-700">
                   {{ product.qty }}
@@ -24,12 +24,12 @@
         </div>
         <div class="col-xs-12 col-md-3 serif">
           <div v-if="!product.totals">
-            <span class="h4 c-red" v-if="product.special_price">{{ product.priceInclTax * product.qty | price }} </span>
+            <span class="h4 cl-error" v-if="product.special_price">{{ product.priceInclTax * product.qty | price }} </span>
             <span class="price-original h5" v-if="product.special_price" >{{ product.originalPriceInclTax * product.qty | price }}</span>
             <span v-if="!product.special_price" class="h4">{{ product.priceInclTax * product.qty | price }}</span>
           </div>
           <div v-if="product.totals">
-            <span class="h4 c-red" v-if="product.totals.discount_amount">{{ product.totals.row_total_incl_tax - product.totals.discount_amount | price }} </span>
+            <span class="h4 cl-error" v-if="product.totals.discount_amount">{{ product.totals.row_total_incl_tax - product.totals.discount_amount | price }} </span>
             <span class="price-original h5" v-if="product.totals.discount_amount" >{{ product.totals.row_total_incl_tax | price }}</span>
             <span v-if="!product.totals.discount_amount" class="h4">{{ product.totals.row_total_incl_tax | price }}</span>
           </div>
diff --git a/src/themes/default/components/core/blocks/Checkout/Shipping.vue b/src/themes/default/components/core/blocks/Checkout/Shipping.vue
index 7fd7bd1330..469cfed90c 100644
--- a/src/themes/default/components/core/blocks/Checkout/Shipping.vue
+++ b/src/themes/default/components/core/blocks/Checkout/Shipping.vue
@@ -3,7 +3,7 @@
     <div class="row pl20">
       <div class="col-xs-1 col-sm-2 col-md-1">
         <div
-          class="number-circle lh35 c-white brdr-circle align-center weight-700"
+          class="number-circle lh35 cl-white brdr-circle align-center weight-700"
           :class="{ 'bg-darkgray' : isActive || isFilled, 'bg-gray' : !isFilled && !isActive }"
         >
           2
@@ -11,18 +11,18 @@
       </div>
       <div class="col-xs-11 col-sm-9 col-md-11">
         <div class="row mb15">
-          <div class="col-xs-12 col-md-6" :class="{ 'c-gray' : !isFilled && !isActive }">
+          <div class="col-xs-12 col-md-6" :class="{ 'cl-bg-tertiary' : !isFilled && !isActive }">
             <h3 class="m0 mb5">
               {{ $t('Shipping') }}
             </h3>
           </div>
           <div class="col-xs-12 col-md-6 pr30">
             <div class="lh30 flex end-md" v-if="isFilled && !isActive">
-              <a href="#" class="c-lightgray-secondary flex" @click.prevent="edit">
+              <a href="#" class="cl-tertiary flex" @click.prevent="edit">
                 <span class="pr5">
                   {{ $t('Edit shipping') }}
                 </span>
-                <i class="material-icons c-lightgray-secondary">edit</i>
+                <i class="material-icons cl-tertiary">edit</i>
               </a>
             </div>
           </div>
@@ -39,7 +39,7 @@
               <label for="shipToMyAddressCheckbox"/>
             </div>
             <div class="checkboxText ml15 lh25" @click="useMyAddress">
-              <span class="fs16 c-darkgray">
+              <span class="fs16 cl-accent">
                 {{ $t('Ship to my default address') }}
               </span>
             </div>
@@ -158,7 +158,7 @@
           <div class="col-xs-12 col-sm-6 mb25">
             <select
               name="countries"
-              :class="{'c-lightgray-secondary' : shipping.country.length === 0}"
+              :class="{'cl-tertiary' : shipping.country.length === 0}"
               v-model="shipping.country"
               @change="$v.shipping.country.$touch()"
               autocomplete="country"
diff --git a/src/themes/default/components/core/blocks/Compare/RemoveButton.vue b/src/themes/default/components/core/blocks/Compare/RemoveButton.vue
index e4db3de7aa..9a67c4e619 100644
--- a/src/themes/default/components/core/blocks/Compare/RemoveButton.vue
+++ b/src/themes/default/components/core/blocks/Compare/RemoveButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="brdr-none bg-transparent">
+  <button class="brdr-none bg-cl-transparent">
     <i class="material-icons h4">close</i>
   </button>
 </template>
diff --git a/src/themes/default/components/core/blocks/Footer/Footer.vue b/src/themes/default/components/core/blocks/Footer/Footer.vue
index 42ab65c584..22624faf91 100644
--- a/src/themes/default/components/core/blocks/Footer/Footer.vue
+++ b/src/themes/default/components/core/blocks/Footer/Footer.vue
@@ -1,91 +1,91 @@
 <template>
-  <footer :class="{ 'brdr-top-1 brdr-c-alto' : isCheckout }">
-    <newsletter class=" flex brdr-bottom brdr-c-alto" v-if="!isCheckout"/>
-    <div class="footer-links flex pt30 pb60 px40 bg-lightgray" v-if="!isCheckout">
+  <footer :class="{ 'brdr-top-1 brdr-cl-secondary' : isCheckout }">
+    <newsletter class=" flex brdr-bottom brdr-cl-secondary" v-if="!isCheckout"/>
+    <div class="footer-links flex pt30 pb60 px40 bg-cl-secondary" v-if="!isCheckout">
       <div class="container">
         <div class="row center-xs">
           <div class="row col-lg-7 col-md-8 col-xs-12 start-md between-md between-xs no-mobile">
             <div>
-              <h3 class="c-darkgray weight-400">
+              <h3 class="cl-accent weight-400">
                 {{ $t('Departments') }}
               </h3>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/c/women-20" exact>
+                <router-link class="cl-secondary" to="/c/women-20" exact>
                   {{ $t('Women fashion') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/c/men-11" exact>
+                <router-link class="cl-secondary" to="/c/men-11" exact>
                   {{ $t("Men's fashion") }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/" exact>
+                <router-link class="cl-secondary" to="/" exact>
                   {{ $t('Kidswear') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/" exact>
+                <router-link class="cl-secondary" to="/" exact>
                   {{ $t('Home') }}
                 </router-link>
               </div>
             </div>
             <div>
-              <h3 class="c-darkgray weight-400">
+              <h3 class="cl-accent weight-400">
                 {{ $t('Orders') }}
               </h3>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/order-tracking" exact>
+                <router-link class="cl-secondary" to="/order-tracking" exact>
                   {{ $t('Track my order') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/my-account" exact>
+                <router-link class="cl-secondary" to="/my-account" exact>
                   {{ $t('My account') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/delivery" exact>
+                <router-link class="cl-secondary" to="/delivery" exact>
                   {{ $t('Delivery') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/returns" exact>
+                <router-link class="cl-secondary" to="/returns" exact>
                   {{ $t('Return policy') }}
                 </router-link>
               </div>
             </div>
             <div>
-              <h3 class="c-darkgray weight-400">
+              <h3 class="cl-accent weight-400">
                 {{ $t('Help') }}
               </h3>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/customer-service" exact>
+                <router-link class="cl-secondary" to="/customer-service" exact>
                   {{ $t('Customer service') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/size-guide" exact>
+                <router-link class="cl-secondary" to="/size-guide" exact>
                   {{ $t('Size guide') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/contact" exact>
+                <router-link class="cl-secondary" to="/contact" exact>
                   {{ $t('Contact us') }}
                 </router-link>
               </div>
             </div>
             <div>
-              <h3 class="c-darkgray weight-400">
+              <h3 class="cl-accent weight-400">
                 {{ $t('About us') }}
               </h3>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/about-us" exact>
+                <router-link class="cl-secondary" to="/about-us" exact>
                   {{ $t('About us') }}
                 </router-link>
               </div>
               <div class="mt15">
-                <router-link class="c-gray-secondary" to="/store-locator" exact>
+                <router-link class="cl-secondary" to="/store-locator" exact>
                   {{ $t('Store locator') }}
                 </router-link>
               </div>
@@ -137,14 +137,14 @@
     </div>
     <div class="container">
       <div class="row middle-xs px15 bottom-links">
-        <div class="col-xs-5 col-sm-3 c-lightgray-secondary">
+        <div class="col-xs-5 col-sm-3 cl-tertiary">
           {{ $t('United States (US)') }}
         </div>
         <div class="col-xs col-sm-9 end-xs">
           <ul class="pl0 links">
             <li class="inline-flex">
               <router-link
-                class="c-lightgray-secondary mr10 underline"
+                class="cl-tertiary mr10 underline"
                 to="/legal"
                 exact
               >
@@ -153,7 +153,7 @@
             </li>
             <li class="inline-flex">
               <router-link
-                class="c-lightgray-secondary underline"
+                class="cl-tertiary underline"
                 to="/privacy"
                 exact
               >
@@ -199,71 +199,72 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $gray-secondary: map-get($colors, gray-secondary);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-secondary: color(secondary);
 
-  .icon {
-    transition: 0.3s all;
-  }
+.icon {
+  transition: 0.3s all;
+}
 
-  .social-icon {
-    width: 40px;
-    height: 40px;
-    &:hover,
-    &:focus,
-    &:active {
-      .icon {
-        fill: $gray-secondary;
-      }
+.social-icon {
+  width: 40px;
+  height: 40px;
+  &:hover,
+  &:focus,
+  &:active {
+    .icon {
+      fill: $color-secondary;
     }
   }
-  .links {
-    list-style-type: none;
-  }
+}
+.links {
+  list-style-type: none;
+}
 
-  .bottom-links {
-    @media (max-width: 767px) {
-      padding: 0;
-    }
+.bottom-links {
+  @media (max-width: 767px) {
+    padding: 0;
   }
+}
 
-  .underline {
-    &:hover {
-      color: $gray-secondary;
-      &:after {
-        background-color: $gray-secondary;
-      }
+.underline {
+  &:hover {
+    color: $color-secondary;
+    &:after {
+      background-color: $color-secondary;
     }
   }
-  .legal-entity-link {
-    text-align: center;
-    @media (min-width: 768px) {
-      display: none;
-    }
+}
+.legal-entity-link {
+  text-align: center;
+  @media (min-width: 768px) {
+    display: none;
   }
+}
 
-  .privacy-policy-link {
-    text-align: right;
-    @media (min-width: 768px) {
-      display: none;
-    }
+.privacy-policy-link {
+  text-align: right;
+  @media (min-width: 768px) {
+    display: none;
   }
+}
 
-  @media (max-width: 595px) {
-    .no-mobile {
-      display: none;
-    }
+@media (max-width: 595px) {
+  .no-mobile {
+    display: none;
+  }
 
-    .social {
-      margin-top: 0;
-    }
+  .social {
+    margin-top: 0;
+  }
 
-    .social-icon:first-of-type {
-      margin-left: 0;
-    }
+  .social-icon:first-of-type {
+    margin-left: 0;
+  }
 
-    .footer-links {
-      padding-bottom: 30px;
-    }
+  .footer-links {
+    padding-bottom: 30px;
   }
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/Footer/Newsletter.vue b/src/themes/default/components/core/blocks/Footer/Newsletter.vue
index 1d81bee7f0..590ef02bbf 100644
--- a/src/themes/default/components/core/blocks/Footer/Newsletter.vue
+++ b/src/themes/default/components/core/blocks/Footer/Newsletter.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="newsletter py25 px40 bg-lightgray">
+  <div class="newsletter py25 px40 bg-cl-secondary">
     <div class="container">
       <div class="newsletter-content m0 row middle-xs start-md">
         <div class="col-md-9 col-xs-12">
-          <h3 class="h3 c-darkgray weight-400 m0">
+          <h3 class="h3 cl-accent weight-400 m0">
             {{ $t('Subscribe to the newsletter and receive a coupon for 10% off') }}
           </h3>
         </div>
diff --git a/src/themes/default/components/core/blocks/Header/AccountIcon.vue b/src/themes/default/components/core/blocks/Header/AccountIcon.vue
index 716f5191c4..d5a1778bcb 100644
--- a/src/themes/default/components/core/blocks/Header/AccountIcon.vue
+++ b/src/themes/default/components/core/blocks/Header/AccountIcon.vue
@@ -64,40 +64,44 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
+@import '~theme/css/base/global_vars';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-white: color(white);
+$bg-secondary: color(secondary, $colors-background);
 
-  .dropdown {
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      right: -15px;
-      margin-top: 15px;
-      padding: 0px 10px 10px 10px;
-      text-align: center;
-      background-color: map-get($colors, white);
-      min-width: 120px;
-      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-      z-index: 0;
+.dropdown {
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    right: -15px;
+    margin-top: 15px;
+    padding: 0px 10px 10px 10px;
+    text-align: center;
+    background-color: $color-white;
+    min-width: 120px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 0;
 
-      .section-wrapper {
-        display: table;
+    .section-wrapper {
+      display: table;
 
-        .no-underline {
-          display: table-cell;
-          vertical-align: middle;
-          height: 30px;
+      .no-underline {
+        display: table-cell;
+        vertical-align: middle;
+        height: 30px;
 
-          &:hover {
-            background: map-get($colors, lightgray);
-          }
+        &:hover {
+          background: $bg-secondary;
         }
       }
+    }
 
-      @media (min-width: 768px) {
-        &:hover, &.show-dropdown {
-          display: block;
-        }
+    @media (min-width: 768px) {
+      &:hover, &.show-dropdown {
+        display: block;
       }
     }
   }
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/Header/Header.vue b/src/themes/default/components/core/blocks/Header/Header.vue
index e0c77305e1..8f7781dd11 100644
--- a/src/themes/default/components/core/blocks/Header/Header.vue
+++ b/src/themes/default/components/core/blocks/Header/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="header">
     <header
-      class="fixed w-100 brdr-bottom bg-white brdr-c-alto"
+      class="fixed w-100 brdr-bottom bg-cl-primary brdr-cl-secondary"
       :class="{ 'is-visible': navVisible }"
     >
       <div class="container">
@@ -9,10 +9,10 @@
           <div class="col-sm-4 col-xs-2 middle-xs">
             <div>
               <template v-if="!isProductPage">
-                <hamburger-icon class="p15 icon bg-lightgray pointer" v-if="!isProductPage"/>
+                <hamburger-icon class="p15 icon bg-cl-secondary pointer" v-if="!isProductPage"/>
               </template>
               <template v-else>
-                <return-icon class="p15 icon bg-lightgray pointer" v-if="isProductPage"/>
+                <return-icon class="p15 icon bg-cl-secondary pointer" v-if="isProductPage"/>
               </template>
             </div>
           </div>
@@ -40,7 +40,7 @@
         <div class="row between-xs middle-xs px15 py5" v-if="isCheckout">
           <div class="col-xs-5 col-md-3 middle-xs">
             <div>
-              <router-link to="/" class="c-lightgray-secondary links">
+              <router-link to="/" class="cl-tertiary links">
                 {{ $t('Return to shopping') }}
               </router-link>
             </div>
@@ -50,7 +50,7 @@
           </div>
           <div class="col-xs-5 col-md-3 end-xs">
             <div>
-              <a v-if="!currentUser" href="#" @click="gotoAccount" class="c-lightgray-secondary links">
+              <a v-if="!currentUser" href="#" @click="gotoAccount" class="cl-tertiary links">
                 {{ $t('Login to your account') }}
               </a>
               <span v-else>
@@ -178,47 +178,48 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray: map-get($colors, lightgray);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-icon-hover: color(secondary, $colors-background);
 
-  header {
-    height: 54px;
-    top: -54px;
-    z-index: 2;
-    transition: top 0.2s ease-in-out;
-  }
-  .icon {
-    opacity: 0.6;
-  }
-  .icon:hover {
-    background-color: $lightgray;
-    opacity: 1;
-  }
-  .header-placeholder {
-    height: 54px;
+header {
+  height: 54px;
+  top: -54px;
+  z-index: 2;
+  transition: top 0.2s ease-in-out;
+}
+.icon {
+  opacity: 0.6;
+}
+.icon:hover {
+  background-color: $color-icon-hover;
+  opacity: 1;
+}
+.header-placeholder {
+  height: 54px;
+}
+.links {
+  text-decoration: underline;
+}
+.is-visible {
+  top: 0 !important;
+}
+@media (max-width: 767px) {
+  .row.middle-xs {
+    margin: 0 -15px;
+
+    &.py5 {
+      margin: 0;
+    }
   }
-  .links {
-    text-decoration: underline;
+  .col-xs-2:first-of-type {
+      padding-left: 0;
   }
-  .is-visible {
-    top: 0 !important;
+  .col-xs-2:last-of-type {
+      padding-right: 0;
   }
-  @media (max-width: 767px) {
-    .row.middle-xs {
-      margin: 0 -15px;
-
-      &.py5 {
-        margin: 0;
-      }
-    }
-    .col-xs-2:first-of-type {
-        padding-left: 0;
-    }
-    .col-xs-2:last-of-type {
-        padding-right: 0;
-    }
-    a, span {
-      font-size: 12px;
-    }
+  a, span {
+    font-size: 12px;
   }
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
index 792bc3492f..bf8b41d30b 100644
--- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
+++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
@@ -2,7 +2,7 @@
   <div class="relative inline-flex" @click="openMicrocart">
     <i class="material-icons md-18">shopping_cart</i>
     <span
-      class="minicart-count absolute flex center-xs middle-xs border-box py0 px2 h6 lh16 weight-700 c-white bg-lightgray-secondary"
+      class="minicart-count absolute flex center-xs middle-xs border-box py0 px2 h6 lh16 weight-700 cl-white bg-cl-silver"
       v-cloak
       v-if="totalQuantity"
     >
diff --git a/src/themes/default/components/core/blocks/MainSlider/MainSlider.vue b/src/themes/default/components/core/blocks/MainSlider/MainSlider.vue
index 7b81db19fa..b87a9b377c 100644
--- a/src/themes/default/components/core/blocks/MainSlider/MainSlider.vue
+++ b/src/themes/default/components/core/blocks/MainSlider/MainSlider.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="main-slider w-100 bg-darkgray c-white">
+  <section class="main-slider w-100 bg-cl-th-accent cl-white">
     <no-ssr>
       <carousel :per-page="1" pagination-active-color="transparent" pagination-color="#F2F2F2">
         <slide v-for="(slide, index) in slides" :key="index">
@@ -43,15 +43,16 @@ export default {
 }
 </script>
 <style lang="scss">
-@import '~theme/css/base/global_vars';
-$white: map-get($colors, white);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-white: color(white);
 .main-slider {
   .VueCarousel-pagination {
     position: absolute;
     bottom: 15px;
   }
   .VueCarousel-dot--active .VueCarousel-dot-inner {
-    border: 2px solid $white;
+    border: 2px solid $color-white;
     margin-top: -2px;
   }
 }
diff --git a/src/themes/default/components/core/blocks/Microcart/EditButton.vue b/src/themes/default/components/core/blocks/Microcart/EditButton.vue
index da42dc3f3f..fec850d0c4 100644
--- a/src/themes/default/components/core/blocks/Microcart/EditButton.vue
+++ b/src/themes/default/components/core/blocks/Microcart/EditButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="middle-xs brdr-none bg-transparent p0 inline-flex c-gray-secondary">
+  <button class="middle-xs brdr-none bg-cl-transparent p0 inline-flex cl-secondary">
     <span class="hidden-xs h6 weight-300">
       {{ $t('Edit') }}
     </span>
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index 6a66adf00f..01e82fbcd1 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -1,27 +1,27 @@
 <template>
   <div
-    class="microcart mw-100 fixed c-darkgray"
-    :class="[items.length ? 'bg-lightgray' : 'bg-white', { active: isOpen }]"
+    class="microcart mw-100 fixed cl-accent"
+    :class="[items.length ? 'bg-cl-secondary' : 'bg-cl-primary', { active: isOpen }]"
   >
-    <div class="row middle-xs bg-white top-sm">
+    <div class="row middle-xs bg-cl-primary top-sm">
       <div class="col-xs-10">
         <h2
           v-if="items.length"
-          class="c-darkgray mt60 mb35 ml40 heading"
+          class="cl-accent mt60 mb35 ml40 heading"
         >
           {{ $t('Shopping cart') }}
         </h2>
       </div>
       <div class="col-xs-2 end-xs">
-        <button type="button" class="p0 brdr-none bg-transparent close" @click="closeMicrocart">
-          <i class="material-icons p15 c-darkgray">
+        <button type="button" class="p0 brdr-none bg-cl-transparent close" @click="closeMicrocart">
+          <i class="material-icons p15 cl-accent">
             close
           </i>
         </button>
       </div>
     </div>
 
-    <h4 v-if="!items.length" class="c-darkgray ml30">
+    <h4 v-if="!items.length" class="cl-accent ml30">
       {{ $t('Your shopping cart is empty.') }}
     </h4>
     <div v-if="!items.length" class="ml30" @click="closeMicrocart">
@@ -31,10 +31,10 @@
       </router-link>
       {{ $t('to find something beautiful for You!') }}
     </div>
-    <ul v-if="items.length" class="bg-white m0 px40 pb40 products">
+    <ul v-if="items.length" class="bg-cl-primary m0 px40 pb40 products">
       <product v-for="product in items" :key="product.sku" :product="product" />
     </ul>
-    <div v-if="items.length" class="summary px40 c-darkgray serif">
+    <div v-if="items.length" class="summary px40 cl-accent serif">
       <h3 class="m0 pt40 mb30 weight-400 summary-heading">
         {{ $t('Shopping summary') }}
       </h3>
@@ -61,7 +61,7 @@
       v-if="items.length && !isCheckoutMode"
     >
       <div class="col-xs-12 col-sm first-sm">
-        <router-link to="/" class="no-underline c-gray-secondary link">
+        <router-link to="/" class="no-underline cl-secondary link">
           <span @click="closeMicrocart">
             {{ $t('Return to shopping') }}
           </span>
diff --git a/src/themes/default/components/core/blocks/Microcart/Product.vue b/src/themes/default/components/core/blocks/Microcart/Product.vue
index ec1712e00c..4316194127 100644
--- a/src/themes/default/components/core/blocks/Microcart/Product.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Product.vue
@@ -2,7 +2,7 @@
   <transition name="fade" appear>
     <li class="row py10">
       <div>
-        <div class="ml10 bg-lightgray">
+        <div class="ml10 bg-cl-secondary">
           <img class="image" v-lazy="thumbnail" alt="" >
         </div>
       </div>
@@ -11,17 +11,17 @@
           <div class="serif h4 name">
             {{ product.name | htmlDecode }}
           </div>
-          <div class="h6 c-gray pt5 sku">
+          <div class="h6 cl-bg-tertiary pt5 sku">
             {{ product.sku }}
           </div>
-          <div class="h6 pt5 c-red" v-if="product.warning_message">
+          <div class="h6 pt5 cl-error" v-if="product.warning_message">
             {{ product.warning_message }}
           </div>
-          <div class="h6 pt5 c-ocean-green" v-if="product.info_message && !product.warning_message">
+          <div class="h6 pt5 cl-success" v-if="product.info_message && !product.warning_message">
             {{ product.info_message }}
           </div>
         </div>
-        <div class="h5 pt5 c-darkgray lh25 qty">
+        <div class="h5 pt5 cl-accent lh25 qty">
           <span>
             {{ $t('Qty') }}
           </span>
@@ -41,7 +41,7 @@
       </div>
       <div class="flex py15 mr10 align-right start-xs between-sm actions">
         <div v-if="!product.totals">
-          <span class="h4 serif c-red price-special" v-if="product.special_price">
+          <span class="h4 serif cl-error price-special" v-if="product.special_price">
             {{ product.priceInclTax * product.qty | price }}&nbsp;
           </span>
           <span class="h6 serif price-original" v-if="product.special_price">
@@ -52,7 +52,7 @@
           </span>
         </div>
         <div v-if="product.totals">
-          <span class="h4 serif c-red price-special" v-if="product.totals.discount_amount">
+          <span class="h4 serif cl-error price-special" v-if="product.totals.discount_amount">
             {{ product.totals.row_total_incl_tax - product.totals.discount_amount | price }}&nbsp;
           </span>
           <span class="h6 serif price-original" v-if="product.totals.discount_amount">
diff --git a/src/themes/default/components/core/blocks/Microcart/RemoveButton.vue b/src/themes/default/components/core/blocks/Microcart/RemoveButton.vue
index 389f286df5..067abfe193 100644
--- a/src/themes/default/components/core/blocks/Microcart/RemoveButton.vue
+++ b/src/themes/default/components/core/blocks/Microcart/RemoveButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="brdr-none bg-transparent p0 middle-xs inline-flex c-gray-secondary">
+  <button class="brdr-none bg-cl-transparent p0 middle-xs inline-flex cl-secondary">
     <span class="hidden-xs h6 weight-300">
       {{ $t('Remove') }}
     </span>
diff --git a/src/themes/default/components/core/blocks/MyAccount/MyNewsletter.vue b/src/themes/default/components/core/blocks/MyAccount/MyNewsletter.vue
index 8e5c39473f..f5a97d0032 100644
--- a/src/themes/default/components/core/blocks/MyAccount/MyNewsletter.vue
+++ b/src/themes/default/components/core/blocks/MyAccount/MyNewsletter.vue
@@ -2,18 +2,18 @@
   <div class="my-newsletter mb35">
     <!-- My newsletter header -->
     <div class="row mb15">
-      <div class="col-xs-12 col-md-6" :class="{ 'c-darkgray' : !isActive }">
+      <div class="col-xs-12 col-md-6" :class="{ 'cl-accent' : !isActive }">
         <h3 class="m0 mb5">
           {{ $t('My newsletter') }}
         </h3>
       </div>
       <div class="col-xs-12 col-md-6 pr30">
         <div class="lh30 flex end-md" v-if="!isActive && editMode">
-          <a href="#" class="c-lightgray-secondary flex" @click.prevent="edit">
+          <a href="#" class="cl-tertiary flex" @click.prevent="edit">
             <span class="pr5">
               {{ $t('Edit newsletter preferences') }}
             </span>
-            <i class="material-icons c-lightgray-secondary">edit</i>
+            <i class="material-icons cl-tertiary">edit</i>
           </a>
         </div>
       </div>
@@ -40,7 +40,7 @@
           class="checkboxText ml15 lh25"
           @click="isActive ? newsletterPreferences.generalAgreement = !newsletterPreferences.generalAgreement : null"
         >
-          <span class="fs16 c-darkgray">I want to receive a newsletter, and agree to its terms</span>
+          <span class="fs16 cl-accent">I want to receive a newsletter, and agree to its terms</span>
         </div>
       </div>
       <div class="col-xs-12">
@@ -57,7 +57,7 @@
           class="checkboxText ml15 lh25"
           @click="isActive ? newsletterPreferences.men = !newsletterPreferences.men : null"
         >
-          <span class="fs16 c-darkgray">Men</span>
+          <span class="fs16 cl-accent">Men</span>
         </div>
       </div>
       <div class="col-xs-6 col-sm-6 col-md-3 mb25">
@@ -69,7 +69,7 @@
           class="checkboxText ml15 lh25"
           @click="isActive ? newsletterPreferences.women = !newsletterPreferences.women : null"
         >
-          <span class="fs16 c-darkgray">Women</span>
+          <span class="fs16 cl-accent">Women</span>
         </div>
       </div>
       <div class="hidden-xs hidden-sm col-md-6"/>
@@ -82,7 +82,7 @@
           class="checkboxText ml15 lh25"
           @click="isActive ? newsletterPreferences.kids = !newsletterPreferences.kids : null"
         >
-          <span class="fs16 c-darkgray">Kids</span>
+          <span class="fs16 cl-accent">Kids</span>
         </div>
       </div>
       <div class="col-xs-6 col-sm-6 col-md-3 mb25">
@@ -94,7 +94,7 @@
           class="checkboxText ml15 lh25"
           @click="isActive ? newsletterPreferences.home = !newsletterPreferences.home : null"
         >
-          <span class="fs16 c-darkgray">Home</span>
+          <span class="fs16 cl-accent">Home</span>
         </div>
       </div>
       <div class="hidden-xs hidden-sm col-md-6"/>
@@ -104,7 +104,7 @@
         </button-full>
       </div>
       <div class="col-xs-12 col-sm-6 mt25 bottom-button" v-show="isActive">
-        <a href="#" @click="exitSection" class="link no-underline fs16 c-darkgray">
+        <a href="#" @click="exitSection" class="link no-underline fs16 cl-accent">
           {{ $t('Cancel') }}
         </a>
       </div>
diff --git a/src/themes/default/components/core/blocks/MyAccount/MyProfile.vue b/src/themes/default/components/core/blocks/MyAccount/MyProfile.vue
index 4c9c6037e2..ac775921fc 100644
--- a/src/themes/default/components/core/blocks/MyAccount/MyProfile.vue
+++ b/src/themes/default/components/core/blocks/MyAccount/MyProfile.vue
@@ -2,18 +2,18 @@
   <div class="my-profile mb35">
     <!-- My profile header -->
     <div class="row mb15">
-      <div class="col-xs-12 col-md-6" :class="{ 'c-darkgray' : !isActive }">
+      <div class="col-xs-12 col-md-6" :class="{ 'cl-accent' : !isActive }">
         <h3 class="m0 mb5">
           {{ $t('My profile') }}
         </h3>
       </div>
       <div class="col-xs-12 col-md-6 pr30">
         <div class="lh30 flex end-md" v-if="!isActive && editMode">
-          <a href="#" class="c-lightgray-secondary flex" @click.prevent="edit">
+          <a href="#" class="cl-tertiary flex" @click.prevent="edit">
             <span class="pr5">
               {{ $t('Edit your profile') }}
             </span>
-            <i class="material-icons c-lightgray-secondary">edit</i>
+            <i class="material-icons cl-tertiary">edit</i>
           </a>
         </div>
       </div>
@@ -59,7 +59,7 @@
           <label for="changePassword"/>
         </div>
         <div class="checkboxText ml15 lh25" @click="changePassword = !changePassword">
-          <span class="fs16 c-darkgray">
+          <span class="fs16 cl-accent">
             {{ $t('Change my password') }}
           </span>
         </div>
@@ -67,14 +67,14 @@
       <div class="col-xs-12 col-sm-12 col-md-6 mb15 mt10" v-if="changePassword">
         <div class="pass-container relative mr35">
           <input
-            class="w-100 pr30 py10 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+            class="w-100 pr30 py10 border-box brdr-none brdr-bottom brdr-cl-primary h4"
             name="old-password"
             v-model="oldPassword"
             :type="passType.oldPass"
             :placeholder="$t('Current password *')"
             @input="$v.oldPassword.$touch()"
           >
-          <div class="icon absolute c-lightgray-secondary pointer">
+          <div class="icon absolute cl-tertiary pointer">
             <i class="material-icons" @click="togglePassType('oldPass')">{{ iconName.oldPass }}</i>
           </div>
         </div>
@@ -86,14 +86,14 @@
       <div class="col-xs-12 col-sm-12 col-md-6 mb15 mt10" v-if="changePassword">
         <div class="pass-container relative mr35">
           <input
-            class="w-100 pr30 py10 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+            class="w-100 pr30 py10 border-box brdr-none brdr-bottom brdr-cl-primary h4"
             name="password"
             v-model="password"
             :type="passType.pass"
             :placeholder="$t('New password *')"
             @input="$v.password.$touch()"
           >
-          <div class="icon absolute c-lightgray-secondary pointer">
+          <div class="icon absolute cl-tertiary pointer">
             <i class="material-icons" @click="togglePassType('pass')">{{ iconName.pass }}</i>
           </div>
         </div>
@@ -104,14 +104,14 @@
       <div class="col-xs-12 col-sm-12 col-md-6 mb15 mt10" v-if="changePassword">
         <div class="pass-container relative mr35">
           <input
-            class="w-100 pr30 py10 border-box brdr-none brdr-bottom brdr-c-lightgray-secondary h4"
+            class="w-100 pr30 py10 border-box brdr-none brdr-bottom brdr-cl-primary h4"
             name="password-confirm"
             v-model="rPassword"
             :type="passType.repeatPass"
             :placeholder="$t('Repeat new password *')"
           >
           <i
-            class="icon absolute c-lightgray-secondary material-icons pointer"
+            class="icon absolute cl-tertiary material-icons pointer"
             @click="togglePassType('repeatPass')"
           >
             {{ iconName.repeatPass }}
@@ -128,7 +128,7 @@
           <label for="addCompany"/>
         </div>
         <div class="checkboxText ml15 lh25" @click="addCompany = !addCompany">
-          <span class="fs16 c-darkgray">
+          <span class="fs16 cl-accent">
             {{ $t('I have a company and want to receive an invoice for every order') }}
           </span>
         </div>
@@ -202,7 +202,7 @@
         <select
           name="countries"
           v-model="userCompany.country"
-          :class="{'c-lightgray-secondary' : userCompany.country.length === 0}"
+          :class="{'cl-tertiary' : userCompany.country.length === 0}"
         >
           <option value="" disabled selected hidden>Country *</option>
           <option v-for="country in countries" :key="country.code" :value="country.code">{{ country.name }}</option>
@@ -233,7 +233,7 @@
         </button-full>
       </div>
       <div class="col-xs-12 col-sm-6 pt15 bottom-button">
-        <a href="#" @click="exitSection" class="link no-underline fs16 c-darkgray">
+        <a href="#" @click="exitSection" class="link no-underline fs16 cl-accent">
           {{ $t('Cancel') }}
         </a>
       </div>
@@ -252,7 +252,7 @@
             <label for="addCompanyFilled"/>
           </div>
           <div class="checkboxText ml15 lh25">
-            <span class="fs16 c-darkgray">{{ $t('I have a company and want to receive an invoice for every order') }}</span>
+            <span class="fs16 cl-accent">{{ $t('I have a company and want to receive an invoice for every order') }}</span>
           </div>
         </div>
         <p class="mb25" v-show="addCompany">{{ userCompany.company }}</p>
@@ -374,33 +374,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $black: map-get($colors, black);
-  $gray: map-get($colors, gray);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-hover: color(tertiary, $colors-background);
+$color-focus: color(black);
 
-  .pass-container {
-    input[type=password], input[type=text] {
-      &:focus {
-        outline: none;
-        border-color: $black;
-        transition: 0.3s all;
-      }
+.pass-container {
+  input[type=password], input[type=text] {
+    &:focus {
+      outline: none;
+      border-color: $color-focus;
+      transition: 0.3s all;
     }
+  }
 
-    .icon {
-      right: 0;
-      top: 10px;
+  .icon {
+    right: 0;
+    top: 10px;
 
-      &:hover {
-        color: $gray;
-      }
+    &:hover {
+      color: $color-hover;
     }
   }
+}
 
-  .button-container {
-    @media (max-width: 1200px) {
-      margin-bottom: 10px;
-      margin-top: 15px;
-    }
+.button-container {
+  @media (max-width: 1200px) {
+    margin-bottom: 10px;
+    margin-top: 15px;
   }
+}
 </style>
diff --git a/src/themes/default/components/core/blocks/MyAccount/MyShippingDetails.vue b/src/themes/default/components/core/blocks/MyAccount/MyShippingDetails.vue
index 3e8f893b43..42c6ac3a24 100644
--- a/src/themes/default/components/core/blocks/MyAccount/MyShippingDetails.vue
+++ b/src/themes/default/components/core/blocks/MyAccount/MyShippingDetails.vue
@@ -2,18 +2,18 @@
   <div class="my-shipping-details mb35">
     <!-- My shipping details header -->
     <div class="row mb15">
-      <div class="col-xs-12 col-md-6" :class="{ 'c-darkgray' : !isActive }">
+      <div class="col-xs-12 col-md-6" :class="{ 'cl-accent' : !isActive }">
         <h3 class="m0 mb5">
           {{ $t('My shipping details') }}
         </h3>
       </div>
       <div class="col-xs-12 col-md-6 pr30">
         <div class="lh30 flex end-md" v-if="!isActive && editMode">
-          <a href="#" class="c-lightgray-secondary flex" @click.prevent="edit">
+          <a href="#" class="cl-tertiary flex" @click.prevent="edit">
             <span class="pr5">
               {{ $t('Edit your shipping details') }}
             </span>
-            <i class="material-icons c-lightgray-secondary">edit</i>
+            <i class="material-icons cl-tertiary">edit</i>
           </a>
         </div>
       </div>
@@ -37,7 +37,7 @@
           <label for="useCompanyAddress"/>
         </div>
         <div class="checkboxText ml15 lh25" @click="fillCompanyAddress">
-          <span class="fs16 c-darkgray">{{ $t("Use my company's address details") }}</span>
+          <span class="fs16 cl-accent">{{ $t("Use my company's address details") }}</span>
         </div>
       </div>
       <div class="col-xs-12 col-sm-6 mb25">
@@ -84,7 +84,7 @@
         </button-full>
       </div>
       <div class="col-xs-12 col-sm-6 pt15 bottom-button">
-        <a href="#" @click="exitSection" class="link no-underline fs16 c-darkgray">
+        <a href="#" @click="exitSection" class="link no-underline fs16 cl-accent">
           {{ $t('Cancel') }}
         </a>
       </div>
@@ -100,7 +100,7 @@
             <label for="useCompanyAddressFilled"/>
           </div>
           <div class="checkboxText ml15 lh25">
-            <span class="fs16 c-darkgray">Use my company's address details</span>
+            <span class="fs16 cl-accent">Use my company's address details</span>
           </div>
         </div>
         <p class="mb25">{{ shippingDetails.company }}</p>
diff --git a/src/themes/default/components/core/blocks/Product/Related.vue b/src/themes/default/components/core/blocks/Product/Related.vue
index e50a2cee35..3cf5634085 100644
--- a/src/themes/default/components/core/blocks/Product/Related.vue
+++ b/src/themes/default/components/core/blocks/Product/Related.vue
@@ -6,7 +6,7 @@
     >
       <div>
         <header class="col-md-12">
-          <h2 class="align-center c-darkgray">
+          <h2 class="align-center cl-accent">
             {{ $t('Erin Recommends') }}
           </h2>
         </header>
@@ -24,7 +24,7 @@
     >
       <div>
         <header class="col-md-12">
-          <h2 class="align-center c-darkgray">
+          <h2 class="align-center cl-accent">
             {{ $t('Similar products') }}
           </h2>
         </header>
diff --git a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue b/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
index e36ebd6655..eb96dd466b 100644
--- a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
+++ b/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="searchpanel fixed mw-100 bg-white c-darkgray" :class="{ active: isOpen }">
+  <div class="searchpanel fixed mw-100 bg-cl-primary cl-accent" :class="{ active: isOpen }">
     <div class="row">
       <div class="col-md-12 end-xs">
-        <i class="material-icons p15 pointer c-darkgray" @click="closeSearchpanel">close</i>
+        <i class="material-icons p15 pointer cl-accent" @click="closeSearchpanel">close</i>
       </div>
     </div>
     <div class="col-md-12 end-xs">
@@ -14,7 +14,7 @@
         id="search"
         v-model="search"
         @input="makeSearch"
-        class="mr20 py10 brdr-none brdr-bottom brdr-c-lightgray-secondary no-outline h4"
+        class="mr20 py10 brdr-none brdr-bottom brdr-cl-primary no-outline h4"
         :placeholder="$t('Type what you are looking for...')"
         type="text"
       >
diff --git a/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue b/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
index ae1cc44384..924385f046 100644
--- a/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
+++ b/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="sidebar-menu fixed mw-100 bg-lightgray" :class="{ active: isOpen }">
+  <div class="sidebar-menu fixed mw-100 bg-cl-secondary" :class="{ active: isOpen }">
     <div class="row between-xs">
-      <div @click="closeMenu" class="flex-start px10 bg-white brdr-bottom brdr-c-lightgray">
+      <div @click="closeMenu" class="flex-start px10 bg-cl-primary brdr-bottom brdr-cl-bg-secondary">
         <sub-btn type="back" v-if="submenu.depth" />
         <search-icon class="p15 icon hidden-md" />
         <wishlist-icon class="p15 icon hidden-md" />
         <account-icon class="p15 icon hidden-md" />
       </div>
       <div
-        class="flex-end col-xs inline-flex pointer bg-white align-right end-xs brdr-bottom brdr-c-lightgray"
+        class="flex-end col-xs inline-flex pointer bg-cl-primary align-right end-xs brdr-bottom brdr-cl-bg-secondary"
         @click="closeMenu"
       >
         <i class="material-icons p15">close</i>
@@ -17,20 +17,20 @@
     <div class="row">
       <div class="col-xs-12 h4 serif">
         <ul class="p0 m0 relative sidebar-menu__list" :style="mainListStyles">
-          <li @click="closeMenu" class="brdr-bottom brdr-c-lightgray bg-white">
-            <router-link class="block px25 py20 c-darkgray no-underline" to="/" exact>
+          <li @click="closeMenu" class="brdr-bottom brdr-cl-bg-secondary bg-cl-primary">
+            <router-link class="block px25 py20 cl-accent no-underline" to="/" exact>
               {{ $t('Home') }}
             </router-link>
           </li>
           <li
-            class="brdr-bottom brdr-c-lightgray bg-white flex"
+            class="brdr-bottom brdr-cl-bg-secondary bg-cl-primary flex"
             :key="category.slug"
             @click="closeMenu"
             v-for="category in categories"
             v-if="category.product_count > 0 || category.children_data.length > 0"
           >
             <router-link
-              class="px25 py20 c-darkgray no-underline col-xs"
+              class="px25 py20 cl-accent no-underline col-xs"
               :to="{ name: 'category', params: { id: category.id, slug: category.slug }}"
             >
               {{ category.name }}
@@ -39,27 +39,27 @@
             <sub-category :category-links="category.children_data" :id="category.id"/>
           </li>
           <li @click="closeMenu">
-            <router-link class="block px25 py20 brdr-bottom brdr-c-alto c-darkgray no-underline" to="/magazine" exact>
+            <router-link class="block px25 py20 brdr-bottom brdr-cl-secondary cl-accent no-underline" to="/magazine" exact>
               {{ $t('Magazine') }}
             </router-link>
           </li>
           <li @click="closeMenu">
-            <router-link class="block px25 py20 brdr-bottom brdr-c-alto c-darkgray no-underline" to="/sale" exact>
+            <router-link class="block px25 py20 brdr-bottom brdr-cl-secondary cl-accent no-underline" to="/sale" exact>
               {{ $t('Sale') }}
             </router-link>
           </li>
           <li @click="closeMenu">
-            <router-link class="block px25 py20 brdr-bottom brdr-c-alto c-darkgray no-underline" to="/order-tracking" exact>
+            <router-link class="block px25 py20 brdr-bottom brdr-cl-secondary cl-accent no-underline" to="/order-tracking" exact>
               {{ $t('Track my order') }}
             </router-link>
           </li>
-          <li @click="closeMenu" class="brdr-bottom brdr-c-alto flex">
-            <router-link v-if="currentUser" class="block px25 py20 c-darkgray no-underline col-xs" to="/my-account" exact>
+          <li @click="closeMenu" class="brdr-bottom brdr-cl-secondary flex">
+            <router-link v-if="currentUser" class="block px25 py20 cl-accent no-underline col-xs" to="/my-account" exact>
               {{ $t('My account') }}
             </router-link>
             <sub-btn v-if="currentUser" class="flex-end center-self"/>
             <sub-category v-if="currentUser" :my-account-links="myAccountLinks" :id="'foo'"/>
-            <a v-if="!currentUser" href="#" @click="login" class="block px25 py20 c-darkgray no-underline">
+            <a v-if="!currentUser" href="#" @click="login" class="block px25 py20 cl-accent no-underline">
               {{ $t('My account') }}
             </a>
           </li>
@@ -175,13 +175,14 @@ ul {
 </style>
 
 <style lang="scss">
-@import '~theme/css/base/global_vars';
-$lightgray: map-get($colors, lightgray);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$bg-secondary: color(secondary, $colors-background);
 
 .sidebar-menu {
   li {
     &:hover {
-      background-color: $lightgray;
+      background-color: $bg-secondary;
     }
   }
 
diff --git a/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue b/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue
index 59e6deb06f..b67d845413 100644
--- a/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue
+++ b/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ul v-if="categoryLinks" class="sidebar-submenu absolute w-100 p0 bg-white" :style="styles">
-      <li class="brdr-bottom brdr-c-lightgray bg-white flex" :key="link.slug" v-for="link in categoryLinks">
+    <ul v-if="categoryLinks" class="sidebar-submenu absolute w-100 p0 bg-cl-primary" :style="styles">
+      <li class="brdr-bottom brdr-cl-bg-secondary bg-cl-primary flex" :key="link.slug" v-for="link in categoryLinks">
         <router-link
-          class="px25 py20 c-darkgray no-underline col-xs"
+          class="px25 py20 cl-accent no-underline col-xs"
           :to="{ name: 'category', params: { id: link.id, slug: link.slug }}"
         >
           {{ link.name }}
@@ -12,14 +12,14 @@
         <sub-category :category-links="link.children_data" :id="link.id" v-if="link.children_data.length"/>
       </li>
     </ul>
-    <ul v-else-if="myAccountLinks" class="sidebar-submenu absolute p0 bg-white" :style="styles">
-      <li class="brdr-bottom brdr-c-lightgray bg-white flex" :key="link.id" v-for="link in myAccountLinks">
-        <router-link class="px25 py20 c-darkgray no-underline col-xs" :to="'/my-account#' + link.anchor">
+    <ul v-else-if="myAccountLinks" class="sidebar-submenu absolute p0 bg-cl-primary" :style="styles">
+      <li class="brdr-bottom brdr-cl-bg-secondary bg-cl-primary flex" :key="link.id" v-for="link in myAccountLinks">
+        <router-link class="px25 py20 cl-accent no-underline col-xs" :to="'/my-account#' + link.anchor">
           {{ link.name }}
         </router-link>
       </li>
-      <li class="brdr-bottom brdr-c-lightgray bg-white flex">
-        <a href="#" class="px25 py20 c-darkgray no-underline col-xs" @click="logout">
+      <li class="brdr-bottom brdr-cl-bg-secondary bg-cl-primary flex">
+        <a href="#" class="px25 py20 cl-accent no-underline col-xs" @click="logout">
           {{ $t('Logout') }}
         </a>
       </li>
diff --git a/src/themes/default/components/core/blocks/Wishlist/Product.vue b/src/themes/default/components/core/blocks/Wishlist/Product.vue
index 54ed8be749..44b03c3fdd 100644
--- a/src/themes/default/components/core/blocks/Wishlist/Product.vue
+++ b/src/themes/default/components/core/blocks/Wishlist/Product.vue
@@ -11,7 +11,7 @@
         }">
           {{ product.name | htmlDecode }}
         </router-link>
-        <div class="h6 c-lightgray pt5">{{ product.sku }}</div>
+        <div class="h6 cl-bg-secondary pt5">{{ product.sku }}</div>
       </div>
     </div>
     <div class="col-xs flex py15 align-right">
@@ -24,7 +24,7 @@
         </span>
       </div>
       <div>
-        <div class="mt5"><span @click="removeItem"><remove-button class="c-darkgray" /></span></div>
+        <div class="mt5"><span @click="removeItem"><remove-button class="cl-accent" /></span></div>
       </div>
     </div>
   </li>
diff --git a/src/themes/default/components/core/blocks/Wishlist/RemoveButton.vue b/src/themes/default/components/core/blocks/Wishlist/RemoveButton.vue
index 94d588befc..ebb6e839d4 100644
--- a/src/themes/default/components/core/blocks/Wishlist/RemoveButton.vue
+++ b/src/themes/default/components/core/blocks/Wishlist/RemoveButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="brdr-none bg-transparent">
+  <button class="brdr-none bg-cl-transparent">
     {{ $t('Remove') }}
     <i class="material-icons h6">remove_shopping_cart</i>
   </button>
diff --git a/src/themes/default/components/core/blocks/Wishlist/Wishlist.vue b/src/themes/default/components/core/blocks/Wishlist/Wishlist.vue
index 302fce779d..b72af18e8b 100644
--- a/src/themes/default/components/core/blocks/Wishlist/Wishlist.vue
+++ b/src/themes/default/components/core/blocks/Wishlist/Wishlist.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="wishlist fixed mw-100 bg-white c-darkgray" :class="{ active: isOpen }">
+  <div class="wishlist fixed mw-100 bg-cl-primary cl-accent" :class="{ active: isOpen }">
     <div class="row">
       <div class="col-md-12 end-xs">
-        <i class="material-icons p15 pointer c-darkgray" @click="closeWishlist">close</i>
+        <i class="material-icons p15 pointer cl-accent" @click="closeWishlist">close</i>
       </div>
     </div>
-    <h2 v-if="items.length" class="c-darkgray ml30">
+    <h2 v-if="items.length" class="cl-accent ml30">
       {{ $t('Wishlist') }}
     </h2>
-    <h4 v-if="!items.length" class="c-darkgray ml30">
+    <h4 v-if="!items.length" class="cl-accent ml30">
       {{ $t('Your wishlist is empty.') }}
     </h4>
     <div v-if="!items.length" class="ml30">
diff --git a/src/themes/default/components/theme/ButtonFull.vue b/src/themes/default/components/theme/ButtonFull.vue
index 6307f2d971..2b39702898 100644
--- a/src/themes/default/components/theme/ButtonFull.vue
+++ b/src/themes/default/components/theme/ButtonFull.vue
@@ -3,9 +3,8 @@
     :is="link ? 'router-link' : 'button'"
     :type="!link ? type : false"
     :to="link"
-    class="no-outline button-full block brdr-none w-100 px10 py20 bg-darkgray ripple weight-400 h4 c-white"
+    class="no-outline button-full block brdr-none w-100 px10 py20 bg-cl-th-accent :bg-cl-th-secondary ripple weight-400 h4 cl-white"
     :class="{ 'no-underline pointer align-center border-box': link }"
-    v-focus-clean="{ class: 'no-outline' }"
   >
     <slot>
       Button
@@ -32,15 +31,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '~theme/css/base/global_vars';
-$emperor: map-get($colors, emperor);
-
-.button-full {
-  &:hover,
-  &:focus {
-    background-color: $emperor;
-  }
-}
-</style>
diff --git a/src/themes/default/components/theme/ButtonOutline.vue b/src/themes/default/components/theme/ButtonOutline.vue
index ee65c58bdd..ce25780bb5 100644
--- a/src/themes/default/components/theme/ButtonOutline.vue
+++ b/src/themes/default/components/theme/ButtonOutline.vue
@@ -2,10 +2,10 @@
   <component
     :is="link ? 'router-link' : 'button'"
     :to="link"
-    class="button-outline no-outline px40 py15 bg-transparent uppercase h4 no-underline"
+    class="button-outline no-outline px40 py15 bg-cl-transparent uppercase h4 no-underline"
     :class="{
-      light : color === 'light', 'brdr-white' : color === 'light', 'c-white' : color === 'light',
-      dark : color === 'dark', 'brdr-darkgray' : color === 'dark', 'c-gray-secondary' : color === 'dark',
+      light : color === 'light', 'brdr-white' : color === 'light', 'cl-white' : color === 'light',
+      dark : color === 'dark', 'brdr-darkgray' : color === 'dark', 'cl-secondary' : color === 'dark',
     }"
   >
     <slot>
@@ -34,17 +34,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $gray-secondary: map-get($colors, gray-secondary);
-  $white: map-get($colors, white);
-  $black: map-get($colors, black);
+  @import '~theme/css/variables/colors';
+  @import '~theme/css/helpers/functions/color';
+  $dark-border: color(secondary);
+  $white: color(white);
+  $black: color(black);
 
   .button-outline {
     border: 2px solid;
   }
   .dark {
     font-weight: 200;
-    border: 1px solid $gray-secondary;
+    border: 1px solid $dark-border;
     &:hover,
     &:focus {
       color: $white;
diff --git a/src/themes/default/components/theme/blocks/Home/Onboard.vue b/src/themes/default/components/theme/blocks/Home/Onboard.vue
index 8c3569acf1..1f63d4033c 100644
--- a/src/themes/default/components/theme/blocks/Home/Onboard.vue
+++ b/src/themes/default/components/theme/blocks/Home/Onboard.vue
@@ -1,10 +1,10 @@
 <template>
   <modal name="modal-onboard" class="modal-onboard">
     <div class="content relative flex middle-xs">
-      <i slot="close" class="modal-close material-icons p15 c-gray" @click="close">close</i>
+      <i slot="close" class="modal-close material-icons p15 cl-bg-tertiary" @click="close">close</i>
       <img src="/assets/logo.svg" alt="Vuestore" class="logo">
 
-      <div class="copy align-center c-gray-secondary weight-200">
+      <div class="copy align-center cl-secondary weight-200">
         <p class="h1">Welcome to Vue Storefront!</p>
         <div class="h4">
           <p>
@@ -19,13 +19,13 @@
           <p>
             <strong>
               If you want to use the solution or join our passionate PWA community - feel free to contact us via
-              <a href="mailto:contributors@vuestorefront.io" class="c-ocean-green"> e-mail</a>
+              <a href="mailto:contributors@vuestorefront.io" class="cl-success"> e-mail</a>
               or
-              <a href="https://vuestorefront.slack.com/" class="c-ocean-green"> Slack</a>.
+              <a href="https://vuestorefront.slack.com/" class="cl-success"> Slack</a>.
             </strong>
           </p>
           <p>
-            <button type="button" class="show-demo mt35 ripple brdr-none bg-ocean-green pointer c-white h4" @click="close">
+            <button type="button" class="show-demo mt35 ripple brdr-none bg-cl-th-success pointer cl-white h4" @click="close">
               Show me the demo
             </button>
           </p>
diff --git a/src/themes/default/components/theme/blocks/Inspirations/InspirationTile.vue b/src/themes/default/components/theme/blocks/Inspirations/InspirationTile.vue
index 00e0a26c3d..3254d0f672 100644
--- a/src/themes/default/components/theme/blocks/Inspirations/InspirationTile.vue
+++ b/src/themes/default/components/theme/blocks/Inspirations/InspirationTile.vue
@@ -3,7 +3,7 @@
     <router-link
       :to="{ name: product.type_id + '-product', params: { parentSku: product.sku, slug: product.slug }}"
     >
-      <div class="product-image bg-lightgray">
+      <div class="product-image bg-cl-secondary">
         <img :src="thumbnail" class="product-thumbnail"/>
       </div>
     </router-link>
diff --git a/src/themes/default/components/theme/blocks/PromotedOffers/PromotedOffers.vue b/src/themes/default/components/theme/blocks/PromotedOffers/PromotedOffers.vue
index 7be0cade4a..863eb51b43 100644
--- a/src/themes/default/components/theme/blocks/PromotedOffers/PromotedOffers.vue
+++ b/src/themes/default/components/theme/blocks/PromotedOffers/PromotedOffers.vue
@@ -8,7 +8,7 @@
       >
         <router-link :to="banner.link">
           <div
-            class="offer border-box p5 flex center-xs middle-xs c-white bg-darkgray"
+            class="offer border-box p5 flex center-xs middle-xs cl-white bg-cl-th-accent"
             v-lazy:background-image="banner.image"
           >
             <p class="subtitle m0 serif h3 uppercase">
@@ -29,7 +29,7 @@
         >
           <router-link :to="banner.link">
             <div
-              class="offer offer-small border-box p5 flex center-xs middle-xs c-white bg-darkgray"
+              class="offer offer-small border-box p5 flex center-xs middle-xs cl-white bg-cl-th-accent"
               v-lazy:background-image="banner.image"
             >
               <p class="subtitle m0 serif h3 uppercase">{{ banner.subtitle }}</p>
@@ -48,7 +48,7 @@
     >
       <router-link :to="banner.link">
         <div
-          class="offer offer-product border-box p5 flex center-xs middle-xs c-white bg-darkgray"
+          class="offer offer-product border-box p5 flex center-xs middle-xs cl-white bg-cl-th-accent"
           v-lazy:background-image="banner.image"
         >
           <p class="subtitle m0 serif h3 uppercase">
diff --git a/src/themes/default/components/theme/blocks/TileLinks/TileLink.vue b/src/themes/default/components/theme/blocks/TileLinks/TileLink.vue
index e5a4ebac03..b91308507c 100644
--- a/src/themes/default/components/theme/blocks/TileLinks/TileLink.vue
+++ b/src/themes/default/components/theme/blocks/TileLinks/TileLink.vue
@@ -2,10 +2,10 @@
   <div class="tile-link">
     <a :href="tile.account_link">
       <div
-        class="tile-image w-100 bg-lightgray"
+        class="tile-image w-100 bg-cl-secondary"
         v-lazy:background-image="tile.background_image"
       >
-        <div class="overlay w-100 flex center-xs middle-xs bg-white h4">@{{ tile.account_name }}</div>
+        <div class="overlay w-100 flex center-xs middle-xs bg-cl-primary h4">@{{ tile.account_name }}</div>
       </div>
     </a>
   </div>
diff --git a/src/themes/default/css/base/_color.scss b/src/themes/default/css/base/_color.scss
index 4405ff0dc9..401f7cb5ff 100644
--- a/src/themes/default/css/base/_color.scss
+++ b/src/themes/default/css/base/_color.scss
@@ -1,14 +1,16 @@
-@mixin color {
-  @each $color, $colorcode in $colors {
-    .bg-#{$color} {
-      background-color: #{$colorcode};
-    }
-  }
-  @each $color, $colorcode in $colors {
-    .c-#{$color} {
-      color: #{$colorcode};
-    }
-  }
-}
+// Colors / backgrounds
+// =======================
+// Generate colors selectors
+// .cl-{#name-of-color}
+@include color-selectors(map_merge($colors, $colors-theme), 'cl', 'color');
 
-@include color;
+// .cl-{#palette}-{#name-of-color}
+@include color-selectors($colors-background, 'cl-bg', 'color');
+@include color-selectors($colors-border, 'cl-brdr', 'color');
+
+// Generate background-color selectors
+// .bg-cl-{#name-of-color}
+@include color-selectors(map_merge($colors, $colors-background), 'bg-cl', 'background-color');
+
+// .bg-cl-#{#palette}-{#name-of-color}
+@include color-selectors($colors-theme, 'bg-cl-th', 'background-color');
diff --git a/src/themes/default/css/base/_global_vars.scss b/src/themes/default/css/base/_global_vars.scss
index 378408ee7f..88e1ee272c 100644
--- a/src/themes/default/css/base/_global_vars.scss
+++ b/src/themes/default/css/base/_global_vars.scss
@@ -1,23 +1,4 @@
-// Add new colors to the BOTTOM of the list, it's very important!
-$colors: (
-  white: #FFFFFF,
-  black: #000000,
-  gray: #8E8E8E,
-  lightgray: #F2F2F2,
-  darkgray: #333333,
-  alto: #E0E0E0,
-  emperor: #4F4F4F,
-  transparent: transparent,
-  gray-secondary: #828282,
-  lightgray-secondary: #BDBDBD,
-  red: #EB5757,
-  ocean-green: #4DBA87,
-  la-palma: #308C14,
-  russet: #775555
-);
-
-//@to-do make it more customizable - change colors to match their usage not color name so other people can customize it when creatign own theme
-
+// @todo move to separate file
 $z-index: (
   modal: 10,
   notification: 1000,
diff --git a/src/themes/default/css/helpers/_functions.scss b/src/themes/default/css/helpers/_functions.scss
new file mode 100644
index 0000000000..48a30f39da
--- /dev/null
+++ b/src/themes/default/css/helpers/_functions.scss
@@ -0,0 +1,3 @@
+// Global functions
+// ================
+@import 'functions/color'
diff --git a/src/themes/default/css/helpers/_mixins.scss b/src/themes/default/css/helpers/_mixins.scss
new file mode 100644
index 0000000000..03c91646e7
--- /dev/null
+++ b/src/themes/default/css/helpers/_mixins.scss
@@ -0,0 +1,3 @@
+// Global mixins
+// =============
+@import 'mixins/color-selectors'
diff --git a/src/themes/default/css/helpers/functions/_color.scss b/src/themes/default/css/helpers/functions/_color.scss
new file mode 100644
index 0000000000..57375dae72
--- /dev/null
+++ b/src/themes/default/css/helpers/functions/_color.scss
@@ -0,0 +1,16 @@
+/// An easy way to get colors from the $colors map
+/// @name color
+/// @param {String} $color - Color name
+/// @param {Map} $map [ map_merge($colors, $colors_theme] - Map of colors
+@function color($color, $map: map_merge($colors, $colors-theme), $variant: default) {
+  @if (type-of(map-get($map, $color)) == map) {
+    @if map_has_key(map-get($map, $color), $variant) {
+      @return map-get(map-get($map, $color), $variant)
+    } @else {
+      @return map-get(map-get($map, $color), default)
+    }
+  } @else {
+    @return map-get($map, $color)
+  }
+
+}
diff --git a/src/themes/default/css/helpers/mixins/_color-selectors.scss b/src/themes/default/css/helpers/mixins/_color-selectors.scss
new file mode 100644
index 0000000000..11d54da83a
--- /dev/null
+++ b/src/themes/default/css/helpers/mixins/_color-selectors.scss
@@ -0,0 +1,33 @@
+/// Generate colors values
+/// @name color-selectors
+/// @param {Map} $map [$colors] - Map with color values
+/// @param {String} $selector ['.cl'] - Selector to css class, .#{$selector}-#{$name-of-color}
+/// @param {String} $property ['color'] - CSS property
+@mixin color-selectors($map: $colors, $selector: 'cl', $property: 'color') {
+  @each $name, $value in $map {
+    // in case when color value is map with hover, focus variants
+    @if type-of($value) == map {
+      @if map_has_key($value, default) {
+        .#{$selector}-#{$name} {
+          #{$property}: map-get($value, default);
+        }
+      }
+
+      @if map_has_key($value, hover) {
+        .\:#{$selector}-#{$name}:hover {
+          #{$property}: map-get($value, hover);
+        }
+      }
+
+      @if map_has_key($value, focus) {
+        .\:#{$selector}-#{$name}:focus {
+          #{$property}: map-get($value, focus);
+        }
+      }
+    } @else {
+      .#{$selector}-#{$name} {
+        #{$property}: #{$value};
+      }
+    }
+  }
+}
diff --git a/src/themes/default/css/layout/_border.scss b/src/themes/default/css/layout/_border.scss
index 1b993cf598..a914731537 100644
--- a/src/themes/default/css/layout/_border.scss
+++ b/src/themes/default/css/layout/_border.scss
@@ -21,16 +21,14 @@ $border-radius: (
       border-bottom-style: solid;
     }
   }
-  @each $color, $colorcode in $colors {
-    .brdr-c-#{$color} {
-      border-color: #{$colorcode};
-    }
-  }
   @each $name, $value in $border-radius {
     .brdr-#{$name} {
       border-radius: #{$value};
     }
   }
+  @include color-selectors(map_merge($colors, $colors-border), 'brdr-cl', 'border-color');
+  @include color-selectors($colors-theme, 'brdr-cl-th', 'border-color');
+  @include color-selectors($colors-background, 'brdr-cl-bg', 'border-color');
 }
 
 .brdr-none {
diff --git a/src/themes/default/css/main.scss b/src/themes/default/css/main.scss
index b2ae14cda2..c0e43fbb8c 100644
--- a/src/themes/default/css/main.scss
+++ b/src/themes/default/css/main.scss
@@ -1,4 +1,7 @@
 // Base
+@import 'variables/variables';
+@import 'helpers/mixins';
+@import 'helpers/functions';
 @import 'base/base';
 @import 'base/flexbox-grid';
 @import 'base/global_vars';
diff --git a/src/themes/default/css/utilities/_utilities.scss b/src/themes/default/css/utilities/_utilities.scss
index 3e3cd75dee..5347c1e876 100644
--- a/src/themes/default/css/utilities/_utilities.scss
+++ b/src/themes/default/css/utilities/_utilities.scss
@@ -14,7 +14,7 @@ a:not(.no-underline):hover:after {
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: map-get($colors, lightgray-secondary);
+  background-color: color(primary, $colors-border)
 }
 
 .no-underline:hover:after {
diff --git a/src/themes/default/css/variables/_colors.scss b/src/themes/default/css/variables/_colors.scss
new file mode 100644
index 0000000000..5493a7769c
--- /dev/null
+++ b/src/themes/default/css/variables/_colors.scss
@@ -0,0 +1,62 @@
+// Colors
+// ======
+// @LandonSchropp's approach of naming color variables.
+// - http://davidwalsh.name/sass-color-variables-dont-suck
+// - http://www.color-blindness.com/color-name-hue/
+
+// General colors palette
+$colors: (
+  transparent: transparent,
+  black: #000,
+  white: #fff,
+  white-smoke: #f2f2f2,
+  gainsboro: #e0e0e0,
+  silver: #bdbdbd,
+  gray: #828282,
+  suva-gray: #8e8e8e,
+  matterhorn: #4f4f4f,
+  night-rider: #333,
+  burnt-sienna: #eb5757,
+  buccaneer: #755,
+  forest-green: #308c14,
+  puerto-rico: #4dba87
+);
+
+// Theme generic colors
+// Key: name of color
+// Value: color value or map with default, hover, focus color values
+$colors-theme: (
+  primary: (
+    default: map-get($colors, matterhorn),
+    hover: map-get($colors, night-rider)
+  ),
+  secondary: (
+    default: map-get($colors, gray),
+    hover: map-get($colors, matterhorn),
+  ),
+  accent: (
+    default: map-get($colors, night-rider),
+    hover: map-get($colors, black),
+  ),
+  tertiary: map-get($colors, silver),
+  success: map-get($colors, puerto-rico),
+  warning: map-get($colors, buccaneer),
+  error: map-get($colors, burnt-sienna)
+);
+
+$colors-border: (
+  primary: map-get($colors, silver),
+  secondary: map-get($colors, gainsboro),
+);
+
+$colors-background: (
+  primary: (
+    default: map-get($colors, white),
+    hover: map-get($colors, silver)
+  ),
+  secondary: (
+    default: map-get($colors, white-smoke),
+    hover: map-get($colors, gainsboro)
+  ),
+  tertiary: map-get($colors, suva-gray)
+);
diff --git a/src/themes/default/css/variables/_variables.scss b/src/themes/default/css/variables/_variables.scss
new file mode 100644
index 0000000000..1a5baa0a5f
--- /dev/null
+++ b/src/themes/default/css/variables/_variables.scss
@@ -0,0 +1,5 @@
+// Default theme variables
+// =======================
+
+// Colors
+@import 'colors';
diff --git a/src/themes/default/pages/Category.vue b/src/themes/default/pages/Category.vue
index c5e456fc52..898a618418 100644
--- a/src/themes/default/pages/Category.vue
+++ b/src/themes/default/pages/Category.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="category">
-    <header class="bg-lightgray py35 pl20">
+    <header class="bg-cl-secondary py35 pl20">
       <div class="container">
         <breadcrumbs :routes="breadcrumbs.routes" :active-route="category.name" />
         <h1 class="category-title mb10"> {{ category.name }} </h1>
@@ -8,7 +8,7 @@
       <div class="container">
         <div class="row m0">
           <button
-            class="col-xs-5 mt25 p15 mobile-filters-button bg-darkgray brdr-none c-white h5 weight-300 sans-serif"
+            class="col-xs-5 mt25 p15 mobile-filters-button bg-cl-th-accent brdr-none cl-white h5 weight-300 sans-serif"
             @click="openFilters"
           >
             {{ $t('Filters') }}
@@ -23,11 +23,11 @@
         </div>
         <div class="col-md-3 start-xs mobile-filters" v-if="mobileFilters">
           <div class="close-container absolute w-100">
-            <i class="material-icons p15 close c-darkgray" @click="closeFilters">close</i>
+            <i class="material-icons p15 close cl-accent" @click="closeFilters">close</i>
           </div>
           <sidebar class="mobile-filters-body" :filters="filters.available"/>
         </div>
-        <p class="col-xs-12 hidden-md m0 px20 c-gray-secondary">{{ productsCounter }} items</p>
+        <p class="col-xs-12 hidden-md m0 px20 cl-secondary">{{ productsCounter }} items</p>
         <div class="col-md-9 pt20 px10 border-box products-list">
           <div v-if="isCategoryEmpty" class="hidden-xs">
             {{ $t('No products found!') }}
diff --git a/src/themes/default/pages/Checkout.vue b/src/themes/default/pages/Checkout.vue
index bb8e5a268f..483f8ad95b 100644
--- a/src/themes/default/pages/Checkout.vue
+++ b/src/themes/default/pages/Checkout.vue
@@ -13,7 +13,7 @@
           <payment class="line relative" :is-active="activeSection.payment"/>
           <order-review class="line relative" :is-active="activeSection.orderReview"/>
         </div>
-        <div class="hidden-xs col-sm-5 bg-lightgray">
+        <div class="hidden-xs col-sm-5 bg-cl-secondary">
           <cart-summary />
         </div>
       </div>
@@ -57,21 +57,21 @@ export default {
 
 <style lang="scss">
 @import '~theme/css/base/text';
-@import '~theme/css/base/global_vars';
-$lightgray: map-get($colors, lightgray);
-$lightgray-secondary: map-get($colors, lightgray-secondary);
-$gray-secondary: map-get($colors, gray-secondary);
-$red: map-get($colors, red);
-$white: map-get($colors, white);
-$gray: map-get($colors, gray);
-$black: map-get($colors, black);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$bg-secondary: color(secondary, $colors-background);
+$color-tertiary: color(tertiary);
+$color-secondary: color(secondary);
+$color-error: color(error);
+$color-white: color(white);
+$color-black: color(black);
 
 #checkout {
   input[type=text], input[type=email], input[type=tel], select {
     @extend .h4;
     padding: 10px 0;
     border: none;
-    border-bottom: 1px solid $lightgray-secondary;
+    border-bottom: 1px solid $color-tertiary;
     width: calc(100% - 35px);
 
     @media (max-width: 767px) {
@@ -79,14 +79,14 @@ $black: map-get($colors, black);
     }
   }
   input::-webkit-input-placeholder {
-    color: $lightgray-secondary;
+    color: $color-tertiary;
   }
-  input:-moz-placeholder {
-    color: $lightgray-secondary;
+input:-moz-placeholder {
+    color: $color-tertiary;
   }
   input:focus, select:focus {
     outline: none;
-    border-color: $black;
+    border-color: $color-black;
     transition: 0.3s all;
   }
   select {
@@ -103,7 +103,7 @@ $black: map-get($colors, black);
     pointer-events: none;
   }
   .validation-error{
-    color: $red;
+    color: $color-error;
     display: block;
   }
   .number-circle {
@@ -132,7 +132,7 @@ $black: map-get($colors, black);
       z-index: -1;
       width: 1px;
       height: 100%;
-      background-color: $lightgray;
+      background-color: $bg-secondary;
 
       @media (max-width: 768px) {
         display: none;
@@ -142,7 +142,7 @@ $black: map-get($colors, black);
 
   .checkout-title {
     @media (max-width: 767px) {
-      background-color: $lightgray;
+      background-color: $bg-secondary;
       margin-bottom: 25px;
 
       h1 {
@@ -163,8 +163,8 @@ $black: map-get($colors, black);
       height: 23px;
       top: 0;
       left: 0;
-      background: $white;
-      border: 1px solid $gray-secondary;
+      background: $color-white;
+      border: 1px solid $color-secondary;
 
       &:after {
         content: '';
@@ -174,7 +174,7 @@ $black: map-get($colors, black);
         background: transparent;
         top: 6px;
         left: 5px;
-        border: 3px solid $white;
+        border: 3px solid $color-white;
         border-top: none;
         border-right: none;
         transform: rotate(-45deg);
@@ -182,7 +182,7 @@ $black: map-get($colors, black);
     }
 
     input[type=checkbox]:checked + label {
-      background: $gray-secondary;
+      background: $color-secondary;
     }
   }
 
@@ -239,7 +239,7 @@ $black: map-get($colors, black);
       height: 25px;
       width: 25px;
       border-radius: 50%;
-      border: 1px solid $lightgray;
+      border: 1px solid $bg-secondary;
 
       &:after {
         content: "";
@@ -250,7 +250,7 @@ $black: map-get($colors, black);
         width: 19px;
         height: 19px;
         border-radius: 50%;
-        background: $gray-secondary;
+        background: $color-secondary;
       }
     }
 
diff --git a/src/themes/default/pages/Compare.vue b/src/themes/default/pages/Compare.vue
index 3ebeb40b8b..41b70b25a7 100644
--- a/src/themes/default/pages/Compare.vue
+++ b/src/themes/default/pages/Compare.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="compare">
-    <div class="bg-lightgray py35 pl20">
+    <div class="bg-cl-secondary py35 pl20">
       <div class="container">
         <breadcrumbs :routes="[{name: 'Homepage', route_link: '/'}]" active-route="Compare"/>
         <h2>{{ title }}</h2>
@@ -29,7 +29,7 @@
                       </td>
                     </tr>
                   </thead>
-                  <tbody class="brdr-bottom brdr-c-alto">
+                  <tbody class="brdr-bottom brdr-cl-secondary">
                     <tr>
                       <th/>
                       <td v-for="(product, index) in items" :key="index" class="p5">
@@ -37,7 +37,7 @@
                       </td>
                     </tr>
                   </tbody>
-                  <tbody class="brdr-bottom brdr-c-alto">
+                  <tbody class="brdr-bottom brdr-cl-secondary">
                     <tr>
                       <th class="p15 align-left">SKU</th>
                       <td v-for="(product, index) in items" :key="index" class="p15">
@@ -68,7 +68,7 @@
               </div>
             </div>
             <template v-else>
-              <h4 class="c-darkgray ml30">
+              <h4 class="cl-accent ml30">
                 {{ $t('You have no items to compare.') }}
               </h4>
             </template>
@@ -98,29 +98,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $alto: map-get($colors, alto);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$border-secondary: color(secondary, $colors-border);
 
-  .compare-wrapper {
-    overflow-x: auto;
-  }
+.compare-wrapper {
+  overflow-x: auto;
+}
 
-  table {
-    table-layout: fixed;
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
+table {
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 
-  th {
-    border-right: 1px solid $alto;
-  }
+th {
+  border-right: 1px solid $border-secondary;
+}
 
-  td,
-  th {
-    width: 180px;
+td,
+th {
+  width: 180px;
 
-    &:last-child {
-      border-right: 1px solid $alto;
-    }
+  &:last-child {
+    border-right: 1px solid $border-secondary;
   }
+}
 </style>
diff --git a/src/themes/default/pages/Home.vue b/src/themes/default/pages/Home.vue
index ddb733f8bc..ad0b2742a7 100755
--- a/src/themes/default/pages/Home.vue
+++ b/src/themes/default/pages/Home.vue
@@ -7,7 +7,7 @@
     <section class="new-collection container px15">
       <div>
         <header class="col-md-12">
-          <h2 class="align-center c-darkgray">{{ $t('Everything new') }}</h2>
+          <h2 class="align-center cl-accent">{{ $t('Everything new') }}</h2>
         </header>
       </div>
       <div class="row center-xs">
@@ -20,7 +20,7 @@
     <section class="container pb60">
       <div class="row center-xs">
         <header class="col-md-12 pt40">
-          <h2 class="align-center c-darkgray">{{ $t('Get inspired') }}</h2>
+          <h2 class="align-center cl-accent">{{ $t('Get inspired') }}</h2>
         </header>
       </div>
       <tile-links />
diff --git a/src/themes/default/pages/MyAccount.vue b/src/themes/default/pages/MyAccount.vue
index ab242a53a2..7685740c82 100644
--- a/src/themes/default/pages/MyAccount.vue
+++ b/src/themes/default/pages/MyAccount.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="my_account">
-    <div class="bg-lightgray py35 pl20">
+    <div class="bg-cl-secondary py35 pl20">
       <div class="container">
         <breadcrumbs :routes="[{name: 'Homepage', route_link: '/'}]" active-route="My Account" />
         <h1>{{ $t('My Account') }}</h1>
@@ -13,7 +13,7 @@
           <nav class="static-menu serif h4 mb35">
             <ul class="m0 p0">
               <li class="mb10" v-for="(page, index) in navigation" :key="index">
-                <a :href="page.link" class="c-darkgray" @click="notify(page.title)">{{ page.title }}</a>
+                <a :href="page.link" class="cl-accent" @click="notify(page.title)">{{ page.title }}</a>
               </li>
             </ul>
           </nav>
@@ -47,172 +47,173 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '~theme/css/base/text';
-  @import '~theme/css/base/global_vars';
-  $lightgray: map-get($colors, lightgray);
-  $gray-secondary: map-get($colors, gray-secondary);
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
-  $black: map-get($colors, black);
-  $white: map-get($colors, white);
-  $red: map-get($colors, red);
-
-  #my_account {
-    input[type=text], input[type=email], input[type=tel], select {
-      @extend .h4;
-      padding: 10px 0;
-      border: none;
-      border-bottom: 1px solid $lightgray-secondary;
-      width: calc(100% - 35px);
-    }
-    input::-webkit-input-placeholder {
-      color: $lightgray-secondary;
-    }
-    input:-moz-placeholder {
-      color: $lightgray-secondary;
-    }
-    input:focus, select:focus {
-      outline: none;
-      border-color: $black;
-      transition: 0.3s all;
-    }
-    select {
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      border-radius: 0;
-      background-color: transparent;
-    }
-    h4 {
-      @extend .weight-200;
-    }
-    .button-disabled {
-      opacity: 0.3;
-      pointer-events: none;
-    }
-    .validation-error{
-      color: $red;
+@import '~theme/css/base/text';
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$bg-secondary: color(secondary, $colors-background);
+$color-tertiary: color(tertiary);
+$color-secondary: color(secondary);
+$color-error: color(error);
+$color-white: color(white);
+$color-black: color(black);
+
+#my_account {
+  input[type=text], input[type=email], input[type=tel], select {
+    @extend .h4;
+    padding: 10px 0;
+    border: none;
+    border-bottom: 1px solid $color-tertiary;
+    width: calc(100% - 35px);
+  }
+  input::-webkit-input-placeholder {
+    color: $color-tertiary;
+  }
+  input:-moz-placeholder {
+    color: $color-tertiary;
+  }
+  input:focus, select:focus {
+    outline: none;
+    border-color: $color-black;
+    transition: 0.3s all;
+  }
+  select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    border-radius: 0;
+    background-color: transparent;
+  }
+  h4 {
+    @extend .weight-200;
+  }
+  .button-disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+  .validation-error{
+    color: $color-error;
+    display: block;
+  }
+  .number-circle {
+    width: 35px;
+    height: 35px;
+  }
+  .line {
+    &:after {
+      content: '';
       display: block;
+      position: absolute;
+      top: 0;
+      left: 17px;
+      z-index: -1;
+      width: 1px;
+      height: 100%;
+      background-color: $bg-secondary;
     }
-    .number-circle {
-      width: 35px;
-      height: 35px;
-    }
-    .line {
+  }
+
+  .checkboxStyled {
+    width: 23px;
+    position: relative;
+    display: table-cell;
+
+    label {
+      cursor: pointer;
+      position: absolute;
+      width: 23px;
+      height: 23px;
+      top: 0;
+      left: 0;
+      background: $color-white;
+      border:1px solid $color-secondary;
+
       &:after {
         content: '';
-        display: block;
         position: absolute;
-        top: 0;
-        left: 17px;
-        z-index: -1;
-        width: 1px;
-        height: 100%;
-        background-color: $lightgray;
+        width: 11px;
+        height: 5px;
+        background: transparent;
+        top: 6px;
+        left: 5px;
+        border: 3px solid $color-white;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
       }
     }
 
-    .checkboxStyled {
-      width: 23px;
-      position: relative;
-      display: table-cell;
+    input[type=checkbox]:checked + label {
+      background: $color-secondary;
+    }
+  }
 
-      label {
-        cursor: pointer;
-        position: absolute;
-        width: 23px;
-        height: 23px;
-        top: 0;
-        left: 0;
-        background: $white;
-        border:1px solid $gray-secondary;
-
-        &:after {
-          content: '';
-          position: absolute;
-          width: 11px;
-          height: 5px;
-          background: transparent;
-          top: 6px;
-          left: 5px;
-          border: 3px solid $white;
-          border-top: none;
-          border-right: none;
-          transform: rotate(-45deg);
-        }
-      }
+  .checkboxText {
+    display: table-cell;
+    cursor: pointer;
+    padding-left: 10px;
 
-      input[type=checkbox]:checked + label {
-        background: $gray-secondary;
-      }
+    span {
+      vertical-align: middle;
     }
+  }
 
-    .checkboxText {
-      display: table-cell;
-      cursor: pointer;
-      padding-left: 10px;
+  .side-menu {
+    display: block;
 
-      span {
-        vertical-align: middle;
-      }
+    @media (max-width: 991px) {
+      display: none;
     }
 
-    .side-menu {
-      display: block;
-
-      @media (max-width: 991px) {
-        display: none;
+    .static-menu {
+      ul {
+        list-style: none;
       }
 
-      .static-menu {
-        ul {
-          list-style: none;
-        }
-
-        a {
-          position: relative;
-        }
-
-        a::after {
-          content: "";
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 1px;
-          background-color: $lightgray-secondary;
-        }
-
-        a:hover::after,
-        .router-link-active::after {
-          opacity: 0;
-        }
+      a {
+        position: relative;
       }
 
-      .static-content {
-        font-size: 1.2em;
-        line-height: 2.1em;
+      a::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: $color-tertiary;
+      }
 
-        *:first-of-type {
-          margin-top: 0;
-        }
+      a:hover::after,
+      .router-link-active::after {
+        opacity: 0;
       }
     }
 
-    .link {
-      text-decoration: underline;
-    }
+    .static-content {
+      font-size: 1.2em;
+      line-height: 2.1em;
 
-    .bottom-button {
-      @media (max-width: 767px) {
-        text-align: center;
-        padding-left: 0px !important;
+      *:first-of-type {
+        margin-top: 0;
       }
     }
+  }
 
-    .col-xs-12 {
-      @media (max-width: 767px) {
-        padding-left: 15px;
-        padding-right: 15px;
-      }
+  .link {
+    text-decoration: underline;
+  }
+
+  .bottom-button {
+    @media (max-width: 767px) {
+      text-align: center;
+      padding-left: 0px !important;
     }
   }
+
+  .col-xs-12 {
+    @media (max-width: 767px) {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+}
 </style>
diff --git a/src/themes/default/pages/PageNotFound.vue b/src/themes/default/pages/PageNotFound.vue
index 051c30e18c..c08023c9a6 100644
--- a/src/themes/default/pages/PageNotFound.vue
+++ b/src/themes/default/pages/PageNotFound.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="page_not_found">
-    <section class="bg-lightgray py35 px20">
+    <section class="bg-cl-secondary py35 px20">
       <div class="container">
         <h2>
           {{ $t("We can't find the page") }}
         </h2>
       </div>
     </section>
-    <section class="bg-white py35 px20">
+    <section class="bg-cl-primary py35 px20">
       <div class="container">
         <div class="lh16 h5 weight-400">
           <p>
@@ -15,17 +15,17 @@
           </p>
           <p>
             {{ $t('If you need an assistance you can drop us a line on') }}
-            <router-link to="/" class="c-gray-secondary no-underline">
+            <router-link to="/" class="cl-secondary no-underline">
               {{ $t('a chat') }}
             </router-link>
             {{ $t('or write to us through') }}
-            <router-link to="/contact" class="c-gray-secondary no-underline">
+            <router-link to="/contact" class="cl-secondary no-underline">
               {{ $t('a contact page') }}
             </router-link>.
           </p>
           <p>
             {{ $t('You can also use') }}
-            <a href="#" class="c-gray-secondary no-underline" @click="toggleSearchpanel">
+            <a href="#" class="cl-secondary no-underline" @click="toggleSearchpanel">
               {{ $t('search') }}
             </a>
             {{ $t('to find product you were looking for.') }}
diff --git a/src/themes/default/pages/Product.vue b/src/themes/default/pages/Product.vue
index c59db7013a..b4b817c541 100644
--- a/src/themes/default/pages/Product.vue
+++ b/src/themes/default/pages/Product.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="product">
-    <section class="bg-lightgray py30 px20 product-top-section">
+    <section class="bg-cl-secondary py30 px20 product-top-section">
       <div class="container">
         <breadcrumbs :routes="breadcrumbs.routes" :active-route="breadcrumbs.name"/>
         <section class="row py35 m0 data-wrapper">
@@ -10,18 +10,18 @@
             </transition>
           </div>
           <div class="col-md-5 col-xs-12 px15 data">
-            <div class="uppercase c-gray-secondary">
+            <div class="uppercase cl-secondary">
               sku: {{ product.sku }}
             </div>
-            <h1 class="mb20 mt0 c-darkgray product-name">
+            <h1 class="mb20 mt0 cl-accent product-name">
               {{ product.name | htmlDecode }}
             </h1>
             <div class="mb30 price" v-if="product.type_id !== 'grouped'">
               <div
-                class="h3 c-gray-secondary"
+                class="h3 cl-secondary"
                 v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
               >
-                <span class="c-red">
+                <span class="cl-error">
                   {{ product.priceInclTax | price }}
                 </span>&nbsp;
                 <span class="price-original h4">
@@ -29,14 +29,14 @@
                 </span>
               </div>
               <div
-                class="h3 c-gray"
+                class="h3 cl-bg-tertiary"
                 v-if="!product.special_price && product.priceInclTax"
               >
                 {{ product.priceInclTax | price }}
               </div>
             </div>
             <div
-              class="c-emperor variants"
+              class="cl-primary variants"
               v-if="product.type_id =='configurable' && !loading"
             >
               <div
@@ -80,7 +80,7 @@
                     v-if="option.label == 'Size'"
                     class="
                       p0 ml30 inline-flex middle-xs weight-700 uppercase
-                      no-underline action size-guide pointer c-lightgray-secondary
+                      no-underline action size-guide pointer cl-tertiary
                     "
                   >
                     <i class="pr5 material-icons">accessibility</i>
@@ -106,8 +106,8 @@
                 <button
                   @click="addToFavorite"
                   class="
-                    p0 inline-flex middle-xs bg-transparent brdr-none
-                    action weight-700 h5 uppercase pointer c-lightgray-secondary
+                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
+                    action weight-700 h5 uppercase pointer cl-tertiary
                   "
                   type="button"
                 >
@@ -124,8 +124,8 @@
                 <button
                   @click="addToCompare"
                   class="
-                    p0 inline-flex middle-xs bg-transparent brdr-none
-                    action weight-700 h5 uppercase pointer c-lightgray-secondary
+                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
+                    action weight-700 h5 uppercase pointer cl-tertiary
                   "
                   type="button"
                 >
@@ -143,7 +143,7 @@
         </section>
       </div>
     </section>
-    <section class="container pt50 pb20 px20 c-darkgray details">
+    <section class="container pt50 pb20 px20 cl-accent details">
       <h2 class="h3 m0 mb10 sans-serif">
         {{ $t('Product details') }}
       </h2>
@@ -151,7 +151,7 @@
         <div class="row between-md m0">
           <div class="col-md-5">
             <div
-              class="lh30 c-gray-secondary"
+              class="lh30 cl-secondary"
               v-html="product.description"
             />
           </div>
@@ -217,145 +217,145 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray: map-get($colors, lightgray);
-  $gray-secondary: map-get($colors, gray-secondary);
-  $black: map-get($colors, black);
-  $emperor: map-get($colors, emperor);
-  $white: map-get($colors, white);
-  $red: map-get($colors, red);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$color-primary: color(primary);
+$color-tertiary: color(tertiary);
+$color-secondary: color(secondary);
+$color-white: color(white);
+$bg-secondary: color(secondary, $colors-background);
 
-  .data-wrapper {
-    @media (max-width: 767px) {
-      padding: 0;
-    }
+.data-wrapper {
+  @media (max-width: 767px) {
+    padding: 0;
   }
+}
 
-  .data {
-    @media (max-width: 767px) {
-      border-bottom: 1px solid $lightgray;
-    }
+.data {
+  @media (max-width: 767px) {
+    border-bottom: 1px solid $bg-secondary;
   }
+}
 
-  .image {
-    @media (max-width: 1023px) {
-      margin-bottom: 20px;
-      padding: 20px 0 30px 0;
-      background-color: $lightgray;
-    }
+.image {
+  @media (max-width: 1023px) {
+    margin-bottom: 20px;
+    padding: 20px 0 30px 0;
+    background-color: $bg-secondary;
   }
+}
 
-  .product-name {
-    @media (max-width: 767px) {
-      margin-top: 10px;
-      font-size: 36px;
-    }
+.product-name {
+  @media (max-width: 767px) {
+    margin-top: 10px;
+    font-size: 36px;
   }
+}
 
-  .price {
-    @media (max-width: 767px) {
-      color: $emperor;
-    }
+.price {
+  @media (max-width: 767px) {
+    color: $color-primary;
   }
+}
 
-  .variants-label {
-    @media (max-width: 767px) {
-      font-size: 14px;
-    }
+.variants-label {
+  @media (max-width: 767px) {
+    font-size: 14px;
   }
+}
 
-  .variants-wrapper {
-    @media (max-width: 767px) {
-      padding-bottom: 30px;
-    }
-
-   .sizes {
-      @media (max-width: 767px) {
-        width: 60%;
-      }
-    }
-
-    .size-guide {
-      height: 40px;
-      @media (max-width: 767px) {
-        width: 40%;
-        margin-left: 0;
-      }
-    }
+.variants-wrapper {
+  @media (max-width: 767px) {
+    padding-bottom: 30px;
   }
 
-  .product-top-section {
+ .sizes {
     @media (max-width: 767px) {
-      padding: 0;
-      background-color: $white;
+      width: 60%;
     }
   }
 
-  .add-to-buttons {
+  .size-guide {
+    height: 40px;
     @media (max-width: 767px) {
-      padding-top: 30px;
-      margin-bottom: 40px;
+      width: 40%;
+      margin-left: 0;
     }
   }
+}
 
-  .details {
-    @media (max-width: 767px) {
-      padding: 50px 15px 15px;
-    }
+.product-top-section {
+  @media (max-width: 767px) {
+    padding: 0;
+    background-color: $color-white;
   }
+}
 
-  .details-wrapper {
-    @media (max-width: 767px) {
-      position: relative;
-      max-height: 140px;
-      overflow: hidden;
-      transition: all 0.3s ease;
-      font-size: 14px;
-    }
+.add-to-buttons {
+  @media (max-width: 767px) {
+    padding-top: 30px;
+    margin-bottom: 40px;
   }
+}
 
-  .details-overlay {
-    @media (max-width: 767px) {
-      position: absolute;
-      height: 75%;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      margin: 0;
-      cursor: pointer;
-      background: linear-gradient(rgba($white, 0), rgba($white, 1));
-      &.hidden {
-        display: none;
-      }
-    }
+.details {
+  @media (max-width: 767px) {
+    padding: 50px 15px 15px;
   }
+}
 
-  .price-original {
-    text-decoration: line-through;
+.details-wrapper {
+  @media (max-width: 767px) {
+    position: relative;
+    max-height: 140px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    font-size: 14px;
   }
+}
 
-  .action {
-    &:hover {
-      color: $gray-secondary;
+.details-overlay {
+  @media (max-width: 767px) {
+    position: absolute;
+    height: 75%;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    cursor: pointer;
+    background: linear-gradient(rgba($color-white, 0), rgba($color-white, 1));
+    &.hidden {
+      display: none;
     }
   }
+}
 
-  .attributes {
-    list-style-type: none;
-  }
+.price-original {
+  text-decoration: line-through;
+}
 
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s;
+.action {
+  &:hover {
+    color: $color-secondary;
   }
+}
 
-  .fade-enter,
-  .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-    opacity: 0;
-  }
+.attributes {
+  list-style-type: none;
+}
 
-  .product-image {
-    mix-blend-mode: multiply;
-    width: 460px;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.product-image {
+  mix-blend-mode: multiply;
+  width: 460px;
+}
 </style>
diff --git a/src/themes/default/pages/Static.vue b/src/themes/default/pages/Static.vue
index 5b8fbd59f0..d66e433387 100644
--- a/src/themes/default/pages/Static.vue
+++ b/src/themes/default/pages/Static.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-lightgray py35 pl20">
+    <div class="bg-cl-secondary py35 pl20">
       <div class="container">
         <breadcrumbs :routes="[{name: 'Homepage', route_link: '/'}]" :active-route="$props.title" />
         <h2>{{ $props.title }}</h2>
@@ -13,7 +13,7 @@
           <nav class="static-menu serif h4 mb35">
             <ul class="m0 p0">
               <li class="mb10" v-for="page in navigation" :key="page.id">
-                <router-link :to="page.link" class="c-darkgray relative">{{ page.title }}</router-link>
+                <router-link :to="page.link" class="cl-accent relative">{{ page.title }}</router-link>
               </li>
             </ul>
           </nav>
@@ -78,33 +78,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~theme/css/base/global_vars';
-  $lightgray-secondary: map-get($colors, lightgray-secondary);
+@import '~theme/css/variables/colors';
+@import '~theme/css/helpers/functions/color';
+$border-primary: color(primary, $colors-border);
 
-  .static-menu {
-    ul {
-      list-style: none;
-    }
+.static-menu {
+  ul {
+    list-style: none;
+  }
 
-    a::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: $lightgray-secondary;
-    }
+  a::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: $border-primary;
+  }
 
-    a:hover::after,
-    .router-link-active::after {
-      opacity: 0;
-    }
+  a:hover::after,
+  .router-link-active::after {
+    opacity: 0;
   }
+}
 
-  .static-content {
-    *:first-of-type {
-      margin-top: 0;
-    }
+.static-content {
+  *:first-of-type {
+    margin-top: 0;
   }
+}
 </style>
diff --git a/src/themes/theme-starter/package-lock.json b/src/themes/theme-starter/package-lock.json
new file mode 100644
index 0000000000..76c64f061e
--- /dev/null
+++ b/src/themes/theme-starter/package-lock.json
@@ -0,0 +1,5 @@
+{
+  "name": "vue-storefront-theme-starter",
+  "version": "1.0.0",
+  "lockfileVersion": 1
+}