diff --git a/apps/documentation/pages/developers/embedding/index.mdx b/apps/documentation/pages/developers/embedding/index.mdx
index 2e93941ae..6714c65ee 100644
--- a/apps/documentation/pages/developers/embedding/index.mdx
+++ b/apps/documentation/pages/developers/embedding/index.mdx
@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   }}
 />
 ```
diff --git a/apps/documentation/pages/developers/embedding/preact.mdx b/apps/documentation/pages/developers/embedding/preact.mdx
index 91176723f..3f6f579f5 100644
--- a/apps/documentation/pages/developers/embedding/preact.mdx
+++ b/apps/documentation/pages/developers/embedding/preact.mdx
@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 
   return (
diff --git a/apps/documentation/pages/developers/embedding/react.mdx b/apps/documentation/pages/developers/embedding/react.mdx
index 05dc3a8aa..2c259ddb8 100644
--- a/apps/documentation/pages/developers/embedding/react.mdx
+++ b/apps/documentation/pages/developers/embedding/react.mdx
@@ -99,9 +99,9 @@ const MyEmbeddingComponent = () => {
       `}
       // CSS Variables
       cssVars={{
-        colorPrimary: '#0000FF',
-        colorBackground: '#F5F5F5',
-        borderRadius: '8px',
+        primary: '#0000FF',
+        background: '#F5F5F5',
+        radius: '8px',
       }}
       // Dark Mode Control
       darkModeDisabled={true}
diff --git a/apps/documentation/pages/developers/embedding/solid.mdx b/apps/documentation/pages/developers/embedding/solid.mdx
index e19007a43..135e93ff6 100644
--- a/apps/documentation/pages/developers/embedding/solid.mdx
+++ b/apps/documentation/pages/developers/embedding/solid.mdx
@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 
   return (
diff --git a/apps/documentation/pages/developers/embedding/svelte.mdx b/apps/documentation/pages/developers/embedding/svelte.mdx
index 46ec69c63..126b43e10 100644
--- a/apps/documentation/pages/developers/embedding/svelte.mdx
+++ b/apps/documentation/pages/developers/embedding/svelte.mdx
@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 </script>
 
diff --git a/apps/documentation/pages/developers/embedding/vue.mdx b/apps/documentation/pages/developers/embedding/vue.mdx
index 8051dbe35..dc68f979d 100644
--- a/apps/documentation/pages/developers/embedding/vue.mdx
+++ b/apps/documentation/pages/developers/embedding/vue.mdx
@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
   }
 `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 </script>