♻️ connect values with variables in CSS and remove unused code

Signed-off-by: Ondřej Konečný <ondrej.konecny@gmail.com>
2025-08-07 14:38:33 +02:00 · 2023-02-22 13:52:45 +01:00 · 2023-02-22 13:52:45 +01:00 · be865af1fc
commit be865af1fc
parent c6ad8ee110
44 changed files with 345 additions and 331 deletions
--- 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

--- 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 {
--- 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;
--- 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;
--- 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 {
--- 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;
--- 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 {
--- 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 {
--- 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;
        }
      }
--- 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;
    }
  }

--- 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 {
--- 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;
--- 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;
--- 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;
--- 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;
  }
 }
--- 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;
--- 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 {
--- 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;
    }
--- 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;
 }
--- 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;
  }
 }
--- 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;
      }
--- 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;
    }

--- 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 {
--- 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;

--- 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;
--- 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;
--- 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%;
    }
--- 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 {
--- 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;
--- 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;
--- 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;
--- 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;

--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
  }

--- 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;
    }
  }
--- 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;
--- 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;
--- 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;
--- 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;
--- 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 {