diff --git a/projects/addon-charts/constants/default-color-handler.ts b/projects/addon-charts/constants/default-color-handler.ts
index 923b27b24aff..a3ff2dcb9c8a 100644
--- a/projects/addon-charts/constants/default-color-handler.ts
+++ b/projects/addon-charts/constants/default-color-handler.ts
@@ -1,5 +1,5 @@
 import {TuiColorHandler} from '@taiga-ui/addon-charts/types';
-
 import {DEFAULT_COLORS} from './default-colors';
 
+// TODO: Consider removing
 export const TUI_DEFAULT_COLOR_HANDLER: TuiColorHandler = index => DEFAULT_COLORS[index];
diff --git a/projects/addon-charts/constants/default-colors.ts b/projects/addon-charts/constants/default-colors.ts
index 21ea08a8fc8c..609977c31fdc 100644
--- a/projects/addon-charts/constants/default-colors.ts
+++ b/projects/addon-charts/constants/default-colors.ts
@@ -1,5 +1,6 @@
 import {TuiBaseColor, TuiColor, TuiSupportColor} from '@taiga-ui/core';
 
+// TODO: Consider removing
 export const DEFAULT_COLORS: ReadonlyArray<TuiColor | string | null> = [
     TuiBaseColor.Primary,
     TuiSupportColor.Havelock,
diff --git a/projects/core/directives/color/color.module.ts b/projects/core/directives/color/color.module.ts
index 7f86c76fb57e..587074c47471 100644
--- a/projects/core/directives/color/color.module.ts
+++ b/projects/core/directives/color/color.module.ts
@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {TuiColorDirective} from './color.directive';
 
+// TODO: Consider removing
 @NgModule({
     declarations: [TuiColorDirective],
     exports: [TuiColorDirective],
diff --git a/projects/core/enums/base-color.ts b/projects/core/enums/base-color.ts
index 74fd7002aefc..217e42911586 100644
--- a/projects/core/enums/base-color.ts
+++ b/projects/core/enums/base-color.ts
@@ -1,3 +1,4 @@
+// TODO: Consider removing
 export const enum TuiBaseColor {
     Primary = 'primary',
     Secondary = 'secondary',
diff --git a/projects/core/enums/index.ts b/projects/core/enums/index.ts
index 043316bbad97..c91e480897db 100644
--- a/projects/core/enums/index.ts
+++ b/projects/core/enums/index.ts
@@ -12,4 +12,3 @@ export * from './notification';
 export * from './orientation';
 export * from './range-state';
 export * from './support-color';
-export * from './text-color';
diff --git a/projects/core/enums/support-color.ts b/projects/core/enums/support-color.ts
index 77eb3c3c36a5..715ac786d7bf 100644
--- a/projects/core/enums/support-color.ts
+++ b/projects/core/enums/support-color.ts
@@ -1,3 +1,4 @@
+// TODO: Consider removing
 export const enum TuiSupportColor {
     Mustard = 'support-01',
     Texas = 'support-02',
diff --git a/projects/core/enums/text-color.ts b/projects/core/enums/text-color.ts
deleted file mode 100644
index 512caed6d629..000000000000
--- a/projects/core/enums/text-color.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO: Deprecated for being racist, remove after badges are refactored
-export const enum TuiTextColor {
-    White = 'white',
-    Black = 'black',
-}
diff --git a/projects/core/styles/markup/tui-list.less b/projects/core/styles/markup/tui-list.less
index d4b74622e4be..a75db32e4527 100644
--- a/projects/core/styles/markup/tui-list.less
+++ b/projects/core/styles/markup/tui-list.less
@@ -47,7 +47,7 @@
             top: 8px;
             width: 8px;
             height: 8px;
-            border-radius: 50%;
+            border-radius: 100%;
             background-color: var(--tui-primary);
 
             .tui-list_large > & {
diff --git a/projects/demo/src/modules/components/accordion/examples/2/index.less b/projects/demo/src/modules/components/accordion/examples/2/index.less
index 6a009ce74435..941257d469e8 100644
--- a/projects/demo/src/modules/components/accordion/examples/2/index.less
+++ b/projects/demo/src/modules/components/accordion/examples/2/index.less
@@ -32,7 +32,7 @@
     flex-shrink: 0;
     margin: 0 24px;
     background: var(--tui-secondary-active);
-    border-radius: 50%;
+    border-radius: 100%;
     width: 48px;
     height: 48px;
     color: var(--tui-text-03);
diff --git a/projects/demo/src/modules/components/badge/badge.component.ts b/projects/demo/src/modules/components/badge/badge.component.ts
index dd2fed7f613f..dd91787ae2c7 100644
--- a/projects/demo/src/modules/components/badge/badge.component.ts
+++ b/projects/demo/src/modules/components/badge/badge.component.ts
@@ -10,19 +10,14 @@ import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
 import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
 
 import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
+import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
 import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
 
 import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
 import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
 
 import {Component} from '@angular/core';
-import {
-    TuiNotification,
-    TuiSizeL,
-    TuiSizeS,
-    TuiSupportColor,
-    TuiTextColor,
-} from '@taiga-ui/core';
+import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TuiStatus} from '@taiga-ui/kit';
 import {changeDetection} from '../../../change-detection-strategy';
 import {FrontEndExample} from '../../interfaces/front-end-example';
@@ -56,78 +51,19 @@ export class ExampleTuiBadgeComponent {
     readonly example4: FrontEndExample = {
         TypeScript: example4Ts,
         HTML: example4Html,
+        LESS: example4Less,
     };
 
-    readonly statusVariants: ReadonlyArray<TuiStatus | TuiSupportColor> = [
-        TuiStatus.Normal,
-        TuiStatus.Error,
-        TuiStatus.Success,
-        TuiStatus.Light,
-        TuiStatus.Gray,
+    readonly statusVariants: ReadonlyArray<TuiStatus> = [
+        TuiStatus.Default,
         TuiStatus.Primary,
-        TuiStatus.Secondary,
-        TuiStatus.TransparentDark,
-        TuiStatus.TransparentLight,
-        TuiStatus.White,
-        TuiStatus.Highlight,
-        TuiSupportColor.Mustard,
-        TuiSupportColor.Texas,
-        TuiSupportColor.Tan,
-        TuiSupportColor.Salmon,
-        TuiSupportColor.Sienna,
-        TuiSupportColor.Bittersweet,
-        TuiSupportColor.Pinkie,
-        TuiSupportColor.Charm,
-        TuiSupportColor.Amethist,
-        TuiSupportColor.Helio,
-        TuiSupportColor.Lilac,
-        TuiSupportColor.Malibu,
-        TuiSupportColor.Havelock,
-        TuiSupportColor.Picton,
-        TuiSupportColor.Mint,
-        TuiSupportColor.Fountain,
-        TuiSupportColor.Puertorico,
-        TuiSupportColor.Bay,
-        TuiSupportColor.Forest,
-        TuiSupportColor.York,
-        TuiSupportColor.Feijoa,
-        TuiStatus.Inherit,
-    ];
-
-    status: TuiStatus | TuiSupportColor = this.statusVariants[0];
-
-    readonly notificationVariants: ReadonlyArray<
-        TuiNotification | TuiSupportColor | null
-    > = [
-        null,
-        TuiNotification.Info,
-        TuiNotification.Warning,
-        TuiNotification.Error,
-        TuiNotification.Success,
-        TuiSupportColor.Mustard,
-        TuiSupportColor.Texas,
-        TuiSupportColor.Tan,
-        TuiSupportColor.Salmon,
-        TuiSupportColor.Sienna,
-        TuiSupportColor.Bittersweet,
-        TuiSupportColor.Pinkie,
-        TuiSupportColor.Charm,
-        TuiSupportColor.Amethist,
-        TuiSupportColor.Helio,
-        TuiSupportColor.Lilac,
-        TuiSupportColor.Malibu,
-        TuiSupportColor.Havelock,
-        TuiSupportColor.Picton,
-        TuiSupportColor.Mint,
-        TuiSupportColor.Fountain,
-        TuiSupportColor.Puertorico,
-        TuiSupportColor.Bay,
-        TuiSupportColor.Forest,
-        TuiSupportColor.York,
-        TuiSupportColor.Feijoa,
+        TuiStatus.Success,
+        TuiStatus.Error,
+        TuiStatus.Warning,
+        TuiStatus.Custom,
     ];
 
-    notification: TuiNotification | TuiSupportColor | null = null;
+    status = this.statusVariants[0];
 
     values: {[key: string]: string | number} = {
         Taiga: 'Taiga',
@@ -140,13 +76,6 @@ export class ExampleTuiBadgeComponent {
 
     size: TuiSizeS | TuiSizeL = this.sizeVariants[1];
 
-    readonly textColorVariants: ReadonlyArray<TuiTextColor> = [
-        TuiTextColor.Black,
-        TuiTextColor.White,
-    ];
-
-    textColor: TuiTextColor | null = null;
-
     valueVariants: ReadonlyArray<string | number> = Object.keys(this.values);
 
     value: string | number = 'Taiga';
diff --git a/projects/demo/src/modules/components/badge/badge.module.ts b/projects/demo/src/modules/components/badge/badge.module.ts
index 8641fb1022d5..e0cc883f4cf0 100644
--- a/projects/demo/src/modules/components/badge/badge.module.ts
+++ b/projects/demo/src/modules/components/badge/badge.module.ts
@@ -1,8 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc';
+import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {TuiModeModule} from '@taiga-ui/core';
 import {TuiBadgeModule} from '@taiga-ui/kit';
 import {ExampleTuiBadgeComponent} from './badge.component';
 import {TuiBadgeExample1} from './examples/1';
@@ -13,9 +14,9 @@ import {TuiBadgeExample4} from './examples/4';
 @NgModule({
     imports: [
         TuiBadgeModule,
+        TuiModeModule,
+        TuiRepeatTimesModule,
         CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
         ...TUI_DOC_PAGE_MODULES,
         RouterModule.forChild(generateRoutes(ExampleTuiBadgeComponent)),
     ],
diff --git a/projects/demo/src/modules/components/badge/badge.template.html b/projects/demo/src/modules/components/badge/badge.template.html
index 52f2626553ed..2cb574440415 100644
--- a/projects/demo/src/modules/components/badge/badge.template.html
+++ b/projects/demo/src/modules/components/badge/badge.template.html
@@ -44,10 +44,8 @@
         <tui-doc-demo>
             <tui-badge
                 [hoverable]="hoverable"
-                [notification]="notification"
                 [size]="size"
                 [status]="status"
-                [textColor]="textColor"
                 [value]="values[value]"
             ></tui-badge>
         </tui-doc-demo>
@@ -58,16 +56,7 @@
                 documentationPropertyMode="input"
                 [(documentationPropertyValue)]="hoverable"
             >
-                Позволяет включить эффект наведения на бэдж (hover).
-            </ng-template>
-            <ng-template
-                documentationPropertyName="notification"
-                documentationPropertyMode="input"
-                documentationPropertyType="TuiNotification | TuiSupportColor | null"
-                [documentationPropertyValues]="notificationVariants"
-                [(documentationPropertyValue)]="notification"
-            >
-                Показывать нотификацию выбранного цвета
+                Позволяет включить изменение цвета при наведении
             </ng-template>
             <ng-template
                 documentationPropertyName="size"
@@ -85,16 +74,7 @@
                 [documentationPropertyValues]="statusVariants"
                 [(documentationPropertyValue)]="status"
             >
-                Статус меняет цвет бейджа.
-            </ng-template>
-            <ng-template
-                documentationPropertyName="textColor"
-                documentationPropertyMode="input"
-                documentationPropertyType="TuiTextColor | null"
-                [documentationPropertyValues]="textColorVariants"
-                [(documentationPropertyValue)]="textColor"
-            >
-                Цвет текста
+                Статус меняет цвет бейджа
             </ng-template>
             <ng-template
                 documentationPropertyName="value"
@@ -104,7 +84,7 @@
                 [(documentationPropertyValue)]="value"
             >
                 Значение. Числовые значения, превыщающие 99, заменяются
-                на&nbsp;&laquo;99+&raquo;.
+                на&nbsp;&laquo;99+&raquo;
             </ng-template>
         </tui-doc-documentation>
     </ng-template>
diff --git a/projects/demo/src/modules/components/badge/examples/1/index.html b/projects/demo/src/modules/components/badge/examples/1/index.html
index b7ec53e02c2f..7c48f1d9ea09 100644
--- a/projects/demo/src/modules/components/badge/examples/1/index.html
+++ b/projects/demo/src/modules/components/badge/examples/1/index.html
@@ -1,132 +1,28 @@
-<div>
-    Основные цвета
-    <tui-badge class="tui-space_right-2" value="-6"></tui-badge>
-    <tui-badge class="tui-space_right-2" status="light" value="6"></tui-badge>
-    <tui-badge class="tui-space_right-2" status="gray" value="6"></tui-badge>
-    <tui-badge class="tui-space_right-2" status="primary" value="6"></tui-badge>
-    <tui-badge class="tui-space_right-2" status="success" value="6"></tui-badge>
-    <tui-badge class="tui-space_right-2" status="error" value="6"></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="secondary"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="highlight"
-        value="6"
-    ></tui-badge>
-    <div class="tui-space_right-2 outline outline_dark">
-        <tui-badge status="white" value="6"></tui-badge>
-    </div>
-    <div class="tui-space_right-2 outline outline_dark">
-        <tui-badge status="transparent-dark" value="6"></tui-badge>
-    </div>
-    <div class="outline outline_light">
-        <tui-badge status="transparent-light" value="6"></tui-badge>
-    </div>
+<p>Основные цвета</p>
+<tui-badge class="tui-space_right-2" [value]="-6"></tui-badge>
+<tui-badge class="tui-space_right-2" status="primary" [value]="6"></tui-badge>
+<tui-badge
+    class="tui-space_right-2"
+    status="success"
+    value="Success"
+></tui-badge>
+<tui-badge class="tui-space_right-2" status="error" value="Error"></tui-badge>
+<tui-badge
+    class="tui-space_right-2"
+    status="warning"
+    value="Warning"
+></tui-badge>
+<div tuiMode="dark" class="tui-space_right-2 outline outline_dark">
+    <tui-badge [value]="6"></tui-badge>
 </div>
-<div class="tui-space_top-3">
-    Вспомогательные цвета
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-mustard"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-texas"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-tan"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-salmon"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-sienna"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-bittersweet"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-pinkie"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-charm"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-amethyst"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-helio"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-lilac"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-malibu"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-havelock"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-picton"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-mint"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-fountain"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-puertorico"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-bay"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-forest"
-        value="6"
-    ></tui-badge>
-    <tui-badge
-        class="tui-space_right-2"
-        status="support-york"
-        value="6"
-    ></tui-badge>
-    <tui-badge status="support-feijoa" value="6"></tui-badge>
+<div tuiMode="light" class="outline outline_light">
+    <tui-badge [value]="6"></tui-badge>
 </div>
+<p>Вспомогательные цвета через CSS и <code>status="custom"</code></p>
+<tui-badge
+    *tuiRepeatTimes="let index of 20"
+    class="tui-space_horizontal-2 tui-space_vertical-2 support-{{index + 1}}"
+    status="custom"
+    value="Taiga"
+    [hoverable]="true"
+></tui-badge>
diff --git a/projects/demo/src/modules/components/badge/examples/1/index.less b/projects/demo/src/modules/components/badge/examples/1/index.less
index 7d3dee1a4715..e1ab4849f38a 100644
--- a/projects/demo/src/modules/components/badge/examples/1/index.less
+++ b/projects/demo/src/modules/components/badge/examples/1/index.less
@@ -11,3 +11,13 @@
         background: #e5e7ea;
     }
 }
+
+@iterations: 20;
+
+.loop (@i) when (@i > 0) {
+    .support-@{i} {
+        background-color: ~'var(--tui-support-@{i}, var(--tui-support-0@{i}))';
+    }
+    .loop(@i - 1);
+}
+.loop (@iterations);
diff --git a/projects/demo/src/modules/components/badge/examples/4/index.html b/projects/demo/src/modules/components/badge/examples/4/index.html
index 0d076359e25e..5d538829b25b 100644
--- a/projects/demo/src/modules/components/badge/examples/4/index.html
+++ b/projects/demo/src/modules/components/badge/examples/4/index.html
@@ -1,6 +1 @@
-<tui-badge
-    notification="success"
-    status="light"
-    size="l"
-    value="Taiga"
-></tui-badge>
+<tui-badge class="custom" status="custom" size="l" value="CSS"></tui-badge>
diff --git a/projects/demo/src/modules/components/badge/examples/4/index.less b/projects/demo/src/modules/components/badge/examples/4/index.less
new file mode 100644
index 000000000000..b98ef0a08463
--- /dev/null
+++ b/projects/demo/src/modules/components/badge/examples/4/index.less
@@ -0,0 +1,8 @@
+.custom {
+    background: var(--tui-support-01);
+
+    &:before {
+        content: '';
+        color: var(--tui-support-02);
+    }
+}
diff --git a/projects/demo/src/modules/components/badge/examples/4/index.ts b/projects/demo/src/modules/components/badge/examples/4/index.ts
index def9dda941e1..f74b4c46bb4b 100644
--- a/projects/demo/src/modules/components/badge/examples/4/index.ts
+++ b/projects/demo/src/modules/components/badge/examples/4/index.ts
@@ -5,6 +5,7 @@ import {encapsulation} from '../../../../../view-encapsulation';
 @Component({
     selector: 'tui-badge-example-4',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     changeDetection,
     encapsulation,
 })
diff --git a/projects/demo/src/modules/components/badge/examples/import/insert-template.txt b/projects/demo/src/modules/components/badge/examples/import/insert-template.txt
index d4a3a9fd4428..d0600b94b182 100644
--- a/projects/demo/src/modules/components/badge/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/badge/examples/import/insert-template.txt
@@ -1,8 +1,6 @@
 <!--Здесь передается число, будет показано 99+ -->
-<tui-badge status="primary"
-           [value]="100"></tui-badge>
+<tui-badge [value]="100"></tui-badge>
 
 
 <!--Здесь передается строка, будет показано 100 -->
-<tui-badge status="primary"
-           value="100"></tui-badge>
+<tui-badge status="primary" value="100"></tui-badge>
diff --git a/projects/demo/src/modules/components/badged-content/badged-content.component.ts b/projects/demo/src/modules/components/badged-content/badged-content.component.ts
index 88817e81769f..1a6e01dbe4fa 100644
--- a/projects/demo/src/modules/components/badged-content/badged-content.component.ts
+++ b/projects/demo/src/modules/components/badged-content/badged-content.component.ts
@@ -11,8 +11,7 @@ import {default as exampleImportModule} from '!!raw-loader!./examples/import/imp
 import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
 
 import {Component} from '@angular/core';
-import {TuiNotification, TuiSizeXS, TuiSizeXXL, TuiSupportColor} from '@taiga-ui/core';
-import {TuiStatus} from '@taiga-ui/kit';
+import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {changeDetection} from '../../../change-detection-strategy';
 import {FrontEndExample} from '../../interfaces/front-end-example';
@@ -41,54 +40,9 @@ export class ExampleTuiBadgedContentComponent {
         HTML: example3Html,
     };
 
-    imageUrl = 'https://ng-web-apis.github.io/dist/assets/images/web-api.svg';
-
-    borderColor = '#fff';
-
-    statusVariants: ReadonlyArray<
-        TuiStatus | TuiSupportColor | TuiNotification | null
-    > = [
-        null,
-        TuiStatus.Normal,
-        TuiStatus.Error,
-        TuiStatus.Success,
-        TuiStatus.Light,
-        TuiStatus.Gray,
-        TuiStatus.Primary,
-        TuiStatus.Secondary,
-        TuiStatus.White,
-        TuiStatus.Highlight,
-        TuiStatus.Inherit,
-        TuiNotification.Info,
-        TuiNotification.Warning,
-        TuiSupportColor.Mustard,
-        TuiSupportColor.Texas,
-        TuiSupportColor.Tan,
-        TuiSupportColor.Salmon,
-        TuiSupportColor.Sienna,
-        TuiSupportColor.Bittersweet,
-        TuiSupportColor.Pinkie,
-        TuiSupportColor.Charm,
-        TuiSupportColor.Amethist,
-        TuiSupportColor.Helio,
-        TuiSupportColor.Lilac,
-        TuiSupportColor.Malibu,
-        TuiSupportColor.Havelock,
-        TuiSupportColor.Picton,
-        TuiSupportColor.Mint,
-        TuiSupportColor.Fountain,
-        TuiSupportColor.Puertorico,
-        TuiSupportColor.Bay,
-        TuiSupportColor.Forest,
-        TuiSupportColor.York,
-        TuiSupportColor.Feijoa,
-    ];
-
-    text = 'daenerys targaryen';
-
     rounded = false;
 
-    sizeVariants: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
+    readonly sizeVariants: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
         'xs',
         's',
         'm',
@@ -99,13 +53,21 @@ export class ExampleTuiBadgedContentComponent {
 
     size = this.sizeVariants[2];
 
-    statusTop: TuiStatus | TuiNotification | TuiSupportColor | null = null;
+    colorTop = '';
 
-    statusBottom: TuiStatus | TuiNotification | TuiSupportColor | null = null;
+    colorBottom = '';
 
-    contentTop: PolymorpheusContent | null = null;
+    contentTop: PolymorpheusContent = '';
 
-    contentBottom: PolymorpheusContent | null = null;
+    contentBottom: PolymorpheusContent = '';
 
-    contentVariants = [1, 5, 155, 'tuiIconCheck', 'Шаблон', 'tuiIconCheckCircleLarge'];
+    readonly contentVariants = [
+        '',
+        1,
+        5,
+        155,
+        'tuiIconCheck',
+        'Шаблон',
+        'tuiIconCheckCircleLarge',
+    ];
 }
diff --git a/projects/demo/src/modules/components/badged-content/badged-content.module.ts b/projects/demo/src/modules/components/badged-content/badged-content.module.ts
index 96bdba0ba3e4..6f05f2b7176c 100644
--- a/projects/demo/src/modules/components/badged-content/badged-content.module.ts
+++ b/projects/demo/src/modules/components/badged-content/badged-content.module.ts
@@ -1,17 +1,10 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc';
-import {TuiButtonModule, TuiSvgModule} from '@taiga-ui/core';
-import {
-    TuiAvatarModule,
-    TuiBadgedContentModule,
-    TuiInputModule,
-    TuiMarkerIconModule,
-    TuiRadioListModule,
-} from '@taiga-ui/kit';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
+import {TuiButtonModule} from '@taiga-ui/core';
+import {TuiAvatarModule, TuiBadgedContentModule, TuiInputModule} from '@taiga-ui/kit';
 import {ExampleTuiBadgedContentComponent} from './badged-content.component';
 import {TuiBadgedContentExample1} from './examples/1';
 import {TuiBadgedContentExample2} from './examples/2';
@@ -19,18 +12,13 @@ import {TuiBadgedContentExample3} from './examples/3';
 
 @NgModule({
     imports: [
+        CommonModule,
+        FormsModule,
         TuiAvatarModule,
-        TuiMarkerIconModule,
         TuiBadgedContentModule,
-        ...TUI_DOC_PAGE_MODULES,
-        CommonModule,
         TuiInputModule,
-        PolymorpheusModule,
         TuiButtonModule,
-        TuiRadioListModule,
-        TuiSvgModule,
-        FormsModule,
-        ReactiveFormsModule,
+        ...TUI_DOC_PAGE_MODULES,
         RouterModule.forChild(generateRoutes(ExampleTuiBadgedContentComponent)),
     ],
     declarations: [
diff --git a/projects/demo/src/modules/components/badged-content/badged-content.template.html b/projects/demo/src/modules/components/badged-content/badged-content.template.html
index c2083e17bff4..3d9f3097d96c 100644
--- a/projects/demo/src/modules/components/badged-content/badged-content.template.html
+++ b/projects/demo/src/modules/components/badged-content/badged-content.template.html
@@ -33,45 +33,34 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-badged-content
-                [borderColor]="borderColor"
                 [contentTop]="contentTop === 'Шаблон' ? example : contentTop"
                 [contentBottom]="contentBottom === 'Шаблон' ? example : contentBottom"
                 [rounded]="rounded"
-                [statusTop]="statusTop"
-                [statusBottom]="statusBottom"
+                [colorTop]="colorTop"
+                [colorBottom]="colorBottom"
                 [size]="size"
             >
                 <tui-avatar
-                    [text]="text"
+                    text="daenerys targaryen"
                     [rounded]="rounded"
                     [size]="size"
                 ></tui-avatar>
             </tui-badged-content>
-            <ng-template #example="polymorpheus" polymorpheus>
+            <ng-template #example>
                 <tui-avatar
                     text="Пример"
                     size="s"
-                    [avatarUrl]="imageUrl"
+                    avatarUrl="https://ng-web-apis.github.io/dist/assets/images/web-api.svg"
                     [rounded]="true"
                 ></tui-avatar>
             </ng-template>
         </tui-doc-demo>
 
         <tui-doc-documentation>
-            <ng-template
-                documentationPropertyName="borderColor"
-                documentationPropertyMode="input"
-                documentationPropertyType="string"
-                [documentationPropertyDeprecated]="true"
-                [(documentationPropertyValue)]="borderColor"
-            >
-                Цвет обводки вокруг бейджа. Выставите <code>null</code> и
-                используйте CSS <code>color</code>
-            </ng-template>
             <ng-template
                 documentationPropertyName="contentBottom"
                 documentationPropertyMode="input"
-                documentationPropertyType="PolymorpheusContent | null"
+                documentationPropertyType="PolymorpheusContent"
                 [documentationPropertyValues]="contentVariants"
                 [(documentationPropertyValue)]="contentBottom"
             >
@@ -83,7 +72,7 @@
             <ng-template
                 documentationPropertyName="contentTop"
                 documentationPropertyMode="input"
-                documentationPropertyType="PolymorpheusContent | null"
+                documentationPropertyType="PolymorpheusContent"
                 [documentationPropertyValues]="contentVariants"
                 [(documentationPropertyValue)]="contentTop"
             >
@@ -93,21 +82,19 @@
                 кроме 'xs'.
             </ng-template>
             <ng-template
-                documentationPropertyName="statusBottom"
+                documentationPropertyName="colorBottom"
                 documentationPropertyMode="input"
-                documentationPropertyType="TuiNotification | TuiSupportColor | null"
-                [documentationPropertyValues]="statusVariants"
-                [(documentationPropertyValue)]="statusBottom"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="colorBottom"
             >
                 Цвет содержимого в правом нижнем углу. При отсутствии
                 содержимого, показывается кружок соответствующего цвета.
             </ng-template>
             <ng-template
-                documentationPropertyName="statusTop"
+                documentationPropertyName="colorTop"
                 documentationPropertyMode="input"
-                documentationPropertyType="TuiNotification | TuiSupportColor | null"
-                [documentationPropertyValues]="statusVariants"
-                [(documentationPropertyValue)]="statusTop"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="colorTop"
             >
                 Цвет содержимого в правом верхнем углу. При отсутствии
                 содержимого, показывается кружок соответствующего цвета.
diff --git a/projects/demo/src/modules/components/badged-content/examples/1/index.html b/projects/demo/src/modules/components/badged-content/examples/1/index.html
index f3f620aaca03..057635d896ac 100644
--- a/projects/demo/src/modules/components/badged-content/examples/1/index.html
+++ b/projects/demo/src/modules/components/badged-content/examples/1/index.html
@@ -1,56 +1,56 @@
 <div class="row">
     <tui-badged-content
         class="tui-space_right-5"
-        [statusTop]="notification"
-        [rounded]="rounded"
-        [size]="size"
+        colorTop="var(--tui-error-fill)"
+        size="l"
+        [rounded]="true"
     >
-        <tui-avatar text="a b" [rounded]="rounded" [size]="size"></tui-avatar>
+        <tui-avatar text="a b" [rounded]="true" size="l"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
-        [statusBottom]="badgeStatus"
-        [rounded]="rounded"
-        [size]="size"
+        colorBottom="var(--tui-success-fill)"
+        size="l"
+        [rounded]="true"
     >
-        <tui-avatar text="c d" [rounded]="rounded" [size]="size"></tui-avatar>
+        <tui-avatar text="c d" [rounded]="true" size="l"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
-        [statusTop]="badgeStatus"
-        [statusBottom]="notification"
-        [rounded]="rounded"
-        [size]="size"
+        colorTop="var(--tui-success-fill)"
+        colorBottom="var(--tui-error-fill)"
+        size="l"
+        [rounded]="true"
     >
-        <tui-avatar text="e" [rounded]="rounded" [size]="size"></tui-avatar>
+        <tui-avatar text="e" [rounded]="true" size="l"></tui-avatar>
     </tui-badged-content>
 </div>
 
 <div class="row tui-space_top-5">
     <tui-badged-content
         class="tui-space_right-5"
-        [statusTop]="notification"
-        [size]="size"
+        colorTop="var(--tui-error-fill)"
+        size="l"
     >
-        <tui-avatar text="a b" [size]="size"></tui-avatar>
+        <tui-avatar text="a b" size="l"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
-        [statusBottom]="badgeStatus"
-        [size]="size"
+        colorBottom="var(--tui-success-fill)"
+        size="l"
     >
-        <tui-avatar text="c d" [size]="size"></tui-avatar>
+        <tui-avatar text="c d" size="l"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
-        [statusTop]="badgeStatus"
-        [statusBottom]="notification"
-        [size]="size"
+        colorTop="var(--tui-success-fill)"
+        colorBottom="var(--tui-error-fill)"
+        size="l"
     >
-        <tui-avatar text="e" [size]="size"></tui-avatar>
+        <tui-avatar text="e" size="l"></tui-avatar>
     </tui-badged-content>
 </div>
diff --git a/projects/demo/src/modules/components/badged-content/examples/1/index.ts b/projects/demo/src/modules/components/badged-content/examples/1/index.ts
index b5b70152b20c..3c22b2c04013 100644
--- a/projects/demo/src/modules/components/badged-content/examples/1/index.ts
+++ b/projects/demo/src/modules/components/badged-content/examples/1/index.ts
@@ -8,9 +8,4 @@ import {encapsulation} from '../../../../../view-encapsulation';
     changeDetection,
     encapsulation,
 })
-export class TuiBadgedContentExample1 {
-    badgeStatus = 'success';
-    notification = 'error';
-    rounded = true;
-    size = 'l';
-}
+export class TuiBadgedContentExample1 {}
diff --git a/projects/demo/src/modules/components/badged-content/examples/2/index.html b/projects/demo/src/modules/components/badged-content/examples/2/index.html
index 3ac81ca58cea..af518de6308a 100644
--- a/projects/demo/src/modules/components/badged-content/examples/2/index.html
+++ b/projects/demo/src/modules/components/badged-content/examples/2/index.html
@@ -1,32 +1,26 @@
-<div>
-    <tui-badged-content [contentTop]="badgeValue" statusTop="support-salmon">
-        <form class="b-input-wrapper" [formGroup]="testForm">
-            <tui-input class="input" formControlName="testValue">
-                Введите текст
-            </tui-input>
-        </form>
-    </tui-badged-content>
-</div>
+<tui-badged-content [contentTop]="badgeValue" colorTop="var(--tui-support-01)">
+    <tui-input class="input" [(ngModel)]="value">Введите текст</tui-input>
+</tui-badged-content>
 
 <div class="tui-space_top-5">
     <tui-badged-content
         [contentTop]="contentTop"
-        [contentBottom]="badgeValueCount === 50 ? customBadge : null"
-        [statusTop]="buttonStatusTop"
+        [contentBottom]="contentTop === 50 ? customBadge : ''"
+        [colorTop]="color"
     >
         <button
             tuiButton
             type="button"
             appearance="secondary"
             size="xl"
-            [disabled]="badgeValueCount === 50"
+            [disabled]="contentTop === 50"
             (click)="onClick()"
         >
             Кликни 50+ раз и ...
         </button>
     </tui-badged-content>
 
-    <ng-template #customBadge="polymorpheus" polymorpheus>
-        <div class="custom-template">... ничего не произойдет</div>
+    <ng-template #customBadge>
+        <div class="template">... ничего не произойдет</div>
     </ng-template>
 </div>
diff --git a/projects/demo/src/modules/components/badged-content/examples/2/index.less b/projects/demo/src/modules/components/badged-content/examples/2/index.less
index 143a16b922b0..c4e9d21a635b 100644
--- a/projects/demo/src/modules/components/badged-content/examples/2/index.less
+++ b/projects/demo/src/modules/components/badged-content/examples/2/index.less
@@ -1,9 +1,9 @@
 .input {
-    min-width: 320px;
+    width: 320px;
 }
 
-.custom-template {
+.template {
     background: var(--tui-primary);
-    color: var(--tui-base-09);
+    color: var(--tui-primary-text);
     padding: 0 6px;
 }
diff --git a/projects/demo/src/modules/components/badged-content/examples/2/index.ts b/projects/demo/src/modules/components/badged-content/examples/2/index.ts
index 7ac50b58b0bf..e6d97fc3b5c4 100644
--- a/projects/demo/src/modules/components/badged-content/examples/2/index.ts
+++ b/projects/demo/src/modules/components/badged-content/examples/2/index.ts
@@ -1,8 +1,4 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
-import {TuiNotification, TuiSupportColor} from '@taiga-ui/core';
-import {TuiStatus} from '@taiga-ui/kit';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {changeDetection} from '../../../../../change-detection-strategy';
 import {encapsulation} from '../../../../../view-encapsulation';
 
@@ -14,31 +10,23 @@ import {encapsulation} from '../../../../../view-encapsulation';
     encapsulation,
 })
 export class TuiBadgedContentExample2 {
-    testForm = new FormGroup({
-        testValue: new FormControl(''),
-    });
+    value = '';
 
-    badgeValueCount = 0;
-
-    buttonStatusTop: TuiNotification | TuiStatus | TuiSupportColor | null = null;
-
-    contentTop: PolymorpheusContent | null = null;
+    contentTop = 0;
 
     get badgeValue(): number {
-        return this.testForm.value.testValue.length;
+        return this.value.length;
     }
 
-    onClick() {
-        this.badgeValueCount++;
-
-        this.contentTop = this.badgeValueCount;
+    get color(): string {
+        return this.contentTop === 50 ? 'tuiIconCheck' : 'var(--tui-error-fill)';
+    }
 
-        if (this.badgeValueCount > 0) {
-            this.buttonStatusTop = TuiStatus.Error;
-        }
+    get contentBottom(): string {
+        return this.contentTop === 50 ? '' : '';
+    }
 
-        if (this.badgeValueCount === 50) {
-            this.contentTop = 'tuiIconCheck';
-        }
+    onClick() {
+        this.contentTop++;
     }
 }
diff --git a/projects/demo/src/modules/components/badged-content/examples/3/index.html b/projects/demo/src/modules/components/badged-content/examples/3/index.html
index 21ff755e2d9b..c8bbfae84fea 100644
--- a/projects/demo/src/modules/components/badged-content/examples/3/index.html
+++ b/projects/demo/src/modules/components/badged-content/examples/3/index.html
@@ -2,63 +2,62 @@
     <tui-badged-content
         class="tui-space_right-5"
         contentTop="tuiIconCheckCircleLarge"
-        [statusTop]="notification"
-        [rounded]="rounded"
-        [size]="size"
+        colorTop="var(--tui-error-fill)"
+        size="l"
+        [rounded]="true"
     >
-        <tui-avatar text="a b" [rounded]="rounded" [size]="size"></tui-avatar>
+        <tui-avatar text="a b" size="l" [rounded]="true"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
-        [statusBottom]="badgeStatus"
-        [contentBottom]="badgeValue"
-        [rounded]="rounded"
-        [size]="size"
+        colorBottom="var(--tui-success-fill)"
+        size="l"
+        [contentBottom]="64"
+        [rounded]="true"
     >
-        <tui-avatar text="c d" [rounded]="rounded" [size]="size"></tui-avatar>
+        <tui-avatar text="c d" size="l" [rounded]="true"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
         contentBottom="tuiIconSettings"
-        [statusTop]="badgeStatus"
-        [statusBottom]="notification"
-        [contentTop]="badgeValue"
-        [rounded]="rounded"
-        [size]="size"
+        colorTop="var(--tui-success-fill)"
+        colorBottom="var(--tui-error-fill)"
+        size="l"
+        [contentTop]="64"
+        [rounded]="true"
     >
-        <tui-avatar text="e" [rounded]="rounded" [size]="size"></tui-avatar>
+        <tui-avatar text="e" size="l" [rounded]="true"></tui-avatar>
     </tui-badged-content>
 </div>
 
 <div class="row tui-space_top-5">
     <tui-badged-content
         class="tui-space_right-5"
-        [statusTop]="notification"
-        [contentTop]="badgeValue"
-        [size]="size"
+        colorTop="var(--tui-error-fill)"
+        size="l"
+        [contentTop]="64"
     >
-        <tui-avatar text="a b" [size]="size"></tui-avatar>
+        <tui-avatar text="a b" size="l"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
         contentBottom="tuiIconSettings"
-        [statusBottom]="badgeStatus"
-        [size]="size"
+        colorBottom="var(--tui-success-fill)"
+        size="l"
     >
-        <tui-avatar text="c d" [size]="size"></tui-avatar>
+        <tui-avatar text="c d" size="l"></tui-avatar>
     </tui-badged-content>
 
     <tui-badged-content
         class="tui-space_right-5"
         contentBottom="tuiIconCheckCircleLarge"
-        [statusTop]="badgeStatus"
-        [statusBottom]="notification"
-        [contentTop]="badgeValue"
-        [size]="size"
+        colorBottom="var(--tui-error-fill)"
+        size="l"
+        [contentTop]="64"
     >
-        <tui-avatar text="e" [size]="size"></tui-avatar>
+        <tui-avatar text="e" size="l"></tui-avatar>
     </tui-badged-content>
 </div>
diff --git a/projects/demo/src/modules/components/badged-content/examples/3/index.ts b/projects/demo/src/modules/components/badged-content/examples/3/index.ts
index 27cc2e003bd4..0db8e16d52eb 100644
--- a/projects/demo/src/modules/components/badged-content/examples/3/index.ts
+++ b/projects/demo/src/modules/components/badged-content/examples/3/index.ts
@@ -8,11 +8,4 @@ import {encapsulation} from '../../../../../view-encapsulation';
     changeDetection,
     encapsulation,
 })
-export class TuiBadgedContentExample3 {
-    avatar = 'https://ng-web-apis.github.io/dist/assets/images/web-api.svg';
-    badgeStatus = 'success';
-    badgeValue = 64;
-    notification = 'error';
-    rounded = true;
-    size = 'l';
-}
+export class TuiBadgedContentExample3 {}
diff --git a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt
index 4dcef1511b7f..d6fedee3fc05 100644
--- a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt
@@ -1,4 +1,6 @@
-<tui-badged-content [contentTop]="contentTop"
-                    [statusTop]="statusTop">
-    <Оборачиваемый-компонент>
+<tui-badged-content
+    [contentTop]="contentTop"
+    [colorTop]="colorTop"
+>
+    Оборачиваемый-компонент
 </tui-badged-content>
diff --git a/projects/demo/src/modules/components/island/examples/1/index.less b/projects/demo/src/modules/components/island/examples/1/index.less
index d0122fac74b3..5b4377baf092 100644
--- a/projects/demo/src/modules/components/island/examples/1/index.less
+++ b/projects/demo/src/modules/components/island/examples/1/index.less
@@ -3,7 +3,7 @@
 }
 
 .some-figure {
-    border-radius: 50%;
+    border-radius: 100%;
     width: 48px;
     height: 48px;
     background-color: var(--tui-secondary-active);
diff --git a/projects/demo/src/modules/components/island/examples/2/index.less b/projects/demo/src/modules/components/island/examples/2/index.less
index d0122fac74b3..5b4377baf092 100644
--- a/projects/demo/src/modules/components/island/examples/2/index.less
+++ b/projects/demo/src/modules/components/island/examples/2/index.less
@@ -3,7 +3,7 @@
 }
 
 .some-figure {
-    border-radius: 50%;
+    border-radius: 100%;
     width: 48px;
     height: 48px;
     background-color: var(--tui-secondary-active);
diff --git a/projects/demo/src/modules/components/island/island.style.less b/projects/demo/src/modules/components/island/island.style.less
index 6348b304bbaf..ed582ab2884e 100644
--- a/projects/demo/src/modules/components/island/island.style.less
+++ b/projects/demo/src/modules/components/island/island.style.less
@@ -3,7 +3,7 @@
 }
 
 .some-figure {
-    border-radius: 50%;
+    border-radius: 100%;
     width: 64px;
     height: 64px;
     background-color: var(--tui-secondary-active);
diff --git a/projects/demo/src/modules/components/select/examples/2/index.less b/projects/demo/src/modules/components/select/examples/2/index.less
index 90d6d1feb87e..2286ce3b1b1f 100644
--- a/projects/demo/src/modules/components/select/examples/2/index.less
+++ b/projects/demo/src/modules/components/select/examples/2/index.less
@@ -50,7 +50,7 @@
     margin-right: @space * 2;
     width: 36px;
     height: 36px;
-    border-radius: 50%;
+    border-radius: 100%;
     background-color: var(--tui-base-01);
     font-weight: bold;
 }
diff --git a/projects/demo/src/modules/components/tag/tag.component.ts b/projects/demo/src/modules/components/tag/tag.component.ts
index e04d684f31ab..a704eeeb6a85 100644
--- a/projects/demo/src/modules/components/tag/tag.component.ts
+++ b/projects/demo/src/modules/components/tag/tag.component.ts
@@ -67,6 +67,9 @@ export class ExampleTuiTagComponent {
     readonly statusVariants: ReadonlyArray<TuiStatus> = [
         TuiStatus.Default,
         TuiStatus.Primary,
+        TuiStatus.Success,
+        TuiStatus.Error,
+        TuiStatus.Warning,
         TuiStatus.Custom,
     ];
 
diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less b/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less
index 8e0d9b22772c..b5ac74334fd2 100644
--- a/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less
+++ b/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less
@@ -12,7 +12,7 @@
 }
 
 .some-figure {
-    border-radius: 50%;
+    border-radius: 100%;
     width: 48px;
     height: 48px;
     background-color: var(--tui-secondary-active);
diff --git a/projects/demo/src/styles.less b/projects/demo/src/styles.less
index 1a037b42fb4b..a5ce441651b6 100644
--- a/projects/demo/src/styles.less
+++ b/projects/demo/src/styles.less
@@ -145,7 +145,7 @@ markdown {
             top: 8px;
             width: 8px;
             height: 8px;
-            border-radius: 50%;
+            border-radius: 100%;
             background-color: var(--tui-primary);
         }
     }
diff --git a/projects/kit/abstract/slider/slider.common.style.less b/projects/kit/abstract/slider/slider.common.style.less
index 25959402d634..c3d38af62550 100644
--- a/projects/kit/abstract/slider/slider.common.style.less
+++ b/projects/kit/abstract/slider/slider.common.style.less
@@ -65,7 +65,7 @@
     width: 1em;
     height: 1em;
     transform: translate(0, -50%);
-    border-radius: 50%;
+    border-radius: 100%;
     background-color: var(--tui-primary);
     outline: none;
     cursor: ew-resize;
diff --git a/projects/kit/components/badge/badge.component.ts b/projects/kit/components/badge/badge.component.ts
index 8f6de1ab4f5e..dc5dc5f10661 100644
--- a/projects/kit/components/badge/badge.component.ts
+++ b/projects/kit/components/badge/badge.component.ts
@@ -1,21 +1,27 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
-import {tuiDefaultProp} from '@taiga-ui/cdk';
 import {
-    TuiBaseColor,
-    TuiColor,
-    TuiNotification,
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    Inject,
+    Input,
+} from '@angular/core';
+import {tuiDefaultProp, TuiDestroyService} from '@taiga-ui/cdk';
+import {
+    MODE_PROVIDER,
+    TUI_MODE,
+    TuiModeVariants,
     TuiSizeL,
     TuiSizeS,
-    TuiSupportColor,
-    TuiTextColor,
 } from '@taiga-ui/core';
 import {TuiStatus} from '@taiga-ui/kit/enums';
+import {Observable} from 'rxjs';
 
 @Component({
     selector: 'tui-badge',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './badge.template.html',
+    template: '{{outputValue}}',
     styleUrls: ['./badge.style.less'],
+    providers: [TuiDestroyService, MODE_PROVIDER],
 })
 export class TuiBadgeComponent {
     @Input()
@@ -28,23 +34,24 @@ export class TuiBadgeComponent {
     size: TuiSizeS | TuiSizeL = 'm';
 
     @Input()
-    @HostBinding('attr.data-tui-background')
-    @tuiDefaultProp()
-    status: TuiStatus | TuiSupportColor = TuiStatus.Normal;
-
-    @Input()
-    @HostBinding('attr.data-tui-host-text-color')
-    textColor: TuiTextColor | null = null;
-
-    @Input()
+    @HostBinding('attr.data-tui-host-status')
     @tuiDefaultProp()
-    notification: TuiNotification | TuiSupportColor | null = null;
+    status: TuiStatus = TuiStatus.Default;
 
     @Input()
     @HostBinding('class._hoverable')
     @tuiDefaultProp()
     hoverable = false;
 
+    @HostBinding('attr.data-tui-host-mode')
+    mode: TuiModeVariants | null = null;
+
+    constructor(@Inject(TUI_MODE) mode$: Observable<TuiModeVariants | null>) {
+        mode$.subscribe(mode => {
+            this.mode = mode;
+        });
+    }
+
     @HostBinding('attr.data-tui-host-padding')
     get padding(): string {
         return typeof this.value.valueOf() === 'number' ? 'm' : 'l';
@@ -57,19 +64,4 @@ export class TuiBadgeComponent {
             return this.value;
         }
     }
-
-    get notificationBackground(): TuiColor | null {
-        switch (this.notification) {
-            case TuiNotification.Warning:
-                return TuiBaseColor.Primary;
-            case TuiNotification.Info:
-                return null;
-            case TuiNotification.Error:
-                return TuiBaseColor.Error;
-            case TuiNotification.Success:
-                return TuiBaseColor.Success;
-            default:
-                return this.notification;
-        }
-    }
 }
diff --git a/projects/kit/components/badge/badge.module.ts b/projects/kit/components/badge/badge.module.ts
index 958e97543fea..810a1ae6feb1 100644
--- a/projects/kit/components/badge/badge.module.ts
+++ b/projects/kit/components/badge/badge.module.ts
@@ -1,10 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TuiColorModule} from '@taiga-ui/core';
 import {TuiBadgeComponent} from './badge.component';
 
 @NgModule({
-    imports: [CommonModule, TuiColorModule],
+    imports: [CommonModule],
     declarations: [TuiBadgeComponent],
     exports: [TuiBadgeComponent],
 })
diff --git a/projects/kit/components/badge/badge.style.less b/projects/kit/components/badge/badge.style.less
index 5e3488d0c694..1eabe99e2116 100644
--- a/projects/kit/components/badge/badge.style.less
+++ b/projects/kit/components/badge/badge.style.less
@@ -15,241 +15,213 @@
     white-space: nowrap;
     overflow: hidden;
 
-    &:hover,
-    &:active {
-        &._hoverable {
-            &[data-tui-background='inherit'],
-            &[data-tui-background^='support-'],
-            &[data-tui-background='success'],
-            &[data-tui-background='error'] {
-                &:before {
-                    .fullsize();
-                    content: '';
-                    background-color: var(--tui-clear);
-                }
-            }
+    &:after {
+        .transition(background);
+        .fullsize();
+        content: '';
+        box-sizing: border-box;
+        border-radius: inherit;
+        pointer-events: none;
+    }
+
+    &._hoverable:hover,
+    &._hoverable:active {
+        &[data-tui-host-status='custom']:after {
+            background-color: var(--tui-clear);
         }
     }
 
-    &._hoverable {
-        cursor: pointer;
-    }
-
-    &[data-tui-host-padding='m'] {
-        padding: 0 @padding - 4px;
+    &[data-tui-host-status='primary'] {
+        background-color: var(--tui-primary);
+        color: var(--tui-primary-text);
 
-        &[data-tui-host-size='s'] {
-            padding: 0 @padding - 6px;
+        &._hoverable:hover {
+            background-color: var(--tui-primary-hover);
         }
 
-        &[data-tui-host-size='l'] {
-            padding: 0 @padding - 2px;
+        &._hoverable:active {
+            background-color: var(--tui-primary-active);
         }
     }
 
-    &[data-tui-host-padding='l'] {
-        padding: 0 @padding;
+    &[data-tui-host-status='error'] {
+        background-color: var(--tui-error-bg);
+        color: var(--tui-text-01);
 
-        &[data-tui-host-size='s'] {
-            padding: 0 @padding - 2px;
+        &:before {
+            content: '';
+            color: var(--tui-error-fill);
         }
-    }
 
-    &[data-tui-host-size='s'] {
-        .text-body-xs();
-        height: @height-extra-extra-small;
-        line-height: @height-extra-extra-small;
-        min-width: @height-extra-extra-small;
-    }
+        &._hoverable:hover,
+        &._hoverable:active {
+            background-color: var(--tui-error-bg-hover);
+        }
 
-    &[data-tui-host-size='m'] {
-        height: @height-extra-small;
-        line-height: @height-extra-small;
-        min-width: @height-extra-small;
-    }
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-error-bg-night);
+            color: var(--tui-text-01-night);
 
-    &[data-tui-host-size='l'] {
-        height: @height-small;
-        line-height: @height-small;
-        min-width: @height-small;
+            &._hoverable:hover,
+            &._hoverable:active {
+                background-color: var(--tui-error-bg-night-hover);
+            }
+        }
     }
 
-    &[data-tui-background='normal'] {
-        background-color: var(--tui-base-06);
-
-        &._hoverable {
-            &:hover {
-                background-color: var(--tui-base-07);
-            }
+    &[data-tui-host-status='success'] {
+        background-color: var(--tui-success-bg);
+        color: var(--tui-text-01);
 
-            &:active {
-                background-color: var(--tui-base-08);
-            }
+        &:before {
+            content: '';
+            color: var(--tui-success-fill);
         }
-    }
 
-    &[data-tui-background='light'] {
-        background-color: var(--tui-secondary);
+        &._hoverable:hover,
+        &._hoverable:active {
+            background-color: var(--tui-success-bg-hover);
+        }
 
-        &._hoverable {
-            &:hover {
-                background-color: var(--tui-secondary-hover);
-            }
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-success-bg-night);
+            color: var(--tui-text-01-night);
 
-            &:active {
-                background-color: var(--tui-secondary-active);
+            &._hoverable:hover,
+            &._hoverable:active {
+                background-color: var(--tui-success-bg-night-hover);
             }
         }
     }
 
-    &[data-tui-background='gray'] {
-        background-color: var(--tui-base-03);
+    &[data-tui-host-status='warning'] {
+        background-color: var(--tui-warning-bg);
+        color: var(--tui-text-01);
 
-        &._hoverable {
-            &:hover {
-                background-color: var(--tui-base-04);
-            }
+        &:before {
+            content: '';
+            color: var(--tui-warning-fill);
+        }
+
+        &._hoverable:hover,
+        &._hoverable:active {
+            background-color: var(--tui-warning-bg-hover);
+        }
 
-            &:active {
-                background-color: var(--tui-base-05);
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-warning-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background-color: var(--tui-warning-bg-night-hover);
             }
         }
     }
 
-    &[data-tui-background='primary'] {
-        color: var(--tui-primary-text);
+    &[data-tui-host-status='default'] {
+        background-color: var(--tui-base-06);
 
-        &._hoverable {
-            &:hover {
-                background-color: var(--tui-primary-hover);
+        &:not([data-tui-host-mode]) {
+            &._hoverable:hover {
+                background-color: var(--tui-base-07);
             }
 
-            &:active {
-                background-color: var(--tui-primary-active);
+            &._hoverable:active {
+                background-color: var(--tui-base-08);
             }
         }
-    }
 
-    &[data-tui-background='secondary'] {
-        color: var(--tui-accent-text);
-        background-color: var(--tui-accent);
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-clear-inverse);
 
-        &._hoverable {
-            &:hover {
-                background-color: var(--tui-accent-hover);
+            &._hoverable:hover {
+                background-color: var(--tui-clear-inverse-hover);
+            }
+
+            &._hoverable:active {
+                background-color: var(--tui-clear-inverse-active);
             }
 
-            &:active {
-                background-color: var(--tui-accent-active);
+            &:focus:after {
+                border: 2px solid var(--tui-base-01);
             }
         }
-    }
 
-    &[data-tui-background='transparent-dark'] {
-        background-color: var(--tui-clear);
+        &[data-tui-host-mode='dark'] {
+            background-color: var(--tui-clear);
+            color: var(--tui-text-01);
 
-        &._hoverable {
-            &:hover {
+            &._hoverable:hover {
                 background-color: var(--tui-clear-hover);
             }
 
-            &:active {
+            &._hoverable:active {
                 background-color: var(--tui-clear-active);
             }
         }
     }
 
-    &[data-tui-background='transparent-light'] {
-        background-color: var(--tui-clear-inverse);
-
-        &._hoverable {
-            &:hover {
-                background-color: var(--tui-clear-inverse-hover);
-            }
-
-            &:active {
-                background-color: var(--tui-clear-inverse-active);
-            }
-        }
+    &._hoverable {
+        cursor: pointer;
     }
 
-    &[data-tui-background='highlight'] {
-        color: var(--tui-text-01);
-        background-color: var(--tui-base-01);
+    &[data-tui-host-padding='m'] {
+        padding: 0 @padding - 4px;
 
-        &:after {
-            .fullsize();
-            content: '';
-            box-sizing: border-box;
-            border-radius: inherit;
-            border: 2px solid var(--tui-primary);
+        &[data-tui-host-size='s'] {
+            padding: 0 @padding - 6px;
         }
 
-        &._hoverable {
-            &:hover,
-            &:active {
-                background-color: var(--tui-base-01);
-
-                &:after {
-                    border-color: var(--tui-primary-hover);
-                }
-            }
+        &[data-tui-host-size='l'] {
+            padding: 0 @padding - 2px;
         }
     }
 
-    &[data-tui-background='white'] {
-        color: var(--tui-text-01);
-        background-color: var(--tui-base-01);
-
-        &._hoverable {
-            &:hover,
-            &:active {
-                background-color: var(--tui-base-01);
-
-                &:after {
-                    .fullsize();
-                    content: '';
-                    box-sizing: border-box;
-                    border-radius: inherit;
-                    border: 1px solid var(--tui-base-04);
-                }
-            }
+    &[data-tui-host-padding='l'] {
+        padding: 0 @padding;
+
+        &[data-tui-host-size='s'] {
+            padding: 0 @padding - 2px;
         }
     }
 
-    &[data-tui-background='light'],
-    &[data-tui-background='gray'],
-    &[data-tui-background='transparent-dark'] {
-        color: var(--tui-text-01);
+    &[data-tui-host-size='s'] {
+        .text-body-xs();
+        height: @height-extra-extra-small;
+        line-height: @height-extra-extra-small;
+        min-width: @height-extra-extra-small;
     }
 
-    &[data-tui-host-text-color='black'] {
-        color: var(--tui-text-01);
+    &[data-tui-host-size='m'] {
+        height: @height-extra-small;
+        line-height: @height-extra-small;
+        min-width: @height-extra-small;
     }
 
-    &[data-tui-host-text-color='white'] {
-        color: var(--tui-base-01);
+    &[data-tui-host-size='l'] {
+        height: @height-small;
+        line-height: @height-small;
+        min-width: @height-small;
     }
-}
-
-.notification {
-    margin: 0 6px 0 -2px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
 
-    &:not([data-tui-background]) {
-        background-color: var(--tui-base-06);
-    }
+    &:before {
+        display: block;
+        background: currentColor;
+        margin: 0 6px 0 -2px;
+        width: 6px;
+        height: 6px;
+        border-radius: 100%;
 
-    :host[data-tui-host-size='s'] & {
-        width: 4px;
-        height: 4px;
-    }
+        :host[data-tui-host-size='s'] & {
+            width: 4px;
+            height: 4px;
+        }
 
-    :host[data-tui-host-size='l'] & {
-        margin: 0 8px 0 0;
-        width: 8px;
-        height: 8px;
+        :host[data-tui-host-size='l'] & {
+            margin: 0 8px 0 0;
+            width: 8px;
+            height: 8px;
+        }
     }
 }
diff --git a/projects/kit/components/badge/badge.template.html b/projects/kit/components/badge/badge.template.html
deleted file mode 100644
index 4f689b27a4be..000000000000
--- a/projects/kit/components/badge/badge.template.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<span
-    *ngIf="notification"
-    automation-id="tui-badge__notification"
-    class="notification"
-    [tuiBackground]="notificationBackground"
-></span>
-<span automation-id="tui-badge__output-value">{{outputValue}}</span>
diff --git a/projects/kit/components/badge/test/badge.component.spec.ts b/projects/kit/components/badge/test/badge.component.spec.ts
index f61c632296b7..54a5389db1ba 100644
--- a/projects/kit/components/badge/test/badge.component.spec.ts
+++ b/projects/kit/components/badge/test/badge.component.spec.ts
@@ -1,7 +1,6 @@
-import {Component, DebugElement, ViewChild} from '@angular/core';
+import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {TuiNotification, TuiSizeL, TuiSupportColor} from '@taiga-ui/core';
-import {PageObject} from '@taiga-ui/testing';
+import {TuiSizeL} from '@taiga-ui/core';
 import {configureTestSuite} from 'ng-bullet';
 import {TuiStatus} from '../../../enums/status';
 import {TuiBadgeComponent} from '../badge.component';
@@ -10,49 +9,24 @@ import {TuiBadgeModule} from '../badge.module';
 describe('Badge', () => {
     @Component({
         template: `
-            <tui-badge
-                automation-id="tui-badge__component"
-                [notification]="notification"
-                [hoverable]="hoverable"
-                [size]="size"
-                [status]="status"
-                [value]="value"
-            ></tui-badge>
+            <tui-badge [size]="size" [status]="status" [value]="value"></tui-badge>
         `,
     })
     class TestComponent {
         @ViewChild(TuiBadgeComponent, {static: true})
         component: TuiBadgeComponent;
 
-        hoverable = false;
-        notification: TuiNotification | TuiSupportColor | null = null;
+        @ViewChild(TuiBadgeComponent, {read: ElementRef, static: true})
+        element: ElementRef<Element>;
+
         size: TuiSizeL = 'm';
         value: number | string;
-        status: TuiStatus | null = null;
+        status = TuiStatus.Default;
     }
 
     let fixture: ComponentFixture<TestComponent>;
     let testComponent: TestComponent;
     let component: TuiBadgeComponent;
-    let pageObject: PageObject<TestComponent>;
-    const testContext = {
-        get prefix() {
-            return 'tui-badge__';
-        },
-    };
-
-    function getNotification(): DebugElement | null {
-        return pageObject.getByAutomationId(`${testContext.prefix}notification`);
-    }
-
-    function getOutputValue(): HTMLElement {
-        return pageObject.getByAutomationId(`${testContext.prefix}output-value`)!
-            .nativeElement;
-    }
-
-    function getBadge(): DebugElement {
-        return pageObject.getByAutomationId(`${testContext.prefix}component`)!;
-    }
 
     configureTestSuite(() => {
         TestBed.configureTestingModule({
@@ -63,7 +37,6 @@ describe('Badge', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestComponent);
-        pageObject = new PageObject(fixture);
         testComponent = fixture.componentInstance;
         fixture.detectChanges();
         component = testComponent.component;
@@ -74,28 +47,28 @@ describe('Badge', () => {
             testComponent.value = 99;
             fixture.detectChanges();
 
-            expect(getOutputValue().textContent).toEqual('99');
+            expect(testComponent.element.nativeElement.textContent).toEqual('99');
         });
 
         it('если принимает трехзначное и более, выводит сокращение 99+', () => {
             testComponent.value = 999;
             fixture.detectChanges();
 
-            expect(getOutputValue().textContent).toEqual('99+');
+            expect(testComponent.element.nativeElement.textContent).toEqual('99+');
         });
 
         it('если принимает строку, выводит её', () => {
             testComponent.value = 'Текст';
             fixture.detectChanges();
 
-            expect(getOutputValue().textContent).toEqual('Текст');
+            expect(testComponent.element.nativeElement.textContent).toEqual('Текст');
         });
 
         it('если принимает строку, содержащую число, выводит её в неизменном виде', () => {
             testComponent.value = '125';
             fixture.detectChanges();
 
-            expect(getOutputValue().textContent).toEqual('125');
+            expect(testComponent.element.nativeElement.textContent).toEqual('125');
         });
     });
 
@@ -114,26 +87,4 @@ describe('Badge', () => {
             expect(component.padding).toBe('l');
         });
     });
-
-    describe('hoverable:', () => {
-        it('если true, ховер работает', () => {
-            testComponent.hoverable = true;
-            fixture.detectChanges();
-
-            expect(getBadge().classes['_hoverable']).toBe(true);
-        });
-    });
-
-    describe('notification:', () => {
-        it('если не задано, notification нет', () => {
-            expect(getNotification()).toBeNull();
-        });
-
-        it('если передан цвет, notification есть', () => {
-            testComponent.notification = TuiNotification.Info;
-            fixture.detectChanges();
-
-            expect(getNotification()).not.toBeNull();
-        });
-    });
 });
diff --git a/projects/kit/components/badged-content/badged-content.component.ts b/projects/kit/components/badged-content/badged-content.component.ts
index 3eb19f35ce13..eac6cf54f4a2 100644
--- a/projects/kit/components/badged-content/badged-content.component.ts
+++ b/projects/kit/components/badged-content/badged-content.component.ts
@@ -1,14 +1,6 @@
 import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
 import {tuiDefaultProp} from '@taiga-ui/cdk';
-import {
-    sizeBigger,
-    TuiNotification,
-    TuiSizeL,
-    TuiSizeS,
-    TuiSizeXS,
-    TuiSizeXXL,
-    TuiSupportColor,
-} from '@taiga-ui/core';
+import {sizeBigger, TuiSizeL, TuiSizeS, TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 import {TuiStatus} from '@taiga-ui/kit/enums';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
@@ -28,20 +20,15 @@ const BADGE_SIZE: {[key: string]: TuiSizeS | TuiSizeL} = {
     styleUrls: ['./badged-content.style.less'],
 })
 export class TuiBadgedContentComponent {
-    /** @deprecated use CSS color instead, set borderColor to null */
-    @Input()
-    @tuiDefaultProp()
-    borderColor: string | null = '#fff';
-
     @Input()
     @HostBinding('attr.data-tui-host-top')
     @tuiDefaultProp()
-    contentTop: PolymorpheusContent | null = null;
+    contentTop: PolymorpheusContent = '';
 
     @Input()
     @HostBinding('attr.data-tui-host-bottom')
     @tuiDefaultProp()
-    contentBottom: PolymorpheusContent | null = null;
+    contentBottom: PolymorpheusContent = '';
 
     @Input()
     @HostBinding('attr.data-tui-host-size')
@@ -50,26 +37,26 @@ export class TuiBadgedContentComponent {
 
     @Input()
     @tuiDefaultProp()
-    statusTop: TuiNotification | TuiStatus | TuiSupportColor | null = null;
+    colorTop = '';
 
     @Input()
     @tuiDefaultProp()
-    statusBottom: TuiNotification | TuiStatus | TuiSupportColor | null = null;
+    colorBottom = '';
 
     @Input()
     @HostBinding('class._rounded')
     @tuiDefaultProp()
     rounded = false;
 
-    get topNotification(): string | null {
-        return (!this.contentTop && this.statusTop) ||
+    get topNotification(): string {
+        return (!this.contentTop && this.colorTop) ||
             (this.contentTop && this.contentIsNumber(this.contentTop) && this.badgeHidden)
-            ? this.statusTop
-            : null;
+            ? this.colorTop
+            : '';
     }
 
-    get bottomNotification(): string | null {
-        return !this.contentBottom && this.statusBottom ? this.statusBottom : null;
+    get bottomNotification(): string {
+        return !this.contentBottom && this.colorBottom ? this.colorBottom : '';
     }
 
     get badgeSize(): TuiSizeS | TuiSizeL {
@@ -87,7 +74,7 @@ export class TuiBadgedContentComponent {
     get boxShadow(): string {
         const borderWidth = this.sizeBig ? 3 : 2;
 
-        return `0 0 0 ${borderWidth}px ${this.borderColor}`;
+        return `0 0 0 ${borderWidth}px`;
     }
 
     contentIsNumber(content: PolymorpheusContent): boolean {
@@ -97,4 +84,8 @@ export class TuiBadgedContentComponent {
     contentIsString(content: PolymorpheusContent): boolean {
         return typeof content.valueOf() === 'string';
     }
+
+    getStatus(color: string): TuiStatus {
+        return color ? TuiStatus.Custom : TuiStatus.Primary;
+    }
 }
diff --git a/projects/kit/components/badged-content/badged-content.module.ts b/projects/kit/components/badged-content/badged-content.module.ts
index 6eb45ca23dd3..e76c8487d68c 100644
--- a/projects/kit/components/badged-content/badged-content.module.ts
+++ b/projects/kit/components/badged-content/badged-content.module.ts
@@ -1,19 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TuiColorModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiSvgModule} from '@taiga-ui/core';
 import {TuiBadgeModule} from '@taiga-ui/kit/components/badge';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
-
 import {TuiBadgedContentComponent} from './badged-content.component';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        TuiColorModule,
-        PolymorpheusModule,
-        TuiSvgModule,
-        TuiBadgeModule,
-    ],
+    imports: [CommonModule, PolymorpheusModule, TuiSvgModule, TuiBadgeModule],
     declarations: [TuiBadgedContentComponent],
     exports: [TuiBadgedContentComponent],
 })
diff --git a/projects/kit/components/badged-content/badged-content.style.less b/projects/kit/components/badged-content/badged-content.style.less
index 3cd462653390..3a1000465abf 100644
--- a/projects/kit/components/badged-content/badged-content.style.less
+++ b/projects/kit/components/badged-content/badged-content.style.less
@@ -1,11 +1,12 @@
 :host {
     position: relative;
     display: inline-block;
+    color: var(--tui-base-01);
 }
 
 .notification {
     position: absolute;
-    border-radius: 50%;
+    border-radius: 100%;
     box-shadow: 0 0 0 2px currentColor;
 
     &:not([data-tui-background]) {
diff --git a/projects/kit/components/badged-content/badged-content.template.html b/projects/kit/components/badged-content/badged-content.template.html
index 034d8d06a2b7..92871b3d6b89 100644
--- a/projects/kit/components/badged-content/badged-content.template.html
+++ b/projects/kit/components/badged-content/badged-content.template.html
@@ -3,35 +3,35 @@
 <div
     *ngIf="topNotification"
     class="notification notification_top"
-    [tuiBackground]="topNotification"
+    [style.background]="topNotification"
     [style.boxShadow]="boxShadow"
 ></div>
 
 <div
     *ngIf="bottomNotification"
     class="notification notification_bottom"
-    [tuiBackground]="bottomNotification"
+    [style.background]="bottomNotification"
     [style.boxShadow]="boxShadow"
 ></div>
 
 <polymorpheus-outlet
     *ngIf="contentTop"
     class="content content_top"
-    [style.background]="borderColor"
     [style.boxShadow]="boxShadow"
     [content]="contentTop"
 >
     <ng-template let-content>
         <tui-badge
             *ngIf="contentIsNumber(content) && !badgeHidden"
-            [status]="statusTop"
+            [status]="getStatus(colorTop)"
+            [style.backgroundColor]="colorTop"
             [size]="badgeSize"
             [value]="contentTop"
         ></tui-badge>
         <tui-svg
             *ngIf="contentIsString(content)"
             class="icon"
-            [tuiColor]="statusTop"
+            [style.color]="colorTop"
             [src]="content"
         ></tui-svg>
     </ng-template>
@@ -41,20 +41,20 @@
     *ngIf="contentBottom && sizeBig"
     class="content content_bottom"
     [style.boxShadow]="boxShadow"
-    [style.background]="borderColor"
     [content]="contentBottom"
 >
     <ng-template let-content>
         <tui-badge
             *ngIf="contentIsNumber(content)"
-            [status]="statusBottom"
+            [status]="getStatus(colorBottom)"
+            [style.backgroundColor]="colorBottom"
             [size]="badgeSize"
             [value]="contentBottom"
         ></tui-badge>
         <tui-svg
             *ngIf="contentIsString(content)"
             class="icon"
-            [tuiColor]="statusBottom"
+            [style.color]="colorBottom"
             [src]="content"
         ></tui-svg>
     </ng-template>
diff --git a/projects/kit/components/radio/radio.style.less b/projects/kit/components/radio/radio.style.less
index ca51f8da7d91..28b19420d89d 100644
--- a/projects/kit/components/radio/radio.style.less
+++ b/projects/kit/components/radio/radio.style.less
@@ -10,7 +10,7 @@
     position: relative;
     display: block;
     flex-shrink: 0;
-    border-radius: 50%;
+    border-radius: 100%;
 
     &[data-tui-host-size='m'] {
         width: @sizeM;
@@ -30,7 +30,7 @@
 .mark {
     position: absolute;
     background-color: currentColor;
-    border-radius: 50%;
+    border-radius: 100%;
 
     :host[data-tui-host-size='m'] & {
         margin: 4px;
diff --git a/projects/kit/components/tag/tag.component.ts b/projects/kit/components/tag/tag.component.ts
index cb7c6871f653..ef2468907d3c 100644
--- a/projects/kit/components/tag/tag.component.ts
+++ b/projects/kit/components/tag/tag.component.ts
@@ -109,8 +109,7 @@ export class TuiTagComponent {
 
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
-        @Inject(TUI_MODE)
-        mode$: Observable<TuiModeVariants | null>,
+        @Inject(TUI_MODE) mode$: Observable<TuiModeVariants | null>,
     ) {
         mode$.subscribe(mode => {
             this.mode = mode;
diff --git a/projects/kit/components/tag/tag.style.less b/projects/kit/components/tag/tag.style.less
index 43c6e859a379..20fd76c3b071 100644
--- a/projects/kit/components/tag/tag.style.less
+++ b/projects/kit/components/tag/tag.style.less
@@ -24,9 +24,9 @@
         pointer-events: none;
     }
 
-    &:hover,
-    &:active {
-        &._hoverable[data-tui-host-status='custom']:not(._editing):after {
+    &._hoverable:hover,
+    &._hoverable:active {
+        &[data-tui-host-status='custom']:after {
             background-color: var(--tui-clear);
         }
     }
@@ -38,74 +38,132 @@
     &[data-tui-host-status='primary'] {
         background-color: var(--tui-primary);
         color: var(--tui-primary-text);
-    }
 
-    &[data-tui-host-status='default'] {
-        background-color: var(--tui-base-06);
+        &._hoverable:hover {
+            background-color: var(--tui-primary-hover);
+        }
+
+        &._hoverable:active {
+            background-color: var(--tui-primary-active);
+        }
     }
 
-    &[data-tui-host-status='default'][data-tui-host-mode='light'] {
-        background-color: var(--tui-clear-inverse);
+    &[data-tui-host-status='error'] {
+        background-color: var(--tui-error-bg);
+        color: var(--tui-text-01);
 
-        &:hover {
-            background-color: var(--tui-clear-inverse-hover);
+        &._hoverable:hover,
+        &._hoverable:active {
+            background-color: var(--tui-error-bg-hover);
         }
 
-        &:active {
-            background-color: var(--tui-clear-inverse-active);
-        }
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-error-bg-night);
+            color: var(--tui-text-01-night);
 
-        &:focus:after {
-            border: 2px solid var(--tui-base-01);
+            &._hoverable:hover,
+            &._hoverable:active {
+                background-color: var(--tui-error-bg-night-hover);
+            }
         }
     }
 
-    &[data-tui-host-status='default'][data-tui-host-mode='dark'] {
-        background-color: var(--tui-clear);
+    &[data-tui-host-status='success'] {
+        background-color: var(--tui-success-bg);
         color: var(--tui-text-01);
 
-        &:hover {
-            background-color: var(--tui-clear-hover);
+        &._hoverable:hover,
+        &._hoverable:active {
+            background-color: var(--tui-success-bg-hover);
         }
 
-        &:active {
-            background-color: var(--tui-clear-active);
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-success-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background-color: var(--tui-success-bg-night-hover);
+            }
         }
     }
 
-    &._editing {
-        background: transparent !important;
-    }
+    &[data-tui-host-status='warning'] {
+        background-color: var(--tui-warning-bg);
+        color: var(--tui-text-01);
 
-    &._disabled {
-        pointer-events: none;
-        opacity: var(--tui-disabled-opacity);
+        &._hoverable:hover,
+        &._hoverable:active {
+            background-color: var(--tui-warning-bg-hover);
+        }
+
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-warning-bg-night);
+            color: var(--tui-text-01-night);
+
+            &._hoverable:hover,
+            &._hoverable:active {
+                background-color: var(--tui-warning-bg-night-hover);
+            }
+        }
     }
 
-    &._hoverable {
-        cursor: pointer;
+    &[data-tui-host-status='default'] {
+        background-color: var(--tui-base-06);
 
-        &[data-tui-host-status='primary'] {
-            &:hover {
-                background-color: var(--tui-primary-hover);
+        &:not([data-tui-host-mode]) {
+            &._hoverable:hover {
+                background-color: var(--tui-base-07);
             }
 
-            &:active {
-                background-color: var(--tui-primary-active);
+            &._hoverable:active {
+                background-color: var(--tui-base-08);
             }
         }
 
-        &[data-tui-host-status='default']:not([data-tui-host-mode]) {
-            &:hover {
-                background-color: var(--tui-base-07);
+        &[data-tui-host-mode='light'] {
+            background-color: var(--tui-clear-inverse);
+
+            &._hoverable:hover {
+                background-color: var(--tui-clear-inverse-hover);
             }
 
-            &:active {
-                background-color: var(--tui-base-08);
+            &._hoverable:active {
+                background-color: var(--tui-clear-inverse-active);
+            }
+
+            &:focus:after {
+                border: 2px solid var(--tui-base-01);
+            }
+        }
+
+        &[data-tui-host-mode='dark'] {
+            background-color: var(--tui-clear);
+            color: var(--tui-text-01);
+
+            &._hoverable:hover {
+                background-color: var(--tui-clear-hover);
+            }
+
+            &._hoverable:active {
+                background-color: var(--tui-clear-active);
             }
         }
     }
 
+    &._editing {
+        background: transparent !important;
+    }
+
+    &._disabled {
+        pointer-events: none;
+        opacity: var(--tui-disabled-opacity);
+    }
+
+    &._hoverable {
+        cursor: pointer;
+    }
+
     &._autocolor {
         color: var(--tui-text-01);
     }
diff --git a/projects/kit/components/toggle/toggle.style.less b/projects/kit/components/toggle/toggle.style.less
index 9db24a54a5fb..ec69db389cf9 100644
--- a/projects/kit/components/toggle/toggle.style.less
+++ b/projects/kit/components/toggle/toggle.style.less
@@ -69,7 +69,7 @@
 .circle {
     margin: 2px 0;
     flex-shrink: 0;
-    border-radius: 50%;
+    border-radius: 100%;
     background-color: var(--tui-base-01);
 
     :host._disabled &_light {
diff --git a/projects/kit/enums/status.ts b/projects/kit/enums/status.ts
index 92b98f94ece5..ed035e815e84 100644
--- a/projects/kit/enums/status.ts
+++ b/projects/kit/enums/status.ts
@@ -2,16 +2,7 @@ export const enum TuiStatus {
     Default = 'default',
     Primary = 'primary',
     Custom = 'custom',
-    // TODO: Deprecated below, remove after badges are refactored
-    Light = 'light',
-    Gray = 'gray',
     Success = 'success',
     Error = 'error',
-    Secondary = 'secondary',
-    TransparentDark = 'transparent-dark',
-    TransparentLight = 'transparent-light',
-    Highlight = 'highlight',
-    White = 'white',
-    Inherit = 'inherit',
-    Normal = 'normal',
+    Warning = 'warning',
 }