diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css
index 07fdb6928..ed1a0a8d6 100644
--- a/src/components/badge/badge.css
+++ b/src/components/badge/badge.css
@@ -3,35 +3,12 @@
   --border-radius: var(--wa-border-radius-xs);
   --border-style: var(--wa-border-style);
   --border-width: var(--wa-border-width-s);
+  --background-color: var(--wa-color-fill-loud);
+  --content-color: var(--wa-color-on-loud);
 
   display: inline-flex;
 }
 
-:host([variant='brand']) {
-  --background-color: var(--wa-color-brand-fill-loud);
-  --content-color: var(--wa-color-brand-on-loud);
-}
-
-:host([variant='success']) {
-  --background-color: var(--wa-color-success-fill-loud);
-  --content-color: var(--wa-color-success-on-loud);
-}
-
-:host([variant='warning']) {
-  --background-color: var(--wa-color-warning-fill-loud);
-  --content-color: var(--wa-color-warning-on-loud);
-}
-
-:host([variant='neutral']) {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --content-color: var(--wa-color-neutral-on-loud);
-}
-
-:host([variant='danger']) {
-  --background-color: var(--wa-color-danger-fill-loud);
-  --content-color: var(--wa-color-danger-on-loud);
-}
-
 .badge {
   display: inline-flex;
   align-items: center;
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index dca1a1573..b50f3f39e 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import variantStyles from '../../styles/utilities/variants.css';
 import styles from './badge.css';
 
 /**
@@ -23,7 +24,7 @@ import styles from './badge.css';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static shadowStyle = styles;
+  static shadowStyle = [variantStyles, styles];
 
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
@@ -40,11 +41,6 @@ export default class WaBadge extends WebAwesomeElement {
         part="base"
         class=${classMap({
           badge: true,
-          'badge--brand': this.variant === 'brand',
-          'badge--success': this.variant === 'success',
-          'badge--neutral': this.variant === 'neutral',
-          'badge--warning': this.variant === 'warning',
-          'badge--danger': this.variant === 'danger',
           'badge--pill': this.pill,
           'badge--pulse': this.pulse,
         })}