diff --git a/src/app/docs/components/docs-layout/docs-layout.module.scss b/src/app/docs/components/docs-layout/docs-layout.module.scss
index 4318b8a1f..1df1edb2b 100644
--- a/src/app/docs/components/docs-layout/docs-layout.module.scss
+++ b/src/app/docs/components/docs-layout/docs-layout.module.scss
@@ -31,7 +31,7 @@
       overflow-y: initial;
       display: flex;
       flex-direction: column;
-      gap: 20px;
+      gap: $gap-m;
 
       height: initial;
     }
@@ -40,7 +40,7 @@
   .docs-content {
     display: flex;
     flex-direction: column;
-    gap: 50px;
+    gap: $gap-xxxl;
 
     width: 100%;
     min-width: 0;
@@ -59,7 +59,7 @@
     align-items: center;
 
     @include media-mobile-landscape {
-      gap: 20px;
+      gap: $gap-m;
     }
   }
 
diff --git a/src/app/docs/components/docs-menu/docs-menu.module.scss b/src/app/docs/components/docs-menu/docs-menu.module.scss
index 575a34db6..2235c68d3 100644
--- a/src/app/docs/components/docs-menu/docs-menu.module.scss
+++ b/src/app/docs/components/docs-menu/docs-menu.module.scss
@@ -12,7 +12,7 @@
 
     padding-left: 12px;
 
-    font-size: 14px;
+    font-size: $font-size-xs;
     text-align: left;
     list-style-type: none;
 
diff --git a/src/app/docs/components/search/search.module.scss b/src/app/docs/components/search/search.module.scss
index 1543a4f1c..c0c3f1fac 100644
--- a/src/app/docs/components/search/search.module.scss
+++ b/src/app/docs/components/search/search.module.scss
@@ -43,5 +43,5 @@
 }
 
 .subresult p {
-  font-size: 14px;
+  font-size: $font-size-xs;
 }
diff --git a/src/core/styles/_constants.scss b/src/core/styles/_constants.scss
index dc3b3686f..dd59a67f6 100644
--- a/src/core/styles/_constants.scss
+++ b/src/core/styles/_constants.scss
@@ -95,3 +95,36 @@ $ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
 $ease-emphasize-decelerate: cubic-bezier(0, 0, 0, 1);
 $ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
 $standard-decelerate: cubic-bezier(0, 0, 0, 1);
+
+// Border radius
+$border-radius-xxs: 4px;
+$border-radius-xs: 8px;
+$border-radius-s: 12px;
+$border-radius-m: 16px;
+$border-radius-l: 20px;
+$border-radius-max: 999px;
+
+// Font sizes
+$font-size-xxs: 12px;
+$font-size-xs: 14px;
+$font-size-s: 16px;
+$font-size-m: 18px;
+$font-size-l: 20px;
+$font-size-xl: 24px;
+$font-size-xxl: 36px;
+
+// Standard gap
+$gap-xs: 8px;
+$gap-s: 16px;
+$gap-m: 20px;
+$gap-l: 24px;
+$gap-xl: 32px;
+$gap-xxl: 40px;
+$gap-xxxl: 50px;
+
+// Z-indexes
+$z-index-negative: -1;
+$z-index-s: 1;
+$z-index-m: 2;
+$z-index-l: 10;
+$z-index-max: 100;
diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss
index 6b06f5082..7e46be99c 100644
--- a/src/core/styles/index.scss
+++ b/src/core/styles/index.scss
@@ -131,7 +131,7 @@ figure {
 
       height: var(--slider-arrow-btn-height);
       margin: 2px;
-      border-radius: 8px;
+      border-radius: $border-radius-xs;
 
       opacity: $opacity-100;
       backdrop-filter: blur(20px);
@@ -205,7 +205,7 @@ figure {
       width: 100%;
       height: 100%;
 
-      font-size: 24px;
+      font-size: $font-size-xl;
       color: $color-white;
 
       background: $color-gray-400;
diff --git a/src/entities/course/ui/course-card/course-card.module.scss b/src/entities/course/ui/course-card/course-card.module.scss
index 6bca91441..6edbaa14c 100644
--- a/src/entities/course/ui/course-card/course-card.module.scss
+++ b/src/entities/course/ui/course-card/course-card.module.scss
@@ -10,13 +10,13 @@
 
   min-width: 100px;
   height: 100%;
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   &::before {
     content: '';
 
     position: absolute;
-    z-index: -1;
+    z-index: $z-index-negative;
     inset: 0;
 
     border-radius: inherit;
@@ -33,13 +33,13 @@
 
     overflow: hidden;
     display: flex;
-    gap: 16px;
+    gap: $gap-s;
     align-items: center;
 
     height: 100%;
     min-height: 112px;
     padding: 36px 32px;
-    border-radius: 12px 12px 0 0;
+    border-radius: $border-radius-s $border-radius-s 0 0;
 
     background-color: $color-purple-50;
 
@@ -57,7 +57,7 @@
 
   .course-info {
     display: flex;
-    gap: 16px;
+    gap: $gap-s;
     align-items: center;
     justify-content: space-between;
 
@@ -65,7 +65,7 @@
     border-color: $color-gray-200;
     border-style: solid;
     border-width: 0 1px 1px 1px;
-    border-radius: 0 0 12px 12px;
+    border-radius: 0 0 $border-radius-s $border-radius-s;
 
     background-color: $color-white;
 
@@ -103,7 +103,7 @@
 
     .course-info {
       padding: 24px;
-      font-size: 14px;
+      font-size: $font-size-xs;
 
       @include media-laptop-medium {
         flex-direction: row;
@@ -117,7 +117,7 @@
     .course-link {
       gap: 4px;
       padding: 10px 12px;
-      font-size: 14px;
+      font-size: $font-size-xs;
     }
 
     section {
@@ -143,7 +143,7 @@
   }
 
   .course-title {
-    z-index: 2;
+    z-index: $z-index-m;
   }
 
   @include media-hover {
diff --git a/src/entities/course/ui/course-item/course-item.module.scss b/src/entities/course/ui/course-item/course-item.module.scss
index a681a2a26..36da21d6a 100644
--- a/src/entities/course/ui/course-item/course-item.module.scss
+++ b/src/entities/course/ui/course-item/course-item.module.scss
@@ -22,7 +22,7 @@
   .course-info {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: $gap-xs;
 
     width: 100%;
 
diff --git a/src/entities/event/ui/event-card/event-card.module.scss b/src/entities/event/ui/event-card/event-card.module.scss
index a833a8a78..3406e7b22 100644
--- a/src/entities/event/ui/event-card/event-card.module.scss
+++ b/src/entities/event/ui/event-card/event-card.module.scss
@@ -5,7 +5,7 @@
 
   width: 320px;
   padding: 0;
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   .card-header {
     position: relative;
@@ -16,7 +16,7 @@
     padding: 32px 24px 24px 24px;
     border: solid $color-gray-200;
     border-width: 1px 1px 0 1px;
-    border-radius: 12px 12px 0 0;
+    border-radius: $border-radius-s $border-radius-s 0 0;
 
     background-color: $color-purple-50;
 
@@ -38,7 +38,7 @@
       border: 4px solid $color-purple-100;
       border-radius: 36px;
 
-      font-size: 16px;
+      font-size: $font-size-s;
       line-height: 1.2;
     }
 
@@ -73,7 +73,7 @@
         margin-top: 0;
         margin-bottom: 8px;
 
-        font-size: 16px;
+        font-size: $font-size-s;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
@@ -92,7 +92,7 @@
     padding: 24px;
     border: solid $color-gray-200;
     border-width: 0 1px 1px 1px;
-    border-radius: 0 0 12px 12px;
+    border-radius: 0 0 $border-radius-s $border-radius-s;
 
     background-color: hsla(from $color-gray-100 h s l/ $opacity-20);
 
@@ -104,7 +104,7 @@
 
       margin-bottom: 16px;
 
-      font-size: 14px;
+      font-size: $font-size-xs;
       font-weight: $font-weight-medium;
       color: $color-gray-500;
     }
diff --git a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss
index 9b01f911d..7d6a49954 100644
--- a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss
+++ b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss
@@ -1,14 +1,14 @@
 .card {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
 }
 
 .card-wrapper {
   max-width: 624px;
   min-height: 510px;
   padding: 40px 32px 40px 32px;
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   box-shadow: 0 4px 12px 0 hsla(from $color-black h s l / $opacity-10);
 
@@ -36,7 +36,7 @@
 
 .card-info {
   display: flex;
-  gap: 24px;
+  gap: $gap-l;
   align-items: center;
 }
 
@@ -54,7 +54,7 @@
 .card-content-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
   align-items: flex-start;
 }
 
diff --git a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss
index 151a317cb..142d69543 100644
--- a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss
+++ b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss
@@ -1,12 +1,12 @@
 .trainer-card {
   display: flex;
-  gap: 24px;
+  gap: $gap-l;
   align-items: flex-start;
   justify-content: space-between;
 
   max-width: 700px;
   padding: 40px 32px 40px 32px;
-  border-radius: 16px;
+  border-radius: $border-radius-m;
 
   box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
 
@@ -17,7 +17,7 @@
     img {
       width: 100%;
       height: auto;
-      border-radius: 12px;
+      border-radius: $border-radius-s;
     }
   }
 
@@ -31,13 +31,13 @@
 
   .card-subtitle {
     margin: 0;
-    font-size: 18px;
+    font-size: $font-size-m;
     line-height: 1.15;
     color: $color-gray-500;
   }
 
   .card-content {
-    font-size: 16px;
+    font-size: $font-size-s;
     font-weight: $font-weight-regular;
     line-height: 24px;
   }
diff --git a/src/shared/ui/date-simple/date-simple.module.scss b/src/shared/ui/date-simple/date-simple.module.scss
index b7dfb603c..181d43db9 100644
--- a/src/shared/ui/date-simple/date-simple.module.scss
+++ b/src/shared/ui/date-simple/date-simple.module.scss
@@ -1,12 +1,12 @@
 .date {
   display: flex;
-  gap: 8px;
+  gap: $gap-xs;
   align-items: center;
   justify-content: flex-start;
 
   margin: 0;
 
-  font-size: 14px;
+  font-size: $font-size-xs;
 }
 
 .icon {
diff --git a/src/shared/ui/link-custom/link-custom.module.scss b/src/shared/ui/link-custom/link-custom.module.scss
index 4d4645fcb..1580ae5a5 100644
--- a/src/shared/ui/link-custom/link-custom.module.scss
+++ b/src/shared/ui/link-custom/link-custom.module.scss
@@ -5,7 +5,7 @@
 
   display: flex;
   flex-flow: row nowrap;
-  gap: 8px;
+  gap: $gap-xs;
   place-content: center center;
   align-items: center;
 
@@ -19,7 +19,7 @@
   padding: 12px 24px;
   border: 1px solid $color-black;
 
-  font-size: 18px;
+  font-size: $font-size-m;
   color: $color-black;
 
   .icon-wrapper {
@@ -41,7 +41,7 @@
   padding: 16px 24px;
   border: 2px solid $color-black;
 
-  font-size: 18px;
+  font-size: $font-size-m;
   line-height: 24px;
   color: $color-white;
 
@@ -61,9 +61,9 @@
   width: max-content;
   height: 36px;
   padding: 10px 12px;
-  border-radius: 9999px;
+  border-radius: $border-radius-max;
 
-  font-size: 14px;
+  font-size: $font-size-xs;
   line-height: 16px;
   color: $color-black;
 
diff --git a/src/shared/ui/list/list.module.scss b/src/shared/ui/list/list.module.scss
index 5d4d1032d..8f75e71da 100644
--- a/src/shared/ui/list/list.module.scss
+++ b/src/shared/ui/list/list.module.scss
@@ -1,9 +1,9 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
 
-  font-size: 18px;
+  font-size: $font-size-m;
   line-height: 28px;
   letter-spacing: 0.5px;
   list-style-type: none;
@@ -13,7 +13,7 @@
     letter-spacing: 0;
 
     @include media-laptop {
-      font-size: 16px;
+      font-size: $font-size-s;
       line-height: 24px;
     }
   }
@@ -23,6 +23,6 @@
   }
 
   @include media-tablet-large {
-    font-size: 16px;
+    font-size: $font-size-s;
   }
 }
diff --git a/src/shared/ui/main-title/main-title.module.scss b/src/shared/ui/main-title/main-title.module.scss
index 909532d6b..e282822ed 100644
--- a/src/shared/ui/main-title/main-title.module.scss
+++ b/src/shared/ui/main-title/main-title.module.scss
@@ -16,7 +16,7 @@
 
     @include media-tablet {
       padding-bottom: 16px;
-      font-size: 36px;
+      font-size: $font-size-xxl;
       line-height: 44px;
     }
   }
diff --git a/src/shared/ui/modal/modal.module.scss b/src/shared/ui/modal/modal.module.scss
index ac5d5faa5..d9562fadf 100644
--- a/src/shared/ui/modal/modal.module.scss
+++ b/src/shared/ui/modal/modal.module.scss
@@ -6,7 +6,7 @@
   max-width: 889px;
   padding: 0 32px;
   border: none;
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   line-height: 24px;
 
@@ -117,9 +117,9 @@
 
   padding: 16px;
   border: none;
-  border-radius: 999px;
+  border-radius: $border-radius-max;
 
-  font-size: 24px;
+  font-size: $font-size-xl;
 
   background-color: transparent;
 
diff --git a/src/shared/ui/paragraph/paragraph.module.scss b/src/shared/ui/paragraph/paragraph.module.scss
index 070c60282..cd7fd2e6c 100644
--- a/src/shared/ui/paragraph/paragraph.module.scss
+++ b/src/shared/ui/paragraph/paragraph.module.scss
@@ -5,30 +5,30 @@
 
   &.medium-font-size {
     padding-bottom: 18px;
-    font-size: 18px;
+    font-size: $font-size-m;
     font-weight: $font-weight-regular;
   }
 
   &.large-font-size {
     padding-bottom: 16px;
-    font-size: 20px;
+    font-size: $font-size-l;
     font-weight: $font-weight-medium;
   }
 
   &.small-font-size {
-    font-size: 14px;
+    font-size: $font-size-xs;
     font-weight: $font-weight-regular;
     line-height: 24px;
   }
 
   @include media-laptop {
     &.medium-font-size {
-      font-size: 16px;
+      font-size: $font-size-s;
       line-height: 24px;
     }
 
     &.large-font-size {
-      font-size: 18px;
+      font-size: $font-size-m;
       font-weight: $font-weight-regular;
     }
 
diff --git a/src/shared/ui/section-label/section-label.module.scss b/src/shared/ui/section-label/section-label.module.scss
index d8e9c8dc5..973effb37 100644
--- a/src/shared/ui/section-label/section-label.module.scss
+++ b/src/shared/ui/section-label/section-label.module.scss
@@ -1,7 +1,7 @@
 .label {
   margin: 8px 8px 8px 0;
 
-  font-size: 14px;
+  font-size: $font-size-xs;
   font-weight: $font-weight-regular;
   line-height: 16px;
   text-transform: uppercase;
diff --git a/src/shared/ui/short-info-panel/short-info-panel.module.scss b/src/shared/ui/short-info-panel/short-info-panel.module.scss
index 456ae2042..66b1d71de 100644
--- a/src/shared/ui/short-info-panel/short-info-panel.module.scss
+++ b/src/shared/ui/short-info-panel/short-info-panel.module.scss
@@ -1,7 +1,7 @@
 .info {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: $gap-s;
   align-items: flex-start;
 
   &.margin {
@@ -11,13 +11,13 @@
 
 .additional-info {
   display: flex;
-  gap: 8px;
+  gap: $gap-xs;
   align-items: center;
   justify-content: flex-start;
 
   margin: 0;
 
-  font-size: 14px;
+  font-size: $font-size-xs;
   color: $color-gray-900;
 }
 
diff --git a/src/shared/ui/social-media-item/social-media-item.module.scss b/src/shared/ui/social-media-item/social-media-item.module.scss
index e44d10cbf..0eea0177c 100644
--- a/src/shared/ui/social-media-item/social-media-item.module.scss
+++ b/src/shared/ui/social-media-item/social-media-item.module.scss
@@ -3,14 +3,14 @@
 
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
   align-items: center;
   justify-content: center;
 
   width: 112px;
   margin-top: 36px;
 
-  font-size: 14px;
+  font-size: $font-size-xs;
   font-weight: $font-weight-medium;
   line-height: 16px;
   color: $color-gray-900;
@@ -45,7 +45,7 @@
   }
 
   @include media-tablet {
-    font-size: 12px;
+    font-size: $font-size-xxs;
     line-height: 16px;
   }
 }
diff --git a/src/shared/ui/subtitle/subtitle.module.scss b/src/shared/ui/subtitle/subtitle.module.scss
index f191b1164..656a44e8a 100644
--- a/src/shared/ui/subtitle/subtitle.module.scss
+++ b/src/shared/ui/subtitle/subtitle.module.scss
@@ -4,21 +4,21 @@
 
   &.font-size {
     &-extra-small {
-      font-size: 20px;
+      font-size: $font-size-l;
       line-height: 28px;
 
       @include media-tablet {
-        font-size: 18px;
+        font-size: $font-size-m;
         line-height: 24px;
       }
     }
 
     &-small {
-      font-size: 24px;
+      font-size: $font-size-xl;
       line-height: 32px;
 
       @include media-tablet {
-        font-size: 20px;
+        font-size: $font-size-l;
         line-height: 28px;
       }
     }
@@ -28,7 +28,7 @@
       line-height: 36px;
 
       @include media-tablet {
-        font-size: 24px;
+        font-size: $font-size-xl;
         line-height: 32px;
       }
     }
@@ -44,7 +44,7 @@
     }
 
     &-extra-large {
-      font-size: 36px;
+      font-size: $font-size-xxl;
       line-height: 44px;
 
       @include media-tablet {
diff --git a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss
index 9424a240d..1f15f8444 100644
--- a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss
+++ b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss
@@ -1,7 +1,7 @@
 .playlist {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
 }
 
 .videos-container {
@@ -10,12 +10,12 @@
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
 
   @include media-tablet-large {
     overflow: scroll auto;
     flex-direction: row;
-    gap: 24px;
+    gap: $gap-l;
   }
 }
 
@@ -33,7 +33,7 @@
 
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
 
   margin-right: 5px;
   padding: 16px;
@@ -66,7 +66,7 @@
   img {
     display: block;
     max-width: 100%;
-    border-radius: 8px;
+    border-radius: $border-radius-xs;
 
     @include media-tablet-large {
       max-width: 200px;
@@ -88,9 +88,9 @@
 
   width: 100%;
   height: 100%;
-  border-radius: 8px;
+  border-radius: $border-radius-xs;
 
-  font-size: 14px;
+  font-size: $font-size-xs;
   font-weight: $font-weight-bold;
   color: $color-white;
 
diff --git a/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss b/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss
index d2cc883f8..09ba6f3a7 100644
--- a/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss
+++ b/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss
@@ -1,7 +1,7 @@
 .video-player-container {
   position: relative;
   display: flex;
-  gap: 24px;
+  gap: $gap-l;
 
   @include media-tablet-large {
     flex-direction: column;
@@ -15,6 +15,6 @@
 
 .video-player {
   iframe {
-    border-radius: 12px;
+    border-radius: $border-radius-s;
   }
 }
diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss
index 15a96a0e0..f4414bed6 100644
--- a/src/shared/ui/widget-title/widget-title.module.scss
+++ b/src/shared/ui/widget-title/widget-title.module.scss
@@ -11,7 +11,7 @@
 
 .small {
   padding-bottom: 24px;
-  font-size: 36px;
+  font-size: $font-size-xxl;
   line-height: 44px;
   letter-spacing: 0;
 }
@@ -23,7 +23,7 @@
 
   @include media-tablet {
     padding-bottom: 16px;
-    font-size: 36px;
+    font-size: $font-size-xxl;
     line-height: 44px;
   }
 }
@@ -35,7 +35,7 @@
 
   @include media-tablet {
     padding-bottom: 16px;
-    font-size: 36px;
+    font-size: $font-size-xxl;
     line-height: 44px;
   }
 }
diff --git a/src/widgets/about-community/ui/about-community.module.scss b/src/widgets/about-community/ui/about-community.module.scss
index 568541246..82e5e5e59 100644
--- a/src/widgets/about-community/ui/about-community.module.scss
+++ b/src/widgets/about-community/ui/about-community.module.scss
@@ -5,7 +5,7 @@
     min-width: 640px;
 
     @include media-laptop {
-      gap: 20px;
+      gap: $gap-m;
       min-width: 400px;
     }
 
@@ -25,10 +25,10 @@
   }
 
   @include media-laptop {
-    gap: 50px;
+    gap: $gap-xxxl;
   }
 
   @include media-tablet-large {
-    gap: 32px;
+    gap: $gap-xl;
   }
 }
diff --git a/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss b/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss
index 6eebfde5f..c83b4fe38 100644
--- a/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss
+++ b/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss
@@ -1,7 +1,7 @@
 .about-course {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
 
   .about-course-grid {
     display: grid;
@@ -9,18 +9,18 @@
       'a a b'
       'c d e';
     grid-template-columns: repeat(3, 1fr);
-    gap: 32px 30px;
+    gap: $gap-xl 30px;
 
     margin-bottom: 16px;
 
     @include media-laptop {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: $gap-l;
     }
 
     @include media-tablet {
-      gap: 16px;
+      gap: $gap-s;
     }
   }
 }
diff --git a/src/widgets/about-course/ui/grid-item/grid-item.module.scss b/src/widgets/about-course/ui/grid-item/grid-item.module.scss
index ab2ecdd17..c4079abe0 100644
--- a/src/widgets/about-course/ui/grid-item/grid-item.module.scss
+++ b/src/widgets/about-course/ui/grid-item/grid-item.module.scss
@@ -6,13 +6,13 @@
   width: 100%;
   padding: 24px;
   border: 1px solid hsla(from $color-yellow h s l/ $opacity-8);
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   background-color: $color-yellow-50;
 
   .item-title {
     display: flex;
-    gap: 16px;
+    gap: $gap-s;
     align-items: center;
 
     .grid-icon {
diff --git a/src/widgets/benefits/ui/benefits/benefits.module.scss b/src/widgets/benefits/ui/benefits/benefits.module.scss
index f6649b077..988dd1f3c 100644
--- a/src/widgets/benefits/ui/benefits/benefits.module.scss
+++ b/src/widgets/benefits/ui/benefits/benefits.module.scss
@@ -11,9 +11,9 @@
   .grid-item {
     padding: 24px;
     border: 1px solid $color-yellow-100;
-    border-radius: 12px;
+    border-radius: $border-radius-s;
 
-    font-size: 18px;
+    font-size: $font-size-m;
     line-height: 28px;
 
     background-color: $color-yellow-50;
@@ -38,11 +38,11 @@
   @include media-laptop {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: $gap-l;
   }
 
   @include media-tablet {
-    gap: 16px;
+    gap: $gap-s;
   }
 }
 
@@ -58,15 +58,15 @@
 
   .flex-item {
     display: flex;
-    gap: 16px;
+    gap: $gap-s;
     align-items: center;
 
     width: 100%;
     padding: 24px;
     border: 1px solid $color-yellow-100;
-    border-radius: 12px;
+    border-radius: $border-radius-s;
 
-    font-size: 18px;
+    font-size: $font-size-m;
     line-height: 28px;
     letter-spacing: 0;
 
@@ -91,11 +91,11 @@
 
   @include media-laptop {
     display: flex;
-    gap: 24px;
+    gap: $gap-l;
   }
 
   @include media-tablet {
     flex-direction: column;
-    gap: 16px;
+    gap: $gap-s;
   }
 }
diff --git a/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss b/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss
index 544d00019..fd81ac369 100644
--- a/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss
+++ b/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss
@@ -2,7 +2,7 @@
   ul {
     display: flex;
     align-items: flex-start;
-    font-size: 14px;
+    font-size: $font-size-xs;
     list-style: none;
   }
 
diff --git a/src/widgets/community-media/ui/community-media.module.scss b/src/widgets/community-media/ui/community-media.module.scss
index 24b913dfb..df80e3c05 100644
--- a/src/widgets/community-media/ui/community-media.module.scss
+++ b/src/widgets/community-media/ui/community-media.module.scss
@@ -1,10 +1,10 @@
 .community-media-content {
   @include media-laptop {
-    gap: 50px;
+    gap: $gap-xxxl;
   }
 
   @include media-tablet-large {
-    gap: 16px;
+    gap: $gap-s;
   }
 }
 
diff --git a/src/widgets/contribute/ui/contribute.module.scss b/src/widgets/contribute/ui/contribute.module.scss
index 6228433a0..ec35f1a19 100644
--- a/src/widgets/contribute/ui/contribute.module.scss
+++ b/src/widgets/contribute/ui/contribute.module.scss
@@ -1,7 +1,7 @@
 .contribute {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
   justify-content: space-between;
 
   @include media-laptop {
@@ -33,7 +33,7 @@
 }
 
 .general {
-  gap: 50px;
+  gap: $gap-xxxl;
   width: 100%;
 
   @include media-tablet-large {
@@ -43,7 +43,7 @@
 
 .contribute-options {
   display: flex;
-  gap: 24px;
+  gap: $gap-l;
   align-items: center;
   justify-content: space-between;
 
@@ -58,7 +58,7 @@
 .option-item {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: $gap-s;
   max-width: 500px;
 
   @include media-laptop {
diff --git a/src/widgets/courses/ui/courses.module.scss b/src/widgets/courses/ui/courses.module.scss
index a2a857b84..4c9aeff92 100644
--- a/src/widgets/courses/ui/courses.module.scss
+++ b/src/widgets/courses/ui/courses.module.scss
@@ -1,7 +1,7 @@
 .courses-content {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
 
   @include media-laptop {
     width: 100%;
diff --git a/src/widgets/events/ui/events.module.scss b/src/widgets/events/ui/events.module.scss
index e53cbc05f..1fa274fa9 100644
--- a/src/widgets/events/ui/events.module.scss
+++ b/src/widgets/events/ui/events.module.scss
@@ -1,13 +1,13 @@
 .events {
   &-content {
     display: flex;
-    gap: 24px;
+    gap: $gap-l;
     align-items: flex-start;
     justify-content: space-between;
 
     .cards {
       display: flex;
-      gap: 16px;
+      gap: $gap-s;
       align-items: center;
       justify-content: space-between;
 
diff --git a/src/widgets/footer/footer.scss b/src/widgets/footer/footer.scss
index 96b28c7fb..53ce4588f 100644
--- a/src/widgets/footer/footer.scss
+++ b/src/widgets/footer/footer.scss
@@ -19,11 +19,11 @@
       .about-list {
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: $gap-l;
         align-items: baseline;
         justify-content: flex-start;
 
-        font-size: 18px;
+        font-size: $font-size-m;
         font-weight: $font-weight-medium;
         line-height: 24px;
         color: $color-gray-100;
@@ -53,10 +53,10 @@
       }
 
       @include media-laptop-medium {
-        gap: 50px;
+        gap: $gap-xxxl;
 
         & .left {
-          gap: 50px;
+          gap: $gap-xxxl;
         }
       }
     }
diff --git a/src/widgets/general/ui/general.module.scss b/src/widgets/general/ui/general.module.scss
index 5e008adb5..a4da952b7 100644
--- a/src/widgets/general/ui/general.module.scss
+++ b/src/widgets/general/ui/general.module.scss
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, max-content);
-  column-gap: 24px;
+  column-gap: $gap-l;
 
   .title {
     grid-column: 1 / -1;
@@ -11,7 +11,7 @@
   .info-block {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: $gap-s;
     max-width: 380px;
   }
 
diff --git a/src/widgets/header/header.module.scss b/src/widgets/header/header.module.scss
index 8e37e3b45..d165bf3e1 100644
--- a/src/widgets/header/header.module.scss
+++ b/src/widgets/header/header.module.scss
@@ -1,6 +1,6 @@
 .header {
   position: sticky;
-  z-index: 100;
+  z-index: $z-index-max;
   top: 0;
   left: 0;
 }
@@ -36,7 +36,7 @@
   position: relative;
 
   display: flex;
-  gap: 32px;
+  gap: $gap-xl;
   align-items: center;
 
   height: 100%;
diff --git a/src/widgets/header/ui/burger/burger.module.scss b/src/widgets/header/ui/burger/burger.module.scss
index a947d6601..812cd6b22 100644
--- a/src/widgets/header/ui/burger/burger.module.scss
+++ b/src/widgets/header/ui/burger/burger.module.scss
@@ -66,7 +66,7 @@
   }
 
   @include media-tablet-large {
-    z-index: 10;
+    z-index: $z-index-l;
     display: block;
   }
 }
diff --git a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss
index cacf08c66..d21103e3c 100644
--- a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss
+++ b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss
@@ -7,21 +7,21 @@
   pointer-events: none;
 
   position: absolute;
-  z-index: 1;
+  z-index: $z-index-s;
   top: 64px;
   left: 0;
   transform: translateY(-10px);
 
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  column-gap: 32px;
+  column-gap: $gap-xl;
 
   width: max-content;
   min-width: calc(100% + var(--header-padding));
   max-width: calc(100vw - var(--page-padding));
   height: max-content;
   padding: 32px;
-  border-radius: 0 0 0 4px;
+  border-radius: 0 0 0 $border-radius-xxs;
 
   visibility: hidden;
   opacity: $opacity-0;
@@ -76,6 +76,6 @@
   @include media-laptop-large {
     right: 0;
     min-width: 100%;
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 $border-radius-xxs $border-radius-xxs;
   }
 }
diff --git a/src/widgets/header/ui/nav-item/nav-item.module.scss b/src/widgets/header/ui/nav-item/nav-item.module.scss
index 7708cbbae..0a6d173a1 100644
--- a/src/widgets/header/ui/nav-item/nav-item.module.scss
+++ b/src/widgets/header/ui/nav-item/nav-item.module.scss
@@ -8,7 +8,7 @@
   position: relative;
 
   display: flex;
-  gap: 8px;
+  gap: $gap-xs;
   align-items: center;
   justify-content: center;
 
@@ -19,7 +19,7 @@
   background: none;
 
   &:focus-visible {
-    z-index: 100;
+    z-index: $z-index-max;
 
     border-radius: 2px;
 
@@ -34,7 +34,7 @@
     content: '';
 
     position: absolute;
-    z-index: 100;
+    z-index: $z-index-max;
     bottom: 1px;
     left: 0;
     transform: scaleX(0);
@@ -49,7 +49,7 @@
     position: relative;
 
     font-family: $font-primary;
-    font-size: 16px;
+    font-size: $font-size-s;
     font-weight: $font-weight-bold;
     line-height: 20px;
     color: transparent;
diff --git a/src/widgets/hero-course/ui/hero-course.module.scss b/src/widgets/hero-course/ui/hero-course.module.scss
index b44bfbcb8..62fb06253 100644
--- a/src/widgets/hero-course/ui/hero-course.module.scss
+++ b/src/widgets/hero-course/ui/hero-course.module.scss
@@ -4,7 +4,7 @@
 
   .hero-course-content {
     display: flex;
-    gap: 40px;
+    gap: $gap-xxl;
     align-items: center;
     justify-content: flex-start;
 
@@ -21,12 +21,12 @@
 
     .hero-subtitle {
       margin: 0;
-      font-size: 24px;
+      font-size: $font-size-xl;
       font-weight: $font-weight-medium;
       line-height: 32px;
 
       @include media-tablet {
-        font-size: 20px;
+        font-size: $font-size-l;
         line-height: 28px;
       }
     }
diff --git a/src/widgets/hero-page/ui/hero-page.module.scss b/src/widgets/hero-page/ui/hero-page.module.scss
index aa7ff23a9..2da65c7b1 100644
--- a/src/widgets/hero-page/ui/hero-page.module.scss
+++ b/src/widgets/hero-page/ui/hero-page.module.scss
@@ -1,5 +1,5 @@
 .hero-page {
-  gap: 16px;
+  gap: $gap-s;
   min-height: 440px;
   background: $color-yellow;
 
@@ -27,7 +27,7 @@
 
       .description-title {
         @include media-tablet {
-          font-size: 24px;
+          font-size: $font-size-xl;
           line-height: 32px;
         }
       }
diff --git a/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss b/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss
index 58cebdf2d..813cd4e91 100644
--- a/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss
+++ b/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss
@@ -1,6 +1,6 @@
 .learning-path-stage-item {
   display: flex;
-  gap: 40px;
+  gap: $gap-xxl;
 
   .stage-number {
     $number-size: 80px;
@@ -22,7 +22,7 @@
       border: 1px solid $color-yellow-100;
       border-radius: 50%;
 
-      font-size: 24px;
+      font-size: $font-size-xl;
       color: $color-gray-600;
 
       background-color: $color-yellow-50;
@@ -30,7 +30,7 @@
       @include media-tablet {
         width: $number-size-tablet;
         height: $number-size-tablet;
-        font-size: 16px;
+        font-size: $font-size-s;
       }
     }
 
@@ -49,7 +49,7 @@
     display: flex;
     flex: 1 1 40%;
     flex-direction: column;
-    gap: 8px;
+    gap: $gap-xs;
 
     max-width: 600px;
 
@@ -103,6 +103,6 @@
   }
 
   @include media-tablet {
-    gap: 16px;
+    gap: $gap-s;
   }
 }
diff --git a/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss b/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss
index d54d986e4..ca133de88 100644
--- a/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss
+++ b/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss
@@ -2,7 +2,7 @@
   .stages {
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: $gap-xl;
     padding-top: 40px;
 
     @include media-tablet-large {
diff --git a/src/widgets/media-text-block/ui/media-text-block.module.scss b/src/widgets/media-text-block/ui/media-text-block.module.scss
index b11a1a015..a62b78c31 100644
--- a/src/widgets/media-text-block/ui/media-text-block.module.scss
+++ b/src/widgets/media-text-block/ui/media-text-block.module.scss
@@ -12,11 +12,11 @@
     display: grid;
     grid-auto-flow: column;
     grid-template-rows: max-content 1fr;
-    gap: 24px 100px;
+    gap: $gap-l 100px;
 
     @include media-tablet-large {
       grid-auto-flow: row;
-      gap: 40px;
+      gap: $gap-xxl;
     }
   }
 
@@ -25,7 +25,7 @@
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     flex-direction: column;
-    gap: 24px;
+    gap: $gap-l;
   }
 
   .content-wrapper-right {
diff --git a/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss b/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss
index 2ad3e1be9..478acafa9 100644
--- a/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss
+++ b/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss
@@ -3,11 +3,11 @@
   flex-direction: column;
   justify-content: flex-start;
 
-  font-size: 18px;
+  font-size: $font-size-m;
   font-weight: $font-weight-regular;
 
   @include media-laptop {
-    font-size: 16px;
+    font-size: $font-size-s;
     line-height: 24px;
   }
 }
diff --git a/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss b/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss
index 7d117145d..11b6cc03e 100644
--- a/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss
+++ b/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss
@@ -1,7 +1,7 @@
 .mentors-feedback-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: $gap-xl;
 }
 
 .mentors-feedback-slider {
diff --git a/src/widgets/mentors-register/ui/mentors-register.module.scss b/src/widgets/mentors-register/ui/mentors-register.module.scss
index 47cb7326a..c7b907d47 100644
--- a/src/widgets/mentors-register/ui/mentors-register.module.scss
+++ b/src/widgets/mentors-register/ui/mentors-register.module.scss
@@ -10,12 +10,12 @@
     gap: 176px;
 
     @include media-laptop {
-      gap: 50px;
+      gap: $gap-xxxl;
     }
 
     @include media-tablet-large {
       flex-direction: column;
-      gap: 32px;
+      gap: $gap-xl;
     }
   }
 }
diff --git a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss
index e0b735c6e..fd8a524b5 100644
--- a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss
+++ b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss
@@ -25,7 +25,7 @@
     }
 
     @include media-tablet {
-      gap: 40px;
+      gap: $gap-xxl;
     }
   }
 }
diff --git a/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss b/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss
index 5cfa38d09..3fd330e72 100644
--- a/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss
+++ b/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss
@@ -18,7 +18,7 @@
     }
 
     @include media-tablet-large {
-      gap: 40px;
+      gap: $gap-xxl;
     }
   }
 }
diff --git a/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss b/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss
index cc8c90380..98f0ab921 100644
--- a/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss
+++ b/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss
@@ -1,12 +1,12 @@
 .activity-card {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: $gap-s;
 
   max-width: 624px;
   padding: 32px;
   border: 1px solid hsla(from $color-yellow h s l / $opacity-8);
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   box-shadow: 0 4px 8px 0 hsla(from $color-black h s l / $opacity-10);
 
diff --git a/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss b/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss
index 7f86b67be..15cc15ded 100644
--- a/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss
+++ b/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss
@@ -2,14 +2,14 @@
   .activity-cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 32px;
+    gap: $gap-xl;
 
     @include media-tablet {
       grid-template-columns: 1fr;
     }
 
     @include media-tablet {
-      gap: 16px;
+      gap: $gap-s;
     }
   }
 }
diff --git a/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss b/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss
index 4b7fd7dbf..d096a8b68 100644
--- a/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss
+++ b/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss
@@ -1,29 +1,29 @@
 .mentors-after-register {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: $gap-m;
 
   .steps {
     display: flex;
     flex-direction: column;
-    gap: 40px;
+    gap: $gap-xxl;
 
     .step {
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      gap: $gap-s;
 
       p {
         margin: 0;
       }
 
       @include media-tablet {
-        gap: 8px;
+        gap: $gap-xs;
       }
     }
 
     @include media-tablet {
-      gap: 24px;
+      gap: $gap-l;
     }
   }
 }
diff --git a/src/widgets/mentorship-courses/mentorship-courses.module.scss b/src/widgets/mentorship-courses/mentorship-courses.module.scss
index acb44b4dd..69e857967 100644
--- a/src/widgets/mentorship-courses/mentorship-courses.module.scss
+++ b/src/widgets/mentorship-courses/mentorship-courses.module.scss
@@ -5,7 +5,7 @@
   .courses-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 32px;
+    gap: $gap-xl;
 
     .mentorship-course-card {
       width: 100%;
diff --git a/src/widgets/mentorship-details/mentorship-details.module.scss b/src/widgets/mentorship-details/mentorship-details.module.scss
index bae0ecf84..8359e1776 100644
--- a/src/widgets/mentorship-details/mentorship-details.module.scss
+++ b/src/widgets/mentorship-details/mentorship-details.module.scss
@@ -4,7 +4,7 @@
   .details-content {
     display: flex;
     flex-direction: column;
-    gap: 40px;
+    gap: $gap-xxl;
     justify-content: center;
   }
 }
diff --git a/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss b/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss
index a8d071971..d262ba06c 100644
--- a/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss
+++ b/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss
@@ -11,7 +11,7 @@
 
       width: fit-content;
       padding: 32px;
-      border-radius: 12px;
+      border-radius: $border-radius-s;
 
       text-align: left;
 
diff --git a/src/widgets/merch/ui/merch.module.scss b/src/widgets/merch/ui/merch.module.scss
index 5cae2f7b8..adc99c6c1 100644
--- a/src/widgets/merch/ui/merch.module.scss
+++ b/src/widgets/merch/ui/merch.module.scss
@@ -1,5 +1,5 @@
 .merch {
-  gap: 50px;
+  gap: $gap-xxxl;
 
   .info {
     width: 600px;
diff --git a/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss b/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss
index 99993d299..bcff5f980 100644
--- a/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss
+++ b/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss
@@ -7,7 +7,7 @@
   padding: 0;
   border: none;
 
-  font-size: 20px;
+  font-size: $font-size-l;
   font-weight: $font-weight-bold;
 
   background: none;
@@ -28,7 +28,7 @@
 
 .category-title {
   display: flex;
-  gap: 8px;
+  gap: $gap-xs;
   align-items: center;
 }
 
diff --git a/src/widgets/mobile-view/ui/mobile-view.module.scss b/src/widgets/mobile-view/ui/mobile-view.module.scss
index 1d145fa55..f4acac942 100644
--- a/src/widgets/mobile-view/ui/mobile-view.module.scss
+++ b/src/widgets/mobile-view/ui/mobile-view.module.scss
@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: 16px;
+    gap: $gap-s;
     align-items: baseline;
 
     width: 100%;
@@ -35,7 +35,7 @@
 }
 
 .category-link {
-  font-size: 20px;
+  font-size: $font-size-l;
   font-weight: $font-weight-bold;
   background: none;
 }
diff --git a/src/widgets/numbers/ui/info-cell/info-cell.module.scss b/src/widgets/numbers/ui/info-cell/info-cell.module.scss
index b16b86684..38cce2c59 100644
--- a/src/widgets/numbers/ui/info-cell/info-cell.module.scss
+++ b/src/widgets/numbers/ui/info-cell/info-cell.module.scss
@@ -4,7 +4,7 @@
   width: 100%;
 
   .with-gap {
-    gap: 16px;
+    gap: $gap-s;
   }
 
   .large-card-size {
@@ -46,7 +46,7 @@
       letter-spacing: 0.04em;
 
       &.medium-font-size {
-        font-size: 36px;
+        font-size: $font-size-xxl;
         font-weight: 700;
         line-height: 46px;
 
@@ -71,7 +71,7 @@
     .description {
       height: 56px;
       margin: 0;
-      font-size: 16px;
+      font-size: $font-size-s;
       font-weight: 400;
     }
   }
diff --git a/src/widgets/numbers/ui/info-grid/info-grid.module.scss b/src/widgets/numbers/ui/info-grid/info-grid.module.scss
index f4c47a9cc..41f04ebb9 100644
--- a/src/widgets/numbers/ui/info-grid/info-grid.module.scss
+++ b/src/widgets/numbers/ui/info-grid/info-grid.module.scss
@@ -41,7 +41,7 @@
 
   @include media-tablet {
     grid-auto-flow: row;
-    gap: 24px;
+    gap: $gap-l;
 
     :nth-child(n + 3) {
       grid-row: 2 / 3;
diff --git a/src/widgets/numbers/ui/numbers/numbers.module.scss b/src/widgets/numbers/ui/numbers/numbers.module.scss
index 8bf282999..38921746b 100644
--- a/src/widgets/numbers/ui/numbers/numbers.module.scss
+++ b/src/widgets/numbers/ui/numbers/numbers.module.scss
@@ -3,7 +3,7 @@
 
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
   align-items: center;
   justify-content: center;
 
@@ -35,7 +35,7 @@
 
   .numbers-map {
     position: absolute;
-    z-index: -1;
+    z-index: $z-index-negative;
     top: -56px;
     left: 0;
 
diff --git a/src/widgets/partnered/partnered.scss b/src/widgets/partnered/partnered.scss
index cecd2fbe9..3fe827715 100644
--- a/src/widgets/partnered/partnered.scss
+++ b/src/widgets/partnered/partnered.scss
@@ -4,7 +4,7 @@
     flex-direction: column;
 
     & .title {
-      font-size: 36px;
+      font-size: $font-size-xxl;
       font-weight: $font-weight-medium;
       line-height: 44px;
       color: $color-black;
@@ -34,7 +34,7 @@
       }
 
       @include media-tablet {
-        row-gap: 16px;
+        row-gap: $gap-s;
         padding: 16px 0;
       }
     }
diff --git a/src/widgets/places/ui/place-item/place-item.module.scss b/src/widgets/places/ui/place-item/place-item.module.scss
index 15296aeac..62a245be6 100644
--- a/src/widgets/places/ui/place-item/place-item.module.scss
+++ b/src/widgets/places/ui/place-item/place-item.module.scss
@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: space-between;
 
-  font-size: 20px;
+  font-size: $font-size-l;
   font-weight: $font-weight-medium;
   line-height: 28px;
   color: $color-black;
@@ -19,12 +19,12 @@
   .divider {
     display: inline-block;
     height: 12px;
-    font-size: 36px;
+    font-size: $font-size-xxl;
     color: $color-red;
   }
 
   @include media-tablet {
-    font-size: 16px;
+    font-size: $font-size-s;
     font-weight: $font-weight-regular;
     line-height: 24px;
   }
diff --git a/src/widgets/principles/ui/principle-card/principle-card.module.scss b/src/widgets/principles/ui/principle-card/principle-card.module.scss
index 304cdc12f..74569d9a7 100644
--- a/src/widgets/principles/ui/principle-card/principle-card.module.scss
+++ b/src/widgets/principles/ui/principle-card/principle-card.module.scss
@@ -6,12 +6,12 @@
   overflow: hidden;
   display: grid;
   grid-template-columns: max-content 1fr;
-  column-gap: 16px;
+  column-gap: $gap-s;
 
   width: 100%;
   padding: 24px;
   border: 1px solid rgb(255 219 32 / 8%);
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   background-color: $color-yellow-50;
 
@@ -32,7 +32,7 @@
 
   .card-header {
     display: flex;
-    gap: 16px;
+    gap: $gap-s;
     align-items: center;
 
     min-height: 80px;
@@ -44,11 +44,11 @@
   }
 
   .card-description {
-    z-index: 1;
+    z-index: $z-index-s;
 
     grid-column: span 2;
 
-    font-size: 18px;
+    font-size: $font-size-m;
     font-weight: $font-weight-regular;
     line-height: 1.4;
     text-align: left;
@@ -107,7 +107,7 @@
     padding: 32px 24px;
 
     .card-description {
-      font-size: 16px;
+      font-size: $font-size-s;
       line-height: 24px;
     }
   }
diff --git a/src/widgets/principles/ui/principles/principles.module.scss b/src/widgets/principles/ui/principles/principles.module.scss
index 4de4dff73..e63a60dda 100644
--- a/src/widgets/principles/ui/principles/principles.module.scss
+++ b/src/widgets/principles/ui/principles/principles.module.scss
@@ -1,16 +1,16 @@
 .principles {
   .cards {
-    gap: 32px;
+    gap: $gap-xl;
     align-items: stretch;
     margin-top: 24px;
 
     @include media-laptop {
-      gap: 16px;
+      gap: $gap-s;
       width: 100%;
     }
 
     @include media-tablet {
-      gap: 8px;
+      gap: $gap-xs;
     }
   }
 }
diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss
index a8706461a..612dea2be 100644
--- a/src/widgets/school-menu/ui/school-item/school-item.module.scss
+++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss
@@ -64,7 +64,7 @@
     align-items: flex-start;
 
     .description {
-      font-size: 12px;
+      font-size: $font-size-xxs;
       line-height: 24px;
       color: $color-gray-500;
     }
@@ -72,5 +72,5 @@
 }
 
 .support-title {
-  font-size: 14px;
+  font-size: $font-size-xs;
 }
diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss
index 344d85534..17d11b082 100644
--- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss
+++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss
@@ -3,12 +3,12 @@
 
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: $gap-s;
   color: $color-gray-100;
 
   .heading {
     margin: 0;
-    font-size: 12px;
+    font-size: $font-size-xxs;
     line-height: 1.15;
     text-transform: uppercase;
 
@@ -22,7 +22,7 @@
   }
 
   .school-list {
-    gap: 24px 32px;
+    gap: $gap-l $gap-xl;
     max-height: 408px;
     list-style-type: none;
 
@@ -44,7 +44,7 @@
     }
 
     @include media-mobile-landscape {
-      row-gap: 16px;
+      row-gap: $gap-s;
       max-height: 816px;
     }
   }
diff --git a/src/widgets/speakers/ui/speakers.module.scss b/src/widgets/speakers/ui/speakers.module.scss
index 7ef30d561..a2ec081b3 100644
--- a/src/widgets/speakers/ui/speakers.module.scss
+++ b/src/widgets/speakers/ui/speakers.module.scss
@@ -1,6 +1,6 @@
 .speakers {
   display: flex;
-  gap: 50px;
+  gap: $gap-xxxl;
   background-color: $color-gray-100;
 
   .info {
@@ -12,16 +12,16 @@
 
     .email-wrapper {
       display: flex;
-      gap: 8px;
+      gap: $gap-xs;
 
       margin-top: 8px;
 
-      font-size: 18px;
+      font-size: $font-size-m;
       font-style: normal;
       line-height: 24px;
 
       @include media-tablet {
-        font-size: 16px;
+        font-size: $font-size-s;
         line-height: 20px;
       }
     }
diff --git a/src/widgets/study-path/ui/stage-card/stage-card.module.scss b/src/widgets/study-path/ui/stage-card/stage-card.module.scss
index 21f2feb99..9748deef9 100644
--- a/src/widgets/study-path/ui/stage-card/stage-card.module.scss
+++ b/src/widgets/study-path/ui/stage-card/stage-card.module.scss
@@ -1,6 +1,6 @@
 .stage-card {
   display: flex;
-  gap: 40px;
+  gap: $gap-xxl;
 
   .stage-number {
     $number-size: 80px;
@@ -22,7 +22,7 @@
       border: 1px solid $color-yellow-100;
       border-radius: 50%;
 
-      font-size: 24px;
+      font-size: $font-size-xl;
       color: $color-gray-600;
 
       background-color: $color-yellow-50;
@@ -30,7 +30,7 @@
       @include media-tablet {
         width: $number-size-tablet;
         height: $number-size-tablet;
-        font-size: 16px;
+        font-size: $font-size-s;
       }
     }
 
@@ -49,7 +49,7 @@
     display: flex;
     flex: 1 1 40%;
     flex-direction: column;
-    gap: 8px;
+    gap: $gap-xs;
 
     max-width: 600px;
 
@@ -103,6 +103,6 @@
   }
 
   @include media-tablet {
-    gap: 16px;
+    gap: $gap-s;
   }
 }
diff --git a/src/widgets/study-path/ui/stages/stages.module.scss b/src/widgets/study-path/ui/stages/stages.module.scss
index 9deaa69df..0cea1b896 100644
--- a/src/widgets/study-path/ui/stages/stages.module.scss
+++ b/src/widgets/study-path/ui/stages/stages.module.scss
@@ -1,7 +1,7 @@
 .stages {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: $gap-xl;
   padding-top: 40px;
 
   @include media-tablet-large {
diff --git a/src/widgets/study-with-us/ui/study-with-us.module.scss b/src/widgets/study-with-us/ui/study-with-us.module.scss
index 5cf8ec72a..e5c8d24e8 100644
--- a/src/widgets/study-with-us/ui/study-with-us.module.scss
+++ b/src/widgets/study-with-us/ui/study-with-us.module.scss
@@ -1,7 +1,7 @@
 .study-with-us {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
 
   @include media-laptop {
     gap: 48px;
@@ -9,10 +9,10 @@
 }
 
 .study-wrap {
-  gap: 50px;
+  gap: $gap-xxxl;
 
   @include media-tablet-large {
-    gap: 40px;
+    gap: $gap-xxl;
   }
 }
 
@@ -42,13 +42,13 @@
 .study-options {
   display: flex;
   flex-direction: row;
-  gap: 24px;
+  gap: $gap-l;
   align-items: flex-start;
   justify-content: space-between;
 
   @include media-tablet-large {
     flex-direction: column;
-    gap: 32px;
+    gap: $gap-xl;
   }
 
   @include media-tablet {
@@ -59,7 +59,7 @@
 .option-item {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: $gap-s;
   max-width: 380px;
 
   @include media-laptop {
diff --git a/src/widgets/support/ui/support.module.scss b/src/widgets/support/ui/support.module.scss
index e871294c4..b51576285 100644
--- a/src/widgets/support/ui/support.module.scss
+++ b/src/widgets/support/ui/support.module.scss
@@ -2,7 +2,7 @@
   background-color: $color-gray-100;
 
   .support-content {
-    gap: 50px;
+    gap: $gap-xxxl;
 
     .support-info {
       width: 640px;
@@ -37,7 +37,7 @@
     .donate-options {
       display: flex;
       flex-wrap: wrap;
-      gap: 16px;
+      gap: $gap-s;
       justify-content: space-between;
 
       margin-top: 24px;
@@ -45,10 +45,10 @@
       .donate-item {
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: $gap-l;
 
         @include media-tablet {
-          gap: 16px;
+          gap: $gap-s;
         }
       }
 
@@ -58,7 +58,7 @@
     }
 
     @include media-tablet-large {
-      gap: 40px;
+      gap: $gap-xxl;
     }
   }
 }
diff --git a/src/widgets/trainers/ui/trainers.module.scss b/src/widgets/trainers/ui/trainers.module.scss
index a5b8042e9..f3bc70463 100644
--- a/src/widgets/trainers/ui/trainers.module.scss
+++ b/src/widgets/trainers/ui/trainers.module.scss
@@ -5,7 +5,7 @@
   .trainers-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-    gap: 32px;
+    gap: $gap-xl;
 
     @include media-tablet-large {
       grid-template-columns: 1fr;
diff --git a/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss
index e1862b7de..e264c2ae3 100644
--- a/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss
+++ b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss
@@ -16,7 +16,7 @@
 .course-list {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
   align-items: flex-start;
   justify-content: space-between;