diff --git a/package.json b/package.json
index 3c75fc32a..483ca9f7d 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
     "build:patternlab-css": "sass source/css/patternlab.scss:out/css/patternlab.css --style=compressed --embed-sources --load-path=node_modules",
     "build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",
-    "build-test:css": "sass build/scss/_db-ui-base.scss:build/css/db-ui-base.css --load-path=node_modules",
+    "build-test:css": "sass build/scss/:build/css/ --load-path=node_modules",
     "build": "npm-run-all copy:assets build:* pl:build",
     "clean": "rm -rf build",
     "lint": "npm-run-all -p lint:*",
diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js
index 565fcd160..d7cf58b9a 100644
--- a/scripts/color-classes-generator.js
+++ b/scripts/color-classes-generator.js
@@ -20,18 +20,8 @@ const generateBGVariants = (value, index) => {
         @extend %${prefix}-bg-${value}-${index}-ia;
     }
 
-    a {
-         @extend %${prefix}-bg-${value}-${index}-text-ia;
-    }
-
     .db-weak {
         @extend %weak;
-
-        &-ia,
-        &[data-variant="ia"],
-        a {
-             @extend %weak-ia;
-        }
     }
 }
 `;
@@ -45,7 +35,7 @@ const generateBGVariants = (value, index) => {
  * @returns scss string
  */
 exports.generateColorUtilitityClasses = (colorToken) => {
-	let output = '';
+	let output = '@import "variables";\n@import "color-placeholder";\n';
 
 	for (const [, value] of Object.keys(colorToken).entries()) {
 		output += `/**
@@ -54,17 +44,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 `;
 		// Text colors with interactive variant, e.g. primary
 		if (colorToken[value].enabled) {
-			output += `
-.${prefix}-text-${value} {
-    @extend %${prefix}-text-${value};
-
-    &-ia,
-    &[data-variant="ia"],
-    a {
-        @extend %${prefix}-text-${value}-ia;
-    }
-}`;
-
 			output += `
 .${prefix}-bg-${value} {
     @extend %${prefix}-bg-${value};
@@ -73,10 +52,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
     &[data-variant="ia"] {
         @extend %${prefix}-bg-${value}-ia;
     }
-
-    a {
-        @extend %${prefix}-bg-${value}-text-ia;
-    }
 }`;
 		}
 
diff --git a/scripts/color-placeholders-generator.js b/scripts/color-placeholders-generator.js
index f96029f47..46caf5000 100644
--- a/scripts/color-placeholders-generator.js
+++ b/scripts/color-placeholders-generator.js
@@ -7,12 +7,16 @@ const prefix = 'db';
 
 const generateInteractiveVariants = (currentColorObject, cssProp) => {
 	return `
-        &:hover {
-            ${cssProp}: $${prefix}-${currentColorObject.hover.name};
-        }
+		&:not(:disabled) {
+			&:hover {
+				${cssProp}: $${prefix}-${currentColorObject.hover.name};
+    			--db-current-${cssProp}: #{$${prefix}-${currentColorObject.hover.name}};
+			}
 
-        &:active {
-            ${cssProp}: $${prefix}-${currentColorObject.pressed.name};
+			&:active {
+				${cssProp}: $${prefix}-${currentColorObject.pressed.name};
+				--db-current-${cssProp}: #{$${prefix}-${currentColorObject.pressed.name}};
+			}
         }
         `;
 };
@@ -24,38 +28,54 @@ const generateInteractiveVariants = (currentColorObject, cssProp) => {
 
 const generateBGVariants = (
 	value,
-	index,
+	variant,
 	currentColorObject,
 	baseColorObject
 ) => {
-	return `
-%${prefix}-bg-${value}-${index} {
+	const placeholderName = `${prefix}-bg-${value}${
+		variant ? `-${variant}` : ''
+	}`;
+	let result = `
+%${placeholderName}-ia-states {
+	${generateInteractiveVariants(currentColorObject, 'background-color')}
+}
+%${placeholderName} {
     background-color: $${prefix}-${currentColorObject.enabled.name};
     color: $${prefix}-${baseColorObject.enabled.name};
 
-    &-ia,
-    &[data-variant="ia"] {
-        @extend %${prefix}-bg-${value}-${index};
-        ${generateInteractiveVariants(currentColorObject, 'background-color')}
+    --db-current-background-color: #{$${prefix}-${
+		currentColorObject.enabled.name
+	}};
+    --db-current-color: #{$${prefix}-${baseColorObject.enabled.name}};
+
+    &-ia, &[data-variant="ia"] {
+		@extend %${placeholderName};
+		@extend %${placeholderName}-ia-states;
     }
 
-    &-text-ia,
-    &[data-variant="text-ia"] {
-        color: $${prefix}-${baseColorObject.enabled.name};
-         ${generateInteractiveVariants(baseColorObject, 'color')}
+    button {
+		@extend %${placeholderName}-ia-states;
     }
 
+    a {
+       ${generateInteractiveVariants(baseColorObject, 'color')}
+    }
+
+`;
+	if (baseColorObject.weak) {
+		result += `
     %weak {
         color: $${prefix}-${baseColorObject.weak.enabled.name};
 
-        &-ia,
-        &[data-variant="ia"] {
-            color: $${prefix}-${baseColorObject.weak.enabled.name};
-            ${generateInteractiveVariants(baseColorObject.weak, 'color')}
-        }
+		a {
+		   ${generateInteractiveVariants(baseColorObject.weak, 'color')}
+		}
     }
-}
 `;
+	}
+
+	result += `}`;
+	return result;
 };
 
 /**
@@ -75,35 +95,13 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => {
 `;
 		// Text colors with interactive variant, e.g. primary
 		if (colorToken[value].enabled) {
-			output += `%${prefix}-text-${value} {
-    color: $${prefix}-${colorToken[value].enabled.name};
-
-    &-ia,
-    &[data-variant="ia"] {
-        color: $${prefix}-${colorToken[value].enabled.name};
-        ${generateInteractiveVariants(colorToken[value], 'color')}
-    }
-}
-`;
-
 			// Text and background colors
-			output += `
-%${prefix}-bg-${value} {
-    background-color: $${prefix}-${colorToken[value].enabled.name};
-    color: $${prefix}-${colorToken[value].on.enabled.name};
-
-    &-ia,
-    &[data-variant="ia"] {
-        @extend %${prefix}-bg-${value};
-        ${generateInteractiveVariants(colorToken[value], 'background-color')}
-    }
-
-    &-text-ia,
-    &[data-variant="text-ia"] {
-       color: $${prefix}-${colorToken[value].on.enabled.name};
-        ${generateInteractiveVariants(colorToken[value].on, 'color')}
-    }
-}`;
+			output += generateBGVariants(
+				value,
+				undefined,
+				colorToken[value],
+				colorToken[value].on
+			);
 		}
 
 		for (const variant of Object.keys(colorToken[value].bg)) {
diff --git a/scripts/scss-scaling-generator.js b/scripts/scss-scaling-generator.js
index 68dcd4885..de186a056 100644
--- a/scripts/scss-scaling-generator.js
+++ b/scripts/scss-scaling-generator.js
@@ -8,6 +8,10 @@ const fileHeader =
 const generateSpacings = (utility) => {
 	let allClasses = fileHeader;
 
+	if (utility) {
+		allClasses += `@import "variables";\n@import "scaling-placeholder";\n`;
+	}
+
 	const scaleTypeKey = ['normal', 'functional', 'expressive'];
 
 	for (const scale of scaleTypeKey) {
diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js
index 4f4cdd172..e0cf8b771 100644
--- a/scripts/scss-typography-generator.js
+++ b/scripts/scss-typography-generator.js
@@ -1,7 +1,7 @@
 const prefix = 'db';
 
 const fileHeader =
-	'\n' +
+	'@use "sass:math";\n' +
 	'// Do not edit directly\n' +
 	'// Generated on ' +
 	new Date().toString() +
@@ -54,8 +54,8 @@ const getUtilityClass = (utility, scale, textType, size) => {
 ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 `;
 	result += `
-\tline-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
-\tfont-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
+	line-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
+	font-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
 `;
 
 	if (isHeadline) {
@@ -65,20 +65,41 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
         font-weight: 300;
     }
 	`;
+	} else {
+		result += `
+	--db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
+	--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size, 1rem)
+	* 16 * $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
+		`;
 	}
 
 	result += `
-\t@media only screen and (min-width: $db-screens-md) {
-\t\tline-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
-\t\tfont-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;
-\t}\n`;
+	@media only screen and (min-width: $db-screens-md) {
+		line-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
+		font-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;`;
+	if (!isHeadline) {
+		result += `
+		--db-base-icon-font-size: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
+		--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size, 1rem)
+		* 16 * $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
+		`;
+	}
+
+	result += `}\n`;
 
 	result += `
-\t@media only screen and (min-width: $db-screens-lg) {
-\t\tline-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
-\t\tfont-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;
-\t}
+	@media only screen and (min-width: $db-screens-lg) {
+		line-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
+		font-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;`;
+	if (!isHeadline) {
+		result += `
+		--db-base-icon-font-size: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
+		--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size, 1rem)
+		* 16 * $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
 		`;
+	}
+
+	result += `}`;
 
 	result += `
 }
@@ -90,6 +111,10 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 const generateClasses = (typography, utility) => {
 	let allClasses = fileHeader;
 
+	if (utility) {
+		allClasses += `@import "variables";\n@import "typography-placeholder";\n`;
+	}
+
 	// ScaleTypeKey = [normal, functional, expressive]
 	for (const scaleTypeKey of Object.keys(typography)) {
 		const scaleObject = typography[scaleTypeKey];
diff --git a/scss/_db-ui-base.scss b/scss/_db-ui-base.scss
deleted file mode 100644
index 2c9745d1e..000000000
--- a/scss/_db-ui-base.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@import "variables";
-@import "font-faces";
-@import "typography-placeholder";
-@import "scaling-placeholder";
-@import "color-placeholder";
-
-:root {
-	@extend %db-scaling-normal;
-
-	$db-sizing-xs: var(--db-sizing-xs);
-	$db-sizing-sm: var(--db-sizing-sm);
-	$db-sizing-md: var(--db-sizing-md);
-	$db-sizing-lg: var(--db-sizing-lg);
-
-	$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
-	$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
-	$db-spacing-fixed-xs: var(--db-db-spacing-fixed-xs);
-	$db-spacing-fixed-sm: var(--db-db-spacing-fixed-sm);
-	$db-spacing-fixed-md: var(--db-spacing-fixed-md);
-	$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);
-	$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
-
-	$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
-	$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
-	$db-spacing-responsive-md: var(--db-spacing-responsive-md);
-	$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
-	$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
-
-	font-family: $db-font-family-sans;
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-family: $db-font-family-head;
-	}
-}
-
-@mixin styles($styles...) {
-	@for $i from 0 to length($styles) {
-		%db-ui-#{nth($styles, $i + 1)},
-		.db-ui-#{nth($styles, $i + 1)} {
-			@extend %db-scaling-#{nth($styles, $i + 1)};
-
-			@extend %db-#{nth($styles, $i + 1)}-body-md;
-
-			small {
-				@extend %db-#{nth($styles, $i + 1)}-body-sm;
-			}
-
-			h1 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-xl;
-			}
-
-			h2 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-lg;
-			}
-
-			h3 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-md;
-			}
-
-			h4 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-sm;
-			}
-
-			h5 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-xs;
-			}
-
-			h6 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-2xs;
-			}
-		}
-	}
-}
-
-@include styles("expressive", "normal", "functional");
diff --git a/scss/db-ui-base.scss b/scss/db-ui-base.scss
new file mode 100644
index 000000000..8e017015a
--- /dev/null
+++ b/scss/db-ui-base.scss
@@ -0,0 +1,97 @@
+@import "variables";
+@import "font-faces";
+@import "typography-placeholder";
+@import "scaling-placeholder";
+@import "color-placeholder";
+
+:root {
+	@extend %db-ui-normal;
+
+	font-family: $db-font-family-sans;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: $db-font-family-head;
+	}
+}
+
+$db-sizing-xs: var(--db-sizing-xs);
+$db-sizing-sm: var(--db-sizing-sm);
+$db-sizing-md: var(--db-sizing-md);
+$db-sizing-lg: var(--db-sizing-lg);
+
+$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
+$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
+$db-spacing-fixed-xs: var(--db-spacing-fixed-xs);
+$db-spacing-fixed-sm: var(--db-spacing-fixed-sm);
+$db-spacing-fixed-md: var(--db-spacing-fixed-md);
+$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);
+$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
+
+$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
+$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
+$db-spacing-responsive-md: var(--db-spacing-responsive-md);
+$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
+$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
+
+$db-type-font-size-lg: var(--db-type-body-lg);
+$db-type-font-size-md: var(--db-type-body-md);
+$db-type-font-size-sm: var(--db-type-body-sm);
+
+@mixin styles($styles...) {
+	@for $i from 0 to length($styles) {
+		%db-ui-#{nth($styles, $i + 1)},
+		.db-ui-#{nth($styles, $i + 1)} {
+			@extend %db-scaling-#{nth($styles, $i + 1)};
+
+			[data-size="large"] {
+				@extend %db-#{nth($styles, $i + 1)}-body-lg;
+			}
+
+			body,
+			button,
+			input,
+			optgroup,
+			select,
+			textarea,
+			[data-size="medium"] {
+				@extend %db-#{nth($styles, $i + 1)}-body-md;
+			}
+
+			small,
+			[data-size="small"] {
+				@extend %db-#{nth($styles, $i + 1)}-body-sm;
+			}
+
+			h1 {
+				@extend %db-#{nth($styles, $i + 1)}-headline-xl;
+			}
+
+			h2 {
+				@extend %db-#{nth($styles, $i + 1)}-headline-lg;
+			}
+
+			h3 {
+				@extend %db-#{nth($styles, $i + 1)}-headline-md;
+			}
+
+			h4 {
+				@extend %db-#{nth($styles, $i + 1)}-headline-sm;
+			}
+
+			h5 {
+				@extend %db-#{nth($styles, $i + 1)}-headline-xs;
+			}
+
+			h6 {
+				@extend %db-#{nth($styles, $i + 1)}-headline-2xs;
+			}
+		}
+	}
+}
+
+@include styles("expressive", "normal", "functional");
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index c5a1fc346..567a046b2 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -99,7 +99,7 @@
 			"buildPath": "build/scss/",
 			"files": [
 				{
-					"destination": "_typography-classes.scss",
+					"destination": "typography-classes.scss",
 					"format": "db-core-typography-classes"
 				}
 			]
@@ -119,7 +119,7 @@
 			"buildPath": "build/scss/",
 			"files": [
 				{
-					"destination": "_scaling-classes.scss",
+					"destination": "scaling-classes.scss",
 					"format": "db-core-scaling-classes"
 				}
 			]
@@ -149,7 +149,7 @@
 			"buildPath": "build/scss/",
 			"files": [
 				{
-					"destination": "_color-classes.scss",
+					"destination": "color-classes.scss",
 					"format": "db-core-color-classes"
 				}
 			]