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 845f78e3a..4513f4d7d 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: 40px;
+    gap: $gap-xxl;
 
     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 3cfe5762a..274355317 100644
--- a/src/app/docs/components/docs-menu/docs-menu.module.scss
+++ b/src/app/docs/components/docs-menu/docs-menu.module.scss
@@ -8,7 +8,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 8dc6a0045..34737ecf3 100644
--- a/src/core/styles/_constants.scss
+++ b/src/core/styles/_constants.scss
@@ -94,3 +94,28 @@ $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-xs: 8px;
+$border-radius-s: 12px;
+$border-radius-m: 16px;
+$border-radius-l: 20px;
+$border-radius-xxxl: 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;
+
+// Gap
+$gap-xs: 8px;
+$gap-s: 16px;
+$gap-m: 20px;
+$gap-l: 24px;
+$gap-xl: 32px;
+$gap-xxl: 40px;
+$gap-xxxl: 50px;
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..ff1d659dd 100644
--- a/src/entities/course/ui/course-card/course-card.module.scss
+++ b/src/entities/course/ui/course-card/course-card.module.scss
@@ -10,7 +10,7 @@
 
   min-width: 100px;
   height: 100%;
-  border-radius: 12px;
+  border-radius: $border-radius-s;
 
   &::before {
     content: '';
@@ -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 {
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 14d460e15..8e2b098d3 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;
     }
 
@@ -52,7 +52,7 @@
 
       .event-organization {
         margin-top: 10px;
-        font-size: 20px;
+        font-size: $font-size-l;
         font-weight: $font-weight-medium;
       }
     }
@@ -81,7 +81,7 @@
         margin-top: 0;
         margin-bottom: 8px;
 
-        font-size: 16px;
+        font-size: $font-size-s;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
@@ -100,7 +100,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);
 
@@ -112,7 +112,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 4a95e0d64..267b4b38a 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;
 }
 
@@ -51,7 +51,7 @@
 
   .card-subtitle {
     margin: 0;
-    font-size: 18px;
+    font-size: $font-size-m;
     font-weight: $font-weight-medium;
   }
 }
@@ -59,7 +59,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 68f8c9ddb..4fa80df4d 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;
     }
   }
 
@@ -27,28 +27,28 @@
 
   .card-title {
     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;
     }
   }
 
   .card-subtitle {
     margin: 0;
-    font-size: 18px;
+    font-size: $font-size-m;
     font-weight: $font-weight-medium;
     color: $color-gray-500;
 
     @include media-tablet {
-      font-size: 18px;
+      font-size: $font-size-m;
     }
   }
 
   .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..777150942 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-xxxl;
 
-  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 5b67836e4..d7bc3f86a 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;
 
@@ -99,7 +99,7 @@
 }
 
 .modal-title {
-  font-size: 20px;
+  font-size: $font-size-l;
 }
 
 .modal-body {
@@ -121,9 +121,9 @@
 
   padding: 16px;
   border: none;
-  border-radius: 999px;
+  border-radius: $border-radius-xxxl;
 
-  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 09bb7495b..d4ba70473 100644
--- a/src/shared/ui/paragraph/paragraph.module.scss
+++ b/src/shared/ui/paragraph/paragraph.module.scss
@@ -5,24 +5,24 @@
 
   &.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;
   }
 
   @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 7df1d0e58..7e6eff7e3 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-600;
 }
 
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 e041d5842..fdc08622c 100644
--- a/src/shared/ui/subtitle/subtitle.module.scss
+++ b/src/shared/ui/subtitle/subtitle.module.scss
@@ -3,21 +3,21 @@
   color: $color-gray-900;
 
   &.extra-small-font-size {
-    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 {
-    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;
     }
   }
@@ -27,7 +27,7 @@
     line-height: 36px;
 
     @include media-tablet {
-      font-size: 24px;
+      font-size: $font-size-xl;
       line-height: 32px;
     }
   }
@@ -43,7 +43,7 @@
   }
 
   &.extra-large-font-size {
-    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 0c07987e6..d4c2c6c8b 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,18 +10,18 @@
   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;
   }
 }
 
 .playlist-title {
   margin: 0;
-  font-size: 24px;
+  font-size: $font-size-xl;
   line-height: 32px;
   text-align: center;
 
@@ -35,7 +35,7 @@
 
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
 
   margin-right: 5px;
   padding: 16px;
@@ -68,7 +68,7 @@
   img {
     display: block;
     max-width: 100%;
-    border-radius: 8px;
+    border-radius: $border-radius-xs;
 
     @include media-tablet-large {
       max-width: 200px;
@@ -90,9 +90,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-grid/about-course-grid.module.scss b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss
index a356554c7..bf312978a 100644
--- a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss
+++ b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss
@@ -4,7 +4,7 @@
     'a a b'
     'c d e';
   grid-template-columns: repeat(3, 1fr);
-  gap: 32px 30px;
+  gap: $gap-xl 30px;
 
   margin-bottom: 16px;
 
@@ -16,13 +16,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 {
@@ -57,10 +57,10 @@
   @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/about-course/about-course.module.scss b/src/widgets/about-course/ui/about-course/about-course.module.scss
index 104b7f88b..bc7e5dad0 100644
--- a/src/widgets/about-course/ui/about-course/about-course.module.scss
+++ b/src/widgets/about-course/ui/about-course/about-course.module.scss
@@ -1,5 +1,5 @@
 .about-course {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: $gap-l;
 }
diff --git a/src/widgets/angular-topics/ui/angular-topics.module.scss b/src/widgets/angular-topics/ui/angular-topics.module.scss
index 862f37250..58c29c062 100644
--- a/src/widgets/angular-topics/ui/angular-topics.module.scss
+++ b/src/widgets/angular-topics/ui/angular-topics.module.scss
@@ -2,6 +2,6 @@
   .angular-topics-content {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: $gap-m;
   }
 }
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 bfdd16f70..c01846667 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/certification/ui/certification.module.scss b/src/widgets/certification/ui/certification.module.scss
index 41607667e..afedf719d 100644
--- a/src/widgets/certification/ui/certification.module.scss
+++ b/src/widgets/certification/ui/certification.module.scss
@@ -6,13 +6,13 @@
     align-items: flex-start;
     justify-content: flex-start;
 
-    font-size: 20px;
+    font-size: $font-size-l;
 
     @include media-tablet-large {
       flex-direction: column;
-      gap: 40px;
+      gap: $gap-xxl;
       align-items: flex-start;
-      font-size: 18px;
+      font-size: $font-size-m;
 
       .paragraph-wrapper {
         display: flex;
@@ -26,10 +26,10 @@
 
   p {
     padding-top: 5px;
-    font-size: 18px;
+    font-size: $font-size-m;
 
     @include media-tablet-large {
-      font-size: 16px;
+      font-size: $font-size-s;
     }
   }
 }
diff --git a/src/widgets/communication/ui/communication.module.scss b/src/widgets/communication/ui/communication.module.scss
index 789f5f7f4..aecfd9b7e 100644
--- a/src/widgets/communication/ui/communication.module.scss
+++ b/src/widgets/communication/ui/communication.module.scss
@@ -10,7 +10,7 @@
 
     @include media-tablet-large {
       flex-direction: column;
-      gap: 40px;
+      gap: $gap-xxl;
       align-items: flex-start;
     }
   }
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/course-main/course-main.module.scss b/src/widgets/course-main/course-main.module.scss
index 0785e9d10..ec324f5dc 100644
--- a/src/widgets/course-main/course-main.module.scss
+++ b/src/widgets/course-main/course-main.module.scss
@@ -4,7 +4,7 @@
 
   .content {
     display: flex;
-    gap: 40px;
+    gap: $gap-xxl;
     align-items: center;
     justify-content: flex-start;
 
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/faq/ui/faq.module.scss b/src/widgets/faq/ui/faq.module.scss
index 6b4db3a04..714920617 100644
--- a/src/widgets/faq/ui/faq.module.scss
+++ b/src/widgets/faq/ui/faq.module.scss
@@ -9,14 +9,14 @@
     flex-direction: column;
     gap: 26px;
 
-    font-size: 20px;
+    font-size: $font-size-l;
     line-height: 28px;
     letter-spacing: 0;
 
     .list {
       display: flex;
       flex-direction: column;
-      gap: 20px;
+      gap: $gap-m;
 
       .question {
         display: block;
@@ -25,7 +25,7 @@
       }
 
       @include media-tablet {
-        font-size: 18px;
+        font-size: $font-size-m;
         font-weight: $font-weight-regular;
         line-height: 28px;
       }
@@ -33,6 +33,6 @@
   }
 
   @include media-tablet-large {
-    font-size: 16px;
+    font-size: $font-size-s;
   }
 }
diff --git a/src/widgets/footer/footer.scss b/src/widgets/footer/footer.scss
index 7e8750dc1..a0254feb9 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/ui/dropdown/dropdown-wrapper.module.scss b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss
index bc6d181f8..9a2443556 100644
--- a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss
+++ b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss
@@ -16,7 +16,7 @@
   max-width: calc(100vw - var(--page-padding));
   height: max-content;
   padding: 32px;
-  border-radius: 20px;
+  border-radius: $border-radius-l;
 
   visibility: hidden;
   opacity: 0;
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 ad24928f5..4999f613f 100644
--- a/src/widgets/header/ui/nav-item/nav-item.module.scss
+++ b/src/widgets/header/ui/nav-item/nav-item.module.scss
@@ -35,7 +35,7 @@
     @extend %transition-all;
 
     font-family: $font-primary;
-    font-size: 16px;
+    font-size: $font-size-s;
     font-weight: $font-weight-regular;
     line-height: 20px;
     color: $color-gray-900;
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/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 f7fe49f45..db36828ef 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,17 +1,17 @@
 .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;
@@ -22,12 +22,12 @@
       }
 
       @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-view.module.scss b/src/widgets/mobile-view/ui/mobile-view.module.scss
index f2ddae3c8..bfb7949ad 100644
--- a/src/widgets/mobile-view/ui/mobile-view.module.scss
+++ b/src/widgets/mobile-view/ui/mobile-view.module.scss
@@ -2,7 +2,7 @@
   display: none;
   flex-direction: column;
   flex-grow: 1;
-  gap: 16px;
+  gap: $gap-s;
   align-items: baseline;
   justify-content: flex-start;
 
@@ -14,7 +14,7 @@
 }
 
 .category-link {
-  font-size: 24px;
+  font-size: $font-size-xl;
   font-weight: $font-weight-bold;
 }
 
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..bea7969d3 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;
 
diff --git a/src/widgets/partnered/partnered.scss b/src/widgets/partnered/partnered.scss
index a11e91633..9f4f8d68e 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..4c68e4a9e 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;
@@ -48,7 +48,7 @@
 
     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/required/ui/course-module/course-module.module.scss b/src/widgets/required/ui/course-module/course-module.module.scss
index 46dc5fe81..29f8af438 100644
--- a/src/widgets/required/ui/course-module/course-module.module.scss
+++ b/src/widgets/required/ui/course-module/course-module.module.scss
@@ -1,5 +1,5 @@
 .course-module-element {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: $gap-xs;
 }
diff --git a/src/widgets/required/ui/required/required.module.scss b/src/widgets/required/ui/required/required.module.scss
index 0b72380ce..033d84402 100644
--- a/src/widgets/required/ui/required/required.module.scss
+++ b/src/widgets/required/ui/required/required.module.scss
@@ -20,7 +20,7 @@
 
     @include media-laptop-medium {
       flex-direction: column;
-      gap: 32px;
+      gap: $gap-xl;
     }
   }
 }
diff --git a/src/widgets/requirements/ui/requirements.module.scss b/src/widgets/requirements/ui/requirements.module.scss
index 0c92490bf..fd39f29a7 100644
--- a/src/widgets/requirements/ui/requirements.module.scss
+++ b/src/widgets/requirements/ui/requirements.module.scss
@@ -1,7 +1,7 @@
 .requirements {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: $gap-xl;
 }
 
 .title {
@@ -10,7 +10,7 @@
 
 .requirements-info {
   display: flex;
-  gap: 32px;
+  gap: $gap-xl;
 
   @include media-tablet-large {
     flex-direction: column;
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 3ad42676a..8504e4365 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
@@ -53,7 +53,7 @@
     align-items: flex-start;
 
     .description {
-      font-size: 12px;
+      font-size: $font-size-xxs;
       color: $color-gray-500;
     }
   }
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 1bd26433e..f35da77a0 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
@@ -1,12 +1,12 @@
 .school-menu {
   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;
     font-weight: $font-weight-medium;
     text-transform: uppercase;
 
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/training-program/ui/training-program.module.scss b/src/widgets/training-program/ui/training-program.module.scss
index 1c13ccdda..66c7f2e01 100644
--- a/src/widgets/training-program/ui/training-program.module.scss
+++ b/src/widgets/training-program/ui/training-program.module.scss
@@ -60,7 +60,7 @@
   }
 
   @include media-tablet-large {
-    gap: 40px;
+    gap: $gap-xxl;
     align-items: flex-start;
   }
 }
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;