diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss
index ed0f805c1b..3562e93707 100644
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ b/frontend/resources/styles/common/dependencies/helpers.scss
@@ -6,16 +6,9 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // Padding & Margin sizes
-$x-small: 4px;
-$small: 8px;
-$medium: 16px;
-$big: 20px;
-$x-big: 32px;
-
-// New sizes
 $size-1: 0.25rem;
 $size-2: 0.5rem;
-$size-3: 0.8rem;
+$size-3: 0.75rem;
 $size-4: 1rem;
 $size-5: 1.5rem;
 $size-6: 2rem;
@@ -38,7 +31,7 @@ $br-huge: 12px;
 .row-flex {
   align-items: center;
   display: flex;
-  margin-bottom: $x-small;
+  margin-bottom: $size-1;
 
   &.column {
     flex-direction: column;
@@ -59,7 +52,7 @@ $br-huge: 12px;
 }
 
 .column-half {
-  margin-right: $small;
+  margin-right: $size-2;
 }
 
 // Display
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index 3f542ceefe..33644d5079 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -84,7 +84,7 @@
   @extend %btn;
   background: $color-gray-60;
   color: $color-gray-20;
-  padding: $x-small;
+  padding: $size-1;
   svg {
     fill: $color-gray-20;
   }
@@ -102,7 +102,7 @@
   background: $color-white;
   border: 1px solid $color-gray-20;
   color: $color-black;
-  padding: $x-small;
+  padding: $size-1;
   svg {
     fill: $color-black;
   }
@@ -119,7 +119,7 @@
   @extend %btn;
   background: transparent;
   color: $color-gray-20;
-  padding: $x-small;
+  padding: $size-1;
   svg {
     fill: $color-gray-20;
   }
@@ -280,7 +280,7 @@ ul.slider-dots {
   li {
     align-items: center;
     display: flex;
-    padding: $small 0;
+    padding: $size-2 0;
 
     &::before {
       background-color: $color-complete;
@@ -317,7 +317,7 @@ ul.slider-dots {
     cursor: pointer;
     font-size: $fs14;
     font-weight: bold;
-    margin: 0 $small $small 0;
+    margin: 0 $size-2 $size-2 0;
     padding: 4px 8px;
     text-transform: uppercase;
 
@@ -392,7 +392,7 @@ ul.slider-dots {
     font-size: $fs12;
     height: 20px;
     position: absolute;
-    right: $small;
+    right: $size-2;
     text-align: right;
     top: 26%;
     width: 18px;
@@ -480,7 +480,7 @@ select {
   color: $color-gray-60;
   font-family: "worksans", sans-serif;
   font-size: $fs14;
-  margin-bottom: $medium;
+  margin-bottom: $size-4;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -515,7 +515,7 @@ input[type="checkbox"]:focus {
   background-color: $color-white;
   box-shadow: none;
   outline: none;
-  padding: $small $big $small $small;
+  padding: $size-2 $size-5 $size-2 $size-2;
   position: relative;
 
   @include placeholder {
@@ -572,7 +572,7 @@ input.element-name {
   cursor: pointer;
 
   &.small {
-    padding: $x-small $big $x-small $x-small;
+    padding: $size-1 $size-5 $size-1 $size-1;
   }
 
 }
@@ -971,7 +971,7 @@ input[type=range]:focus::-ms-fill-upper {
       content: attr(alt);
       font-size: $fs11;
       font-weight: bold;
-      padding: $x-small;
+      padding: $size-1;
       position: absolute;
       left: 130%;
       text-align: center;
@@ -1098,7 +1098,7 @@ input[type=range]:focus::-ms-fill-upper {
       flex-direction: column;
 
       .actions {
-        margin-top: $medium;
+        margin-top: $size-4;
         display: flex;
         justify-content: flex-start;
       }
@@ -1114,7 +1114,7 @@ input[type=range]:focus::-ms-fill-upper {
         justify-content: flex-start;
 
         .btn-secondary {
-          margin-left: $medium;
+          margin-left: $size-4;
         }
       }
     }
@@ -1167,7 +1167,7 @@ input[type=range]:focus::-ms-fill-upper {
       padding-right: 64px;
 
       .icon {
-        margin-right: $medium;
+        margin-right: $size-4;
       }
 
       .content {
@@ -1187,7 +1187,7 @@ input[type=range]:focus::-ms-fill-upper {
       display: flex;
 
       .icon {
-        padding: $small;
+        padding: $size-2;
         width: 48px;
         height: 48px;
         justify-content: center;
@@ -1198,7 +1198,7 @@ input[type=range]:focus::-ms-fill-upper {
         color: $color-black;
         display: flex;
         font-size: $fs14;
-        padding: $small;
+        padding: $size-2;
         width: 100%;
         align-items: center;
       }
diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss
index 49aee2b0f0..627753cf01 100644
--- a/frontend/resources/styles/main/layouts/login.scss
+++ b/frontend/resources/styles/main/layouts/login.scss
@@ -64,7 +64,7 @@
     width: 100%;
 
     *:not(:last-child) {
-      margin-bottom: $medium;
+      margin-bottom: $size-4;
     }
   }
 
@@ -72,7 +72,7 @@
     width: 412px;
 
     .auth-buttons {
-      margin-top: $x-big;
+      margin-top: $size-6;
     }
 
     form {
@@ -81,12 +81,12 @@
   }
 
   .btn-google-auth {
-    margin-bottom: $medium;
+    margin-bottom: $size-4;
     text-decoration: none;
   }
 
   .btn-gitlab-auth {
-    margin-bottom: $medium;
+    margin-bottom: $size-4;
     text-decoration: none;
 
     .logo {
@@ -97,7 +97,7 @@
   }
 
   .btn-github-auth {
-    margin-bottom: $medium;
+    margin-bottom: $size-4;
     text-decoration: none;
 
     .logo {
@@ -119,13 +119,13 @@
     font-size: $fs14;
     flex-direction: column;
     justify-content: space-between;
-    margin-top: $medium;
-    margin-bottom: $medium;
+    margin-top: $size-4;
+    margin-bottom: $size-4;
 
 
     &.demo {
       justify-content: center;
-      margin-top: $big;
+      margin-top: $size-5;
     }
 
     .link-entry {
@@ -141,11 +141,11 @@
 }
 
 .terms-login {
-  bottom: $big;
+  bottom: $size-5;
   font-size: $fs14;
   position: absolute;
 
   span {
-    margin: 0 $small;
+    margin: 0 $size-2;
   }
 }
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
index b1fb0dc947..97e7940b46 100644
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ b/frontend/resources/styles/main/partials/activity-bar.scss
@@ -24,7 +24,7 @@
     color: $color-gray-40;
     font-size: $fs16;
     font-weight: bold;
-    margin-bottom: $x-small;
+    margin-bottom: $size-1;
   }
 
   .date-ribbon {
@@ -41,14 +41,14 @@
     border-bottom: 1px solid $color-gray-10;
     display: flex;
     font-size: $fs13;
-    padding: $small;
+    padding: $size-2;
     width: 100%;
 
     img.activity-author {
       border-radius: 50%;
       flex-shrink: 0;
       height: 30px;
-      margin-right: $medium;
+      margin-right: $size-4;
       width: 30px;
     }
 
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
index eb4882a510..9522617764 100644
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -78,7 +78,7 @@ ul.palette-menu .color-bullet {
   border: 1px solid $color-gray-20;
   border-radius: 10px;
   height: 20px;
-  margin-right: $x-small;
+  margin-right: $size-1;
   width: 20px;
 }
 
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index e0b0ed1788..195b7f69bb 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -13,7 +13,7 @@
 .colorpicker-content {
   display: flex;
   flex-direction: column;
-  padding: $small;
+  padding: $size-2;
 
   & > * {
     width: 200px;
@@ -21,7 +21,7 @@
 
   .top-actions {
     display: flex;
-    margin-bottom: $x-small;
+    margin-bottom: $size-1;
     justify-content: space-between;
 
     .picker-btn {
@@ -50,7 +50,7 @@
       margin: 0;
       border: 1px solid $color-gray-20;
       border-radius: 2px;
-      margin-left: $x-small;
+      margin-left: $size-1;
     }
 
     .active {
@@ -69,8 +69,8 @@
   .gradient-stops {
     height: 10px;
     display: flex;
-    margin-top: $small;
-    margin-bottom: $medium;
+    margin-top: $size-2;
+    margin-bottom: $size-4;
 
     .gradient-background-wrapper {
       height: 100%;
@@ -282,7 +282,7 @@
       border-radius: 2px;
       font-size: $fs11;
       height: 1.5rem;
-      padding: 0 $x-small;
+      padding: 0 $size-1;
       color: $color-gray-40;
     }
 
@@ -303,9 +303,9 @@
       background-position: 95% 48%;
       background-size: 10px;
       margin: 0;
-      margin-bottom: $small;
+      margin-bottom: $size-2;
       width: 100%;
-      padding: $x-small 0.25rem;
+      padding: $size-1 0.25rem;
       font-size: 0.75rem;
       color: $color-gray-40;
       cursor: pointer;
@@ -444,7 +444,7 @@
 
   .colorpicker-tabs {
     display: flex;
-    margin-bottom: $small;
+    margin-bottom: $size-2;
     border-radius: 5px;
     border: 1px solid $color-gray-10;
     height: 2rem;
@@ -480,7 +480,7 @@
 .color-data {
   align-items: center;
   display: flex;
-  margin-bottom: $small;
+  margin-bottom: $size-2;
   position: relative;
 
   .color-name {
@@ -498,7 +498,7 @@
       color: $color-white;
       height: 20px;
       margin: 5px 0 0 0;
-      padding: 0 $x-small;
+      padding: 0 $size-1;
       width: 84px;
       font-size: $fs13;
 
@@ -523,7 +523,7 @@
 
   .type {
     color: $color-gray-10;
-    margin-right: $x-small;
+    margin-right: $size-1;
   }
 
   .number {
diff --git a/frontend/resources/styles/main/partials/comments.scss b/frontend/resources/styles/main/partials/comments.scss
index cc6248efa9..722f992ae0 100644
--- a/frontend/resources/styles/main/partials/comments.scss
+++ b/frontend/resources/styles/main/partials/comments.scss
@@ -73,7 +73,7 @@
       min-height: 32px;
       outline: none;
       overflow: hidden;
-      padding: $small;
+      padding: $size-2;
       resize: none;
       width: 100%;
       border-radius: 2px;
@@ -104,7 +104,7 @@
   .comment {
     display: flex;
     flex-direction: column;
-    padding: $medium $small;
+    padding: $size-4 $size-2;
 
     .author {
       display: flex;
@@ -183,11 +183,11 @@
     }
 
     .content {
-      margin: $medium 0;
+      margin: $size-4 0;
       font-size: $fs14;
       color: $color-black;
       .text {
-        margin: 0 $small 0 26px;
+        margin: 0 $size-2 0 26px;
         white-space: pre-wrap;
         display: inline-block;
       }
@@ -295,7 +295,7 @@
   .comment {
     cursor: pointer;
     .author {
-      margin-bottom: $medium;
+      margin-bottom: $size-4;
       .name {
         display: flex;
 
@@ -317,7 +317,7 @@
       color: $color-white;
 
       &.replies {
-        margin: 0 $small 0 26px;
+        margin: 0 $size-2 0 26px;
         display: flex;
         .total-replies {
           margin-right: 9px;
@@ -455,13 +455,13 @@
   display: flex;
   flex-direction: column;
   font-size: $fs12;
-  padding: $big;
+  padding: $size-5;
   text-align: center;
 
   svg {
     fill: $color-gray-20;
     height: 24px;
-    margin-bottom: $big;
+    margin-bottom: $size-5;
     width: 24px;
   }
 }
diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss
index d052cd3498..ce19531bc8 100644
--- a/frontend/resources/styles/main/partials/context-menu.scss
+++ b/frontend/resources/styles/main/partials/context-menu.scss
@@ -82,7 +82,7 @@
         height: 10px;
         width: 10px;
         transform: rotate(180deg);
-        margin-right: $small;
+        margin-right: $size-2;
       }
     }
 }
diff --git a/frontend/resources/styles/main/partials/dashboard-fonts.scss b/frontend/resources/styles/main/partials/dashboard-fonts.scss
index 2370def964..e1ea817ebf 100644
--- a/frontend/resources/styles/main/partials/dashboard-fonts.scss
+++ b/frontend/resources/styles/main/partials/dashboard-fonts.scss
@@ -7,13 +7,13 @@
     max-width: 1000px;
     width: 100%;
     display: flex;
-    margin-top: $big;
+    margin-top: $size-5;
     flex-direction: column;
 
     h3 {
       font-size: $fs14;
       color: $color-gray-30;
-      margin: $x-small;
+      margin: $size-1;
     }
 
     .font-item {
@@ -28,7 +28,7 @@
     font-size: $fs12;
     background-color: $color-white;
     align-items: center;
-    padding: 0px $big;
+    padding: 0px $size-5;
 
     > .family {
       min-width: 200px;
@@ -49,14 +49,14 @@
         border: 1px solid $color-gray-30;
         border-radius: $br-small;
         width: 130px;
-        padding: $x-small;
+        padding: $size-1;
         margin: 0px;
       }
     }
   }
 
   .font-item {
-    margin-top: $big;
+    margin-top: $size-5;
     color: $color-gray-40;
     font-size: $fs14;
     background-color: $color-white;
@@ -65,7 +65,7 @@
     width: 100%;
     min-height: 97px;
     align-items: center;
-    padding: $big;
+    padding: $size-5;
     justify-content: space-between;
 
     &:not(:first-child) {
@@ -76,7 +76,7 @@
       border: 1px solid $color-gray-30;
       border-radius: $br-small;
       margin: 0px;
-      padding: $small;
+      padding: $size-2;
       font-size: $fs12;
     }
 
@@ -135,7 +135,7 @@
       justify-content: flex-end;
 
       .icon {
-        width: $big;
+        width: $size-5;
         cursor: pointer;
         display: flex;
         margin-left: 10px;
@@ -169,9 +169,9 @@
   .dashboard-fonts-hero {
     font-size: $fs14;
 
-    padding: $x-big;
+    padding: $size-6;
     background-color: $color-white;
-    margin-top: $x-big;
+    margin-top: $size-6;
     display: flex;
     justify-content: space-between;
 
@@ -193,7 +193,7 @@
 
     .desc {
       h2 {
-        margin-bottom: $medium;
+        margin-bottom: $size-4;
         color: $color-black;
       }
       width: 80%;
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index 67aaa4ca5f..15ef266111 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -28,7 +28,7 @@
     flex-direction: column;
     flex-shrink: 0;
     height: 200px;
-    margin: $medium;
+    margin: $size-4;
     max-width: 260px;
     min-width: 260px;
     position: relative;
@@ -85,7 +85,7 @@
     &.small-item {
       max-width: 12%;
       min-width: 190px;
-      padding: $medium;
+      padding: $size-4;
       justify-content: center;
     }
 
@@ -97,7 +97,7 @@
     .item-info {
       display: flex;
       flex-direction: column;
-      padding: $small;
+      padding: $size-2;
       text-align: left;
       width: 100%;
 
@@ -109,7 +109,7 @@
         overflow: hidden;
         padding: 0;
         height: 27px;
-        padding-right: $small;
+        padding-right: $size-2;
         text-overflow: ellipsis;
         width: 100%;
         white-space: nowrap;
@@ -141,8 +141,8 @@
       border: 1px solid $color-gray-20;
       border-radius: 4px;
       position: absolute;
-      top: $x-small;
-      right: $x-small;
+      top: $size-1;
+      right: $size-1;
       height: 32px;
       width: 32px;
       display: flex;
@@ -205,7 +205,7 @@
         .project-th-icon {
           align-items: center;
           display: flex;
-          margin-right: $small;
+          margin-right: $size-2;
 
           &.menu {
             margin-right: 0;
@@ -296,7 +296,7 @@
 
   // STYLES FOR LIBRARIES
   &.library {
-    padding: $medium;
+    padding: $size-4;
   }
 
   .grid-item-th {
diff --git a/frontend/resources/styles/main/partials/dashboard-header.scss b/frontend/resources/styles/main/partials/dashboard-header.scss
index 3c5c7ab400..7f5bf5a4dd 100644
--- a/frontend/resources/styles/main/partials/dashboard-header.scss
+++ b/frontend/resources/styles/main/partials/dashboard-header.scss
@@ -9,13 +9,13 @@
   background-color: $color-white;
   display: flex;
   height: 63px;
-  padding: $x-small $medium $x-small $small;
+  padding: $size-1 $size-4 $size-1 $size-2;
   position: relative;
   z-index: 10;
   justify-content: space-between;
 
   .element-name {
-    margin-right: $small;
+    margin-right: $size-2;
   }
 
   .btn-secondary {
@@ -27,7 +27,7 @@
   svg {
     fill: $color-black;
     height: 14px;
-    margin-right: $x-small;
+    margin-right: $size-1;
     width: 14px;
   }
 
@@ -52,7 +52,7 @@
         color: $color-gray-30;
         display: flex;
         height: 40px;
-        padding: $x-small $big;
+        padding: $size-1 $size-5;
         flex-basis: 140px;
 
         &:hover {
@@ -90,7 +90,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin-left: $small;
+    margin-left: $size-2;
     z-index: 10;
 
     svg {
@@ -109,7 +109,7 @@
   }
 
   .pin-icon {
-    margin: 0 $small 0 $big;
+    margin: 0 $size-2 0 $size-5;
     svg {
       fill: $color-gray-20;
     }
diff --git a/frontend/resources/styles/main/partials/dashboard-settings.scss b/frontend/resources/styles/main/partials/dashboard-settings.scss
index 7a81add248..8515c28cc9 100644
--- a/frontend/resources/styles/main/partials/dashboard-settings.scss
+++ b/frontend/resources/styles/main/partials/dashboard-settings.scss
@@ -64,7 +64,7 @@
       border-radius: 50%;
       flex-shrink: 0;
       height: 120px;
-      margin-right: $medium;
+      margin-right: $size-4;
       width: 120px;
     }
 
diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
index 2e90557595..1ec88ea2d8 100644
--- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
@@ -188,7 +188,7 @@
         border-radius: $br-small;
         content: "";
         height: 26px;
-        margin-right: $small;
+        margin-right: $size-2;
         width: 4px;
       }
 
@@ -284,7 +284,7 @@
       display: flex;
       height: 22px;
       margin-left: auto;
-      padding: 0 $small;
+      padding: 0 $size-2;
       width: 32px;
 
       svg {
@@ -390,7 +390,7 @@
     svg {
       height: 10px;
       margin-left: auto;
-      margin-right: $small;
+      margin-right: $size-2;
       width: 10px;
     }
   }
@@ -409,7 +409,7 @@
 
       svg {
         fill: $color-gray-20;
-        margin-right: $small;
+        margin-right: $size-2;
 
         height: 12px;
         width: 12px;
diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss
index 6c90ee4f5d..baa726806e 100644
--- a/frontend/resources/styles/main/partials/dashboard.scss
+++ b/frontend/resources/styles/main/partials/dashboard.scss
@@ -9,7 +9,7 @@
   border-top-right-radius: $br-huge;
   border-top-left-radius: $br-huge;
   flex: 1 0 0;
-  margin-right: $medium;
+  margin-right: $size-4;
   overflow-y: auto;
   user-select: none;
 
@@ -19,7 +19,7 @@
 }
 
 .dashboard-project-row {
-  margin-bottom: $medium;
+  margin-bottom: $size-4;
 
   .project {
     align-items: center;
@@ -27,9 +27,9 @@
     border-radius: $br-small;
     display: flex;
     flex-direction: row;
-    margin-left: $medium;
-    margin-top: $medium;
-    padding: $x-small $x-small $x-small $small;
+    margin-left: $size-4;
+    margin-top: $size-4;
+    padding: $size-1 $size-1 $size-1 $size-2;
     width: fit-content;
     height: 40px;
 
@@ -44,11 +44,11 @@
       line-height: 1rem;
       font-weight: 500;
       color: $color-black;
-      margin-right: $medium;
+      margin-right: $size-4;
     }
 
     .edit-wrapper {
-      margin-right: $medium;
+      margin-right: $size-4;
     }
 
     .info {
@@ -138,7 +138,7 @@
   border: 1px solid $color-gray-10;
   border-radius: $br-small;
   display: flex;
-  padding-right: $big;
+  padding-right: $size-5;
   position: relative;
 
   input.element-title {
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index fb6d3c6868..284e40059b 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -664,7 +664,7 @@
     .libraries-search {
       border: 1px solid $color-gray-20;
       margin: $size-4;
-      padding: $x-small $small;
+      padding: $size-1 $size-2;
       display: flex;
       align-items: center;
 
@@ -720,7 +720,7 @@
     flex-shrink: 0;
     justify-content: center;
     overflow: hidden;
-    padding: $x-big;
+    padding: $size-6;
     width: 230px;
 
     &.welcome {
@@ -733,7 +733,7 @@
     border-bottom-right-radius: 5px;
     display: flex;
     flex-direction: column;
-    padding: $x-big;
+    padding: $size-6;
 
     .modal-title h2 {
       color: $color-black;
@@ -746,19 +746,19 @@
       color: $color-black;
       font-size: $fs12;
       font-weight: bold;
-      margin-top: $small;
-      padding: 2px $x-small;
+      margin-top: $size-2;
+      padding: 2px $size-1;
       width: max-content;
     }
 
     .modal-content {
       border: none;
-      padding: $big 0;
+      padding: $size-5 0;
 
       p {
         color: $color-black;
         font-size: 16px;
-        margin-top: $small;
+        margin-top: $size-2;
       }
     }
 
@@ -771,7 +771,7 @@
         cursor: pointer;
         font-family: "worksans", sans-serif;
         font-size: $fs13;
-        margin-left: $big;
+        margin-left: $size-5;
 
         &:hover {
           color: $color-black;
@@ -789,9 +789,9 @@
         background-color: $color-gray-10;
         border-radius: 50%;
         cursor: pointer;
-        height: $small;
-        margin-left: $small;
-        width: $small;
+        height: $size-2;
+        margin-left: $size-2;
+        width: $size-2;
 
         &.current {
           background-color: $color-primary;
@@ -824,7 +824,7 @@
   }
 
   &.final {
-    padding: $big 0 0 0;
+    padding: $size-5 0 0 0;
 
     .modal-left,
     .modal-right {
@@ -834,12 +834,12 @@
       flex: 1;
       flex-direction: column;
       overflow: visible;
-      padding: $x-big 40px;
+      padding: $size-6 40px;
       text-align: center;
 
       h2 {
         font-weight: 900;
-        margin-bottom: $big;
+        margin-bottom: $size-5;
         font-size: $fs24;
       }
 
@@ -856,7 +856,7 @@
       img {
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
         border-radius: $br-medium;
-        margin-bottom: $x-big;
+        margin-bottom: $size-6;
         margin-top: -90px;
         width: 150px;
       }
@@ -872,7 +872,7 @@
         margin-top: auto;
 
         .custom-input {
-          margin-bottom: $medium;
+          margin-bottom: $size-4;
 
           input {
             width: 200px;
diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss
index 709d2b2ea3..10048c209f 100644
--- a/frontend/resources/styles/main/partials/project-bar.scss
+++ b/frontend/resources/styles/main/partials/project-bar.scss
@@ -30,7 +30,7 @@
       border-bottom: 1px solid $color-gray-10;
       font-size: $fs14;
       font-weight: bold;
-      padding: 0 $small;
+      padding: 0 $size-2;
       width: 100%;
     }
 
@@ -38,7 +38,7 @@
     .btn-warning {
       font-size: $fs13;
       margin-bottom: .5rem;
-      padding: 8px $small;
+      padding: 8px $size-2;
       width: 90%;
     }
 
@@ -53,13 +53,13 @@
     align-items: center;
     cursor: pointer;
     display: flex;
-    padding: $x-small $small;
+    padding: $size-1 $size-2;
     position: relative;
 
     svg {
       fill: $color-gray-20;
       height: 12px;
-      margin-right: $x-small;
+      margin-right: $size-1;
       width: 12px;
     }
 
@@ -86,7 +86,7 @@
       svg {
         fill: $color-gray-20;
         height: 12px;
-        margin-right: $small;
+        margin-right: $size-2;
         width: 12px;
 
         &:hover {
diff --git a/frontend/resources/styles/main/partials/sidebar-align-options.scss b/frontend/resources/styles/main/partials/sidebar-align-options.scss
index f07882f237..18ced65183 100644
--- a/frontend/resources/styles/main/partials/sidebar-align-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-align-options.scss
@@ -11,7 +11,7 @@
   height: 40px;
 
   .align-group {
-    padding: 0 $x-small;
+    padding: 0 $size-1;
     display: flex;
     justify-content: flex-start;
     width: 50%;
@@ -28,7 +28,7 @@
     height: 30px;
     justify-content: center;
     margin: 5px 0;
-    padding: $small $x-small;
+    padding: $size-2 $size-1;
     width: 25%;
 
     svg {
diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss
index 122f5e8aa1..3b3c10230c 100644
--- a/frontend/resources/styles/main/partials/sidebar-assets.scss
+++ b/frontend/resources/styles/main/partials/sidebar-assets.scss
@@ -14,7 +14,7 @@
   .assets-bar-title {
     color: $color-gray-10;
     font-size: $fs14;
-    margin: $small $small 0 $small;
+    margin: $size-2 $size-2 0 $size-2;
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -43,8 +43,8 @@
 
   .search-block {
     border: 1px solid $color-gray-30;
-    margin: $small $small 0 $small;
-    padding: $x-small $small;
+    margin: $size-2 $size-2 0 $size-2;
+    padding: $size-1 $size-2;
     display: flex;
     align-items: center;
 
@@ -92,8 +92,8 @@
     color: $color-gray-10;
     border: 1px solid transparent;
     border-bottom-color: $color-gray-40;
-    padding: $x-small;
-    margin: $small $small $medium $small;
+    padding: $size-1;
+    margin: $size-2 $size-2 $size-4 $size-2;
 
     &:focus {
       color: lighten($color-gray-10, 8%);
@@ -107,7 +107,7 @@
   }
 
   .collapse-library {
-    margin-right: $small;
+    margin-right: $size-2;
 
     &.open svg {
       transform: rotate(90deg);
@@ -122,7 +122,7 @@
     background-color: $color-gray-60;
     display: flex;
     align-items: center;
-    padding: $medium $small 0 $small;
+    padding: $size-4 $size-2 0 $size-2;
 
     .selected-count {
       color: $color-primary;
@@ -131,7 +131,7 @@
 
     .listing-option-btn {
       cursor: pointer;
-      margin-left: $small;
+      margin-left: $size-2;
 
       &.first {
         margin-left: auto;
@@ -147,7 +147,7 @@
 
   .asset-section {
     background-color: $color-gray-60;
-    padding: $small;
+    padding: $size-2;
     font-size: $fs12;
     color: $color-gray-20;
     /* TODO: see if this is useful, or is better to leave only
@@ -188,8 +188,8 @@
     .group-title {
       display: flex;
       cursor: pointer;
-      margin-top: $small;
-      margin-bottom: $x-small;
+      margin-top: $size-2;
+      margin-bottom: $size-1;
       color: $color-white;
 
       & svg {
@@ -226,7 +226,7 @@
     }
 
     .asset-title + .asset-grid {
-      margin-top: $small;
+      margin-top: $size-2;
     }
 
     .asset-grid {
@@ -241,7 +241,7 @@
         grid-auto-rows: 10vh;
 
         .grid-cell {
-          padding: $x-small;
+          padding: $size-1;
 
           & svg {
             height: 10vh;
@@ -258,7 +258,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: $small;
+      padding: $size-2;
       position: relative;
       cursor: pointer;
 
@@ -316,14 +316,14 @@
     }
 
     .asset-title + .asset-enum {
-      margin-top: $small;
+      margin-top: $size-2;
     }
 
     .asset-enum {
       .enum-item {
         display: flex;
         align-items: center;
-        margin-bottom: $small;
+        margin-bottom: $size-2;
         cursor: pointer;
 
         & > svg,
@@ -333,11 +333,11 @@
           border: 2px solid transparent;
           height: 24px;
           width: 24px;
-          margin-right: $small;
+          margin-right: $size-2;
         }
 
         .item-name {
-          width: calc(100% - 24px - #{$small});
+          width: calc(100% - 24px - #{$size-2});
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -378,14 +378,14 @@
       align-items: center;
       border: 1px solid transparent;
       border-radius: $br-small;
-      margin-top: $x-small;
+      margin-top: $size-1;
       padding: 2px;
       font-size: $fs12;
       color: $color-white;
       cursor: pointer;
 
       & span {
-        margin-left: $x-small;
+        margin-left: $size-1;
         color: $color-gray-30;
         text-transform: uppercase;
       }
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 4bfe3b3691..18519c0141 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -14,7 +14,7 @@
     border: 1px solid $color-gray-60;
     border-radius: $br-small;
     display: flex;
-    margin: $x-small;
+    margin: $size-1;
 
     li {
       align-items: center;
@@ -24,7 +24,7 @@
       display: flex;
       flex: 1;
       justify-content: center;
-      padding: $small;
+      padding: $size-2;
 
       svg {
         fill: $color-gray-20;
@@ -60,13 +60,13 @@
   .element-set {
     border-bottom: 1px solid $color-gray-60;
     color: $color-gray-20;
-    padding: $small $x-small;
+    padding: $size-2 $size-1;
 
     .element-set-title {
       color: $color-gray-20;
       display: flex;
       font-size: $fs13;
-      padding: $x-small;
+      padding: $size-1;
       width: 100%;
       align-items: center;
     }
@@ -79,14 +79,14 @@
   }
 
   .element-list {
-    margin-bottom: $small;
+    margin-bottom: $size-2;
 
     li {
       align-items: center;
       border-bottom: 1px solid $color-gray-60;
       display: flex;
       flex-direction: row;
-      padding: $small;
+      padding: $size-2;
       width: 100%;
 
       .list-icon {
@@ -94,7 +94,7 @@
         svg {
           fill: $color-gray-30;
           height: 15px;
-          margin-right: $x-small;
+          margin-right: $size-1;
           width: 15px;
         }
 
@@ -120,7 +120,7 @@
           svg {
             fill: $color-gray-60;
             height: 15px;
-            margin-left: $x-small;
+            margin-left: $size-1;
             width: 15px;
 
             &:hover {
@@ -184,7 +184,7 @@
 .element-set-content {
   display: flex;
   flex-direction: column;
-  padding: $x-small;
+  padding: $size-1;
   width: 100%;
 
   .input-text {
@@ -193,9 +193,9 @@
     border-bottom-color: $color-gray-40;
     color: $color-white;
     font-size: $fs12;
-    margin: $x-small;
+    margin: $size-1;
     min-width: 0;
-    padding: $x-small;
+    padding: $size-1;
     width: 100%;
 
     &:focus {
@@ -305,12 +305,12 @@
     border: 1px solid $color-gray-40;
     border-radius: $br-small;
     cursor: pointer;
-    padding: $x-small $big $x-small $x-small;
+    padding: $size-1 $size-5 $size-1 $size-1;
     position: relative;
 
     .dropdown-button {
       position: absolute;
-      right: $x-small;
+      right: $size-1;
       top: 7px;
 
       svg {
@@ -356,7 +356,7 @@
       cursor: pointer;
       font-size: $fs14;
       display: flex;
-      padding: $small;
+      padding: $size-2;
 
       span {
         color: $color-gray-20;
@@ -409,7 +409,7 @@
     border: 1px solid transparent;
     position: relative;
     height: 38px;
-    margin-right: $small;
+    margin-right: $size-2;
     max-height: 30px;
     position: relative;
     width: 60%;
@@ -528,7 +528,7 @@
     fill: $color-gray-20;
     height: 16px;
     width: 16px;
-    margin-right: $small;
+    margin-right: $size-2;
   }
 
   .row-actions {
@@ -538,7 +538,7 @@
     svg {
       fill: $color-gray-20;
       height: 12px;
-      margin-right: $x-small;
+      margin-right: $size-1;
       width: 12px;
     }
 
@@ -577,8 +577,8 @@
   display: flex;
   flex: 1;
   justify-content: flex-end;
-  margin: $small 0 $small $small;
-  padding: 0 $x-small;
+  margin: $size-2 0 $size-2 $size-2;
+  padding: 0 $size-1;
 
   &:first-child {
     justify-content: flex-start;
@@ -590,7 +590,7 @@
     display: flex;
     height: 20px;
     justify-content: center;
-    margin-right: $small;
+    margin-right: $size-2;
     position: relative;
     width: 20px;
 
@@ -679,7 +679,7 @@
 }
 
 .orientation-icon {
-  margin-left: $small;
+  margin-left: $size-2;
   display: flex;
   align-items: center;
 
@@ -700,7 +700,7 @@
 .navigate-icon {
   background-color: $color-gray-60;
   cursor: pointer;
-  margin-left: $small;
+  margin-left: $size-2;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -726,7 +726,7 @@
   width: 100%;
 
   &:first-child {
-    margin-right: $small;
+    margin-right: $size-2;
   }
 
   .icon-before {
@@ -1210,7 +1210,7 @@
     position: relative;
 
     .backend-filters {
-      padding: $small $medium;
+      padding: $size-2 $size-4;
       // width: 220px;
       top: 40px;
       right: 20px;
@@ -1218,15 +1218,15 @@
     .backend-filter {
       display: flex;
       align-items: center;
-      padding: $small 0;
+      padding: $size-2 0;
       cursor: pointer;
 
       .checkbox-icon {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: $medium;
-        height: $medium;
+        width: $size-4;
+        height: $size-4;
         border: 1px solid $color-gray-30;
         border-radius: $br-small;
 
@@ -1239,7 +1239,7 @@
       }
 
       .backend-name {
-        margin-left: $small;
+        margin-left: $size-2;
         color: $color-gray-50;
       }
 
@@ -1271,7 +1271,7 @@
       align-items: center;
       width: 24px;
       height: 24px;
-      margin-left: $small;
+      margin-left: $size-2;
 
       svg {
         width: 16px;
@@ -1303,9 +1303,9 @@
   }
 
   .font-item {
-    padding-left: $big;
-    height: $x-big;
-    max-height: $x-big;
+    padding-left: $size-5;
+    height: $size-6;
+    max-height: $size-6;
     width: 100%;
     display: flex;
     align-items: center;
@@ -1329,7 +1329,7 @@
       // justify-content: center;
       align-items: center;
       // border: 1px solid red;
-      width: $big
+      width: $size-5
     }
 
     .label {
@@ -1458,13 +1458,13 @@
 
   .input-select {
     font-size: $fs11;
-    margin: 0 $x-small;
+    margin: 0 $size-1;
   }
 
   svg {
     width: 15px;
     height: 15px;
-    margin-left: $medium;
+    margin-left: $size-4;
     fill: $color-gray-20;
   }
 
@@ -1481,7 +1481,7 @@
     cursor: pointer;
 
     span {
-      margin-left: $small;
+      margin-left: $size-2;
     }
 
     &:hover,
@@ -1502,9 +1502,9 @@
   color: $color-gray-10;
   cursor: pointer;
   font-size: $fs11;
-  margin: $x-small;
+  margin: $size-1;
   overflow: hidden;
-  padding: $x-small;
+  padding: $size-1;
   padding-right: 20px;
   position: relative;
   text-overflow: ellipsis;
@@ -1544,6 +1544,6 @@
 
   & li img {
     width: 16px;
-    margin-right: $small;
+    margin-right: $size-2;
   }
 }
diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss
index 32eab98cc1..8af2365f65 100644
--- a/frontend/resources/styles/main/partials/sidebar-icons.scss
+++ b/frontend/resources/styles/main/partials/sidebar-icons.scss
@@ -7,7 +7,7 @@
 
 .figures-catalog {
   width: 100%;
-  padding: $medium $medium 0 $medium;
+  padding: $size-4 $size-4 0 $size-4;
 
   select {
     color: $color-gray-10;
@@ -27,7 +27,7 @@
   flex-shrink: 0;
   height: 54px;
   justify-content: center;
-  margin: $medium 0 0 $medium;
+  margin: $size-4 0 0 $size-4;
   width: 54px;
 
   svg {
diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss
index c01779e32d..013ee9838b 100644
--- a/frontend/resources/styles/main/partials/sidebar-interactions.scss
+++ b/frontend/resources/styles/main/partials/sidebar-interactions.scss
@@ -7,12 +7,12 @@
 
 .interactions-help {
   font-size: $fs12;
-  padding: 7px $medium;
+  padding: 7px $size-4;
   margin: 0 -7px;
   text-align: center;
 
   &.separator {
-    padding-bottom: $medium;
+    padding-bottom: $size-4;
     border-bottom: 1px solid $color-black;
   }
 }
@@ -20,7 +20,7 @@
 .interactions-help-icon {
   height: 32px;
   width: 32px;
-  margin: $medium auto;
+  margin: $size-4 auto;
 
   svg {
     fill: $color-gray-40;
@@ -59,14 +59,14 @@
 
   &.separator {
     border-top: 1px solid $color-black;
-    margin-top: $x-small;
+    margin-top: $size-1;
   }
 }
 
 .interactions-pos-buttons {
-  margin-top: $small;
-  padding-top: $small;
-  padding-bottom: $small;
+  margin-top: $size-2;
+  padding-top: $size-2;
+  padding-bottom: $size-2;
   justify-content: space-between;
 
   .element-set-actions-button {
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index d31e5c7b76..19442c608d 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -9,7 +9,7 @@
   align-items: center;
   display: flex;
   height: 32px;
-  padding: $x-small $small;
+  padding: $size-1 $size-2;
   transition: none;
   width: 100%;
 
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index b04d09fe79..57d82086d2 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -21,7 +21,7 @@
         svg {
           fill: $color-gray-30;
           height: 13px;
-          margin-right: $x-small;
+          margin-right: $size-1;
           width: 13px;
         }
 
@@ -46,7 +46,7 @@
           svg {
             fill: $color-gray-60;
             height: 15px;
-            margin-left: $x-small;
+            margin-left: $size-1;
             width: 15px;
           }
 
@@ -110,7 +110,7 @@
     .element-list-body {
       align-items: center;
       display: flex;
-      padding: $x-small $small;
+      padding: $size-1 $size-2;
       transition: none;
       width: 100%;
 
@@ -146,7 +146,7 @@
   display: flex;
   justify-content: center;
   margin-left: auto;
-  padding: $x-small;
+  padding: $size-1;
 
   svg {
     fill: $color-gray-20;
@@ -175,7 +175,7 @@
 }
 
 .collapse-pages {
-  margin-left: $small;
+  margin-left: $size-2;
 
   svg {
     transform: rotate(90deg);
diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss
index 7a2b684b7a..2254f240b8 100644
--- a/frontend/resources/styles/main/partials/sidebar-tools.scss
+++ b/frontend/resources/styles/main/partials/sidebar-tools.scss
@@ -18,7 +18,7 @@
   flex-shrink: 0;
   height: 54px;
   justify-content: center;
-  margin: $medium 0 0 $medium;
+  margin: $size-4 0 0 $size-4;
   width: 54px;
 
   svg {
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index d2f630bb53..38f86fd5a4 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -82,7 +82,7 @@ $width-settings-bar: 16rem;
         align-items: center;
         display: flex;
         flex-shrink: 0;
-        padding: $small;
+        padding: $size-2;
         overflow: hidden;
 
         svg {
@@ -141,7 +141,7 @@ $width-settings-bar: 16rem;
         }
 
         .tool-window-icon {
-          margin-right: $small;
+          margin-right: $size-2;
           display: none;
         }
 
diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss
index 8d66fd8821..a95de86065 100644
--- a/frontend/resources/styles/main/partials/tool-bar.scss
+++ b/frontend/resources/styles/main/partials/tool-bar.scss
@@ -24,7 +24,7 @@
 
       li {
         cursor: pointer;
-        margin-bottom: $big;
+        margin-bottom: $size-5;
 
         svg {
           fill: $color-gray-20;
diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss
index a06c5b1506..1927291db5 100644
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ b/frontend/resources/styles/main/partials/user-settings.scss
@@ -165,7 +165,7 @@
       border-radius: 50%;
       flex-shrink: 0;
       height: 120px;
-      margin-right: $medium;
+      margin-right: $size-4;
       width: 120px;
     }
   }
@@ -179,7 +179,7 @@
     h2 {
       font-size: $fs14;
       font-weight: normal;
-      margin-bottom: $medium;
+      margin-bottom: $size-4;
     }
   }
 }
diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss
index 24b9d802be..024fb7353b 100644
--- a/frontend/resources/styles/main/partials/viewer-header.scss
+++ b/frontend/resources/styles/main/partials/viewer-header.scss
@@ -4,7 +4,7 @@
   border-bottom: 1px solid  $color-gray-60;
   display: flex;
   height: 48px;
-  padding: 0 $medium 0 55px;
+  padding: 0 $size-4 0 55px;
   position: relative;
   z-index: 12;
   justify-content: space-between;
@@ -50,7 +50,7 @@
     position: relative;
 
     > * {
-      margin-left: $big;
+      margin-left: $size-5;
     }
 
     .btn-primary {
@@ -73,7 +73,7 @@
       > span {
         color: $color-gray-10;
         font-size: $fs13;
-        margin-right: $x-small;
+        margin-right: $size-1;
       }
 
       > .icon {
@@ -107,7 +107,7 @@
     align-items: center;
     cursor: pointer;
     display: flex;
-    padding: $x-small;
+    padding: $size-1;
     position: relative;
 
     .icon {
@@ -118,7 +118,7 @@
       svg {
         fill: $color-gray-20;
         height: 12px;
-        margin-right: $small;
+        margin-right: $size-2;
         width: 12px;
       }
     }
@@ -129,7 +129,7 @@
 
       > span {
         color: $color-gray-20;
-        margin-right: $x-small;
+        margin-right: $size-1;
         font-size: $fs14;
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -146,7 +146,7 @@
       display: flex;
       span {
         color: $color-white;
-        margin-right: $x-small;
+        margin-right: $size-1;
       }
 
       .counters {
@@ -192,7 +192,7 @@
     margin: 0;
 
     li {
-      margin-left: $small;
+      margin-left: $size-2;
       position: relative;
 
       img {
diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss
index 7c588f3587..2b3034974f 100644
--- a/frontend/resources/styles/main/partials/workspace-header.scss
+++ b/frontend/resources/styles/main/partials/workspace-header.scss
@@ -10,7 +10,7 @@
   border-bottom: 1px solid  $color-gray-60;
   display: flex;
   height: 48px;
-  padding: $x-small $medium $x-small 55px;
+  padding: $size-1 $size-4 $size-1 55px;
   position: relative;
   z-index: 12;
   justify-content: space-between;
@@ -56,7 +56,7 @@
   }
 
   .shared-badge {
-    margin-left: $x-small;
+    margin-left: $size-1;
     height: 16px;
     width: 16px;
     display: flex;
@@ -81,7 +81,7 @@
     position: relative;
 
     > * {
-      margin-left: $big;
+      margin-left: $size-5;
     }
 
     .zoom-dropdown {
@@ -93,13 +93,13 @@
   .project-tree {
     align-items: center;
     display: flex;
-    margin-left: $x-small;
-    padding: $x-small;
+    margin-left: $size-1;
+    padding: $size-1;
 
     svg {
       fill: $color-gray-20;
       height: 20px;
-      margin-right: $small;
+      margin-right: $size-2;
       width: 20px;
     }
 
@@ -112,7 +112,7 @@
 
       &.project-name {
         color: $color-gray-20;
-        margin-right: $x-small;
+        margin-right: $size-1;
         cursor: pointer;
 
         &:hover {
@@ -147,7 +147,7 @@
     li {
       cursor: pointer;
       font-size: $fs14;
-      padding: $small;
+      padding: $size-2;
       display: flex;
       justify-content: space-between;
 
@@ -159,7 +159,7 @@
 
       span {
         color: $color-gray-60;
-        margin: 0 $x-small;
+        margin: 0 $size-1;
       }
 
       .shortcut {
@@ -183,7 +183,7 @@
     margin: 0;
 
     li {
-      margin-left: $small;
+      margin-left: $size-2;
       position: relative;
 
       img {
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index a6ad2df1e7..97eae7c69c 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -18,12 +18,12 @@
   top: 40px;
   width: 240px;
   z-index: 12;
-  padding: $x-small 0;
+  padding: $size-1 0;
 
   li {
     align-items: center;
     font-size: $fs14;
-    padding: $x-small $medium;
+    padding: $size-1 $size-4;
     cursor: pointer;
 
     display: flex;
@@ -261,8 +261,8 @@
     border-radius: $br-small;
     color: $color-black;
     font-size: $fs12;
-    margin-left: $small;
-    padding: $x-small;
+    margin-left: $size-2;
+    padding: $size-1;
   }
 }
 
diff --git a/frontend/resources/styles/main/partials/zoom-widget.scss b/frontend/resources/styles/main/partials/zoom-widget.scss
index 16abbc1a14..7aa2a646ae 100644
--- a/frontend/resources/styles/main/partials/zoom-widget.scss
+++ b/frontend/resources/styles/main/partials/zoom-widget.scss
@@ -6,7 +6,7 @@
   span {
     color: $color-gray-10;
     font-size: $fs14;
-    margin-left: $x-small;
+    margin-left: $size-1;
   }
 
   .icon svg {
@@ -31,7 +31,7 @@
       cursor: pointer;
       font-size: $fs14;
       display: flex;
-      padding: $small;
+      padding: $size-2;
 
       span {
         color: $color-gray-20;