diff --git a/docs/customization/variables.mdx b/docs/customization/variables.mdx
index 5d4deaf114..5f798ba2f9 100644
--- a/docs/customization/variables.mdx
+++ b/docs/customization/variables.mdx
@@ -156,7 +156,7 @@ In the following example, the primary color is set to red and the text color is
           <ClerkProvider
             appearance={{
               variables: {
-                colorPrimary: 'red',
+                colorPrimary: 'purple',
                 colorText: 'white',
               },
             }}
@@ -178,7 +178,7 @@ In the following example, the primary color is set to red and the text color is
           <ClerkProvider
             appearance={{
               variables: {
-                colorPrimary: 'red',
+                colorPrimary: 'purple',
                 colorText: 'white',
               },
             }}
@@ -209,7 +209,7 @@ In the following example, the primary color is set to red and the text color is
         <ClerkProvider
           appearance={{
             variables: {
-              colorPrimary: 'red',
+              colorPrimary: 'purple',
               colorText: 'white',
             },
           }}
@@ -308,7 +308,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               signIn: {
                 variables: {
-                  colorPrimary: 'red',
+                  colorPrimary: 'purple',
                   colorText: 'white',
                 },
               },
@@ -332,7 +332,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               signIn: {
                 variables: {
-                  colorPrimary: 'red',
+                  colorPrimary: 'purple',
                   colorText: 'white',
                 },
               },
@@ -365,7 +365,7 @@ In the following example, the primary color is set to red and the text color is
           appearance={{
             signIn: {
               variables: {
-                colorPrimary: 'red',
+                colorPrimary: 'purple',
                 colorText: 'white',
               },
             },
@@ -468,7 +468,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           <SignIn
             appearance={{
               variables: {
-                colorPrimary: 'red',
+                colorPrimary: 'purple',
                 colorText: 'white',
               },
             }}
@@ -484,7 +484,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
         <SignIn
           appearance={{
             variables: {
-              colorPrimary: 'red',
+              colorPrimary: 'purple',
               colorText: 'white',
             },
           }}
@@ -504,7 +504,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
       <SignIn
         appearance={{
           variables: {
-            colorPrimary: 'red',
+            colorPrimary: 'purple',
             colorText: 'white',
           },
         }}
@@ -527,7 +527,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           <SignIn
             appearance={{
               variables: {
-                colorPrimary: 'red',
+                colorPrimary: 'purple',
                 colorText: 'white',
               },
             }}
@@ -547,7 +547,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
     <SignIn
       path="/sign-in"
       appearance={{
-        colorPrimary: 'red',
+        colorPrimary: 'purple',
         colorText: 'white',
       }}
     />