diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index a095a28bb..a971a5fe7 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -28,36 +28,36 @@ Use the `appearance` attribute to change the badge's visual appearance.
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
+  <wa-badge appearance="accent outlined" variant="neutral">A+O</wa-badge>
+  <wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
   <wa-badge appearance="tinted outlined" variant="neutral">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
+  <wa-badge appearance="accent outlined" variant="brand">A+O</wa-badge>
+  <wa-badge appearance="accent" variant="brand">Accent</wa-badge>
   <wa-badge appearance="tinted outlined" variant="brand">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="success">Filled</wa-badge>
+  <wa-badge appearance="accent outlined" variant="success">A+O</wa-badge>
+  <wa-badge appearance="accent" variant="success">Accent</wa-badge>
   <wa-badge appearance="tinted outlined" variant="success">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
+  <wa-badge appearance="accent outlined" variant="warning">A+O</wa-badge>
+  <wa-badge appearance="accent" variant="warning">Accent</wa-badge>
   <wa-badge appearance="tinted outlined" variant="warning">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
 </div>
 <div>
-  <wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
-  <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
+  <wa-badge appearance="accent outlined" variant="danger">A+O</wa-badge>
+  <wa-badge appearance="accent" variant="danger">Accent</wa-badge>
   <wa-badge appearance="tinted outlined" variant="danger">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 501d444dd..a34885c11 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -29,31 +29,31 @@ Use the `appearance` attribute to change the button's visual appearance.
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
-  <wa-button appearance="filled" variant="neutral">Filled</wa-button>
+  <wa-button appearance="accent" variant="neutral">Accent</wa-button>
   <wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
   <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
   <wa-button appearance="plain" variant="neutral">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-button appearance="filled" variant="brand">Filled</wa-button>
+  <wa-button appearance="accent" variant="brand">Accent</wa-button>
   <wa-button appearance="tinted" variant="brand">Tinted</wa-button>
   <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
   <wa-button appearance="plain" variant="brand">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-button appearance="filled" variant="success">Filled</wa-button>
+  <wa-button appearance="accent" variant="success">Accent</wa-button>
   <wa-button appearance="tinted" variant="success">Tinted</wa-button>
   <wa-button appearance="outlined" variant="success">Outlined</wa-button>
   <wa-button appearance="plain" variant="success">Text</wa-button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-button appearance="filled" variant="warning">Filled</wa-button>
+  <wa-button appearance="accent" variant="warning">Accent</wa-button>
   <wa-button appearance="tinted" variant="warning">Tinted</wa-button>
   <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
   <wa-button appearance="plain" variant="warning">Text</wa-button>
 </div>
 <div>
-  <wa-button appearance="filled" variant="danger">Filled</wa-button>
+  <wa-button appearance="accent" variant="danger">Accent</wa-button>
   <wa-button appearance="tinted" variant="danger">Tinted</wa-button>
   <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
   <wa-button appearance="plain" variant="danger">Text</wa-button>
diff --git a/docs/docs/essentials/button.md b/docs/docs/essentials/button.md
index 9756cf8ec..0f981eb84 100644
--- a/docs/docs/essentials/button.md
+++ b/docs/docs/essentials/button.md
@@ -32,31 +32,31 @@ Use the appearance utility classes to change the button's visual appearance:
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
-  <button class="wa-filled wa-neutral">Filled</button>
+  <button class="wa-accent wa-neutral">Accent</button>
   <button class="wa-tinted wa-neutral">Tinted</button>
   <button class="wa-outlined wa-neutral">Outlined</button>
   <button class="wa-plain wa-neutral">Text</button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <button class="wa-filled wa-brand">Filled</button>
+  <button class="wa-accent wa-brand">Accent</button>
   <button class="wa-tinted wa-brand">Tinted</button>
   <button class="wa-outlined wa-brand">Outlined</button>
   <button class="wa-plain wa-brand">Text</button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <button class="wa-filled wa-success">Filled</button>
+  <button class="wa-accent wa-success">Accent</button>
   <button class="wa-tinted wa-success">Tinted</button>
   <button class="wa-outlined wa-success">Outlined</button>
   <button class="wa-plain wa-success">Text</button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <button class="wa-filled wa-warning">Filled</button>
+  <button class="wa-accent wa-warning">Accent</button>
   <button class="wa-tinted wa-warning">Tinted</button>
   <button class="wa-outlined wa-warning">Outlined</button>
   <button class="wa-plain wa-warning">Text</button>
 </div>
 <div>
-  <button class="wa-filled wa-danger">Filled</button>
+  <button class="wa-accent wa-danger">Accent</button>
   <button class="wa-tinted wa-danger">Tinted</button>
   <button class="wa-outlined wa-danger">Outlined</button>
   <button class="wa-plain wa-danger">Text</button>
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 502e43a97..e1a8a011a 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -30,7 +30,7 @@ export default class WaBadge extends WebAwesomeElement {
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
 
   /** The badge's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' = 'filled';
+  @property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' = 'accent';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index c0a6a4f4f..9c4bc2fbe 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -73,7 +73,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' | 'plain' = 'filled';
+  @property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' | 'plain' = 'accent';
 
   /** The button's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
diff --git a/src/styles/native/input.css b/src/styles/native/input.css
index cda03fcb9..c095753e3 100644
--- a/src/styles/native/input.css
+++ b/src/styles/native/input.css
@@ -22,9 +22,9 @@
     --box-shadow: initial;
   }
 
-  /* Set custom properties for filled input variants via class="wa-filled" or <wa-input filled> */
-  input:where(:not(:host input)).wa-filled:where(&),
-  :host(.wa-filled:where(&)),
+  /* Set custom properties for filled input variants via class="wa-accent" or <wa-input filled> */
+  input:where(:not(:host input)).wa-accent:where(&),
+  :host(.wa-accent:where(&)),
   :host([filled]:where(&)) {
     --background-color: var(--wa-color-neutral-fill-quiet);
     --border-color: var(--background-color);
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
index f54621e03..587d92524 100644
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -11,8 +11,8 @@
   --text-color-hover: var(--wa-color-on-quiet);
 }
 
-.wa-filled,
-:host([appearance~='filled']) {
+.wa-accent,
+:host([appearance~='accent']) {
   --background-color: var(--wa-color-fill-loud);
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));