From be865af1fc1f87cfdc4eb9557f6d184214ddb891 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Kone=C4=8Dn=C3=BD?= <ondrej.konecny@gmail.com>
Date: Wed, 22 Feb 2023 13:52:45 +0100
Subject: [PATCH] :recycle: connect values with variables in CSS and remove
 unused code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Ondřej Konečný <ondrej.konecny@gmail.com>
---
 CHANGES.md                                    |   3 +-
 frontend/resources/styles/common/base.scss    |  16 +--
 .../styles/common/dependencies/fonts.scss     |  14 ++-
 .../styles/common/dependencies/helpers.scss   |  27 ++---
 .../dependencies/highlightjs-theme.scss       |   2 +-
 .../resources/styles/common/framework.scss    |  48 ++++----
 .../resources/styles/main/layouts/login.scss  |   6 +-
 .../styles/main/layouts/not-found.scss        |  12 +-
 .../styles/main/partials/activity-bar.scss    |   6 +-
 .../main/partials/af-signup-questions.scss    |  12 +-
 .../styles/main/partials/color-bullet.scss    |   2 +-
 .../styles/main/partials/color-palette.scss   |   8 +-
 .../styles/main/partials/colorpicker.scss     |  26 ++---
 .../styles/main/partials/comments.scss        |  16 +--
 .../styles/main/partials/context-menu.scss    |   8 +-
 .../styles/main/partials/dashboard-fonts.scss |   4 +-
 .../styles/main/partials/dashboard-grid.scss  |  34 +++---
 .../main/partials/dashboard-header.scss       |   4 +-
 .../main/partials/dashboard-sidebar.scss      |  18 +--
 .../styles/main/partials/dashboard-team.scss  |  28 ++---
 .../styles/main/partials/dashboard.scss       |  44 +++----
 .../styles/main/partials/dropdown.scss        |   4 +-
 .../styles/main/partials/exception-page.scss  |  12 +-
 .../resources/styles/main/partials/forms.scss |  14 +--
 .../styles/main/partials/inspect.scss         |  10 +-
 .../resources/styles/main/partials/modal.scss | 110 +++++++++---------
 .../styles/main/partials/project-bar.scss     |   2 +-
 .../styles/main/partials/sidebar-assets.scss  |  16 +--
 .../partials/sidebar-document-history.scss    |   2 +-
 .../partials/sidebar-element-options.scss     |  70 +++++------
 .../styles/main/partials/sidebar-icons.scss   |   2 +-
 .../main/partials/sidebar-interactions.scss   |   2 +-
 .../styles/main/partials/sidebar-layers.scss  |  14 +--
 .../styles/main/partials/sidebar-sitemap.scss |   4 +-
 .../styles/main/partials/sidebar-tools.scss   |   2 +-
 .../styles/main/partials/sidebar.scss         |  24 ++--
 .../styles/main/partials/tab-container.scss   |   4 +-
 .../styles/main/partials/text-palette.scss    |   2 +-
 .../styles/main/partials/user-settings.scss   |   4 +-
 .../main/partials/viewer-thumbnails.scss      |   2 +-
 .../styles/main/partials/viewer.scss          |   6 +-
 .../main/partials/workspace-header.scss       |  16 +--
 .../styles/main/partials/workspace.scss       |  14 +--
 .../styles/main/partials/zoom-widget.scss     |   2 +-
 44 files changed, 345 insertions(+), 331 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index dbe77b8ac6..16e6427ce2 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -14,7 +14,8 @@
 ### :arrow_up: Deps updates
 
 ### :heart: Community contributions by (Thank you!)
-
+- To @ondrejkonec: for contributing to the code with:
+- Refactor CSS variables [Github #2948](https://github.com/penpot/penpot/pull/2948)
 
 ## 1.17.2
 
diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index ba3cfe671a..c961d39542 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -56,7 +56,7 @@ svg {
 
 a {
   cursor: pointer;
-  font-weight: 500;
+  font-weight: $fw500;
   color: $color-gray-50;
 
   &:hover {
@@ -92,7 +92,7 @@ ul {
 }
 
 strong {
-  font-weight: bold;
+  font-weight: $fw700;
 }
 
 .relative {
@@ -101,7 +101,7 @@ strong {
 
 h1 {
   font-size: $fs34;
-  font-weight: 500;
+  font-weight: $fw500;
   line-height: $title-lh-sm;
 
   @include bp(baby-bear) {
@@ -111,7 +111,7 @@ h1 {
 
   &.supertitle {
     font-size: $fs44;
-    font-weight: 300;
+    font-weight: $fw300;
     line-height: $title-lh-sm;
 
     @include bp(baby-bear) {
@@ -122,7 +122,7 @@ h1 {
 }
 h2 {
   font-size: $fs24;
-  font-weight: 300;
+  font-weight: $fw300;
   line-height: $title-lh-sm;
 
   @include bp(baby-bear) {
@@ -133,13 +133,13 @@ h2 {
 
 h3 {
   font-size: $fs24;
-  font-weight: 300;
+  font-weight: $fw300;
   padding: 0.5rem 0;
 }
 
 h4 {
   font-size: $fs18;
-  font-weight: 300;
+  font-weight: $fw300;
 }
 
 @-webkit-keyframes rotation {
@@ -229,7 +229,7 @@ h4 {
 }
 
 .bold {
-  font-weight: bold !important;
+  font-weight: $fw700 !important;
 }
 
 .nopd {
diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss
index 21685554d3..f8022583dd 100644
--- a/frontend/resources/styles/common/dependencies/fonts.scss
+++ b/frontend/resources/styles/common/dependencies/fonts.scss
@@ -14,6 +14,7 @@ $fs13: 0.8125rem;
 $fs14: 0.875rem;
 $fs15: 0.9375rem;
 $fs16: 1rem;
+$fs17: 1.0625rem;
 $fs18: 1.125rem;
 $fs19: 1.1875rem;
 $fs20: 1.25rem;
@@ -30,8 +31,19 @@ $fs38: 2.375rem;
 $fs40: 2.5rem;
 $fs42: 2.675rem;
 $fs44: 2.75rem;
+$fs80: 5rem;
 
-$extrabold: 900;
+// Font weight
+// Taken from https://fonts.google.com/specimen/Work+Sans
+$fw100: 100; // Thin
+$fw200: 200; // Extra Light
+$fw300: 300; // Light
+$fw400: 400; // Regular (CSS value: 'normal')
+$fw500: 500; // Medium
+$fw600: 600; // Semi Bold
+$fw700: 700; // Bold (CSS value: 'bold')
+$fw800: 800; // Extra Bold
+$fw900: 900; // Black
 
 // Line height
 $base-lh: 1.43;
diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss
index 0027118f84..bad304b97b 100644
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ b/frontend/resources/styles/common/dependencies/helpers.scss
@@ -14,19 +14,20 @@ $size-5: 1.5rem;
 $size-6: 2rem;
 
 // Border radius
-$br-small: 3px;
-$br-medium: 5px;
-$br-big: 8px;
-$br-huge: 12px;
-
-// Alignments
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
+$br0: 0px;
+$br2: 2px;
+$br3: 3px;
+$br4: 4px;
+$br5: 5px;
+$br6: 6px;
+$br7: 7px;
+$br8: 8px;
+$br10: 10px;
+$br12: 12px;
+$br25: 25px;
+$br50: 50px;
+$br99: 99px;
+$br-circle: 50%; // Need to be investigated, before we can use variable
 
 .row-flex {
   align-items: center;
diff --git a/frontend/resources/styles/common/dependencies/highlightjs-theme.scss b/frontend/resources/styles/common/dependencies/highlightjs-theme.scss
index ba9963ff5d..8d8fbd6f99 100644
--- a/frontend/resources/styles/common/dependencies/highlightjs-theme.scss
+++ b/frontend/resources/styles/common/dependencies/highlightjs-theme.scss
@@ -37,7 +37,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 }
 
 .hljs-strong {
-  font-weight: bold;
+  font-weight: $fw700;
 }
 
 .hljs-emphasis {
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index df56e139dc..1e8abb2df7 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -11,7 +11,7 @@
   appearance: none;
   align-items: center;
   border: none;
-  border-radius: 3px;
+  border-radius: $br3;
   cursor: pointer;
   display: flex;
   font-family: "worksans", sans-serif;
@@ -209,28 +209,28 @@ input[type="button"][disabled],
 
 .text-error {
   background-color: $color-danger;
-  border-radius: 3px;
+  border-radius: $br3;
   color: $color-danger-lighter;
   padding: 3px 6px;
 }
 
 .text-success {
   background-color: $color-success;
-  border-radius: 3px;
+  border-radius: $br3;
   color: $color-white;
   padding: 3px 6px;
 }
 
 .text-warning {
   background-color: $color-warning;
-  border-radius: 3px;
+  border-radius: $br3;
   color: $color-white;
   padding: 3px 6px;
 }
 
 .text-info {
   background-color: $color-complete;
-  border-radius: 3px;
+  border-radius: $br3;
   color: $color-white;
   padding: 3px 6px;
 }
@@ -305,11 +305,11 @@ ul.slider-dots {
 
   .tag {
     background-color: $color-gray-20;
-    border-radius: 3px;
+    border-radius: $br3;
     color: $color-white;
     cursor: pointer;
     font-size: $fs14;
-    font-weight: bold;
+    font-weight: $fw700;
     margin: 0 $size-2 $size-2 0;
     padding: 4px 8px;
     text-transform: uppercase;
@@ -553,7 +553,7 @@ input[type="checkbox"] {
 input.element-name {
   background-color: $color-white;
   border: 1px solid $color-gray-40;
-  border-radius: $br-small;
+  border-radius: $br3;
   color: $color-gray-60;
   font-size: $fs12;
   margin: 0px;
@@ -618,7 +618,7 @@ input.element-name {
     margin-bottom: 6px;
 
     &:before {
-      border-radius: 99px;
+      border-radius: $br99;
       transition: box-shadow 0.2s linear 0s, color 0.2s linear 0s;
     }
   }
@@ -684,7 +684,7 @@ input[type="radio"]:checked + label:before {
 
     &:before {
       top: 1.4px;
-      border-radius: 3px;
+      border-radius: $br3;
       transition: border 0.2s linear 0s, color 0.2s linear 0s;
     }
 
@@ -700,7 +700,7 @@ input[type="radio"]:checked + label:before {
     }
 
     &:after {
-      border-radius: 3px;
+      border-radius: $br3;
     }
   }
 
@@ -711,11 +711,11 @@ input[type="radio"]:checked + label:before {
   &.checkbox-circle {
     label {
       &:after {
-        border-radius: 99px;
+        border-radius: $br99;
       }
 
       &:before {
-        border-radius: 99px;
+        border-radius: $br99;
       }
     }
   }
@@ -833,7 +833,7 @@ input[type="range"]::-webkit-slider-runnable-track {
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   background: $color-gray-60;
-  border-radius: 25px;
+  border-radius: $br25;
   border: 0px solid #000101;
 }
 input[type="range"]::-webkit-slider-thumb {
@@ -841,7 +841,7 @@ input[type="range"]::-webkit-slider-thumb {
   border: 0px solid #000000;
   height: 18px;
   width: 6px;
-  border-radius: 7px;
+  border-radius: $br7;
   background: $color-gray-20;
   cursor: pointer;
   -webkit-appearance: none;
@@ -857,7 +857,7 @@ input[type="range"]::-moz-range-track {
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   background: $color-gray-60;
-  border-radius: 25px;
+  border-radius: $br25;
   border: 0px solid #000101;
 }
 input[type="range"]::-moz-range-thumb {
@@ -865,7 +865,7 @@ input[type="range"]::-moz-range-thumb {
   border: 0px solid #000000;
   height: 24px;
   width: 8px;
-  border-radius: 7px;
+  border-radius: $br7;
   background: $color-gray-20;
   cursor: pointer;
 }
@@ -882,13 +882,13 @@ input[type="range"]::-ms-track {
 input[type="range"]::-ms-fill-lower {
   background: $color-gray-60;
   border: 0px solid #000101;
-  border-radius: 50px;
+  border-radius: $br50;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
 input[type="range"]::-ms-fill-upper {
   background: $color-gray-60;
   border: 0px solid #000101;
-  border-radius: 50px;
+  border-radius: $br50;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
 input[type="range"]::-ms-thumb {
@@ -896,7 +896,7 @@ input[type="range"]::-ms-thumb {
   border: 0px solid #000000;
   height: 24px;
   width: 8px;
-  border-radius: 7px;
+  border-radius: $br7;
   background: $color-gray-20;
   cursor: pointer;
 }
@@ -935,11 +935,11 @@ input[type="range"]:focus::-ms-fill-upper {
   &:hover {
     &::after {
       background-color: $color-white;
-      border-radius: $br-small;
+      border-radius: $br3;
       color: $color-gray-60;
       content: attr(alt);
       font-size: $fs12;
-      font-weight: bold;
+      font-weight: $fw700;
       padding: $size-1;
       position: absolute;
       left: 130%;
@@ -1013,7 +1013,7 @@ input[type="range"]:focus::-ms-fill-upper {
         align-items: center;
         background-color: $color-white;
         box-sizing: border-box;
-        border-radius: 0;
+        border-radius: $br0;
         color: $color-gray-60;
         display: flex;
         height: 100%;
@@ -1115,7 +1115,7 @@ input[type="range"]:focus::-ms-fill-upper {
   }
 
   &.fixed {
-    border-radius: $br-small;
+    border-radius: $br3;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
     height: 48px;
     max-width: 1000px;
diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss
index 6183ba58ac..6b77a0ecf7 100644
--- a/frontend/resources/styles/main/layouts/login.scss
+++ b/frontend/resources/styles/main/layouts/login.scss
@@ -126,9 +126,9 @@
 
   .btn-large {
     flex-grow: 1;
-    font-size: 14px;
+    font-size: $fs14;
     font-style: normal;
-    font-weight: normal;
+    font-weight: $fw400;
   }
 
   .btn-google-auth {
@@ -228,7 +228,7 @@
       margin-bottom: 10px;
       a {
         font-size: $fs14;
-        font-weight: 500;
+        font-weight: $fw500;
         color: $color-gray-50;
         &:hover,
         &:focus {
diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss
index 99060839d7..4aa400cbb5 100644
--- a/frontend/resources/styles/main/layouts/not-found.scss
+++ b/frontend/resources/styles/main/layouts/not-found.scss
@@ -46,23 +46,23 @@
 
   .main-message {
     color: $color-black;
-    font-size: 5rem;
+    font-size: $fs80;
     line-height: 150px;
     text-align: center;
   }
 
   .desc-message {
     color: $color-black;
-    font-size: 1.6rem;
-    font-weight: 300;
+    font-size: $fs26;
+    font-weight: $fw300;
     text-align: center;
   }
 
   .sign-info {
     margin-top: 20px;
     color: $color-black;
-    font-size: 1rem;
-    font-weight: 200;
+    font-size: $fs16;
+    font-weight: $fw200;
     text-align: center;
 
     display: flex;
@@ -70,7 +70,7 @@
     align-items: center;
 
     b {
-      font-weight: 400;
+      font-weight: $fw400;
     }
 
     .btn-primary {
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
index 44b8ca28eb..5e5ad957ba 100644
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ b/frontend/resources/styles/main/partials/activity-bar.scss
@@ -23,7 +23,7 @@
   h4 {
     color: $color-gray-40;
     font-size: $fs16;
-    font-weight: bold;
+    font-weight: $fw700;
     margin-bottom: $size-1;
   }
 
@@ -31,7 +31,7 @@
     background-color: lighten($color-gray-20, 12%);
     color: $color-white;
     font-size: $fs12;
-    font-weight: bold;
+    font-weight: $fw700;
     padding: 2px;
     text-align: center;
     width: 100%;
@@ -62,7 +62,7 @@
         flex-wrap: wrap;
 
         a {
-          font-weight: bold;
+          font-weight: $fw700;
           margin: 0 3px;
         }
       }
diff --git a/frontend/resources/styles/main/partials/af-signup-questions.scss b/frontend/resources/styles/main/partials/af-signup-questions.scss
index 268a863719..468d76e85c 100644
--- a/frontend/resources/styles/main/partials/af-signup-questions.scss
+++ b/frontend/resources/styles/main/partials/af-signup-questions.scss
@@ -18,7 +18,7 @@
   h3 {
     font-family: "worksans", sans-serif !important;
     margin-bottom: 0.8rem;
-    font-weight: 500 !important;
+    font-weight: $fw500 !important;
   }
 
   h1 {
@@ -30,7 +30,7 @@
   }
 
   strong {
-    font-weight: 500;
+    font-weight: $fw500;
   }
 
   p,
@@ -109,7 +109,7 @@
   .step-number {
     background-color: $color-gray-10;
     border: none;
-    border-radius: 1rem;
+    border-radius: 1rem; // Need to be investigated, before we can use variable
     color: $color-gray-40;
     float: right;
     font-family: "worksans", sans-serif !important;
@@ -147,7 +147,7 @@
 
   .af-step-next span,
   .af-step-previous span {
-    font-weight: normal !important;
+    font-weight: $fw400 !important;
   }
 
   .af-step-button {
@@ -229,7 +229,7 @@
 
     &::before {
       background-color: transparent;
-      border-radius: 4px;
+      border-radius: $br4;
       min-width: 100%;
       min-height: 100%;
       position: absolute;
@@ -309,7 +309,7 @@
 
   .af-field-use_of_penpot .af-choice-option:nth-child(5) label {
     &::before {
-      border-radius: 3px;
+      border-radius: $br3;
     }
   }
 
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
index 9d42a2703d..2f621b9a66 100644
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -190,7 +190,7 @@ ul.palette-menu .color-bullet {
 }
 
 .color-bullet.is-not-library-color {
-  border-radius: $br-small;
+  border-radius: $br3;
   overflow: hidden;
 
   & .color-bullet-wrapper {
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 7ce6367f93..2b622490c2 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -168,11 +168,11 @@
   &.current {
     .color-text {
       color: $color-gray-50;
-      font-weight: bold;
+      font-weight: $fw700;
     }
     &::before {
       background-color: $color-gray-50;
-      border-radius: 3px;
+      border-radius: $br3;
       color: $color-white;
       content: "selected";
       font-size: $fs10;
@@ -194,7 +194,7 @@
     margin-left: 1.5rem;
 
     .color-text {
-      font-weight: bold;
+      font-weight: $fw700;
     }
     &:hover {
       .color-text {
@@ -224,7 +224,7 @@
 .color-tooltip {
   background-color: $color-gray-50;
   border: 1px solid $color-gray-10;
-  border-radius: 3px;
+  border-radius: $br3;
   left: -102px;
   padding: 1rem;
   position: absolute;
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index d639291261..268afc00b6 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -49,7 +49,7 @@
       padding: 0;
       margin: 0;
       border: 1px solid $color-gray-20;
-      border-radius: 2px;
+      border-radius: $br2;
       margin-left: $size-1;
     }
 
@@ -97,7 +97,7 @@
       position: absolute;
       width: 15px;
       height: 15px;
-      border-radius: 2px;
+      border-radius: $br2;
       border: 1px solid $color-gray-20;
       margin-top: -2px;
       margin-left: -7px;
@@ -120,7 +120,7 @@
       width: 14px;
       height: 14px;
       border: 2px solid $color-white;
-      border-radius: 8px;
+      border-radius: $br8;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -211,7 +211,7 @@
       position: absolute;
       width: 12px;
       height: 12px;
-      border-radius: 6px;
+      border-radius: $br6;
       z-index: 1;
     }
 
@@ -230,7 +230,7 @@
       position: absolute;
       width: 12px;
       height: 12px;
-      border-radius: 6px;
+      border-radius: $br6;
       z-index: 1;
       border: 1px solid $color-white;
       box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset,
@@ -296,7 +296,7 @@
       width: 100%;
       margin: 0;
       border: 1px solid $color-gray-10;
-      border-radius: 2px;
+      border-radius: $br2;
       font-size: $fs12;
       height: 1.5rem;
       padding: 0 $size-1;
@@ -323,11 +323,11 @@
       margin-bottom: $size-2;
       width: 100%;
       padding: $size-1 0.25rem;
-      font-size: 0.75rem;
+      font-size: $fs12;
       color: $color-gray-40;
       cursor: pointer;
       border: 1px solid $color-gray-10;
-      border-radius: 2px;
+      border-radius: $br2;
 
       option {
         padding: 0;
@@ -379,7 +379,7 @@
         position: absolute;
         width: 12px;
         height: 12px;
-        border-radius: 6px;
+        border-radius: $br6;
         z-index: 1;
         border: 1px solid $color-white;
         box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset,
@@ -421,7 +421,7 @@
     .saturation,
     .value,
     .opacity {
-      border-radius: 10px;
+      border-radius: $br10;
     }
 
     .hsva-selector-label {
@@ -432,7 +432,7 @@
 }
 
 .colorpicker-tooltip {
-  border-radius: $br-small;
+  border-radius: $br3;
   display: flex;
   flex-direction: column;
   left: 1400px;
@@ -459,7 +459,7 @@
   .colorpicker-tabs {
     display: flex;
     margin-bottom: $size-2;
-    border-radius: 5px;
+    border-radius: $br5;
     border: 1px solid $color-gray-10;
     height: 2rem;
 
@@ -511,7 +511,7 @@
     input {
       background-color: $color-gray-50;
       border: 1px solid $color-gray-30;
-      border-radius: $br-small;
+      border-radius: $br3;
       color: $color-white;
       height: 20px;
       margin: 5px 0 0 0;
diff --git a/frontend/resources/styles/main/partials/comments.scss b/frontend/resources/styles/main/partials/comments.scss
index fab594179c..fa1f85b876 100644
--- a/frontend/resources/styles/main/partials/comments.scss
+++ b/frontend/resources/styles/main/partials/comments.scss
@@ -42,7 +42,7 @@
     border: 1px solid $color-gray-20;
     box-sizing: border-box;
     box-shadow: 0px 2px 8px rgba($color-black, 0.25);
-    border-radius: 2px;
+    border-radius: $br2;
     min-width: 280px;
     max-width: 280px;
     user-select: text;
@@ -79,7 +79,7 @@
       padding: $size-2;
       resize: none;
       width: 100%;
-      border-radius: 2px;
+      border-radius: $br2;
       border: 1px solid $color-gray-20;
       max-height: 4rem;
     }
@@ -121,7 +121,7 @@
         flex-direction: column;
 
         .fullname {
-          font-weight: 700;
+          font-weight: $fw700;
           color: $color-gray-60;
           font-size: $fs12;
 
@@ -271,7 +271,7 @@
 
       .label {
         &.filename {
-          font-weight: 700;
+          font-weight: $fw700;
         }
       }
 
@@ -365,7 +365,7 @@
   align-items: center;
   justify-content: center;
   background-color: $color-dashboard;
-  border-radius: 3px;
+  border-radius: $br3;
   position: relative;
 
   .button {
@@ -375,7 +375,7 @@
     align-items: center;
     justify-content: center;
     background-color: $color-dashboard;
-    border-radius: 3px;
+    border-radius: $br3;
 
     svg {
       width: 15px;
@@ -398,7 +398,7 @@
     width: 280px;
     bottom: 35px;
     left: 0px;
-    border-radius: 3px;
+    border-radius: $br3;
   }
 
   .header {
@@ -408,7 +408,7 @@
     padding: 0px 11px;
 
     h3 {
-      font-weight: 400;
+      font-weight: $fw400;
       color: $color-black;
       font-size: $fs14;
       line-height: $fs18;
diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss
index 616cdfa899..e7a302655f 100644
--- a/frontend/resources/styles/main/partials/context-menu.scss
+++ b/frontend/resources/styles/main/partials/context-menu.scss
@@ -24,7 +24,7 @@
 
 .context-menu-items {
   background: $color-white;
-  border-radius: $br-small;
+  border-radius: $br3;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
   left: -$size-4;
   max-height: 30rem;
@@ -48,7 +48,7 @@
   color: $color-black;
   display: block;
   font-size: $fs14;
-  font-weight: 400;
+  font-weight: $fw400;
   padding: $size-2 $size-4;
   text-align: left;
   white-space: nowrap;
@@ -77,7 +77,7 @@
   &.submenu-back {
     color: $color-black;
     display: flex;
-    font-weight: bold;
+    font-weight: $fw700;
     align-items: center;
 
     & svg {
@@ -99,6 +99,6 @@
     background-repeat: no-repeat;
     background-position: 5% 48%;
     background-size: 10px;
-    font-weight: bold;
+    font-weight: $fw700;
   }
 }
diff --git a/frontend/resources/styles/main/partials/dashboard-fonts.scss b/frontend/resources/styles/main/partials/dashboard-fonts.scss
index edf1d2017a..cdb1327e76 100644
--- a/frontend/resources/styles/main/partials/dashboard-fonts.scss
+++ b/frontend/resources/styles/main/partials/dashboard-fonts.scss
@@ -47,7 +47,7 @@
       input {
         font-size: $fs12;
         border: 1px solid $color-gray-30;
-        border-radius: $br-small;
+        border-radius: $br3;
         width: 130px;
         padding: $size-1;
         margin: 0px;
@@ -73,7 +73,7 @@
 
     input {
       border: 1px solid $color-gray-30;
-      border-radius: $br-small;
+      border-radius: $br3;
       margin: 0px;
       padding: $size-2;
       font-size: $fs12;
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index 619b3de566..7419ce4e44 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -30,7 +30,7 @@
     a,
     button {
       width: 100%;
-      font-weight: normal;
+      font-weight: $fw400;
     }
     button {
       background-color: transparent;
@@ -48,13 +48,13 @@
     }
 
     .grid-item-th {
-      border-radius: $br-small;
+      border-radius: $br3;
       border: 2px solid lighten($color-gray-20, 15%);
       text-align: initial;
     }
 
     &.dragged {
-      border-radius: $br-small;
+      border-radius: $br3;
       border: 2px solid lighten($color-gray-20, 15%);
       text-align: initial;
       max-height: 160px;
@@ -83,7 +83,7 @@
     }
 
     &.overlay {
-      border-radius: 4px;
+      border-radius: $br4;
       border: 2px solid $color-primary;
       height: 100%;
       opacity: 0;
@@ -125,7 +125,7 @@
         border: 1px solid transparent;
         color: $color-gray-60;
         font-size: $fs14;
-        font-weight: 500;
+        font-weight: $fw500;
         overflow: hidden;
         padding: 0;
         height: 27px;
@@ -161,7 +161,7 @@
           height: 25px;
           color: $color-gray-60;
           font-size: $fs14;
-          font-weight: 400;
+          font-weight: $fw400;
         }
       }
     }
@@ -169,7 +169,7 @@
     .item-badge {
       background-color: $color-white;
       border: 1px solid $color-gray-20;
-      border-radius: 2px;
+      border-radius: $br2;
       position: absolute;
       top: $size-2;
       right: $size-2;
@@ -294,8 +294,8 @@
     }
 
     .color-swatch {
-      border-top-left-radius: $br-medium;
-      border-top-right-radius: $br-medium;
+      border-top-left-radius: $br5;
+      border-top-right-radius: $br5;
       height: 25%;
       left: 0;
       position: absolute;
@@ -328,8 +328,8 @@
     background-position: center;
     background-size: auto 80%;
     background-repeat: no-repeat;
-    border-top-left-radius: $br-small;
-    border-top-right-radius: $br-small;
+    border-top-left-radius: $br3;
+    border-top-right-radius: $br3;
     height: 230px;
     max-height: 160px;
     overflow: hidden;
@@ -394,7 +394,7 @@
         display: flex;
         align-items: center;
         border: 1px solid transparent;
-        border-radius: $br-small;
+        border-radius: $br3;
         margin-top: $size-1;
         padding: 2px;
         font-size: $fs12;
@@ -415,7 +415,7 @@
 
         & svg {
           background-color: $color-canvas;
-          border-radius: 4px;
+          border-radius: $br4;
           border: 2px solid transparent;
           height: 24px;
           width: 24px;
@@ -443,7 +443,7 @@
 }
 
 .grid-empty-placeholder {
-  border-radius: $br-huge;
+  border-radius: $br12;
   display: grid;
   background-color: rgba(227, 227, 227, 0.3);
   padding: 13px;
@@ -463,7 +463,7 @@
     background-repeat: no-repeat;
     align-items: center;
     border: 1px dashed #b1b2b5;
-    border-radius: 3px;
+    border-radius: $br3;
     display: flex;
     flex-direction: column;
     height: 200px;
@@ -481,7 +481,7 @@
   .create-new {
     background-color: white;
     border: 2px solid $color-gray-10;
-    border-radius: 3px;
+    border-radius: $br3;
     color: $color-black;
     cursor: pointer;
     height: 158px;
@@ -500,7 +500,7 @@
     height: 200px;
     background: $color-white;
     border: 1px dashed #e3e3e3;
-    border-radius: 0;
+    border-radius: $br0;
   }
 
   svg {
diff --git a/frontend/resources/styles/main/partials/dashboard-header.scss b/frontend/resources/styles/main/partials/dashboard-header.scss
index 23fcc9a6d7..157a440058 100644
--- a/frontend/resources/styles/main/partials/dashboard-header.scss
+++ b/frontend/resources/styles/main/partials/dashboard-header.scss
@@ -58,7 +58,7 @@
         color: $color-gray-30;
         height: 40px;
         padding: $size-1 $size-5;
-        font-weight: 400;
+        font-weight: $fw400;
         &:hover {
           color: $color-black;
           text-decoration: none;
@@ -84,7 +84,7 @@
       display: flex;
       flex-shrink: 0;
       font-size: $fs22;
-      font-weight: 600;
+      font-weight: $fw600;
       z-index: 10;
       user-select: all;
     }
diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
index f04d4ced60..986035aeea 100644
--- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
@@ -52,7 +52,7 @@
       display: flex;
       width: 100%;
       border: 1px solid $color-gray-10;
-      border-radius: $br-medium;
+      border-radius: $br5;
       align-items: center;
     }
 
@@ -204,7 +204,7 @@
       flex-shrink: 0;
       padding: $size-2;
       a {
-        font-weight: 400;
+        font-weight: $fw400;
         width: 100%;
         &:hover {
           text-decoration: none;
@@ -228,7 +228,7 @@
 
       &::before {
         background-color: transparent;
-        border-radius: $br-small;
+        border-radius: $br3;
         content: "";
         height: 26px;
         margin-right: $size-2;
@@ -243,7 +243,7 @@
 
       & .edit-wrapper {
         border: 1px solid $color-gray-10;
-        border-radius: $br-small;
+        border-radius: $br3;
         display: flex;
         width: 100%;
       }
@@ -284,7 +284,7 @@
 
       &.current {
         a {
-          font-weight: bold;
+          font-weight: $fw700;
         }
 
         &::before {
@@ -302,7 +302,7 @@
     align-items: center;
     background-color: $color-white;
     border: 1px solid $color-gray-10;
-    border-radius: $br-medium;
+    border-radius: $br5;
     display: flex;
     margin: 5px 15px;
 
@@ -388,7 +388,7 @@
 
 .team-form-modal {
   h2 {
-    font-weight: 400;
+    font-weight: $fw400;
     color: $color-gray-40;
     font-size: 28px;
     margin-bottom: 30px;
@@ -468,9 +468,9 @@
 
 .primary-badge {
   border: 1px solid $color-primary;
-  border-radius: 2px;
+  border-radius: $br2;
   font-size: $fs9 !important;
-  font-weight: bold;
+  font-weight: $fw500;
   color: $color-primary !important;
   padding: 2px 4px;
 }
diff --git a/frontend/resources/styles/main/partials/dashboard-team.scss b/frontend/resources/styles/main/partials/dashboard-team.scss
index edc8d4f5a6..0cc126ade8 100644
--- a/frontend/resources/styles/main/partials/dashboard-team.scss
+++ b/frontend/resources/styles/main/partials/dashboard-team.scss
@@ -3,7 +3,7 @@
   right: 13px;
   padding: 32px;
   box-shadow: 0px 4px 8px rgba($color-black, 0.25);
-  border-radius: 8px;
+  border-radius: $br8;
   width: 400px;
   position: fixed;
   z-index: 16;
@@ -79,12 +79,12 @@
 
   .title {
     color: $color-black;
-    font-weight: bold;
+    font-weight: $fw700;
     margin-bottom: 16px;
   }
 
   .hint {
-    font-size: 12px;
+    font-size: $fs12;
 
     &.hidden {
       display: none;
@@ -115,7 +115,7 @@
     .text {
       color: $color-black;
       padding: 5px;
-      font-size: 12px;
+      font-size: $fs12;
     }
   }
 }
@@ -194,7 +194,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        border-radius: 2px;
+        border-radius: $br2;
         padding: 3px 8px;
         font-size: $fs14;
       }
@@ -211,7 +211,7 @@
     &.status {
       .status-badge {
         color: $color-white;
-        border-radius: 12px;
+        border-radius: $br12;
         min-width: 74px;
         height: 24px;
         display: flex;
@@ -276,7 +276,7 @@
       text-align: center;
 
       .label {
-        border-radius: 3px;
+        border-radius: $br3;
         color: $color-white;
         background-color: $color-black;
         white-space: nowrap;
@@ -305,7 +305,7 @@
     max-height: 30rem;
     overflow-y: auto;
     background-color: $color-white;
-    border-radius: 4px;
+    border-radius: $br4;
     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
     z-index: 12;
     top: 30px;
@@ -327,7 +327,7 @@
       padding: 5px 16px;
 
       &.title {
-        font-weight: 600;
+        font-weight: $fw600;
         cursor: default;
       }
 
@@ -365,7 +365,7 @@
       padding: 12px;
 
       .label {
-        font-size: 13px;
+        font-size: $fs13;
         color: $color-gray-30;
       }
     }
@@ -535,7 +535,7 @@
       width: 80%;
       color: $color-gray-40;
       p {
-        font-size: 16px;
+        font-size: $fs16;
       }
     }
 
@@ -567,7 +567,7 @@
     .cancel-button {
       border: 1px solid $color-gray-30;
       background: $color-canvas;
-      border-radius: 3px;
+      border-radius: $br3;
       padding: 0.5rem 1rem;
       cursor: pointer;
       margin-right: 8px;
@@ -578,12 +578,12 @@
     }
   }
   .input-checkbox label {
-    font-size: 14px;
+    font-size: $fs14;
     color: $color-black;
   }
 
   .explain {
-    font-size: 12px;
+    font-size: $fs12;
     color: $color-gray-40;
   }
 }
diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss
index a07d768dcf..7025004cb1 100644
--- a/frontend/resources/styles/main/partials/dashboard.scss
+++ b/frontend/resources/styles/main/partials/dashboard.scss
@@ -8,7 +8,7 @@
   display: flex;
   position: relative;
   border: 2px solid $color-gray-10;
-  border-radius: 8px;
+  border-radius: $br8;
   padding: 20px;
   margin: 0 1rem 0 21px;
   height: 154px;
@@ -18,7 +18,7 @@
     padding-left: 20px;
     .title {
       font-size: $fs24;
-      font-weight: bold;
+      font-weight: $fw700;
       color: $color-black;
     }
     .info {
@@ -69,12 +69,12 @@
     grid-template-columns: 1fr 1fr;
     position: relative;
     border: 2px solid $color-gray-10;
-    border-radius: 8px;
+    border-radius: $br8;
     min-height: 211px;
 
     .thumbnail {
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
+      border-top-left-radius:$br6;
+      border-bottom-left-radius: $br6;
       padding: 30px;
       display: block;
       background-color: #e0e4e9;
@@ -85,7 +85,7 @@
       .title {
         color: $color-black;
         font-size: $fs24;
-        font-weight: bold;
+        font-weight: $fw700;
         margin-bottom: 8px;
       }
       .info {
@@ -188,7 +188,7 @@
   .project {
     align-items: center;
     background: $color-white;
-    border-radius: $br-small;
+    border-radius: $br3;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -240,7 +240,7 @@
       cursor: pointer;
       font-size: $fs18;
       line-height: 1rem;
-      font-weight: 600;
+      font-weight: $fw600;
       color: $color-black;
       margin-right: $size-1;
     }
@@ -252,7 +252,7 @@
     .info {
       font-size: $fs14;
       line-height: 1rem;
-      font-weight: 400;
+      font-weight: $fw400;
       color: $color-gray-60;
       margin-left: 0.75rem;
       @media (max-width: 760px) {
@@ -335,7 +335,7 @@
   color: $color-gray-60;
   line-height: 1rem;
   font-size: $fs14;
-  font-weight: 400;
+  font-weight: $fw400;
   @media (max-width: 880px) {
     display: none;
   }
@@ -406,7 +406,7 @@
 
 .edit-wrapper {
   border: 1px solid $color-gray-10;
-  border-radius: $br-small;
+  border-radius: $br3;
   display: flex;
   padding-right: $size-5;
   position: relative;
@@ -449,7 +449,7 @@
 
   background: none;
   border: 1px solid $color-gray-20;
-  border-radius: 2px;
+  border-radius: $br2;
   cursor: pointer;
   transition: all 0.4s;
   margin-left: 1rem;
@@ -490,8 +490,8 @@
       border-top: 2px solid #e4e4e4;
       border-left: 2px solid #e4e4e4;
       border-right: 2px solid #e4e4e4;
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
+      border-top-left-radius: $br10;
+      border-top-right-radius: $br10;
       margin-right: 30px;
       background-color: $color-white;
       position: relative;
@@ -500,8 +500,8 @@
         display: inline-block;
         vertical-align: middle;
         line-height: normal;
-        font-size: 18px;
-        font-weight: 600;
+        font-size: $fs18;
+        font-weight: $fw600;
         color: $color-black;
         margin-left: 18px;
         margin-right: 10px;
@@ -572,14 +572,14 @@
     .template-card {
       display: inline-block;
       width: 255px;
-      font-size: 16px;
+      font-size: $fs16;
       color: #181a22;
       cursor: pointer;
       .img-container {
         width: 100%;
         height: 135px;
         margin-bottom: 15px;
-        border-radius: 5px;
+        border-radius: $br5;
         border: 2px solid #e0e4e9;
         display: flex;
         justify-content: center;
@@ -596,7 +596,7 @@
           height: 16px;
         }
         span {
-          font-weight: 500;
+          font-weight: $fw500;
           font-size: $fs14;
         }
       }
@@ -608,13 +608,13 @@
       }
 
       .template-link-title {
-        font-size: 14px;
-        font-weight: 600;
+        font-size: $fs14;
+        font-weight: $fw600;
         color: $color-gray-60;
       }
 
       .template-link-text {
-        font-size: 12px;
+        font-size: $fs12;
         margin-top: $size-2;
         color: $color-gray-50;
       }
diff --git a/frontend/resources/styles/main/partials/dropdown.scss b/frontend/resources/styles/main/partials/dropdown.scss
index 9b21ab2206..0abd62a4f0 100644
--- a/frontend/resources/styles/main/partials/dropdown.scss
+++ b/frontend/resources/styles/main/partials/dropdown.scss
@@ -2,7 +2,7 @@
   position: absolute;
   max-height: 30rem;
   background-color: $color-white;
-  border-radius: 2px;
+  border-radius: $br2;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
   z-index: 12;
 
@@ -31,7 +31,7 @@
     }
 
     &.title {
-      font-weight: 600;
+      font-weight: $fw600;
       cursor: default;
     }
 
diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss
index 59610ad657..310fc7753b 100644
--- a/frontend/resources/styles/main/partials/exception-page.scss
+++ b/frontend/resources/styles/main/partials/exception-page.scss
@@ -49,23 +49,23 @@
 
   .main-message {
     color: $color-black;
-    font-size: 5rem;
+    font-size: $fs80;
     line-height: 150px;
     text-align: center;
   }
 
   .desc-message {
     color: $color-black;
-    font-size: 1.6rem;
-    font-weight: 300;
+    font-size: $fs26;
+    font-weight: $fw300;
     text-align: center;
   }
 
   .sign-info {
     margin-top: 20px;
     color: $color-black;
-    font-size: 1rem;
-    font-weight: 200;
+    font-size: $fs16;
+    font-weight: $fw200;
     text-align: center;
 
     display: flex;
@@ -73,7 +73,7 @@
     align-items: center;
 
     b {
-      font-weight: 400;
+      font-weight: $fw400;
     }
 
     .btn-primary {
diff --git a/frontend/resources/styles/main/partials/forms.scss b/frontend/resources/styles/main/partials/forms.scss
index 47891adbc8..04affd6d5f 100644
--- a/frontend/resources/styles/main/partials/forms.scss
+++ b/frontend/resources/styles/main/partials/forms.scss
@@ -81,10 +81,10 @@ textarea {
 
   .notification-text-email {
     background: $color-gray-10;
-    border-radius: $br-small;
+    border-radius: $br3;
     color: $color-gray-60;
     font-size: $fs18;
-    font-weight: 500;
+    font-weight: $fw500;
     margin: 1.5rem 0 2.5rem 0;
     padding: 1rem;
     text-align: center;
@@ -121,7 +121,7 @@ textarea {
   input,
   textarea {
     background-color: $color-white;
-    border-radius: 2px;
+    border-radius: $br2;
     border: 1px solid $color-gray-20;
     color: $color-gray-60;
     font-size: $fs14;
@@ -231,7 +231,7 @@ textarea {
 }
 
 .custom-multi-input {
-  border-radius: 2px;
+  border-radius: $br2;
   border: 1px solid $color-gray-20;
   max-height: 300px;
   overflow-y: auto;
@@ -267,7 +267,7 @@ textarea {
     .around {
       border: 1px solid $color-gray-20;
       padding-left: 5px;
-      border-radius: 4px;
+      border-radius: $br4;
       &.invalid {
         border: 1px solid $color-danger;
       }
@@ -278,7 +278,7 @@ textarea {
         overflow: hidden;
         text-overflow: ellipsis;
         line-height: 16px;
-        font-size: 14px;
+        font-size: $fs14;
         color: $color-black;
       }
       .icon {
@@ -331,7 +331,7 @@ textarea {
     flex-direction: row;
 
     background-color: $color-white;
-    border-radius: 2px;
+    border-radius: $br2;
     border: 1px solid $color-gray-20;
     height: 40px;
 
diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss
index 28d4fb9fc6..4a3d41c504 100644
--- a/frontend/resources/styles/main/partials/inspect.scss
+++ b/frontend/resources/styles/main/partials/inspect.scss
@@ -196,7 +196,7 @@
       overflow-y: auto;
       max-height: 5rem;
       background: $color-gray-60;
-      border-radius: 4px;
+      border-radius: $br4;
       padding: 1rem 0.5rem;
       color: $color-gray-10;
       white-space: pre-wrap;
@@ -216,7 +216,7 @@
     justify-content: center;
     margin: 0.5rem;
     background: $color-gray-60;
-    border-radius: 4px;
+    border-radius: $br4;
 
     width: calc(100% - 1rem);
     min-height: 5rem;
@@ -257,7 +257,7 @@
     position: relative;
     margin-top: 0.5rem;
     border: 1px solid $color-black;
-    border-radius: 4px;
+    border-radius: $br4;
     margin: 0.5rem;
     display: flex;
     flex-direction: row;
@@ -287,7 +287,7 @@
     padding: 0.5rem 1rem;
     color: $color-gray-10;
     width: calc(100% - 1rem);
-    border-radius: 4px;
+    border-radius: $br4;
     margin: 0.5rem;
     cursor: pointer;
 
@@ -360,7 +360,7 @@
     font-size: $fs14;
 
     .code-display {
-      border-radius: 4px;
+      border-radius: $br4;
       padding: 1rem;
       overflow: hidden;
       white-space: pre-wrap;
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index 06c7210c3a..09ce21b6ac 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -60,7 +60,7 @@
 // NEW GEN MODALS
 
 .modal-container {
-  border-radius: $br-medium;
+  border-radius: $br5;
   display: flex;
   flex-direction: column;
   width: 448px;
@@ -70,7 +70,7 @@
   .modal-header {
     align-items: center;
     background-color: $color-white;
-    border-radius: 8px 8px 0px 0px;
+    border-radius: $br8 $br8 0 0;
     color: $color-black;
     display: flex;
     height: 63px;
@@ -85,7 +85,7 @@
 
     h2 {
       font-size: $fs18;
-      font-weight: 400;
+      font-weight: $fw400;
       margin: 0;
     }
   }
@@ -138,7 +138,7 @@
     h3 {
       color: $color-gray-40;
       font-size: $fs16;
-      font-weight: 400;
+      font-weight: $fw400;
     }
     &.delete-shared {
       padding: 15px 32px;
@@ -211,7 +211,7 @@
   .cancel-button {
     border: 1px solid $color-gray-30;
     background: $color-canvas;
-    border-radius: 3px;
+    border-radius: $br3;
     padding: 0.5rem 1rem;
     cursor: pointer;
     margin-right: 8px;
@@ -222,7 +222,7 @@
   }
 
   .accept-button {
-    border-radius: 3px;
+    border-radius: $br3;
     cursor: pointer;
     padding: 0.5rem 1rem;
 
@@ -276,7 +276,7 @@
   .cancel-button {
     border: 1px solid $color-gray-20;
     background: $color-white;
-    border-radius: 3px;
+    border-radius: $br3;
     padding: 0.5rem 2.25rem;
     cursor: pointer;
     margin-right: 18px;
@@ -288,7 +288,7 @@
 
   .accept-button {
     background: $color-primary;
-    border-radius: 3px;
+    border-radius: $br3;
     border: 1px solid $color-primary;
     color: $color-black;
     cursor: pointer;
@@ -470,7 +470,7 @@
       font-size: $fs10;
       color: $color-black;
       background: #d8f7fe;
-      border-radius: 3px;
+      border-radius: $br3;
       padding: 2px 4px;
       display: flex;
       align-items: center;
@@ -509,12 +509,12 @@
 
 .export-dialog {
   .export-option {
-    border-radius: 4px;
+    border-radius: $br4;
     border: 1px solid $color-gray-10;
     margin-bottom: 0.5rem;
 
     h3 {
-      font-weight: 700;
+      font-weight: $fw700;
     }
 
     h3,
@@ -624,7 +624,7 @@
 }
 
 .libraries-dialog {
-  border-radius: $br-medium;
+  border-radius: $br5;
   height: 664px;
   width: 920px;
   max-height: 100%;
@@ -682,7 +682,7 @@
       color: $color-black;
       font-size: $fs14;
       padding: 0 $size-4;
-      font-weight: 500;
+      font-weight: $fw500;
     }
 
     .section-list {
@@ -713,7 +713,7 @@
           top: $size-4;
           right: 0;
           border: 1px solid $color-primary;
-          border-radius: 2px;
+          border-radius: $br2;
           min-width: 4.5rem;
           background: $color-primary;
           color: $color-black;
@@ -812,8 +812,8 @@
   .modal-left {
     align-items: center;
     background-color: $color-pink;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
+    border-top-left-radius: $br5;
+    border-bottom-left-radius: $br5;
     display: flex;
     flex-shrink: 0;
     justify-content: center;
@@ -827,8 +827,8 @@
   }
 
   .modal-right {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+    border-top-right-radius: $br5;
+    border-bottom-right-radius: $br5;
     display: flex;
     flex-direction: column;
     padding: $size-6;
@@ -836,14 +836,14 @@
     .modal-title h2 {
       color: $color-black;
       font-size: $fs24;
-      font-weight: 900;
+      font-weight: $fw900;
     }
 
     .release {
       background-color: $color-primary;
       color: $color-black;
       font-size: $fs12;
-      font-weight: bold;
+      font-weight: $fw700;
       margin-top: $size-2;
       padding: 2px $size-1;
       width: max-content;
@@ -855,7 +855,7 @@
 
       p {
         color: $color-black;
-        font-size: 16px;
+        font-size: $fs16;
         margin-top: $size-2;
       }
     }
@@ -911,7 +911,7 @@
       height: 464px;
       position: absolute;
       bottom: 0;
-      border-radius: 5px;
+      border-radius: $br5;
     }
 
     .modal-right {
@@ -927,7 +927,7 @@
 
     .release {
       background-color: $color-primary;
-      border-radius: 4px;
+      border-radius: $br4;
       color: #1f1f1f;
       padding: 4px $size-1;
       display: inline-block;
@@ -952,7 +952,7 @@
         width: 90%;
 
         .title a {
-          font-weight: bold;
+          font-weight: $fw700;
           color: $color-black;
           text-decoration: none;
           &:hover {
@@ -961,7 +961,7 @@
         }
 
         .description {
-          font-size: 12px;
+          font-size: $fs12;
           text-decoration: none;
           text-transform: none;
         }
@@ -1000,8 +1000,8 @@
       padding: 0;
 
       img {
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
+        border-top-left-radius:$br5;
+        border-bottom-left-radius: $br5;
         height: 100%;
         width: 115%;
       }
@@ -1023,14 +1023,14 @@
 
       h1 {
         font-family: "worksans", sans-serif;
-        font-weight: 700;
-        font-size: 27px;
+        font-weight: $fw700;
+        font-size: $fs26;
         margin-bottom: $size-3;
         text-align: center;
       }
       p {
         font-family: "worksans", sans-serif;
-        font-weight: 500;
+        font-weight: $fw500;
         font-size: $fs18;
         text-align: center;
       }
@@ -1065,7 +1065,7 @@
       .modal-right,
       .modal-left {
         background-repeat: no-repeat;
-        border-radius: $br-medium;
+        border-radius: $br5;
         transition: all ease 0.3s;
         &:hover {
           background-color: $color-primary;
@@ -1090,13 +1090,13 @@
       text-align: center;
 
       border: 1px solid $color-gray-10;
-      border-radius: 2px;
+      border-radius: $br2;
       min-height: 180px;
       width: 233px;
       cursor: pointer;
 
       h2 {
-        font-weight: 700;
+        font-weight: $fw700;
         margin-bottom: $size-5;
         font-size: $fs24;
       }
@@ -1107,7 +1107,7 @@
 
       img {
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
-        border-radius: $br-medium;
+        border-radius: $br5;
         margin-bottom: $size-6;
         margin-top: -90px;
         width: 150px;
@@ -1127,14 +1127,14 @@
 
       h1 {
         font-family: sourcesanspro;
-        font-weight: bold;
+        font-weight: $fw700;
         font-size: $fs36;
         margin-bottom: 0.75rem;
       }
 
       p {
         font-family: sourcesanspro;
-        font-weight: 500;
+        font-weight: $fw500;
         font-size: $fs16;
         margin-bottom: 1.5rem;
       }
@@ -1295,7 +1295,7 @@
 
     h3 {
       font-size: $fs18;
-      font-weight: bold;
+      font-weight: $fw700;
     }
 
     p {
@@ -1316,7 +1316,7 @@
       display: flex;
       flex-direction: column;
       text-align: left;
-      border-radius: $br-small;
+      border-radius: $br3;
 
       &:not(:last-child) {
         margin-bottom: 22px;
@@ -1328,7 +1328,7 @@
       flex-grow: 1;
 
       img {
-        border-radius: $br-small $br-small 0 0;
+        border-radius: $br3 $br3 0 0;
       }
     }
 
@@ -1348,7 +1348,7 @@
         color: $color-primary-dark;
         cursor: pointer;
         font-size: $fs14;
-        font-weight: 600;
+        font-weight: $fw600;
         display: flex;
         justify-content: flex-end;
         margin-top: $size-2;
@@ -1376,10 +1376,10 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    border-radius: 0 5px 5px 0;
+    border-radius: 0 $br5 $br5 0;
     .subtitle {
-      font-weight: bold;
-      font-size: 20px;
+      font-weight: $fw700;
+      font-size: $fs20;
       color: $color-gray-10;
       text-transform: uppercase;
       margin-bottom: 8px;
@@ -1433,8 +1433,8 @@
     flex-direction: column;
     justify-content: space-between;
     .title {
-      font-size: 27px;
-      font-weight: bold;
+      font-size: $fs26;
+      font-weight: $fw700;
       color: $color-gray-60;
       margin-bottom: 6px;
     }
@@ -1622,10 +1622,10 @@
       --dropdown-background-color: #ffffff;
       --primary-font-color: #000;
       --input-border-color: rgb(224, 230, 240);
-      --input-border-radius: 3px;
-      --button-border-radius: 3px;
-      --message-border-radius: 3px;
-      --checkbox-border-radius: 3px;
+      --input-border-radius: $br3;
+      --button-border-radius: $br3;
+      --message-border-radius: $br3;
+      --checkbox-border-radius: $br3;
       --dropdown-option-background-color: rgba(0, 195, 139, 1);
       --dropdown-option-active-background-color: rgba(0, 138, 98, 1);
       --invalid-field-background-color: rgba(238.51780000000002, 205.7178, 204.11780000000002, 1);
@@ -1726,7 +1726,7 @@
   padding: 16px 18px;
   background-color: $color-white;
   border: 1px solid $color-gray-20;
-  border-radius: 3px;
+  border-radius: $br3;
   z-index: 1000;
 
   &.transparent {
@@ -1811,7 +1811,7 @@
     &.image {
       align-items: center;
       border: 1px solid $color-gray-10;
-      border-radius: 3px;
+      border-radius: $br3;
       display: flex;
       justify-content: center;
       height: 32px;
@@ -1969,7 +1969,7 @@
   .close {
     border: 1px solid $color-gray-30;
     background: $color-canvas;
-    border-radius: 3px;
+    border-radius: $br3;
     padding: 0.5rem 1rem;
     cursor: pointer;
     margin-right: 8px;
@@ -1982,7 +1982,7 @@
   .button-primary {
     background: $color-primary;
     border: 1px solid $color-primary;
-    border-radius: 3px;
+    border-radius: $br3;
     color: $color-black;
     cursor: pointer;
     padding: 0.5rem 1rem;
@@ -1995,7 +1995,7 @@
   .button-secondary {
     border: 1px solid $color-gray-30;
     background: $color-white;
-    border-radius: 3px;
+    border-radius: $br3;
     padding: 0.5rem 1rem;
     cursor: pointer;
     margin-right: 8px;
@@ -2022,7 +2022,7 @@
   .title {
     margin-left: 32px;
     h2 {
-      font-size: 24px;
+      font-size: $fs24;
       color: $color-black;
       line-height: $fs36;
       letter-spacing: 0px;
diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss
index e59d43c16b..6ebb76fd2a 100644
--- a/frontend/resources/styles/main/partials/project-bar.scss
+++ b/frontend/resources/styles/main/partials/project-bar.scss
@@ -29,7 +29,7 @@
     .project-name {
       border-bottom: 1px solid $color-gray-10;
       font-size: $fs14;
-      font-weight: bold;
+      font-weight: $fw700;
       padding: 0 $size-2;
       width: 100%;
     }
diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss
index 9fc607e51b..0f84b10478 100644
--- a/frontend/resources/styles/main/partials/sidebar-assets.scss
+++ b/frontend/resources/styles/main/partials/sidebar-assets.scss
@@ -265,7 +265,7 @@
 
     .grid-cell {
       background-color: $color-canvas;
-      border-radius: 4px;
+      border-radius: $br4;
       border: 2px solid transparent;
       overflow: hidden;
       display: flex;
@@ -303,7 +303,7 @@
 
       .editable-label-input {
         border: 1px solid $color-gray-20;
-        border-radius: 3px;
+        border-radius: $br3;
         font-size: $fs12;
         padding: 2px;
         margin: 0;
@@ -330,7 +330,7 @@
 
     .grid-placeholder {
       border: 2px solid $color-gray-20;
-      border-radius: 4px;
+      border-radius: $br4;
     }
 
     .drop-space {
@@ -371,7 +371,7 @@
         & > svg,
         & > img {
           background-color: $color-canvas;
-          border-radius: 4px;
+          border-radius: $br4;
           border: 2px solid transparent;
           height: 24px;
           width: 24px;
@@ -422,7 +422,7 @@
       display: flex;
       align-items: center;
       border: 1px solid transparent;
-      border-radius: $br-small;
+      border-radius: $br3;
       margin-top: $size-1;
       padding: 2px;
       font-size: $fs12;
@@ -481,7 +481,7 @@
   .chrome-picker {
     box-shadow: none !important;
     border: 1px solid $color-gray-10 !important;
-    border-radius: 0 !important;
+    border-radius: $br0 !important;
 
     & input {
       background-color: $color-white;
@@ -514,8 +514,8 @@
 
 .modal-create-color-title {
   color: $color-black;
-  font-size: 24px;
-  font-weight: normal;
+  font-size: $fs24;
+  font-weight: $fw400;
 }
 
 .libraries-wrapper {
diff --git a/frontend/resources/styles/main/partials/sidebar-document-history.scss b/frontend/resources/styles/main/partials/sidebar-document-history.scss
index 02d786450b..a8e00d41cc 100644
--- a/frontend/resources/styles/main/partials/sidebar-document-history.scss
+++ b/frontend/resources/styles/main/partials/sidebar-document-history.scss
@@ -57,7 +57,7 @@
 
 .history-entry {
   border: 1px solid $color-gray-60;
-  border-radius: 4px;
+  border-radius: $br4;
   margin: 0.5rem;
   display: flex;
   flex-direction: column;
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 5e44988442..2f2f07b750 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -13,14 +13,14 @@
   .element-icons {
     background-color: $color-gray-60;
     border: 1px solid $color-gray-60;
-    border-radius: $br-small;
+    border-radius: $br3;
     display: flex;
     margin: $size-1;
 
     li {
       align-items: center;
       border-right: 1px solid $color-gray-60;
-      border-radius: $br-small;
+      border-radius: $br3;
       cursor: pointer;
       display: flex;
       flex: 1;
@@ -145,7 +145,7 @@
 
         span {
           color: $color-primary;
-          font-weight: bold;
+          font-weight: $fw700;
         }
       }
     }
@@ -234,7 +234,7 @@
     }
 
     input:checked + label::after {
-      font-size: 0.8rem;
+      font-size: $fs13;
     }
   }
 
@@ -288,7 +288,7 @@
 
   .custom-select {
     border: 1px solid $color-gray-40;
-    border-radius: $br-small;
+    border-radius: $br3;
     cursor: pointer;
     padding: $size-1 $size-5 $size-1 $size-1;
     position: relative;
@@ -324,7 +324,7 @@
 
   .custom-select-dropdown {
     background-color: $color-white;
-    border-radius: $br-small;
+    border-radius: $br3;
     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
     left: 0;
     max-height: 30rem;
@@ -662,7 +662,7 @@
 .margin-options {
   align-items: center;
   border: 1px solid $color-gray-60;
-  border-radius: 4px;
+  border-radius: $br4;
   display: flex;
   justify-content: space-between;
   padding: 8px;
@@ -808,7 +808,7 @@
   display: flex;
   padding: 0.3rem 0;
   border: 1px solid $color-black;
-  border-radius: 4px;
+  border-radius: $br4;
   height: 48px;
 
   &:hover {
@@ -881,7 +881,7 @@
 .advanced-options {
   border: 1px solid $color-gray-60;
   background-color: $color-gray-50;
-  border-radius: 4px;
+  border-radius: $br4;
   padding: 8px;
   position: relative;
   top: 2px;
@@ -892,9 +892,9 @@
   cursor: pointer;
   border: 1px solid $color-black;
   background: $color-gray-60;
-  border-radius: 2px;
+  border-radius: $br2;
   color: $color-gray-20;
-  font-size: 11px;
+  font-size: $fs11;
   line-height: 16px;
   flex-grow: 1;
   padding: 0.25rem 0;
@@ -919,7 +919,7 @@
   justify-content: space-between;
   padding: 3px;
   border: 1px solid $color-black;
-  border-radius: 4px;
+  border-radius: $br4;
 
   &:hover {
     background: #1f1f1f;
@@ -1078,18 +1078,18 @@
   }
 
   .typography-sample {
-    font-size: 17px;
+    font-size: $fs17;
     color: $color-white;
     margin: 0 0.5rem;
 
     font-family: sourcesanspro;
     font-style: normal;
-    font-weight: normal;
+    font-weight: $fw400;
   }
 
   .typography-name {
     flex-grow: 1;
-    font-size: 11px;
+    font-size: $fs11;
     margin-top: 4px;
     white-space: nowrap;
   }
@@ -1120,7 +1120,7 @@
 }
 
 .row-flex input.adv-typography-name {
-  font-size: 14px;
+  font-size: $fs14;
   color: $color-gray-10;
   width: 100%;
   max-width: none;
@@ -1140,11 +1140,11 @@
 }
 
 .typography-read-only-data {
-  font-size: 12px;
+  font-size: $fs12;
   color: $color-white;
 
   .typography-name {
-    font-size: 14px;
+    font-size: $fs14;
   }
 
   .row-flex {
@@ -1166,9 +1166,9 @@
     text-align: center;
     background: $color-gray-50;
     padding: 0.5rem;
-    border-radius: 2px;
+    border-radius: $br2;
     cursor: pointer;
-    font-size: 14px;
+    font-size: $fs14;
     margin-top: 1rem;
 
     &:hover {
@@ -1182,7 +1182,7 @@
   margin: 0.5rem;
   padding: 0.5rem;
   border: 1px dashed $color-gray-30;
-  border-radius: 4px;
+  border-radius: $br4;
   display: flex;
   justify-content: space-between;
 
@@ -1252,7 +1252,7 @@
         width: $size-4;
         height: $size-4;
         border: 1px solid $color-gray-30;
-        border-radius: $br-small;
+        border-radius: $br3;
 
         svg {
           width: 8px;
@@ -1282,7 +1282,7 @@
       padding: 4px;
       font-size: $fs12;
       background: $color-gray-50;
-      border-radius: $br-small;
+      border-radius: $br3;
       color: $color-gray-20;
       border: 1px solid $color-gray-30;
       width: 88%;
@@ -1364,7 +1364,7 @@
     }
 
     .label {
-      font-size: 12px;
+      font-size: $fs12;
     }
 
     svg {
@@ -1588,7 +1588,7 @@
 
   .text {
     color: $color-gray-30;
-    font-size: 0.75rem;
+    font-size: $fs12;
     padding-left: 10px;
   }
 
@@ -1674,7 +1674,7 @@
       .align-content-style,
       .layout-behavior {
         display: flex;
-        border-radius: 4px;
+        border-radius: $br4;
         border: 1px solid $color-gray-60;
         height: 26px;
         margin-right: 5px;
@@ -1785,7 +1785,7 @@
         }
       }
       input {
-        font-size: 0.75rem;
+        font-size: $fs12;
         min-width: 0;
         padding: 0.25rem;
         height: 20px;
@@ -1799,11 +1799,11 @@
       background: none;
       border: none;
       cursor: pointer;
-      border-radius: $br-small;
+      border-radius: $br3;
 
       &.lock {
         border: 1px solid $color-gray-60;
-        border-radius: $br-small;
+        border-radius: $br3;
         width: 30px;
         height: 30px;
       }
@@ -1856,7 +1856,7 @@
           }
         }
         input {
-          font-size: 0.75rem;
+          font-size: $fs12;
           min-width: 0;
           padding: 0.25rem;
           width: 70px;
@@ -1871,11 +1871,11 @@
         background: none;
         border: none;
         cursor: pointer;
-        border-radius: $br-small;
+        border-radius: $br3;
 
         &.lock {
           border: 1px solid $color-gray-60;
-          border-radius: $br-small;
+          border-radius: $br3;
           width: 30px;
           height: 30px;
         }
@@ -1896,9 +1896,9 @@
     .margin-item-icons {
       padding: 0;
       border: 1px solid $color-gray-60;
-      border-radius: 3px;
+      border-radius: $br3;
       margin-bottom: 8px;
-      margin-top: 3px;
+      margin-top: $br3;
       margin-right: 1px;
       height: 30px;
       width: 30px;
@@ -1945,7 +1945,7 @@
 
   .layout-container {
     border: 1px solid $color-gray-60;
-    border-radius: 3px;
+    border-radius: $br3;
     margin: 5px 0;
     .layout-entry {
       display: flex;
diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss
index 524064f825..0b140d4b17 100644
--- a/frontend/resources/styles/main/partials/sidebar-icons.scss
+++ b/frontend/resources/styles/main/partials/sidebar-icons.scss
@@ -19,7 +19,7 @@
 .figure-btn {
   align-items: center;
   background-color: $color-gray-60;
-  border-radius: 3px;
+  border-radius: $br3;
   border: 1px solid transparent;
   cursor: pointer;
   display: flex;
diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss
index 7a1dc3d93e..05cfd0f382 100644
--- a/frontend/resources/styles/main/partials/sidebar-interactions.scss
+++ b/frontend/resources/styles/main/partials/sidebar-interactions.scss
@@ -182,7 +182,7 @@
   & .content {
     align-items: center;
     background-color: $color-gray-50;
-    border-radius: 4px;
+    border-radius: $br4;
     display: flex;
     height: 24px;
 
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index 1bb42703b8..c3bc778416 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -303,7 +303,7 @@ span.element-name {
 .icon-layer {
   > svg {
     background-color: rgba(255, 255, 255, 0.6);
-    border-radius: $br-small;
+    border-radius: $br3;
     flex-shrink: 0;
     fill: $color-black !important;
     padding: 1px;
@@ -320,7 +320,7 @@ span.element-name {
     &.search {
       .search-box {
         border: 1px solid $color-gray-20;
-        border-radius: 4px;
+        border-radius: $br4;
         height: 32px;
         width: 100%;
         display: flex;
@@ -334,7 +334,7 @@ span.element-name {
           width: 100%;
           background-color: $color-gray-50;
           color: $color-white;
-          font-size: 12px;
+          font-size: $fs12;
           height: 16px;
           &:focus {
             outline: none;
@@ -367,14 +367,14 @@ span.element-name {
 .active-filters {
   margin-top: 5px;
   line-height: 26px;
-  font-size: 11px;
+  font-size: $fs11;
   margin: 0 0.5rem;
   span {
     background-color: $color-primary;
     color: $color-black;
     padding: 3px 5px;
     margin: 0 2px;
-    border-radius: 4px;
+    border-radius: $br4;
     cursor: pointer;
     svg {
       width: 7px;
@@ -393,10 +393,10 @@ span.element-name {
   left: 8px;
   background-color: $color-white;
   color: $color-gray-50;
-  border-radius: 4px;
+  border-radius: $br4;
   span {
     padding: 10px 20px 10px 10px;
-    border-radius: 4px;
+    border-radius: $br4;
     svg {
       width: 16px;
       height: 16px;
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index 44706d5009..0d0546a3a9 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -133,7 +133,7 @@
 .collapse-pages {
   align-items: center;
   background-color: transparent;
-  border-radius: $br-small;
+  border-radius: $br3;
   border: 1px solid transparent;
   cursor: pointer;
   display: flex;
@@ -180,7 +180,7 @@
   }
   button {
     background-color: transparent;
-    border-radius: $br-small;
+    border-radius: $br3;
     border: 1px solid transparent;
     cursor: pointer;
     color: $color-gray-20;
diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss
index c2c881790c..819f1c378a 100644
--- a/frontend/resources/styles/main/partials/sidebar-tools.scss
+++ b/frontend/resources/styles/main/partials/sidebar-tools.scss
@@ -12,7 +12,7 @@
 .tool-btn {
   align-items: center;
   background-color: $color-gray-60;
-  border-radius: 3px;
+  border-radius: $br4;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index c5765c4445..a165ad7a47 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -58,7 +58,7 @@
 
         span.tool-badge {
           border: 1px solid $color-primary;
-          border-radius: 2px;
+          border-radius: $br2;
           font-size: $fs10;
           color: $color-primary;
           padding: 2px 4px;
@@ -123,8 +123,8 @@
         & .view-only-mode {
           color: $color-primary;
           border: 1px solid $color-primary;
-          border-radius: 3px;
-          font-size: 10px;
+          border-radius: $br3;
+          font-size: $fs10;
           text-transform: uppercase;
           display: flex;
           align-items: center;
@@ -171,8 +171,8 @@
         & .focus-mode {
           color: $color-primary;
           border: 1px solid $color-primary;
-          border-radius: 3px;
-          font-size: 10px;
+          border-radius: $br3;
+          font-size: $fs10;
           text-transform: uppercase;
           padding: 0px 4px;
           display: flex;
@@ -189,7 +189,7 @@
 
   .empty {
     color: $color-gray-20;
-    font-size: 12px;
+    font-size: $fs12;
     line-height: 1.5;
     text-align: center;
     padding: 0 15px;
@@ -256,7 +256,7 @@
     }
 
     .tab-container-tab-title {
-      border-radius: 4px;
+      border-radius: $br4;
 
       &.current {
         background-color: $color-primary;
@@ -339,7 +339,7 @@ button.collapse-sidebar {
     width: 28px;
     height: 48px;
     padding: 0;
-    border-radius: 0px 4px 4px 0px;
+    border-radius: 0 $br4 $br4 0;
     border-left: 1px solid $color-gray-50;
 
     & svg {
@@ -415,7 +415,7 @@ button.collapse-sidebar {
       justify-content: space-between;
       align-items: center;
       border: 1px solid $color-gray-30;
-      border-radius: 2px;
+      border-radius: $br2;
       width: 100%;
       &:focus-within {
         border: 1px solid $color-primary;
@@ -516,7 +516,7 @@ button.collapse-sidebar {
 
     .shortcut-name {
       border: 1px solid $color-gray-60;
-      border-radius: 4px;
+      border-radius: $br4;
       padding: 7px;
       display: flex;
       justify-content: space-between;
@@ -537,10 +537,10 @@ button.collapse-sidebar {
         min-width: 15px;
         background-color: $color-white;
         color: $color-black;
-        border-radius: 3px;
+        border-radius: $br3;
         padding: 2px 5px;
         font-size: $fs11;
-        font-weight: 600;
+        font-weight: $fw600;
         margin: 0 2px;
         text-transform: capitalize;
         display: inline-block;
diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss
index be52565e56..41490f896c 100644
--- a/frontend/resources/styles/main/partials/tab-container.scss
+++ b/frontend/resources/styles/main/partials/tab-container.scss
@@ -10,7 +10,7 @@
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  font-size: 12px;
+  font-size: $fs12;
   height: 2.5rem;
   padding: 0 0.25rem;
 }
@@ -18,7 +18,7 @@
 .tab-container-tab-title {
   align-items: center;
   background: $color-gray-60;
-  border-radius: 2px 2px 0px 0px;
+  border-radius: $br2 $br2 0 0;
   color: $color-white;
   display: flex;
   justify-content: center;
diff --git a/frontend/resources/styles/main/partials/text-palette.scss b/frontend/resources/styles/main/partials/text-palette.scss
index b1c223da1e..4bb667f3df 100644
--- a/frontend/resources/styles/main/partials/text-palette.scss
+++ b/frontend/resources/styles/main/partials/text-palette.scss
@@ -13,7 +13,7 @@
 
   & .typography-font,
   & .typography-data {
-    font-size: 16px;
+    font-size: $fs16;
     color: $color-gray-30;
   }
 
diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss
index f7cdbfb299..8e2f786510 100644
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ b/frontend/resources/styles/main/partials/user-settings.scss
@@ -70,7 +70,7 @@
       display: flex;
       flex-grow: 1;
       font-size: $fs24;
-      font-weight: normal;
+      font-weight: $fw400;
       justify-content: center;
     }
 
@@ -181,7 +181,7 @@
 
     h2 {
       font-size: $fs14;
-      font-weight: normal;
+      font-weight: $fw400;
       margin-bottom: $size-4;
     }
   }
diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss
index 8d9067ed07..2ba7a859fe 100644
--- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss
+++ b/frontend/resources/styles/main/partials/viewer-thumbnails.scss
@@ -146,7 +146,7 @@
     min-height: 120px;
     height: 120px;
     border: 1px solid $color-gray-20;
-    border-radius: 2px;
+    border-radius: $br2;
     padding: 4px;
 
     display: flex;
diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss
index b5a5e0365a..1ed55ff1c4 100644
--- a/frontend/resources/styles/main/partials/viewer.scss
+++ b/frontend/resources/styles/main/partials/viewer.scss
@@ -57,7 +57,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 12px;
+      border-radius: $br12;
       background: $color-gray-50;
       width: 24px;
       height: 24px;
@@ -117,7 +117,7 @@
     .reset {
       display: flex;
       align-items: center;
-      border-radius: 12px;
+      border-radius: $br12;
       background: $color-gray-50;
       width: 24px;
       height: 24px;
@@ -141,7 +141,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 12px;
+      border-radius: $br12;
       background: $color-gray-50;
       width: 67px;
       height: 25px;
diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss
index 755a442c5a..2fdc61e839 100644
--- a/frontend/resources/styles/main/partials/workspace-header.scss
+++ b/frontend/resources/styles/main/partials/workspace-header.scss
@@ -149,7 +149,7 @@
       &:focus,
       &:focus-within {
         outline: none;
-        border-radius: 3px;
+        border-radius: $br3;
         border: 1px solid $color-primary;
       }
     }
@@ -163,17 +163,17 @@
     z-index: 12;
 
     background-color: $color-white;
-    border-radius: $br-small;
+    border-radius: $br3;
     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
 
     :first-child {
       &:hover {
-        border-radius: $br-small $br-small 0px 0px;
+        border-radius: $br3 $br3 0 0;
       }
     }
     :last-child {
       &:hover {
-        border-radius: 0px 0px $br-small $br-small;
+        border-radius: 0 0 $br3 $br3;
       }
     }
 
@@ -211,17 +211,17 @@
     width: 270px;
     z-index: 12;
     background-color: $color-white;
-    border-radius: $br-small;
+    border-radius: $br3;
     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
 
     :first-child {
       &:hover {
-        border-radius: $br-small $br-small 0px 0px;
+        border-radius: $br3 $br3 0 0;
       }
     }
     :last-child {
       &:hover {
-        border-radius: 0px 0px $br-small $br-small;
+        border-radius: 0 0 $br3 $br3;
       }
     }
 
@@ -294,7 +294,7 @@
 
   & button.document-history {
     background: $color-gray-60;
-    border-radius: 3px;
+    border-radius: $br3;
     border: none;
     cursor: pointer;
     height: 24px;
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index da78e187a8..e2bd7767ed 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -77,7 +77,7 @@ $height-palette-max: 80px;
 
 .workspace-context-menu {
   background-color: $color-white;
-  border-radius: $br-small;
+  border-radius: $br3;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
   left: 740px;
   position: absolute;
@@ -198,7 +198,7 @@ $height-palette-max: 80px;
 
   .coordinates {
     background-color: $color-dark-bg;
-    border-radius: $br-small;
+    border-radius: $br3;
     bottom: 0px;
     padding-left: 5px;
     position: fixed;
@@ -223,7 +223,7 @@ $height-palette-max: 80px;
 
   .cursor-tooltip {
     background-color: $color-dark-bg;
-    border-radius: $br-small;
+    border-radius: $br3;
     color: $color-white;
     font-size: $fs12;
     padding: 3px 8px;
@@ -348,11 +348,11 @@ $height-palette-max: 80px;
   width: fit-content;
   font-family: worksans;
   padding: 2px 12px;
-  border-radius: 4px;
+  border-radius: $br4;
   display: flex;
   align-items: center;
   height: 20px;
-  font-size: 12px;
+  font-size: $fs12;
   line-height: 1.5;
 }
 
@@ -373,7 +373,7 @@ $height-palette-max: 80px;
     display: flex;
     flex-direction: row;
     background: white;
-    border-radius: 3px;
+    border-radius: $br3;
     padding: 0.5rem;
     border: 1px solid $color-gray-20;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
@@ -393,7 +393,7 @@ $height-palette-max: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 3px;
+    border-radius: $br3;
 
     svg {
       pointer-events: none;
diff --git a/frontend/resources/styles/main/partials/zoom-widget.scss b/frontend/resources/styles/main/partials/zoom-widget.scss
index af7acb71f9..1edb1da56a 100644
--- a/frontend/resources/styles/main/partials/zoom-widget.scss
+++ b/frontend/resources/styles/main/partials/zoom-widget.scss
@@ -23,7 +23,7 @@
     z-index: 12;
 
     background-color: $color-white;
-    border-radius: $br-small;
+    border-radius: $br3;
     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
 
     li {