diff --git a/src/lib/providers/prime-preset/tokens/components/badge.ts b/src/lib/providers/prime-preset/tokens/components/badge.ts
index 9aff43a4..247f96c5 100644
--- a/src/lib/providers/prime-preset/tokens/components/badge.ts
+++ b/src/lib/providers/prime-preset/tokens/components/badge.ts
@@ -1,25 +1,38 @@
 export const badgeCss = ({ dt }: { dt: (token: string) => string }): string => `
-  /* ─── Badge extend: публикуем кастомные переменные в :root ─── */
-  :root {
-    --p-badge-extend-dot-success-background: ${dt('badge.extend.extDot.success.background')};
-    --p-badge-extend-dot-info-background:    ${dt('badge.extend.extDot.info.background')};
-    --p-badge-extend-dot-warn-background:    ${dt('badge.extend.extDot.warn.background')};
-    --p-badge-extend-dot-danger-background:  ${dt('badge.extend.extDot.danger.background')};
-    --p-badge-extend-dot-lg-size:            ${dt('badge.extend.extDot.lg.size')};
-    --p-badge-extend-dot-xlg-size:           ${dt('badge.extend.extDot.xlg.size')};
-    --p-badge-extend-padding:                ${dt('badge.extend.ext.padding')};
-  }
+.p-badge.p-component {
+  font-family: ${dt('fonts.fontFamily.heading')};
+  line-height: ${dt('fonts.lineHeight.350')};
+}
 
-  /* ─── Dot-вариант: бейдж без значения ─── */
-  .p-badge.p-badge-dot {
-    padding: var(--p-badge-extend-padding);
-  }
+.p-badge.p-badge-dot {
+  padding: ${dt('badge.extend.ext.padding')};
+}
 
-  .p-badge.p-badge-dot.p-badge-success { background: var(--p-badge-extend-dot-success-background); }
-  .p-badge.p-badge-dot.p-badge-info    { background: var(--p-badge-extend-dot-info-background); }
-  .p-badge.p-badge-dot.p-badge-warn    { background: var(--p-badge-extend-dot-warn-background); }
-  .p-badge.p-badge-dot.p-badge-danger  { background: var(--p-badge-extend-dot-danger-background); }
+.p-badge.p-badge-dot.p-badge-success {
+  background: ${dt('badge.extend.extDot.success.background')};
+}
 
-  .p-badge.p-badge-dot.p-badge-lg  { min-width: unset; width: var(--p-badge-extend-dot-lg-size);  height: var(--p-badge-extend-dot-lg-size); }
-  .p-badge.p-badge-dot.p-badge-xl  { min-width: unset; width: var(--p-badge-extend-dot-xlg-size); height: var(--p-badge-extend-dot-xlg-size); }
+.p-badge.p-badge-dot.p-badge-info {
+  background: ${dt('badge.extend.extDot.info.background')};
+}
+
+.p-badge.p-badge-dot.p-badge-warn {
+  background: ${dt('badge.extend.extDot.warn.background')};
+}
+
+.p-badge.p-badge-dot.p-badge-danger {
+  background: ${dt('badge.extend.extDot.danger.background')};
+}
+
+.p-badge.p-badge-dot.p-badge-lg {
+  min-width: unset;
+  width: ${dt('badge.extend.extDot.lg.size')};
+  height: ${dt('badge.extend.extDot.lg.size')};
+}
+
+.p-badge.p-badge-dot.p-badge-xl {
+  min-width: unset;
+  width: ${dt('badge.extend.extDot.xlg.size')};
+  height: ${dt('badge.extend.extDot.xlg.size')};
+}
 `;
diff --git a/src/stories/components/badge/examples/badge-dot.component.ts b/src/stories/components/badge/examples/badge-dot.component.ts
index bd9f80fd..f5c03604 100644
--- a/src/stories/components/badge/examples/badge-dot.component.ts
+++ b/src/stories/components/badge/examples/badge-dot.component.ts
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/angular';
 import { ExtraBadgeSeverity, ExtraBadgeSize, ExtraBadgeComponent } from '../../../../lib/components/badge/badge.component';
 
 const template = `
-<div class="bg-surface-ground p-4">
+<div class="p-4">
   <extra-badge [severity]="severity" [size]="size"></extra-badge>
 </div>
 `;
diff --git a/src/stories/components/badge/examples/badge-severity.component.ts b/src/stories/components/badge/examples/badge-severity.component.ts
index 056a8880..309a2e8c 100644
--- a/src/stories/components/badge/examples/badge-severity.component.ts
+++ b/src/stories/components/badge/examples/badge-severity.component.ts
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/angular';
 import { ExtraBadgeSeverity, ExtraBadgeSize, ExtraBadgeComponent } from '../../../../lib/components/badge/badge.component';
 
 const template = `
-<div class="bg-surface-ground p-4">
+<div class="p-4">
   <extra-badge [value]="value" [severity]="severity" [size]="size"></extra-badge>
 </div>
 `;
diff --git a/src/stories/components/badge/examples/badge-sizes.component.ts b/src/stories/components/badge/examples/badge-sizes.component.ts
index 3561abbf..34195d2e 100644
--- a/src/stories/components/badge/examples/badge-sizes.component.ts
+++ b/src/stories/components/badge/examples/badge-sizes.component.ts
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/angular';
 import { ExtraBadgeSize, ExtraBadgeComponent } from '../../../../lib/components/badge/badge.component';
 
 const template = `
-<div class="bg-surface-ground p-4">
+<div class="p-4">
   <extra-badge [value]="value" [size]="size"></extra-badge>
 </div>
 `;