diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx
index d65c45b61b..3e306518c0 100644
--- a/docs/customization/themes.mdx
+++ b/docs/customization/themes.mdx
@@ -604,10 +604,10 @@ In the following example, the primary color of the themes are customized.
           <ClerkProvider
             appearance={{
               baseTheme: [dark, neobrutalism],
-              variables: { colorPrimary: 'red' },
+              variables: { colorPrimary: 'blue' },
               signIn: {
                 baseTheme: [shadesOfPurple],
-                variables: { colorPrimary: 'blue' },
+                variables: { colorPrimary: 'green' },
               },
             }}
           >
@@ -629,7 +629,7 @@ In the following example, the primary color of the themes are customized.
           <ClerkProvider
             appearance={{
               baseTheme: [dark, neobrutalism],
-              variables: { colorPrimary: 'red' },
+              variables: { colorPrimary: 'blue' },
               signIn: {
                 baseTheme: [shadesOfPurple],
                 variables: { colorPrimary: 'blue' },
@@ -663,7 +663,7 @@ In the following example, the primary color of the themes are customized.
         <ClerkProvider
           appearance={{
             baseTheme: [dark, neobrutalism],
-            variables: { colorPrimary: 'red' },
+            variables: { colorPrimary: 'blue' },
             signIn: {
               baseTheme: [shadesOfPurple],
               variables: { colorPrimary: 'blue' },
@@ -719,7 +719,7 @@ In the following example, the primary color of the themes are customized.
     export default ClerkApp(App, {
       appearance: {
         baseTheme: [dark, neobrutalism],
-        variables: { colorPrimary: 'red' },
+        variables: { colorPrimary: 'blue' },
         signIn: {
           baseTheme: [shadesOfPurple],
           variables: { colorPrimary: 'blue' },
@@ -739,7 +739,7 @@ In the following example, the primary color of the themes are customized.
         clerk({
           appearance: {
             baseTheme: [dark, neobrutalism],
-            variables: { colorPrimary: 'red' },
+            variables: { colorPrimary: 'blue' },
             signIn: {
               baseTheme: [shadesOfPurple],
               variables: { colorPrimary: 'blue' },
diff --git a/docs/customization/variables.mdx b/docs/customization/variables.mdx
index 5f798ba2f9..a1616d461a 100644
--- a/docs/customization/variables.mdx
+++ b/docs/customization/variables.mdx
@@ -156,8 +156,8 @@ In the following example, the primary color is set to red and the text color is
           <ClerkProvider
             appearance={{
               variables: {
-                colorPrimary: 'purple',
-                colorText: 'white',
+                colorPrimary: 'blue',
+                colorText: 'black',
               },
             }}
           >
@@ -178,8 +178,8 @@ In the following example, the primary color is set to red and the text color is
           <ClerkProvider
             appearance={{
               variables: {
-                colorPrimary: 'purple',
-                colorText: 'white',
+                colorPrimary: 'blue',
+                colorText: 'black',
               },
             }}
           >
@@ -209,8 +209,8 @@ In the following example, the primary color is set to red and the text color is
         <ClerkProvider
           appearance={{
             variables: {
-              colorPrimary: 'purple',
-              colorText: 'white',
+              colorPrimary: 'blue',
+              colorText: 'black',
             },
           }}
           publishableKey={clerkPubKey}
@@ -262,8 +262,8 @@ In the following example, the primary color is set to red and the text color is
     export default ClerkApp(App, {
       appearance: {
         variables: {
-          colorPrimary: 'red',
-          colorText: 'white',
+          colorPrimary: 'blue',
+          colorText: 'black',
         },
       },
     })
@@ -279,8 +279,8 @@ In the following example, the primary color is set to red and the text color is
         clerk({
           appearance: {
             variables: {
-              colorPrimary: 'red',
-              colorText: 'white',
+              colorPrimary: 'blue',
+              colorText: 'black',
             },
           },
         }),
@@ -308,8 +308,8 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               signIn: {
                 variables: {
-                  colorPrimary: 'purple',
-                  colorText: 'white',
+                  colorPrimary: 'blue',
+                  colorText: 'black',
                 },
               },
             }}
@@ -332,8 +332,8 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               signIn: {
                 variables: {
-                  colorPrimary: 'purple',
-                  colorText: 'white',
+                  colorPrimary: 'blue',
+                  colorText: 'black',
                 },
               },
             }}
@@ -365,8 +365,8 @@ In the following example, the primary color is set to red and the text color is
           appearance={{
             signIn: {
               variables: {
-                colorPrimary: 'purple',
-                colorText: 'white',
+                colorPrimary: 'blue',
+                colorText: 'black',
               },
             },
           }}
@@ -420,8 +420,8 @@ In the following example, the primary color is set to red and the text color is
       appearance: {
         signIn: {
           variables: {
-            colorPrimary: 'red',
-            colorText: 'white',
+            colorPrimary: 'blue',
+            colorText: 'black',
           },
         },
       },
@@ -439,8 +439,8 @@ In the following example, the primary color is set to red and the text color is
           appearance: {
             signIn: {
               variables: {
-                colorPrimary: 'red',
-                colorText: 'white',
+                colorPrimary: 'blue',
+                colorText: 'black',
               },
             },
           },
@@ -468,8 +468,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           <SignIn
             appearance={{
               variables: {
-                colorPrimary: 'purple',
-                colorText: 'white',
+                colorPrimary: 'blue',
+                colorText: 'black',
               },
             }}
           />
@@ -484,8 +484,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
         <SignIn
           appearance={{
             variables: {
-              colorPrimary: 'purple',
-              colorText: 'white',
+              colorPrimary: 'blue',
+              colorText: 'black',
             },
           }}
         />
@@ -504,8 +504,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
       <SignIn
         appearance={{
           variables: {
-            colorPrimary: 'purple',
-            colorText: 'white',
+            colorPrimary: 'blue',
+            colorText: 'black',
           },
         }}
         path="/sign-in"
@@ -527,8 +527,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           <SignIn
             appearance={{
               variables: {
-                colorPrimary: 'purple',
-                colorText: 'white',
+                colorPrimary: 'blue',
+                colorText: 'black',
               },
             }}
           />
@@ -547,8 +547,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
     <SignIn
       path="/sign-in"
       appearance={{
-        colorPrimary: 'purple',
-        colorText: 'white',
+        colorPrimary: 'blue',
+        colorText: 'black',
       }}
     />
     ```