diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
index adb5774f4b..0f03300e72 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -24,7 +24,7 @@ $block: '.#{variables.$ns}breadcrumbs';
 
         &_current {
             box-sizing: content-box;
-            font-weight: var(--g-text-accent-font-weight);
+            font-weight: var(--g-text-body-accent-font-weight);
             overflow: hidden;
             margin: -2px;
             padding: 2px;
diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss
index dd02747daf..26110247ed 100644
--- a/src/components/Menu/Menu.scss
+++ b/src/components/Menu/Menu.scss
@@ -1,4 +1,3 @@
-@use '../../../styles/mixins';
 @use '../variables';
 
 $block: '.#{variables.$ns}menu';
@@ -86,7 +85,7 @@ $block: '.#{variables.$ns}menu';
     }
 
     &__group-label {
-        @include mixins.text-accent();
+        font-weight: var(--g-text-body-accent-font-weight);
         color: var(--g-color-text-hint);
     }
 
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
index 72dc5a1ca7..e39ad355e3 100644
--- a/src/components/controls/TextArea/TextArea.scss
+++ b/src/components/controls/TextArea/TextArea.scss
@@ -54,8 +54,6 @@ $block: '.#{variables.$ns}text-area';
         margin: 0;
         padding: 0;
         width: 100%;
-        font-weight: var(--g-text-body-font-weight);
-        font-family: var(--g-text-body-font-family);
         color: inherit;
         background-color: transparent;
         border: none;
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index 886548aada..79c0177d78 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -85,8 +85,6 @@ $block: '.#{variables.$ns}text-input';
         margin: 0;
         padding: 0;
         width: 100%;
-        font-weight: var(--g-text-body-font-weight);
-        font-family: var(--g-text-body-font-family);
         color: inherit;
         background-color: transparent;
         border: none;
diff --git a/src/hooks/useColorGenerator/__stories__/ColorInfoPopup.scss b/src/hooks/useColorGenerator/__stories__/ColorInfoPopup.scss
index ab62b9a6e7..f44935334c 100644
--- a/src/hooks/useColorGenerator/__stories__/ColorInfoPopup.scss
+++ b/src/hooks/useColorGenerator/__stories__/ColorInfoPopup.scss
@@ -39,7 +39,7 @@ $block: '.#{variables.$ns}color-info-popup';
     }
 
     &__label {
-        font-weight: var(--g-text-accent-font-weight);
+        font-weight: var(--g-text-body-accent-font-weight);
     }
 
     &__value-container {
diff --git a/src/stories/Branding/Overview.mdx b/src/stories/Branding/Overview.mdx
index 57c89b7de5..f2ca2d3059 100644
--- a/src/stories/Branding/Overview.mdx
+++ b/src/stories/Branding/Overview.mdx
@@ -1,6 +1,6 @@
 import {Meta} from '@storybook/addon-docs';
 
-<Meta title="Branding/Overview"/>
+<Meta title="Branding/Overview" />
 
 # Branding
 
@@ -13,45 +13,48 @@ you should provide values for each theme individually.
 ## Basic customization
 
 #### Typography
+
 There are 2 font families, `sans-serif` and `monospace`, which can be configured via `--g-font-family-sans`
 and `--g-font-family-monospace`. Also, there are a lot of different text variants: `body-1` `body-2` `caption-1`
 `caption-2` `header-1` `header-2` and others. Full list of variants you can find [here](?path=/story/typography--default).
 Each of these variants has a specific `font-size` and `line-height` properties which can be configured via variables
 `--g-text-{variantName}-font-size` and `--g-text-{variantName}-line-height`. Root node uses `body-1` variant. A `font-weight` property can be set
 for each of the variant group (`body` `header` `subheader` `display` `caption` `code`) via `--g-text-{variantGroupName}-font-weight` variable.
-There is one specific variable, `--g-text-accent-font-weight`, which can be used separately from text variant.
-
+There are also accent variables for each of the variant group `--g-text-{variantGroupName}-accent-font-weight.
 
 #### Accent
+
 To give a unique look for components you can provide several variables that controls accent color. Here is the
 list of such variables:
-* `--g-color-base-brand` - Color for background (action button, active controls)
-* `--g-color-base-brand-hover` - Hover color for background
-* `--g-color-line-brand` - Color for lines (active tab underline)
-* `--g-color-text-brand` - Text color
-* `--g-color-text-brand-heavy` - Text color over background
-* `--g-color-text-brand-contrast` - Text color over brand background
-* `--g-color-base-selection` - Lighter version for background (List selection, Table row selection)
-* `--g-color-base-selection-hover` - Hover lighter version for background
-* `--g-color-text-link` - Color for links
-* `--g-color-text-link-hover` - Hover color for links
-* `--g-color-text-link-visited` - Color for visited links
-* `--g-color-text-link-visited-hover` - Hover color for visited links
+
+- `--g-color-base-brand` - Color for background (action button, active controls)
+- `--g-color-base-brand-hover` - Hover color for background
+- `--g-color-line-brand` - Color for lines (active tab underline)
+- `--g-color-text-brand` - Text color
+- `--g-color-text-brand-heavy` - Text color over background
+- `--g-color-text-brand-contrast` - Text color over brand background
+- `--g-color-base-selection` - Lighter version for background (List selection, Table row selection)
+- `--g-color-base-selection-hover` - Hover lighter version for background
+- `--g-color-text-link` - Color for links
+- `--g-color-text-link-hover` - Hover color for links
+- `--g-color-text-link-visited` - Color for visited links
+- `--g-color-text-link-visited-hover` - Hover color for visited links
 
 #### Shape
+
 Controls share border radius sizes that can be configured via `--g-border-radius-{size}`, where size is one of xs, s, m, l or xl
 
 ### Example
 
 ```css
-
 .g-root {
     --g-font-family-sans: 'Inter', sans-serif;
 
+    --g-text-body-accent-font-weight: 600;
+    --g-text-caption-accent-font-weight: 600;
     --g-text-header-font-weight: 600;
     --g-text-subheader-font-weight: 600;
     --g-text-display-font-weight: 600;
-    --g-text-accent-font-weight: 600;
 
     --g-color-base-brand: rgb(117, 155, 255);
     --g-color-base-brand-hover: rgb(99, 143, 255);
@@ -59,7 +62,7 @@ Controls share border radius sizes that can be configured via `--g-border-radius
     --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
     --g-color-line-brand: rgb(117, 155, 255);
     --g-color-text-brand: rgb(117, 155, 255);
-    --g-color-text-brand-contrast: rgb(255, 255 ,255);
+    --g-color-text-brand-contrast: rgb(255, 255, 255);
     --g-color-text-link: rgb(117, 155, 255);
     --g-color-text-link-hover: rgb(82, 130, 255);
 }
diff --git a/styles/mixins.scss b/styles/mixins.scss
index ca96a7f32a..6bf1187787 100644
--- a/styles/mixins.scss
+++ b/styles/mixins.scss
@@ -171,6 +171,13 @@
     line-height: var(--g-text-body-1-line-height);
 }
 
+@mixin text-body-1-accent() {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-accent-font-weight);
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+}
+
 @mixin text-body-2() {
     font-family: var(--g-text-body-font-family);
     font-weight: var(--g-text-body-font-weight);
@@ -178,6 +185,13 @@
     line-height: var(--g-text-body-2-line-height);
 }
 
+@mixin text-body-2-accent() {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-accent-font-weight);
+    font-size: var(--g-text-body-2-font-size);
+    line-height: var(--g-text-body-2-line-height);
+}
+
 @mixin text-body-3() {
     font-family: var(--g-text-body-font-family);
     font-weight: var(--g-text-body-font-weight);
@@ -185,6 +199,13 @@
     line-height: var(--g-text-body-3-line-height);
 }
 
+@mixin text-body-3-accent() {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-accent-font-weight);
+    font-size: var(--g-text-body-3-font-size);
+    line-height: var(--g-text-body-3-line-height);
+}
+
 @mixin text-body-short() {
     font-family: var(--g-text-body-font-family);
     font-weight: var(--g-text-body-font-weight);
@@ -192,6 +213,13 @@
     line-height: var(--g-text-body-short-line-height);
 }
 
+@mixin text-body-short-accent() {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-accent-font-weight);
+    font-size: var(--g-text-body-short-font-size);
+    line-height: var(--g-text-body-short-line-height);
+}
+
 @mixin text-caption-1() {
     font-family: var(--g-text-caption-font-family);
     font-weight: var(--g-text-caption-font-weight);
@@ -199,6 +227,13 @@
     line-height: var(--g-text-caption-1-line-height);
 }
 
+@mixin text-caption-1-accent() {
+    font-family: var(--g-text-caption-font-family);
+    font-weight: var(--g-text-caption-accent-font-weight);
+    font-size: var(--g-text-caption-1-font-size);
+    line-height: var(--g-text-caption-1-line-height);
+}
+
 @mixin text-caption-2() {
     font-family: var(--g-text-caption-font-family);
     font-weight: var(--g-text-caption-font-weight);
@@ -206,6 +241,13 @@
     line-height: var(--g-text-caption-2-line-height);
 }
 
+@mixin text-caption-2-accent() {
+    font-family: var(--g-text-caption-font-family);
+    font-weight: var(--g-text-caption-accent-font-weight);
+    font-size: var(--g-text-caption-2-font-size);
+    line-height: var(--g-text-caption-2-line-height);
+}
+
 @mixin text-header-1() {
     font-family: var(--g-text-header-font-family);
     font-weight: var(--g-text-header-font-weight);
@@ -213,6 +255,13 @@
     line-height: var(--g-text-header-1-line-height);
 }
 
+@mixin text-header-1-accent() {
+    font-family: var(--g-text-header-font-family);
+    font-weight: var(--g-text-header-accent-font-weight);
+    font-size: var(--g-text-header-1-font-size);
+    line-height: var(--g-text-header-1-line-height);
+}
+
 @mixin text-header-2() {
     font-family: var(--g-text-header-font-family);
     font-weight: var(--g-text-header-font-weight);
@@ -220,6 +269,13 @@
     line-height: var(--g-text-header-2-line-height);
 }
 
+@mixin text-header-2-accent() {
+    font-family: var(--g-text-header-font-family);
+    font-weight: var(--g-text-header-accent-font-weight);
+    font-size: var(--g-text-header-2-font-size);
+    line-height: var(--g-text-header-2-line-height);
+}
+
 @mixin text-subheader-1() {
     font-family: var(--g-text-subheader-font-family);
     font-weight: var(--g-text-subheader-font-weight);
@@ -227,6 +283,13 @@
     line-height: var(--g-text-subheader-1-line-height);
 }
 
+@mixin text-subheader-1-accent() {
+    font-family: var(--g-text-subheader-font-family);
+    font-weight: var(--g-text-subheader-accent-font-weight);
+    font-size: var(--g-text-subheader-1-font-size);
+    line-height: var(--g-text-subheader-1-line-height);
+}
+
 @mixin text-subheader-2() {
     font-family: var(--g-text-subheader-font-family);
     font-weight: var(--g-text-subheader-font-weight);
@@ -234,6 +297,13 @@
     line-height: var(--g-text-subheader-2-line-height);
 }
 
+@mixin text-subheader-2-accent() {
+    font-family: var(--g-text-subheader-font-family);
+    font-weight: var(--g-text-subheader-accent-font-weight);
+    font-size: var(--g-text-subheader-2-font-size);
+    line-height: var(--g-text-subheader-2-line-height);
+}
+
 @mixin text-subheader-3() {
     font-family: var(--g-text-subheader-font-family);
     font-weight: var(--g-text-subheader-font-weight);
@@ -241,6 +311,13 @@
     line-height: var(--g-text-subheader-3-line-height);
 }
 
+@mixin text-subheader-3-accent() {
+    font-family: var(--g-text-subheader-font-family);
+    font-weight: var(--g-text-subheader-accent-font-weight);
+    font-size: var(--g-text-subheader-3-font-size);
+    line-height: var(--g-text-subheader-3-line-height);
+}
+
 @mixin text-display-1() {
     font-family: var(--g-text-display-font-family);
     font-weight: var(--g-text-display-font-weight);
@@ -248,6 +325,13 @@
     line-height: var(--g-text-display-1-line-height);
 }
 
+@mixin text-display-1-accent() {
+    font-family: var(--g-text-display-font-family);
+    font-weight: var(--g-text-display-accent-font-weight);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
+}
+
 @mixin text-display-2() {
     font-family: var(--g-text-display-font-family);
     font-weight: var(--g-text-display-font-weight);
@@ -255,6 +339,13 @@
     line-height: var(--g-text-display-2-line-height);
 }
 
+@mixin text-display-2-accent() {
+    font-family: var(--g-text-display-font-family);
+    font-weight: var(--g-text-display-accent-font-weight);
+    font-size: var(--g-text-display-2-font-size);
+    line-height: var(--g-text-display-2-line-height);
+}
+
 @mixin text-display-3() {
     font-family: var(--g-text-display-font-family);
     font-weight: var(--g-text-display-font-weight);
@@ -262,6 +353,13 @@
     line-height: var(--g-text-display-3-line-height);
 }
 
+@mixin text-display-3-accent() {
+    font-family: var(--g-text-display-font-family);
+    font-weight: var(--g-text-display-accent-font-weight);
+    font-size: var(--g-text-display-3-font-size);
+    line-height: var(--g-text-display-3-line-height);
+}
+
 @mixin text-display-4() {
     font-family: var(--g-text-display-font-family);
     font-weight: var(--g-text-display-font-weight);
@@ -269,6 +367,13 @@
     line-height: var(--g-text-display-4-line-height);
 }
 
+@mixin text-display-4-accent() {
+    font-family: var(--g-text-display-font-family);
+    font-weight: var(--g-text-display-accent-font-weight);
+    font-size: var(--g-text-display-4-font-size);
+    line-height: var(--g-text-display-4-line-height);
+}
+
 @mixin text-code-1() {
     font-family: var(--g-text-code-font-family);
     font-weight: var(--g-text-code-font-weight);
@@ -276,6 +381,13 @@
     line-height: var(--g-text-code-1-line-height);
 }
 
+@mixin text-code-1-accent() {
+    font-family: var(--g-text-code-font-family);
+    font-weight: var(--g-text-code-accent-font-weight);
+    font-size: var(--g-text-code-1-font-size);
+    line-height: var(--g-text-code-1-line-height);
+}
+
 @mixin text-code-2() {
     font-family: var(--g-text-code-font-family);
     font-weight: var(--g-text-code-font-weight);
@@ -283,6 +395,13 @@
     line-height: var(--g-text-code-2-line-height);
 }
 
+@mixin text-code-2-accent() {
+    font-family: var(--g-text-code-font-family);
+    font-weight: var(--g-text-code-accent-font-weight);
+    font-size: var(--g-text-code-2-font-size);
+    line-height: var(--g-text-code-2-line-height);
+}
+
 @mixin text-code-3() {
     font-family: var(--g-text-code-font-family);
     font-weight: var(--g-text-code-font-weight);
@@ -290,6 +409,13 @@
     line-height: var(--g-text-code-3-line-height);
 }
 
+@mixin text-code-3-accent() {
+    font-family: var(--g-text-code-font-family);
+    font-weight: var(--g-text-code-accent-font-weight);
+    font-size: var(--g-text-code-3-font-size);
+    line-height: var(--g-text-code-3-line-height);
+}
+
 @mixin text-code-inline-1() {
     font-family: var(--g-text-code-font-family);
     font-weight: var(--g-text-code-font-weight);
@@ -297,6 +423,13 @@
     line-height: var(--g-text-code-inline-1-line-height);
 }
 
+@mixin text-code-inline-1-accent() {
+    font-family: var(--g-text-code-font-family);
+    font-weight: var(--g-text-code-accent-font-weight);
+    font-size: var(--g-text-code-inline-1-font-size);
+    line-height: var(--g-text-code-inline-1-line-height);
+}
+
 @mixin text-code-inline-2() {
     font-family: var(--g-text-code-font-family);
     font-weight: var(--g-text-code-font-weight);
@@ -304,6 +437,13 @@
     line-height: var(--g-text-code-inline-2-line-height);
 }
 
+@mixin text-code-inline-2-accent() {
+    font-family: var(--g-text-code-font-family);
+    font-weight: var(--g-text-code-accent-font-weight);
+    font-size: var(--g-text-code-inline-2-font-size);
+    line-height: var(--g-text-code-inline-2-line-height);
+}
+
 @mixin text-code-inline-3() {
     font-family: var(--g-text-code-font-family);
     font-weight: var(--g-text-code-font-weight);
@@ -311,6 +451,13 @@
     line-height: var(--g-text-code-inline-3-line-height);
 }
 
+@mixin text-code-inline-3-accent() {
+    font-family: var(--g-text-code-font-family);
+    font-weight: var(--g-text-code-accent-font-weight);
+    font-size: var(--g-text-code-inline-3-font-size);
+    line-height: var(--g-text-code-inline-3-line-height);
+}
+
 @mixin text-accent() {
     font-weight: var(--g-text-accent-font-weight);
 }
diff --git a/styles/themes/common/typography.scss b/styles/themes/common/typography.scss
index d70b7768b5..854c2992f6 100644
--- a/styles/themes/common/typography.scss
+++ b/styles/themes/common/typography.scss
@@ -12,11 +12,18 @@
     --g-text-code-font-family: var(--g-font-family-monospace);
 
     --g-text-body-font-weight: 400;
+    --g-text-body-accent-font-weight: 600;
     --g-text-caption-font-weight: 400;
+    --g-text-caption-accent-font-weight: 600;
     --g-text-header-font-weight: 600;
+    --g-text-header-accent-font-weight: 600;
     --g-text-subheader-font-weight: 600;
+    --g-text-subheader-accent-font-weight: 600;
     --g-text-display-font-weight: 600;
+    --g-text-display-accent-font-weight: 600;
     --g-text-code-font-weight: 400;
+    --g-text-code-accent-font-weight: 600;
+    // deprecated
     --g-text-accent-font-weight: 600;
 
     --g-text-body-1-font-size: 13px;