diff --git a/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.scss b/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.scss
index 0c05c9c284..e0458d42d7 100644
--- a/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.scss
+++ b/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.scss
@@ -12,7 +12,7 @@
 @use '../../../../../../libs/shared/src/lib/sass/mixins/appearance/config' as
 	appearance-config with (
 	$appearances: filled ghost ghost-light outlined outlined-light duotone subtle
-		fieldset listitem,
+		subtle-light fieldset listitem,
 	$states: idle hover active selected checked checkedAndHover selectedAndHover
 		disabled selectedAndDisabled readonly,
 	$default: filled
diff --git a/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.ts b/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.ts
index 88d3c13466..db3498393e 100644
--- a/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.ts
+++ b/apps/docs/assets/scripts/components/appearance-ui/appearance-ui.ts
@@ -19,6 +19,7 @@ export type AppearanceUIAppearance = Extract<
 	| Appearance.Duotone
 	| Appearance.Fieldset
 	| Appearance.Subtle
+	| Appearance.SubtleLight
 	| Appearance.Listitem
 >;
 
diff --git a/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Chromium-linux.png b/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Chromium-linux.png
index ef88d0a049..ac016a35b6 100644
Binary files a/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Chromium-linux.png and b/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Chromium-linux.png differ
diff --git a/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Firefox-linux.png b/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Firefox-linux.png
index cff8ab2f18..11e2802f6b 100644
Binary files a/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Firefox-linux.png and b/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Firefox-linux.png differ
diff --git a/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Safari-linux.png b/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Safari-linux.png
index 79f7d65a0a..e1ae08d381 100644
Binary files a/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Safari-linux.png and b/apps/docs/assets/scripts/components/appearance-ui/ui.test.ts-snapshots/snapshots-appearance-ui-Desktop-Safari-linux.png differ
diff --git a/apps/docs/content/designs/appearance.md b/apps/docs/content/designs/appearance.md
index fb58826054..8eff4e85c4 100644
--- a/apps/docs/content/designs/appearance.md
+++ b/apps/docs/content/designs/appearance.md
@@ -619,4 +619,64 @@ currently ghost-light appearance is being used only with `accent` connotation
 </div>
 ```
 
-## Last update: 06.2024
+## Subtle-Light
+
+### Used in
+
+`badge`,
+
+```html preview
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: 80px auto;
+		inline-size: 820px;
+		row-gap: 12px;
+		align-items: center;
+	}
+	span {
+		max-width: 80px;
+	}
+	.not-set {
+		grid-column: 1/-1;
+	}
+	.one-example {
+		grid-column: 2/-1;
+	}
+</style>
+<div class="grid">
+	<span><b>idle</b></span>
+	<docs-appearance-ui appearance="subtle-light"></docs-appearance-ui>
+
+	<span><b>hover</b></span>
+	<docs-appearance-ui hovered appearance="subtle-light"></docs-appearance-ui>
+
+	<span><b>active</b></span>
+	<docs-appearance-ui active appearance="subtle-light"></docs-appearance-ui>
+
+	<span><b>selected</b></span>
+	<docs-appearance-ui selected appearance="subtle-light"></docs-appearance-ui>
+
+	<span><b>selected & hover</b></span>
+	<docs-appearance-ui
+		selected
+		hovered
+		appearance="subtle-light"
+	></docs-appearance-ui>
+
+	<span><b>disabled</b></span>
+	<docs-appearance-ui
+		disabled
+		appearance="subtle-light"
+		class="one-example"
+	></docs-appearance-ui>
+
+	<span><b>selected & disabled</b></span>
+	<span class="one-example" class="one-example">not set</span>
+
+	<span><b>readonly</b></span>
+	<span class="one-example" class="one-example">not set</span>
+</div>
+```
+
+## Last update: 10.2024
diff --git a/libs/components/src/lib/badge/README.md b/libs/components/src/lib/badge/README.md
index ec0a3c9f75..f2f356628a 100644
--- a/libs/components/src/lib/badge/README.md
+++ b/libs/components/src/lib/badge/README.md
@@ -71,12 +71,13 @@ Use the `icon-trailing` attribute to control whether the icon is aligned to the
 
 Set the `appearance` attribute to change the badge's appearance.
 
-- Type: `'filled'` | `'subtle'` | `'duotone'`
+- Type: `'filled'` | `'subtle'` | `'subtle-light'` | `'duotone'`
 - Default: `'filled'`
 
 ```html preview
 <vwc-badge text="filled" appearance="filled"></vwc-badge>
 <vwc-badge text="subtle" appearance="subtle"></vwc-badge>
+<vwc-badge text="subtle-light" appearance="subtle-light"></vwc-badge>
 <vwc-badge text="duotone" appearance="duotone"></vwc-badge>
 ```
 
@@ -128,6 +129,42 @@ It accepts a subset of predefined values.
 <vwc-badge text="alert" appearance="subtle" connotation="alert"></vwc-badge>
 ```
 
+#### Subtle-Light badge with connotation
+
+```html preview
+<vwc-badge
+	text="accent"
+	appearance="subtle-light"
+	connotation="accent"
+></vwc-badge>
+<vwc-badge text="cta" appearance="subtle-light" connotation="cta"></vwc-badge>
+<vwc-badge
+	text="information"
+	appearance="subtle-light"
+	connotation="information"
+></vwc-badge>
+<vwc-badge
+	text="announcement"
+	appearance="subtle-light"
+	connotation="announcement"
+></vwc-badge>
+<vwc-badge
+	text="success"
+	appearance="subtle-light"
+	connotation="success"
+></vwc-badge>
+<vwc-badge
+	text="warning"
+	appearance="subtle-light"
+	connotation="warning"
+></vwc-badge>
+<vwc-badge
+	text="alert"
+	appearance="subtle-light"
+	connotation="alert"
+></vwc-badge>
+```
+
 #### Duotone badge with connotation
 
 ```html preview
diff --git a/libs/components/src/lib/badge/badge.scss b/libs/components/src/lib/badge/badge.scss
index 479936882f..a41de85863 100644
--- a/libs/components/src/lib/badge/badge.scss
+++ b/libs/components/src/lib/badge/badge.scss
@@ -2,13 +2,14 @@
 @use 'partials/variables' as variables;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent cta success alert warning information announcement,
-	$shades: primary primary-text intermediate soft contrast pale fierce firm-all,
+	$shades: primary primary-text intermediate soft contrast pale fierce
+		fierce-primary firm firm-all,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
 @use '../../../../shared/src/lib/sass/mixins/appearance/config' as
 	appearance-config with (
-	$appearances: filled duotone subtle,
+	$appearances: filled duotone subtle subtle-light,
 	$states: idle,
 	$default: filled
 );
diff --git a/libs/components/src/lib/badge/badge.ts b/libs/components/src/lib/badge/badge.ts
index 6637732d23..f7a872d1cb 100644
--- a/libs/components/src/lib/badge/badge.ts
+++ b/libs/components/src/lib/badge/badge.ts
@@ -26,7 +26,10 @@ export type BadgeConnotation = Extract<
  */
 export type BadgeAppearance = Extract<
 	Appearance,
-	Appearance.Filled | Appearance.Duotone | Appearance.Subtle
+	| Appearance.Filled
+	| Appearance.Duotone
+	| Appearance.Subtle
+	| Appearance.SubtleLight
 >;
 
 /**
diff --git a/libs/components/src/lib/badge/ui.test.ts b/libs/components/src/lib/badge/ui.test.ts
index 8b7fa9d5c1..51c74eba83 100644
--- a/libs/components/src/lib/badge/ui.test.ts
+++ b/libs/components/src/lib/badge/ui.test.ts
@@ -34,6 +34,13 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		<vwc-badge text='success' appearance='subtle' connotation='success'></vwc-badge>
 		<vwc-badge text='warning' appearance='subtle' connotation='warning'></vwc-badge>
 		<vwc-badge text='alert' appearance='subtle' connotation='alert'></vwc-badge>
+		<vwc-badge text='accent' appearance='subtle-light' connotation='accent'></vwc-badge>
+		<vwc-badge text='cta' appearance='subtle-light' connotation='cta'></vwc-badge>
+		<vwc-badge text='information' appearance='subtle-light' connotation='information'></vwc-badge>
+		<vwc-badge text='announcement' appearance='subtle-light' connotation='announcement'></vwc-badge>
+		<vwc-badge text='success' appearance='subtle-light' connotation='success'></vwc-badge>
+		<vwc-badge text='warning' appearance='subtle-light' connotation='warning'></vwc-badge>
+		<vwc-badge text='alert' appearance='subtle-light' connotation='alert'></vwc-badge>
 		<vwc-badge text='accent' appearance='duotone' connotation='accent'></vwc-badge>
 		<vwc-badge text='cta' appearance='duotone' connotation='cta'></vwc-badge>
 		<vwc-badge text='information' appearance='duotone' connotation='information'></vwc-badge>
diff --git a/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Chromium-linux.png b/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Chromium-linux.png
index f36a8897a7..fdb6057e95 100644
Binary files a/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Chromium-linux.png and b/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Chromium-linux.png differ
diff --git a/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Firefox-linux.png b/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Firefox-linux.png
index 28064d5ce7..65cc3d643d 100644
Binary files a/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Firefox-linux.png and b/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Firefox-linux.png differ
diff --git a/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Safari-linux.png b/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Safari-linux.png
index abb7df8d2e..16fb490e1d 100644
Binary files a/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Safari-linux.png and b/libs/components/src/lib/badge/ui.test.ts-snapshots/snapshots-badge-Desktop-Safari-linux.png differ
diff --git a/libs/components/src/lib/enums.ts b/libs/components/src/lib/enums.ts
index 9c60e6a8a7..9f960e6888 100644
--- a/libs/components/src/lib/enums.ts
+++ b/libs/components/src/lib/enums.ts
@@ -28,6 +28,7 @@ export enum Appearance {
 	Duotone = 'duotone',
 	Fieldset = 'fieldset',
 	Subtle = 'subtle',
+	SubtleLight = 'subtle-light',
 	Ghost = 'ghost',
 	GhostLight = 'ghost-light',
 	OutlinedLight = 'outlined-light',
diff --git a/libs/shared/src/lib/sass/mixins/appearance/_variables.scss b/libs/shared/src/lib/sass/mixins/appearance/_variables.scss
index fecd8bd4ee..621c86612d 100644
--- a/libs/shared/src/lib/sass/mixins/appearance/_variables.scss
+++ b/libs/shared/src/lib/sass/mixins/appearance/_variables.scss
@@ -44,6 +44,16 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(soft)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{connotation.get-connotation-token(contrast)}),
+			fill:
+				color-mix(
+					in srgb,
+					var(#{connotation.get-connotation-token(primary)}),
+					transparent 85%
+				),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: transparent,
@@ -106,6 +116,16 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(faint)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{connotation.get-connotation-token(contrast)}),
+			fill:
+				color-mix(
+					in srgb,
+					var(#{connotation.get-connotation-token(primary)}),
+					transparent 75%
+				),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(faint)}),
@@ -163,6 +183,16 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(dim)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{connotation.get-connotation-token(contrast)}),
+			fill:
+				color-mix(
+					in srgb,
+					var(#{connotation.get-connotation-token(primary)}),
+					transparent 65%
+				),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(soft)}),
@@ -210,6 +240,11 @@ $states-mapping: (
 			fill: var(#{constants.$vvd-color-neutral-100}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{constants.$vvd-color-neutral-300}),
+			fill: var(#{constants.$vvd-color-neutral-100}),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{constants.$vvd-color-neutral-300}),
 			fill: transparent,
@@ -257,6 +292,11 @@ $states-mapping: (
 			fill: notset,
 			outline: notset,
 		),
+		subtle-light: (
+			text: notset,
+			fill: notset,
+			outline: notset,
+		),
 		listitem: (
 			text: var(#{constants.$vvd-color-neutral-600}),
 			fill: transparent,
@@ -314,6 +354,11 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(pale)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{constants.$vvd-color-canvas}),
+			fill: var(#{connotation.get-connotation-token(firm)}),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(soft)}),
@@ -371,6 +416,16 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(pale)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{connotation.get-connotation-token(primary-text)}),
+			fill:
+				color-mix(
+					in srgb,
+					var(#{connotation.get-connotation-token(fierce-primary)}),
+					transparent 10%
+				),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(dim)}),
@@ -418,6 +473,11 @@ $states-mapping: (
 			fill: notset,
 			outline: notset,
 		),
+		subtle-light: (
+			text: notset,
+			fill: notset,
+			outline: notset,
+		),
 		listitem: (
 			text: var(#{constants.$vvd-color-neutral-300}),
 			fill: var(#{constants.$vvd-color-neutral-200}),
@@ -470,6 +530,11 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(pale)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{constants.$vvd-color-canvas}),
+			fill: var(#{connotation.get-connotation-token(firm)}),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(soft)}),
@@ -522,6 +587,16 @@ $states-mapping: (
 			fill: var(#{connotation.get-connotation-token(pale)}),
 			outline: transparent,
 		),
+		subtle-light: (
+			text: var(#{connotation.get-connotation-token(primary-text)}),
+			fill:
+				color-mix(
+					in srgb,
+					var(#{connotation.get-connotation-token(fierce-primary)}),
+					transparent 10%
+				),
+			outline: transparent,
+		),
 		listitem: (
 			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(dim)}),