diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 7cb7ed79d8..96df7ce407 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -19,12 +19,19 @@
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
-  $: styles = {
-    ...$component.styles,
-    normal: {
-      ...$component.styles?.normal,
-      color,
-    },
+  $: styles = enrichStyles($component.styles, color)
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        color,
+      },
+    }
   }
 </script>