diff --git a/src/components/HdAlert.vue b/src/components/HdAlert.vue
index e7b6d0845..8ed15d743 100644
--- a/src/components/HdAlert.vue
+++ b/src/components/HdAlert.vue
@@ -80,7 +80,7 @@ export default {
 .alert {
   $root: &;
   display: flex;
-  padding: $inset-s;
+  padding: $sp-s;
   @include font('text-small');
   border-width: 1px;
   border-style: solid;
@@ -110,15 +110,15 @@ export default {
   }
 
   &--no-icon {
-    padding: $stack-s $inline-m;
+    padding: $sp-s $sp-m;
   }
 
   &__icon {
     width: 24px;
     align-self: flex-start;
     flex-shrink: 0;
-    margin-top: $stack-xxs;
-    margin-right: $inline-s;
+    margin-top: $sp-xxs;
+    margin-right: $sp-s;
 
     ::v-deep path {
       #{$root}--success & {
diff --git a/src/components/HdBadge.vue b/src/components/HdBadge.vue
index 875be853c..6fb7f14a9 100644
--- a/src/components/HdBadge.vue
+++ b/src/components/HdBadge.vue
@@ -132,7 +132,7 @@ export default {
       font-size: 18px;
       line-height: 28px;
       border-radius: 4px;
-      padding: $stack-xs $inline-s;
+      padding: $sp-xs $sp-s;
       cursor: default;
     }
 
@@ -140,8 +140,8 @@ export default {
       display: none;
       width: 24px;
       height: 24px;
-      margin-left: $inline-m;
-      margin-right: $inline-s;
+      margin-left: $sp-m;
+      margin-right: $sp-s;
 
       &::v-deep path {
         fill: currentColor;
@@ -151,7 +151,7 @@ export default {
     ::v-deep  &__icon{
       width: 14px;
       height: 14px;
-      margin-right: $inline-s;
+      margin-right: $sp-s;
     }
 
     &__details{
@@ -160,10 +160,10 @@ export default {
       white-space: nowrap;
       overflow: hidden;
 
-      padding: $inset-s;
+      padding: $sp-s;
       padding-top: 0;
-      border-bottom-left-radius: $inline-xs;
-      border-bottom-right-radius: $inline-xs;
+      border-bottom-left-radius: $sp-xs;
+      border-bottom-right-radius: $sp-xs;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       font-weight: normal;
diff --git a/src/components/HdCalendar.vue b/src/components/HdCalendar.vue
index 1e2af9532..82df7498a 100644
--- a/src/components/HdCalendar.vue
+++ b/src/components/HdCalendar.vue
@@ -196,7 +196,7 @@ export default {
   &__header {
     text-align: center;
     position: relative;
-    margin-bottom: $stack-m;
+    margin-bottom: $sp-m;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -204,7 +204,7 @@ export default {
       font-size: 14px;
       line-height: 20px;
       font-weight: bold;
-      margin: 0 $stack-xl;
+      margin: 0 $sp-xl;
 
       @media (min-width: $break-mobile) {
         font-size: 18px;
@@ -213,30 +213,30 @@ export default {
     }
 
     @media (min-width: $break-mobile) {
-      margin-bottom: $stack-s * 3;
+      margin-bottom: $sp-s * 3;
     }
   }
   &__row {
     display: flex;
-    margin-bottom: $stack-m;
+    margin-bottom: $sp-m;
 
     @media (min-width: $break-mobile) {
-      margin-bottom: $stack-m;
+      margin-bottom: $sp-m;
     }
 
     &__item {
       width: calc(100% / 7);
       text-align: center;
       &:not(:last-child) {
-        margin-right: $inline-m;
+        margin-right: $sp-m;
       }
     }
   }
   &__days {
-    margin-bottom: $stack-m;
+    margin-bottom: $sp-m;
 
     @media (min-width: $break-mobile) {
-      margin-bottom: $stack-s * 3;
+      margin-bottom: $sp-s * 3;
     }
   }
   &__day {
diff --git a/src/components/HdDashedList.vue b/src/components/HdDashedList.vue
index 9bbc878a9..b4468eb01 100644
--- a/src/components/HdDashedList.vue
+++ b/src/components/HdDashedList.vue
@@ -57,8 +57,8 @@ $leaders-border: 1px dashed getShade($neutral-gray, 50);
   background-color: inherit;
 
   &__title {
-    margin-top: $stack-l;
-    margin-bottom: $stack-s;
+    margin-top: $sp-l;
+    margin-bottom: $sp-s;
     color: $neutral-gray;
     font-weight: 700;
   }
@@ -76,7 +76,7 @@ $leaders-border: 1px dashed getShade($neutral-gray, 50);
 .dashed-list__item {
   display: flex;
   flex-flow: wrap;
-  margin-bottom: $stack-s;
+  margin-bottom: $sp-s;
 
   > dt,
   > dd {
diff --git a/src/components/HdEditSwitch.vue b/src/components/HdEditSwitch.vue
index 790ae753f..8a7be719d 100644
--- a/src/components/HdEditSwitch.vue
+++ b/src/components/HdEditSwitch.vue
@@ -164,12 +164,12 @@ export default {
   &__actions {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: $stack-s;
+    margin-bottom: $sp-s;
     &__button {
       display: flex;
       align-items: center;
       padding: 0;
-      margin-left: $inline-m;
+      margin-left: $sp-m;
       cursor: pointer;
       &--edit {
         color: getShade($secondary-color, 110);
@@ -184,7 +184,7 @@ export default {
         font-size: 18px;
         font-weight: 400;
         line-height: 26px;
-        margin-left: $inline-xs;
+        margin-left: $sp-xs;
       }
       &__icon path {
         fill: currentColor;
@@ -196,7 +196,7 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    margin-bottom: $stack-s;
+    margin-bottom: $sp-s;
 
     &__icon {
       width: 20px;
@@ -210,7 +210,7 @@ export default {
 
     &__label {
       display: none;
-      margin-left: $inline-s;
+      margin-left: $sp-s;
       font-size: 18px;
       line-height: 26px;
 
@@ -232,11 +232,11 @@ export default {
 
   &--editing-allowed .details-table-wrap:first-child {
     padding-top: 0;
-    margin-top: $stack-s * -1;
+    margin-top: $sp-s * -1;
   }
 
   h3 + .field {
-    margin-top: $stack-s;
+    margin-top: $sp-s;
   }
 }
 
diff --git a/src/components/HdExpandText.vue b/src/components/HdExpandText.vue
index e96874711..71cb27381 100644
--- a/src/components/HdExpandText.vue
+++ b/src/components/HdExpandText.vue
@@ -225,7 +225,7 @@ export default {
     align-items: center;
     position: relative;
     padding: 0;
-    margin-right: $inline-m;
+    margin-right: $sp-m;
     font-size: 18px;
     line-height: 28px;
     font-family: inherit;
@@ -250,9 +250,9 @@ export default {
     &::before {
       content: '';
       position: absolute;
-      bottom: $stack-xs;
+      bottom: $sp-xs;
       left: 0;
-      width: calc(100% - #{$inline-xs + $_icon-size});
+      width: calc(100% - #{$sp-xs + $_icon-size});
       height: 1px;
       background-color: getShade($secondary-color, 110);
     }
@@ -261,7 +261,7 @@ export default {
       position: relative;
       width: $_icon-size;
       height: $_icon-size;
-      margin-left: $inline-xs;
+      margin-left: $sp-xs;
       transition: transform ($time-s * 2) ease-in-out;
 
       path {
diff --git a/src/components/HdModal.vue b/src/components/HdModal.vue
index 64db77040..bfb0365d2 100644
--- a/src/components/HdModal.vue
+++ b/src/components/HdModal.vue
@@ -154,7 +154,7 @@ export default {
   left: 0;
   display: flex;
   flex-direction: column;
-  padding: $inset-s;
+  padding: $sp-s;
   z-index: 100;
   animation: fadeIn .3s forwards;
   overflow: auto;
@@ -166,7 +166,7 @@ export default {
   }
 
   &--external-close-icon {
-    padding-top: $stack-s + 24px;
+    padding-top: $sp-s + 24px;
   }
 
   &__overlay {
@@ -185,8 +185,8 @@ export default {
   }
   &__close {
     position: absolute;
-    top: $stack-s;
-    right: $inline-s;
+    top: $sp-s;
+    right: $sp-s;
     width: 24px;
     height: 24px;
     background-color: transparent;
@@ -196,8 +196,8 @@ export default {
     z-index: 2;
 
     @media (min-width: $break-tablet){
-      top: $stack-m;
-      right: $inline-m;
+      top: $sp-m;
+      right: $sp-m;
     }
 
     #{$_root}--external-close-icon & {
@@ -236,10 +236,10 @@ export default {
 
   &__body {
     background-color: white;
-    padding: $inset-l;
+    padding: $sp-l;
 
     #{$_root}--spacing-normal & {
-      padding: $inset-m;
+      padding: $sp-m;
     }
 
     #{$_root}--no-spacing & {
@@ -249,12 +249,12 @@ export default {
 
   &__actions {
     display: flex;
-    padding: $inset-m ($inset-m - ($inline-xs * 2));
+    padding: $sp-m ($sp-m - ($sp-xs * 2));
 
     &__action {
       width: auto;
-      margin-left: $inline-xs;
-      margin-right: $inline-xs;
+      margin-left: $sp-xs;
+      margin-right: $sp-xs;
       flex-grow: 1;
       flex-shrink: 0;
 
@@ -282,7 +282,7 @@ export default {
     border-bottom: 1px solid getShade($quaternary-color, 60);
 
     &::v-deep > *:first-child {
-      padding: $inset-m;
+      padding: $sp-m;
     }
   }
 
diff --git a/src/components/HdTable.vue b/src/components/HdTable.vue
index cef35be32..f0fe2675d 100644
--- a/src/components/HdTable.vue
+++ b/src/components/HdTable.vue
@@ -48,14 +48,14 @@ export default {
 @import 'homeday-blocks/src/styles/mixins.scss';
 
 .hd-table {
-  margin-top: $stack-s;
+  margin-top: $sp-s;
   @include font('text-xsmall');
   border-collapse: collapse;
   width: 100%;
   z-index: -1;
   text-align: center;
   th, td {
-    padding: $inset-s;
+    padding: $sp-s;
     border-top: 1px solid getShade($quaternary-color, 60);
     color: $quaternary-color;
     font-weight: 600;
@@ -88,7 +88,7 @@ export default {
     }
     td:after {
       content: '';
-      width: $inset-s;
+      width: $sp-s;
       height: 100%;
       position: absolute;
       right: 0;
diff --git a/src/components/HdTabsMenu.vue b/src/components/HdTabsMenu.vue
index 1e4749f84..c5338ded6 100644
--- a/src/components/HdTabsMenu.vue
+++ b/src/components/HdTabsMenu.vue
@@ -118,7 +118,7 @@ export default {
   &__item {
     padding-left: 0;
     padding-right: 0;
-    margin-right: $inline-l;
+    margin-right: $sp-l;
     white-space: nowrap;
     font-weight: 400;
     text-align: left;
diff --git a/src/components/HdTagsList.vue b/src/components/HdTagsList.vue
index 23d7c313e..6428791c3 100644
--- a/src/components/HdTagsList.vue
+++ b/src/components/HdTagsList.vue
@@ -28,16 +28,16 @@ export default {
 .tags-list {
   display: flex;
   flex-wrap: wrap;
-  min-height: #{$stack-l + $stack-s};
-  margin-bottom: $stack-m;
+  min-height: #{$sp-l + $sp-s};
+  margin-bottom: $sp-m;
   &__tag {
     display: flex;
     align-items: center;
-    height: $stack-l;
+    height: $sp-l;
     background-color: getShade($quaternary-color, 50);
     border-radius: 3px;
-    padding: 0 $inline-s;
-    margin: $stack-s $inline-s 0 0;
+    padding: 0 $sp-s;
+    margin: $sp-s $sp-s 0 0;
   }
 }
 </style>
diff --git a/src/components/HdTileSelectItem.vue b/src/components/HdTileSelectItem.vue
index 5feec755a..d36bfebc5 100644
--- a/src/components/HdTileSelectItem.vue
+++ b/src/components/HdTileSelectItem.vue
@@ -53,7 +53,7 @@ export default {
   width: 100%;
   background-color: white;
   border: 0;
-  padding: $inset-m;
+  padding: $sp-m;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
diff --git a/src/components/HdTimeslots.vue b/src/components/HdTimeslots.vue
index a7c02a12a..ee006247f 100644
--- a/src/components/HdTimeslots.vue
+++ b/src/components/HdTimeslots.vue
@@ -146,7 +146,7 @@ export default {
   &__controls {
     position: absolute;
     display: flex;
-    padding: 0 $inline-xs;
+    padding: 0 $sp-xs;
     width: 100%;
     height: 100%;
     align-items: center;
@@ -154,17 +154,17 @@ export default {
     z-index: 0;
 
     @media (min-width: $break-mobile) {
-      margin-top: -$stack-m;
+      margin-top: -$sp-m;
     }
 
   }
   &__inner {
-    width: calc(100% - #{$inline-xl});
+    width: calc(100% - #{$sp-xl});
     margin: auto;
     overflow: hidden;
     position: relative;
     height: 100%;
-    padding-top: $stack-s;
+    padding-top: $sp-s;
 
     @media (min-width: $break-mobile) {
       padding-top: 0;
@@ -172,19 +172,19 @@ export default {
   }
   &__slots {
     height: 100%;
-    margin-right: -$inline-s;
+    margin-right: -$sp-s;
   }
 
   &__slot {
-    width: calc(100% / 4 - #{$inline-s});
+    width: calc(100% / 4 - #{$sp-s});
     display: inline-block;
-    padding: $inset-s;
+    padding: $sp-s;
     font-size: 14px;
     line-height: 10px;
     border: 1px solid getShade($secondary-color, 110);
     border-radius: 2px;
-    margin-right: $inline-s;
-    margin-bottom: $stack-s;
+    margin-right: $sp-s;
+    margin-bottom: $sp-s;
     text-align: center;
     color: $primary-color;
     cursor: pointer;
@@ -192,8 +192,8 @@ export default {
     z-index: 1;
 
     @media (min-width: $break-mobile) {
-      width: calc(100% / 6 - #{$inline-s});
-      margin-bottom: $stack-xs;
+      width: calc(100% / 6 - #{$sp-s});
+      margin-bottom: $sp-xs;
       font-size: 18px;
       border-width: 2px;
     }
@@ -224,7 +224,7 @@ export default {
     font-size: 11px;
     line-height: 14px;
     color: $primary-color;
-    margin-top: $stack-s;
+    margin-top: $sp-s;
     position: absolute;
     bottom: 0;
     @media (min-width: $break-mobile) {
@@ -240,7 +240,7 @@ export default {
         width: 10px;
         border: 1px solid getShade($quaternary-color, 50);
         background: getShade($quaternary-color, 50);
-        margin-right: $inline-s;
+        margin-right: $sp-s;
         border-radius: 2px;
 
         @media (min-width: $break-mobile) {
@@ -253,10 +253,10 @@ export default {
         border-color: getShade($secondary-color, 110);
       }
       &:first-child {
-        margin-right: $inline-m;
+        margin-right: $sp-m;
 
         @media (min-width: $break-mobile) {
-          margin-right: $inline-l;
+          margin-right: $sp-l;
         }
       }
     }
diff --git a/src/components/HdToast.vue b/src/components/HdToast.vue
index 860a04ae4..6448f0f56 100644
--- a/src/components/HdToast.vue
+++ b/src/components/HdToast.vue
@@ -87,13 +87,13 @@ $toastWidth: 288px;
   @media (min-width: $break-tablet) {
     transform: none;
     left: auto;
-    right: $inline-m;
-    top: $stack-m;
+    right: $sp-m;
+    top: $sp-m;
   }
 
   @media (min-width: $break-tablet) {
-    right: $inline-l;
-    top: $stack-m;
+    right: $sp-l;
+    top: $sp-m;
   }
 
   // Appereance
@@ -112,7 +112,7 @@ $toastWidth: 288px;
     animation: slide-out-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
   }
   &__text {
-    padding: $stack-s $inline-m;
+    padding: $sp-s $sp-m;
 
     border-bottom: 1px solid #E1E1E1;
   }
diff --git a/src/components/buttons/HdButton.vue b/src/components/buttons/HdButton.vue
index f6ac7c129..a05828621 100644
--- a/src/components/buttons/HdButton.vue
+++ b/src/components/buttons/HdButton.vue
@@ -108,13 +108,13 @@ export default {
   $root: &;
 
   &--icon-button {
-    padding: $inset-s;
+    padding: $sp-s;
   }
 
   &__icon {
     width: 24px;
     height: 24px;
-    margin-right: $inline-xs;
+    margin-right: $sp-xs;
 
     #{$root}--icon-button & {
       width: 28px;
diff --git a/src/components/buttons/HdRadioButton.vue b/src/components/buttons/HdRadioButton.vue
index 4b0b1bb32..922f9aa1b 100644
--- a/src/components/buttons/HdRadioButton.vue
+++ b/src/components/buttons/HdRadioButton.vue
@@ -124,7 +124,7 @@ $iconWidth: 48px;
   &:not(:last-child) {
     @media(max-width: $break-mobile - 1) {
       &:before {
-        $leftPos: $iconWidth + $inline-s;
+        $leftPos: $iconWidth + $sp-s;
         content: "";
         position: absolute;
         left: $leftPos;
@@ -140,7 +140,7 @@ $iconWidth: 48px;
   @media(min-width: $break-mobile) {
     flex-direction: column;
     border-radius: 4px;
-    padding: $inset-m;
+    padding: $sp-m;
     box-shadow: 0 6px 12px 0 rgba(0,0,0,.3);
 
     &:hover, &:focus {
@@ -166,7 +166,7 @@ $iconWidth: 48px;
   }
   &__iconWrapper {
     display: none;
-    margin-right: $inline-s;
+    margin-right: $sp-s;
     &--mobile {
       display: block;
 
diff --git a/src/components/details-table/HdDetailsTable.vue b/src/components/details-table/HdDetailsTable.vue
index 207ecb50e..159011479 100644
--- a/src/components/details-table/HdDetailsTable.vue
+++ b/src/components/details-table/HdDetailsTable.vue
@@ -32,11 +32,11 @@ export default {
 @import 'homeday-blocks/src/styles/mixins.scss';
 
 .details-table-wrap {
-  padding-top: $stack-m;
-  padding-bottom: $stack-s;
+  padding-top: $sp-m;
+  padding-bottom: $sp-s;
 
   + #{&} {
-    padding-top: $stack-s;
+    padding-top: $sp-s;
   }
 }
 
@@ -47,14 +47,14 @@ export default {
       display: block;
       height: 2px;
       background-color: getShade($quaternary-color, 60);
-      margin-top: $stack-s;
+      margin-top: $sp-s;
     }
   }
 
   &__before {
 
     @media (min-width: $break-desktop) {
-      margin-bottom: $stack-s;
+      margin-bottom: $sp-s;
     }
   }
 
diff --git a/src/components/details-table/HdDetailsTableRow.vue b/src/components/details-table/HdDetailsTableRow.vue
index fd0061c3f..37063dd16 100644
--- a/src/components/details-table/HdDetailsTableRow.vue
+++ b/src/components/details-table/HdDetailsTableRow.vue
@@ -36,8 +36,8 @@ export default {
 @import 'homeday-blocks/src/styles/mixins.scss';
 
 .details-table__row {
-  margin-top: $stack-s;
-  margin-bottom: $stack-s;
+  margin-top: $sp-s;
+  margin-bottom: $sp-s;
   display: flex;
   flex-flow: row nowrap;
   word-wrap: break-word;
@@ -55,7 +55,7 @@ export default {
   &__label {
     flex: 0 0 152px;
     min-width: 0;
-    margin-right: $inline-s;
+    margin-right: $sp-s;
     color: getShade($quaternary-color, 80);
 
     @media (min-width: $break-tablet) {
@@ -77,11 +77,11 @@ export default {
     }
 
     .field {
-      margin-bottom: $stack-m;
+      margin-bottom: $sp-m;
       word-wrap: normal;
 
       &__input {
-        padding-top: $stack-s;
+        padding-top: $sp-s;
       }
     }
   }
@@ -89,14 +89,14 @@ export default {
   &:not(&--single-column):nth-child(odd) #{&}__content {
 
     @media (min-width: $break-desktop) {
-      margin-right: $inline-xs;
+      margin-right: $sp-xs;
     }
   }
 
   &:not(&--single-column):nth-child(even) #{&}__label {
 
     @media (min-width: $break-desktop) {
-      margin-left: $inline-xs;
+      margin-left: $sp-xs;
     }
   }
 }
diff --git a/src/components/form/FieldBase.vue b/src/components/form/FieldBase.vue
index baa01e541..fde785142 100644
--- a/src/components/form/FieldBase.vue
+++ b/src/components/form/FieldBase.vue
@@ -136,8 +136,8 @@ export default {
   @include typography-regular;
 
   &__icon {
-    margin-top: $stack-m;
-    margin-right: $inline-s;
+    margin-top: $sp-m;
+    margin-right: $sp-s;
     flex: 0 0 24px;
 
     #{$root}--disabled & {
@@ -151,8 +151,8 @@ export default {
     position: relative;
 
     #{$root}--grouped:not(#{$root}--unlabelled) & {
-      padding-top: $stack-m;
-      margin-top: $stack-s;
+      padding-top: $sp-m;
+      margin-top: $sp-s;
     }
   }
   &:not(#{$root}--grouped) &__main {
@@ -166,10 +166,10 @@ export default {
     }
 
     input, textarea, select {
-      padding-top: $stack-l - $stack-s;
-      padding-right: $inline-s;
-      padding-bottom: $stack-s;
-      padding-left: $inline-m;
+      padding-top: $sp-l - $sp-s;
+      padding-right: $sp-s;
+      padding-bottom: $sp-s;
+      padding-left: $sp-m;
       background: inherit;
       color: inherit;
       font-size: inherit;
@@ -186,8 +186,8 @@ export default {
   }
   &__label {
     position: absolute;
-    top: $stack-m;
-    left: $inline-m;
+    top: $sp-m;
+    left: $sp-m;
     transform-origin: left;
     transition: transform .3s, color .2s;
     pointer-events: none;
@@ -261,8 +261,8 @@ export default {
   }
   &__input-right {
     position: absolute;
-    top: $stack-m;
-    right: $inline-m;
+    top: $sp-m;
+    right: $sp-m;
     pointer-events: none;
 
     > ::v-deep * {
@@ -273,8 +273,8 @@ export default {
     width: 100%;
     color: getShade($quaternary-color, 80);
     @include typography-small;
-    padding-right: $inline-m;
-    padding-left: $inline-m;
+    padding-right: $sp-m;
+    padding-left: $sp-m;
 
     #{$root}--errored:not(#{$root}--active) & {
       color: $error-color;
diff --git a/src/components/form/HdCheckbox.vue b/src/components/form/HdCheckbox.vue
index dc40839f8..d2a1e3f67 100644
--- a/src/components/form/HdCheckbox.vue
+++ b/src/components/form/HdCheckbox.vue
@@ -191,7 +191,7 @@ export default {
 @import 'homeday-blocks/src/styles/mixins.scss';
 
 .field {
-  margin-bottom: $stack-m;
+  margin-bottom: $sp-m;
 }
 
 .field--errored {
@@ -277,7 +277,7 @@ export default {
 
   &__description {
     flex: 1;
-    margin: 0 0 0 $inline-s;
+    margin: 0 0 0 $sp-s;
     text-align: left;
     @include font('text-small');
   }
@@ -349,15 +349,15 @@ export default {
   &__error {
     @include font('text-xxsmall');
     position: absolute;
-    top: calc(100% + #{$inline-xs});
-    margin-left: $inline-m;
+    top: calc(100% + #{$sp-xs});
+    margin-left: $sp-m;
     color: $error-color;
     display: none;
   }
   &__label {
     display: block;
     flex: 1;
-    margin: 0 0 0 $inline-s;
+    margin: 0 0 0 $sp-s;
 
     text-align: left;
     font-size: 14px;
diff --git a/src/components/form/HdDynamicForm.vue b/src/components/form/HdDynamicForm.vue
index fd67d0f7e..c2ee5c208 100644
--- a/src/components/form/HdDynamicForm.vue
+++ b/src/components/form/HdDynamicForm.vue
@@ -154,8 +154,8 @@ export default {
     display: flex;
     &__item {
       flex: 1;
-      margin-left: $inline-xs;
-      margin-right: $inline-xs;
+      margin-left: $sp-xs;
+      margin-right: $sp-xs;
       &:first-of-type {
         margin-left: 0;
       }
diff --git a/src/components/form/HdPasswordConfirm.vue b/src/components/form/HdPasswordConfirm.vue
index af50b724e..8efc809f6 100644
--- a/src/components/form/HdPasswordConfirm.vue
+++ b/src/components/form/HdPasswordConfirm.vue
@@ -175,7 +175,7 @@ export default {
   &__strengthMeter {
     height: 14px;
     width: 100%;
-    padding-left: $inline-s;
+    padding-left: $sp-s;
     position: absolute;
     top: 66px; // input height + margin
     display: flex;
diff --git a/src/components/form/HdRadio.vue b/src/components/form/HdRadio.vue
index e88671831..6cc6ead29 100644
--- a/src/components/form/HdRadio.vue
+++ b/src/components/form/HdRadio.vue
@@ -240,7 +240,7 @@ export default {
   flex-direction: column;
 
   > .radio:not(:first-of-type) {
-    margin-top: $stack-m;
+    margin-top: $sp-m;
     margin-left: 0;
   }
 }
@@ -286,7 +286,7 @@ export default {
   position: relative;
 
   &:not(:first-of-type) {
-    margin-left: $inline-m;
+    margin-left: $sp-m;
   }
 
   > input[type="radio"] {
@@ -333,7 +333,7 @@ export default {
 
   > .radio__label {
     flex: 1;
-    padding-left: $inline-s;
+    padding-left: $sp-s;
     cursor: pointer;
     text-align: left;
     @include font("text-small");
diff --git a/src/components/form/HdRange.vue b/src/components/form/HdRange.vue
index 7cc29d344..3ea6a1c20 100644
--- a/src/components/form/HdRange.vue
+++ b/src/components/form/HdRange.vue
@@ -215,7 +215,7 @@ export default {
 
 .range {
   $range: &;
-  height: $stack-l;
+  height: $sp-l;
   position: relative;
   display: flex;
   align-items: center;
@@ -225,7 +225,7 @@ export default {
   }
 
   &.hasTooltip {
-    margin-top: $stack-xl;
+    margin-top: $sp-xl;
   }
 
   input[type=range] {
@@ -347,7 +347,7 @@ export default {
 
   &__step-label {
     position: absolute;
-    top: #{$stack-l + $stack-s};
+    top: #{$sp-l + $sp-s};
     transform: translateX(-50%);
     @include font('text-xsmall');
     color: getShade($quaternary-color, 80);
@@ -391,7 +391,7 @@ export default {
       max-height: $range-thumb-inner-bullet-size;
       max-width: $range-thumb-inner-bullet-size;
 
-      border-radius: $inset-m;
+      border-radius: $sp-m;
       transition: transform .1s ease-in-out;
       transform-origin: center center;
 
@@ -424,12 +424,12 @@ export default {
 
   &__tooltip {
     position: absolute;
-    bottom: $stack-m;
+    bottom: $sp-m;
     transform: translateX(-50%);
     color: $white;
     background: url('~homeday-blocks/src/assets/tooltip.svg') no-repeat;
     background-size: 100% 100%;
-    padding: $stack-s $inline-m #{$stack-m + $stack-s};
+    padding: $sp-s $sp-m #{$sp-m + $sp-s};
     pointer-events: none;
   }
 }
diff --git a/src/components/form/HdSplitInput.vue b/src/components/form/HdSplitInput.vue
index 699c40b83..b33ec9569 100644
--- a/src/components/form/HdSplitInput.vue
+++ b/src/components/form/HdSplitInput.vue
@@ -180,7 +180,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: 0 0 $inline-m;
+    flex: 0 0 $sp-m;
     z-index: 1;
     background-color: $secondary-bg;
     color: getShade($quaternary-color, 80);
@@ -188,7 +188,7 @@ export default {
     font-weight: 700;
 
     &-symbol {
-      margin-top: $stack-m;
+      margin-top: $sp-m;
     }
   }
 }
diff --git a/src/components/form/HdTagsSelector.vue b/src/components/form/HdTagsSelector.vue
index 79c0bb631..c54f6946f 100644
--- a/src/components/form/HdTagsSelector.vue
+++ b/src/components/form/HdTagsSelector.vue
@@ -195,19 +195,19 @@ export default {
 
 .tags-selector {
   position: relative;
-  margin-bottom: $stack-m;
+  margin-bottom: $sp-m;
   &__selected-tags {
     display: flex;
     flex-wrap: wrap;
-    min-height: #{$stack-l + $stack-s};
+    min-height: #{$sp-l + $sp-s};
     &__tag {
       display: flex;
       align-items: center;
-      height: $stack-l;
+      height: $sp-l;
       background-color: getShade($quaternary-color, 50);
       border-radius: 3px;
-      padding: 0 $inline-s;
-      margin: $stack-s $inline-s 0 0;
+      padding: 0 $sp-s;
+      margin: $sp-s $sp-s 0 0;
       &__remove {
         display: flex;
         justify-content: center;
@@ -216,7 +216,7 @@ export default {
         height: 24px;
         background-color: transparent;
         padding: 0;
-        margin-left: $stack-s;
+        margin-left: $sp-s;
         border: 0;
         border-radius: 50%;
         cursor: pointer;
@@ -232,8 +232,8 @@ export default {
       height: 24px;
       background: transparent;
       padding: 0;
-      margin-top: #{$stack-s + $stack-xs};
-      margin-left: $inset-xs;
+      margin-top: #{$sp-s + $sp-xs};
+      margin-left: $sp-xs;
       border: 0;
       cursor: pointer;
       transition: transform $time-s ease-in-out;
@@ -254,7 +254,7 @@ export default {
     max-width: 300px;
     background-color: $secondary-bg;
     border-radius: 3px;
-    padding: $stack-xs;
+    padding: $sp-xs;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,0.23);
     opacity: 0;
     z-index: 5;
@@ -263,8 +263,8 @@ export default {
       background-color: $primary-bg;
       border: 1px solid getShade($secondary-color, 110);
       border-radius: 3px;
-      padding: 0 $inline-s;
-      margin: $stack-xs;
+      padding: 0 $sp-s;
+      margin: $sp-xs;
       cursor: pointer;
       transition: background-color $time-s ease-in-out;
       &--isSelected {
diff --git a/src/components/form/TextFieldBase.vue b/src/components/form/TextFieldBase.vue
index 57a92ca11..9ca977f24 100644
--- a/src/components/form/TextFieldBase.vue
+++ b/src/components/form/TextFieldBase.vue
@@ -122,7 +122,7 @@ export default {
     border: 0;
     outline: 0;
     background: transparent;
-    padding: $inset-xxs;
+    padding: $sp-xxs;
     cursor: pointer;
 
     &::before {
diff --git a/src/components/gallery/HdGallery.vue b/src/components/gallery/HdGallery.vue
index 48f49a995..56b990c20 100644
--- a/src/components/gallery/HdGallery.vue
+++ b/src/components/gallery/HdGallery.vue
@@ -204,7 +204,7 @@ export default {
   }
 
   &__caption {
-    margin-bottom: $stack-s;
+    margin-bottom: $sp-s;
   }
 
   &__main {
@@ -217,10 +217,10 @@ export default {
 
     &__info {
       position: absolute;
-      right: $inline-xs;
-      bottom: $stack-xs;
-      padding-right: $inline-s;
-      padding-left: $inline-s;
+      right: $sp-xs;
+      bottom: $sp-xs;
+      padding-right: $sp-s;
+      padding-left: $sp-s;
       background-color: rgba(0, 0, 0, 0.8);
       @include font('text-xsmall');
       font-weight: 600;
@@ -280,10 +280,10 @@ export default {
 
   &__info {
     position: absolute;
-    right: $inline-xs;
-    bottom: $stack-xs;
-    padding-right: $inline-s;
-    padding-left: $inline-s;
+    right: $sp-xs;
+    bottom: $sp-xs;
+    padding-right: $sp-s;
+    padding-left: $sp-s;
     background-color: rgba(0, 0, 0, 0.8);
     @include font('text-xsmall');
     font-weight: 600;
diff --git a/src/components/gallery/HdGalleryCarousel.vue b/src/components/gallery/HdGalleryCarousel.vue
index f4238a973..7caf6187f 100644
--- a/src/components/gallery/HdGalleryCarousel.vue
+++ b/src/components/gallery/HdGalleryCarousel.vue
@@ -223,7 +223,7 @@ export default {
     overflow: hidden;
 
     @media (min-width: $break-tablet) {
-      padding: $stack-m 0;
+      padding: $sp-m 0;
     }
 
     .flickity-viewport {
@@ -233,7 +233,7 @@ export default {
 
   &__pager {
     @media (min-width: $break-tablet) {
-      margin-top: $stack-m;
+      margin-top: $sp-m;
     }
 
     #{$_root}--with-pager-inside & {
@@ -251,7 +251,7 @@ export default {
   &__item {
     position: relative;
     width: 100%;
-    margin-right: $inline-xs;
+    margin-right: $sp-xs;
     cursor: pointer;
     border-radius: 2px;
     overflow: hidden;
@@ -263,7 +263,7 @@ export default {
 
     @media (min-width: $break-tablet) {
       width: calc(100% / 5);
-      margin-right: $inline-m;
+      margin-right: $sp-m;
       box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
 
       &:hover,
@@ -278,7 +278,7 @@ export default {
 
     @media (min-width: $break-desktop) {
       width: calc(100% / 7);
-      margin-right: $inline-m;
+      margin-right: $sp-m;
     }
     }
 
diff --git a/src/components/gallery/HdGalleryOverlay.vue b/src/components/gallery/HdGalleryOverlay.vue
index 1fe5bfecb..86ee360c9 100644
--- a/src/components/gallery/HdGalleryOverlay.vue
+++ b/src/components/gallery/HdGalleryOverlay.vue
@@ -104,14 +104,14 @@ export default {
   left: 0;
   display: flex;
   z-index: 100;
-  padding: $stack-m 0;
+  padding: $sp-m 0;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: rgba(white, .9);
   animation: fadeIn .5s;
 
   @media (min-width: $break-tablet) and (min-height: 800px) {
-    padding: $inset-xl;
+    padding: $sp-xl;
   }
 
   &__gallery {
@@ -136,8 +136,8 @@ export default {
 
   &__close {
     position: absolute;
-    top: $stack-s;
-    right: $inline-s;
+    top: $sp-s;
+    right: $sp-s;
     width: 24px;
     height: 24px;
     background: transparent;
diff --git a/src/components/gallery/HdGalleryPlaceholder.vue b/src/components/gallery/HdGalleryPlaceholder.vue
index 28731653d..6f218ad28 100644
--- a/src/components/gallery/HdGalleryPlaceholder.vue
+++ b/src/components/gallery/HdGalleryPlaceholder.vue
@@ -48,7 +48,7 @@ export default {
 
 .gallery-placeholder {
   position: relative;
-  margin-bottom: $stack-s;
+  margin-bottom: $sp-s;
   background-color: $secondary-bg;
   &__content {
     position: absolute;
@@ -67,9 +67,9 @@ export default {
       }
     }
     &-text {
-      margin-top: $stack-xs;
+      margin-top: $sp-xs;
       @media (min-width: $break-tablet) {
-        margin-top: $stack-l;
+        margin-top: $sp-l;
       }
     }
   }
diff --git a/src/components/gallery/HdGalleryTiles.vue b/src/components/gallery/HdGalleryTiles.vue
index ef9660572..5db1aba16 100644
--- a/src/components/gallery/HdGalleryTiles.vue
+++ b/src/components/gallery/HdGalleryTiles.vue
@@ -74,7 +74,7 @@ export default {
   &__container {
     display: -ms-grid;
     display: grid;
-    grid-gap: $inset-s;
+    grid-gap: $sp-s;
     -ms-grid-columns: 1fr 1fr 1fr;
     -ms-grid-rows: 1fr 1fr;
     grid-template-columns: repeat(3, 1fr);
@@ -110,7 +110,7 @@ export default {
   }
 
   @include only-ie {
-    margin: $inset-xs;
+    margin: $sp-xs;
   }
 
   &:nth-child(1) {
@@ -251,10 +251,10 @@ export default {
 
   &__more-photos {
     position: absolute;
-    bottom: $stack-m;
-    right: $inline-m;
+    bottom: $sp-m;
+    right: $sp-m;
     background-color: $primary-bg;
-    padding: $inset-s;
+    padding: $sp-s;
     @include font('text-xsmall');
     font-weight: bold;
     border: 0;
@@ -265,7 +265,7 @@ export default {
     cursor: pointer;
 
     @media (min-width: $break-tablet) {
-      right: $inline-l;
+      right: $sp-l;
     }
     @media (min-width: $break-desktop) {
       display: none;
diff --git a/src/components/gallery/HdZoomerGallery.vue b/src/components/gallery/HdZoomerGallery.vue
index e6cb05198..61f22d384 100644
--- a/src/components/gallery/HdZoomerGallery.vue
+++ b/src/components/gallery/HdZoomerGallery.vue
@@ -78,8 +78,8 @@ export default {
   }
 
   &__caption {
-    margin-bottom: $stack-s;
-    margin-left: $inline-m;
+    margin-bottom: $sp-s;
+    margin-left: $sp-m;
     transition: opacity .5s ease-in-out;
 
     #{$_root}.isZoomed & {
@@ -89,10 +89,10 @@ export default {
 
   &__info {
     position: absolute;
-    right: $inline-m;
-    bottom: $stack-xs;
-    padding-right: $inline-s;
-    padding-left: $inline-s;
+    right: $sp-m;
+    bottom: $sp-xs;
+    padding-right: $sp-s;
+    padding-left: $sp-s;
     background-color: rgba(0, 0, 0, 0.8);
     @include font('text-xsmall');
     font-weight: 600;
diff --git a/src/components/notifications/HdNotification.vue b/src/components/notifications/HdNotification.vue
index 31c663d1f..a88ed2d41 100644
--- a/src/components/notifications/HdNotification.vue
+++ b/src/components/notifications/HdNotification.vue
@@ -75,7 +75,7 @@ export default {
 
 .notification {
   display: flex;
-  padding: $stack-m $inline-s;
+  padding: $sp-m $sp-s;
   color: $white;
 
   &--notification {
@@ -97,7 +97,7 @@ export default {
   &__icon {
     width: 24px;
     height: 24px;
-    margin-right: $inline-s;
+    margin-right: $sp-s;
 
     path {
       fill: currentColor;
diff --git a/src/stories/Elevation.vue b/src/stories/Elevation.vue
index c5683a691..ef1493bb2 100644
--- a/src/stories/Elevation.vue
+++ b/src/stories/Elevation.vue
@@ -67,7 +67,7 @@ export default {
   }
   > h3 {
     @include font('title');
-    margin-top: $stack-l;
+    margin-top: $sp-l;
   }
 
   &__code {
@@ -82,8 +82,8 @@ export default {
 .elevated-blocks {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  gap: $inset-xl;
-  padding: $inset-l;
+  gap: $sp-xl;
+  padding: $sp-l;
 }
 
 .elevated-block {
diff --git a/src/stories/Spacing.vue b/src/stories/Spacing.vue
index aeb67d3e9..740b76abe 100644
--- a/src/stories/Spacing.vue
+++ b/src/stories/Spacing.vue
@@ -1,24 +1,49 @@
 <template>
   <section class="spacing-story">
-    <h1>Spacing</h1>
-    <h3>Usage:</h3>
-    <p>Spacing values range from 2px to 64px:</p>
-    <ul>
-        <li>xxs - 2px</li>
-        <li>xs - 4px</li>
-        <li>s - 8px</li>
-        <li>m - 16px</li>
-        <li>l - 32px</li>
-        <li>xl - 64px</li>
-    </ul>
-    <p>Spacing can be used with SASS variables.</p>
-    <p>Spacing variables are composed of:
-        <ul>
-            <li>the position where we want to apply padding/margin (inset, inline, stack)</li>
-            <li>the size of spacing (xxs - xl).</li>
-        </ul>
-    </p>
-    <h3>Examples:</h3>
+    <h1 class="font-DS-400">Spacing</h1>
+    <p>Spacing values range from 2px to 64px and all of them are defined as SASS variables.</p>
+    <table class="spacing-table">
+      <thead>
+        <tr>
+          <th>-</th>
+          <th>Value</th>
+          <th>Variable</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>XXS</td>
+          <td>2px</td>
+          <td>$sp-xxs</td>
+        </tr>
+        <tr>
+          <td>XS</td>
+          <td>4px</td>
+          <td>$sp-xs</td>
+        </tr>
+        <tr>
+          <td>S</td>
+          <td>8px</td>
+          <td>$sp-s</td>
+        </tr>
+        <tr>
+          <td>M</td>
+          <td>16px</td>
+          <td>$sp-m</td>
+        </tr>
+        <tr>
+          <td>L</td>
+          <td>32px</td>
+          <td>$sp-l</td>
+        </tr>
+        <tr>
+          <td>XL</td>
+          <td>64px</td>
+          <td>$sp-xl</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3 class="font-DS-200">Usage examples:</h3>
     <VueCodeHighlight language="css" class="spacing-story__code">{{ codeExample }}</VueCodeHighlight>
   </section>
 </template>
@@ -34,14 +59,9 @@ export default {
   },
   data() {
     return {
-      codeExample: `// use inset for uniform vertical and horizontal spacing (top, right,bottom, left)
-padding: $inset-s;
+      codeExample: `padding: $sp-s $sp-l;
 
-// use stack for vertical spacing (top, bottom)
-padding-left: $inline-s;
-
-// use inline for horizontal spacing (left, right)
-padding-top: $stack-s;`,
+margin-bottom: $sp-xl;`,
     };
   },
 };
@@ -54,29 +74,41 @@ padding-top: $stack-s;`,
   margin-right: auto;
   margin-left: auto;
 
-  > h1 {
-    @include font('headline');
-  }
-  > h3 {
-    @include font('title');
-    margin-top: $stack-l;
+  h3 {
+    margin-top: $sp-l;
   }
 
-  > p {
-      margin-top: $stack-m;
+  h1, h3 {
+    font-weight: 900;
   }
 
-  ul {
-      margin-left: $inline-m;
-      list-style: inside;
-      list-style-type: disc;
+  p {
+    margin-top: $sp-m;
   }
 
   &__code {
-    font-size: 14px;
+    @include font('DS-100');
+
     ::v-deep pre {
       background-color: $secondary-bg;
     }
   }
 }
+
+.spacing-table {
+  margin-top: $sp-m;
+
+  th, td {
+    padding: $sp-s $sp-l;
+  }
+
+  th, td, tr {
+    border: 1px solid $quaternary-color;
+  }
+
+  th, td:nth-child(1) {
+    text-align: center;
+    font-weight: 600;
+  }
+}
 </style>
diff --git a/src/stories/Welcome.vue b/src/stories/Welcome.vue
index fadb429d0..1a57ef2ab 100644
--- a/src/stories/Welcome.vue
+++ b/src/stories/Welcome.vue
@@ -57,8 +57,8 @@ export default {
 @import "~vue-code-highlight/themes/prism.css";
 
 .welcome {
-  padding-top: $stack-m;
-  padding-bottom: $stack-l;
+  padding-top: $sp-m;
+  padding-bottom: $sp-l;
 
   &__title {
     display: inline-block;
@@ -67,8 +67,8 @@ export default {
     line-height: 80px;
     font-weight: 900;
     color: $primary-color;
-    margin-top: $stack-m;
-    margin-bottom: $stack-m;
+    margin-top: $sp-m;
+    margin-bottom: $sp-m;
 
     &::before {
       content: '';
@@ -85,11 +85,11 @@ export default {
 
   &__subtitle {
     @include font('title');
-    margin-top: $stack-l;
+    margin-top: $sp-l;
   }
 
   &__paragraph {
-    margin-top: $stack-m;
+    margin-top: $sp-m;
   }
 
   &__code {
diff --git a/src/styles/_deprecated_spacing.scss b/src/styles/_deprecated_spacing.scss
new file mode 100644
index 000000000..0aaa23de0
--- /dev/null
+++ b/src/styles/_deprecated_spacing.scss
@@ -0,0 +1,23 @@
+// INSET = margin or padding applied top, right, bottom and left, [vertically and horizontaly]
+$inset-xxs: $sp-xxs;
+$inset-xs:  $sp-xs;
+$inset-s:   $sp-s;
+$inset-m:   $sp-m;
+$inset-l:   $sp-l;
+$inset-xl:  $sp-xl;
+
+// STACK = margin or padding applied top and bottom, [vertically]
+$stack-xxs: $sp-xxs;
+$stack-xs:  $sp-xs;
+$stack-s:   $sp-s;
+$stack-m:   $sp-m;
+$stack-l:   $sp-l;
+$stack-xl:  $sp-xl;
+
+// INLINE = margin or padding applied left and right, [horizontally]
+$inline-xxs: $sp-xxs;
+$inline-xs:  $sp-xs;
+$inline-s:   $sp-s;
+$inline-m:   $sp-m;
+$inline-l:   $sp-l;
+$inline-xl:  $sp-xl;
\ No newline at end of file
diff --git a/src/styles/_spacing.scss b/src/styles/_spacing.scss
new file mode 100644
index 000000000..335a861e5
--- /dev/null
+++ b/src/styles/_spacing.scss
@@ -0,0 +1,13 @@
+$standards: (xxs, 2px),
+(xs, 4px),
+(s, 8px),
+(m, 16px),
+(l, 32px),
+(xl, 64px);
+
+$sp-xxs: nth(nth($standards, 1), 2);
+$sp-xs:  nth(nth($standards, 2), 2);
+$sp-s:   nth(nth($standards, 3), 2);
+$sp-m:   nth(nth($standards, 4), 2);
+$sp-l:   nth(nth($standards, 5), 2);
+$sp-xl:  nth(nth($standards, 6), 2);
\ No newline at end of file
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 88d021663..75f8ef149 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,6 @@
 @import './colors';
+@import './spacing';
+@import './deprecated_spacing';
 
 $default-border-radius: 2px;
 
@@ -6,38 +8,6 @@ $default-border-radius: 2px;
 $font-primary: 'Source Sans Pro', sans-serif;
 $font-secondary: 'Charter', serif;
 
-/* SPACING */
-$standards: (xxs, 2px),
-(xs, 4px),
-(s, 8px),
-(m, 16px),
-(l, 32px),
-(xl, 64px);
-
-// INSET = margin or padding applied top, right, bottom and left, [vertically and horizontaly]
-$inset-xxs: nth(nth($standards, 1), 2);
-$inset-xs:  nth(nth($standards, 2), 2);
-$inset-s:   nth(nth($standards, 3), 2);
-$inset-m:   nth(nth($standards, 4), 2);
-$inset-l:   nth(nth($standards, 5), 2);
-$inset-xl:  nth(nth($standards, 6), 2);
-
-// STACK = margin or padding applied top and bottom, [vertically]
-$stack-xxs: nth(nth($standards, 1), 2);
-$stack-xs:  nth(nth($standards, 2), 2);
-$stack-s:   nth(nth($standards, 3), 2);
-$stack-m:   nth(nth($standards, 4), 2);
-$stack-l:   nth(nth($standards, 5), 2);
-$stack-xl:  nth(nth($standards, 6), 2);
-
-// INLINE = margin or padding applied left and right, [horizontally]
-$inline-xxs: nth(nth($standards, 1), 2);
-$inline-xs:  nth(nth($standards, 2), 2);
-$inline-s:   nth(nth($standards, 3), 2);
-$inline-m:   nth(nth($standards, 4), 2);
-$inline-l:   nth(nth($standards, 5), 2);
-$inline-xl:  nth(nth($standards, 6), 2);
-
 /* WIDTH */
 $max-width: 1152px;
 $max-width-paragraph-mobile: 100%;
@@ -55,10 +25,10 @@ $break-desktop-wide: 1440px !default;
 $time-s: 150ms;
 
 /* RANGE INPUT */
-$range-height: $stack-l;
+$range-height: $sp-l;
 $shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
-$range-thumb-size: $inset-l;
-$range-thumb-height: $inset-l;
+$range-thumb-size: $sp-l;
+$range-thumb-height: $sp-l;
 $range-bar-height: 6px;
 $range-thumb-border: 2px;
 $activeColor: getShade($secondary-color, 110);
diff --git a/src/styles/buttons.scss b/src/styles/buttons.scss
index 2639babb6..943be22e9 100644
--- a/src/styles/buttons.scss
+++ b/src/styles/buttons.scss
@@ -43,7 +43,7 @@ $button-transition: all $time-s ease-in-out;
   align-items: center;
   justify-content: center;
   margin: 0;
-  padding: $stack-s $inline-l;
+  padding: $sp-s $sp-l;
   border: 0;
   border-radius: 2px;
   outline: 0;
@@ -304,10 +304,10 @@ $button-transition: all $time-s ease-in-out;
 .btn--flat--compact {
   font-size: 21px;
   line-height: 33px;
-  padding: $inset-xs;
+  padding: $sp-xs;
 
   &:after {
-    width: calc(100% - #{2 * $inset-xs});
+    width: calc(100% - #{2 * $sp-xs});
   }
 
 }
@@ -325,7 +325,7 @@ $button-transition: all $time-s ease-in-out;
 
 .btn--ghost {
   font-size: 16px;
-  padding: 0 $inline-m;
+  padding: 0 $sp-m;
   color: getShade($secondary-color, 110);
   transition: $button-transition;
   height: 52px;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 35ae33ecd..ef33e4c53 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -4,6 +4,7 @@
 @import './_variables';
 
 @warn "Please use the new DS typography, the old one will be removed in the next major release. You can read more about it on https://bit.ly/3adOqgw. Ignore this warning if already done.";
+@warn "Please use the new spacing variables, the old variables will be removed in the next major release. You can read more about it on https://bit.ly/2NZkZWS. Ignore this warning if already done.";
 
 * {
   box-sizing: border-box;