diff --git a/docs/ai_builder/features/ide.md b/docs/ai_builder/features/ide.md
index 816c128f7c0..94368f78194 100644
--- a/docs/ai_builder/features/ide.md
+++ b/docs/ai_builder/features/ide.md
@@ -13,7 +13,7 @@ rx.el.div(
         width="100%",
         height="400px",
     ),
-    class_name="p-1 my-4 rounded-lg bg-slate-5",
+    class_name="p-1 my-4 rounded-lg bg-secondary-5",
 )
 ```
 
diff --git a/docs/app/assets/components/GradientButton.tsx b/docs/app/assets/components/GradientButton.tsx
index a4152cf3913..ad0101ef5da 100644
--- a/docs/app/assets/components/GradientButton.tsx
+++ b/docs/app/assets/components/GradientButton.tsx
@@ -24,16 +24,16 @@ interface GradientButtonProps
 }
 
 const BASE_CLASSES =
-  'relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:border disabled:border-m-slate-4/80 disabled:bg-m-slate-3 disabled:text-m-slate-8 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 cursor-pointer box-border font-[525] overflow-hidden';
+  'relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:border disabled:border-secondary-4/80 disabled:bg-secondary-3 disabled:text-secondary-11 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 cursor-pointer box-border font-[525] overflow-hidden';
 
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {
   primary:
     "bg-primary-9 text-primary-2 dark:text-primary-contrast hover:bg-primary-10 shadow-[0_0_1px_var(--primary-9,#6E56CF)_inset,0_2px_0_0_rgba(255,255,255,0.22)_inset]",
   destructive: "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast",
   outline:
-    "shadow-[0_-1px_0_0_rgba(0,0,0,0.08)_inset,0_0_0_1px_rgba(0,0,0,0.08)_inset,0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.16)_inset] bg-white dark:bg-m-slate-10 hover:bg-m-slate-2 dark:hover:bg-m-slate-9 text-m-slate-12 dark:text-m-slate-3",
+    "shadow-[0_-1px_0_0_rgba(0,0,0,0.08)_inset,0_0_0_1px_rgba(0,0,0,0.08)_inset,0_1px_2px_0_rgba(0,0,0,0.02),0_1px_4px_0_rgba(0,0,0,0.02)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.16)_inset] bg-white dark:bg-secondary-4 hover:bg-secondary-2 dark:hover:bg-secondary-5 text-secondary-12",
   ghost:
-    "text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9",
+    "text-secondary-12 hover:text-primary-10 dark:hover:text-primary-9",
 };
 
 const SIZE_CLASSES: Record<ButtonSize, string> = {
diff --git a/docs/app/assets/custom-colors.css b/docs/app/assets/custom-colors.css
index 0f2a258cbc8..4d8a68f1a58 100644
--- a/docs/app/assets/custom-colors.css
+++ b/docs/app/assets/custom-colors.css
@@ -63,51 +63,23 @@
   --glow: #ebe4ff;
   --wave-line-1: #d4cafe;
   --wave-line-2: #ebe4ff;
-  /* Marketing Colors */
-  --m-slate-1: #fcfcfd;
-  --m-slate-2: #f6f7f9;
-  --m-slate-3: #eeeff2;
-  --m-slate-4: #e5e8eb;
-  --m-slate-5: #cacdd4;
-  --m-slate-6: #979faa;
-  --m-slate-7: #67707e;
-  --m-slate-8: #3c434e;
-  --m-slate-9: #2a3037;
-  --m-slate-10: #21252b;
-  --m-slate-11: #1d2025;
-  --m-slate-12: #151618;
-  --m-slate-13: #1c2024;
-  --m-slate-14: #1a1b1d;
-  --m-slate-15: #151618;
-  --m-violet-1: #fdfcfe;
-  --m-violet-2: #faf8ff;
-  --m-violet-3: #f4f0fe;
-  --m-violet-4: #ebe4ff;
-  --m-violet-5: #e1d9ff;
-  --m-violet-6: #d4cafe;
-  --m-violet-7: #c2b5f5;
-  --m-violet-8: #aa99ec;
-  --m-violet-9: #6e56cf;
-  --m-violet-10: #654dc4;
-  --m-violet-11: #6550b9;
-  --m-violet-12: #2f265f;
 }
 
 .dark,
 .dark-theme {
   /* Slate */
-  --slate-1: #141619;
-  --slate-2: #1b1d20;
-  --slate-3: #22252a;
-  --slate-4: #282b31;
-  --slate-5: #2e3238;
-  --slate-6: #353a42;
-  --slate-7: #414852;
-  --slate-8: #58616f;
-  --slate-9: #656e7d;
-  --slate-10: #737c8a;
-  --slate-11: #adb4bf;
-  --slate-12: #eceef1;
+  --slate-1: #090A0B;
+  --slate-2: #101213;
+  --slate-3: #121417;
+  --slate-4: #1E2025;
+  --slate-5: #272B30;
+  --slate-6: #292D33;
+  --slate-7: #363C44;
+  --slate-8: #444B55;
+  --slate-9: #656E7D;
+  --slate-10: #8A929E;
+  --slate-11: #ADB4BF;
+  --slate-12: #E2E5E9;
   --c-slate-1: #151618;
   --c-slate-2: #1a1b1d;
   /* #1A1B1D */
@@ -151,32 +123,8 @@
   --c-red-9: #e5484d;
   --c-red-10: #dc3e42;
   /* White */
-  --c-white-1: #1b1d20;
+  --c-white-1: #050506;
   --glow: #261958;
   --wave-line-1: #2f1c78;
   --wave-line-2: #261958;
-  --m-slate-1: #fcfcfd;
-  --m-slate-2: #f6f7f9;
-  --m-slate-3: #eeeff2;
-  --m-slate-4: #e5e8eb;
-  --m-slate-5: #cacdd4;
-  --m-slate-6: #979faa;
-  --m-slate-7: #67707e;
-  --m-slate-8: #3c434e;
-  --m-slate-9: #2a3037;
-  --m-slate-10: #21252b;
-  --m-slate-11: #1d2025;
-  --m-slate-12: #151618;
-  --m-violet-1: #fdfcfe;
-  --m-violet-2: #faf8ff;
-  --m-violet-3: #f4f0fe;
-  --m-violet-4: #ebe4ff;
-  --m-violet-5: #e1d9ff;
-  --m-violet-6: #d4cafe;
-  --m-violet-7: #c2b5f5;
-  --m-violet-8: #aa99ec;
-  --m-violet-9: #6e56cf;
-  --m-violet-10: #654dc4;
-  --m-violet-11: #6550b9;
-  --m-violet-12: #2f265f;
-}
+}
\ No newline at end of file
diff --git a/docs/app/assets/tailwind-theme.css b/docs/app/assets/tailwind-theme.css
index b2133eef715..848002ec1fc 100644
--- a/docs/app/assets/tailwind-theme.css
+++ b/docs/app/assets/tailwind-theme.css
@@ -1128,34 +1128,6 @@
     --color-bronze-a10: var(--bronze-a10);
     --color-bronze-a11: var(--bronze-a11);
     --color-bronze-a12: var(--bronze-a12);
-    /* Marketing Colors */
-    --color-m-slate-1: var(--m-slate-1);
-    --color-m-slate-2: var(--m-slate-2);
-    --color-m-slate-3: var(--m-slate-3);
-    --color-m-slate-4: var(--m-slate-4);
-    --color-m-slate-5: var(--m-slate-5);
-    --color-m-slate-6: var(--m-slate-6);
-    --color-m-slate-7: var(--m-slate-7);
-    --color-m-slate-8: var(--m-slate-8);
-    --color-m-slate-9: var(--m-slate-9);
-    --color-m-slate-10: var(--m-slate-10);
-    --color-m-slate-11: var(--m-slate-11);
-    --color-m-slate-12: var(--m-slate-12);
-    --color-m-slate-13: var(--m-slate-13);
-    --color-m-slate-14: var(--m-slate-14);
-    --color-m-slate-15: var(--m-slate-15);
-    --color-m-violet-1: var(--m-violet-1);
-    --color-m-violet-2: var(--m-violet-2);
-    --color-m-violet-3: var(--m-violet-3);
-    --color-m-violet-4: var(--m-violet-4);
-    --color-m-violet-5: var(--m-violet-5);
-    --color-m-violet-6: var(--m-violet-6);
-    --color-m-violet-7: var(--m-violet-7);
-    --color-m-violet-8: var(--m-violet-8);
-    --color-m-violet-9: var(--m-violet-9);
-    --color-m-violet-10: var(--m-violet-10);
-    --color-m-violet-11: var(--m-violet-11);
-    --color-m-violet-12: var(--m-violet-12);
 
     /* Font */
     --font-sans: var(--font-instrument-sans);
@@ -1179,7 +1151,7 @@
     --shadow-button-outline: var(--shadow-button-outline-adaptive);
     --shadow-card-xs-no-left: var(--shadow-card-xs-no-left-adaptive);
     --shadow-card-small: var(--shadow-card-small-adaptive);
-    --shadow-card-dark: 0 0 0 1px var(--m-slate-9, #2A3037);
+    --shadow-card-dark: 0 0 0 1px var(--secondary-4);
     --text-xs: 0.8125rem;
     --text-xs--line-height: 1.25rem;
     --text-sm: 0.875rem;
@@ -1659,7 +1631,7 @@
     ::before,
     ::backdrop,
     ::file-selector-button {
-        border-color: var(--c-slate-3, currentColor);
+        border-color: var(--secondary-3, currentColor);
     }
 
     body {
@@ -1680,11 +1652,11 @@
     }
 
     .gradient-heading {
-        @apply inline-block bg-clip-text bg-gradient-to-r from-slate-12 to-slate-11 w-full text-transparent text-center text-balance;
+        @apply inline-block bg-clip-text bg-gradient-to-r from-secondary-12 to-secondary-11 w-full text-transparent text-center text-balance;
     }
 
     .table-header {
-        @apply justify-start pl-4 w-auto font-bold text-slate-12 text-sm;
+        @apply justify-start pl-4 w-auto font-bold text-secondary-12 text-sm;
     }
 }
 
@@ -1709,11 +1681,11 @@
         font-weight: 400;
         line-height: normal;
         letter-spacing: -0.00406rem;
-        color: var(--c-slate-11);
-        background-color: var(--c-slate-3);
+        color: var(--secondary-11);
+        background-color: var(--secondary-3);
         border-radius: 0.25rem;
         border-width: 1px;
-        border-color: var(--c-slate-4);
+        border-color: var(--secondary-4);
         /* padding: 0rem 0.125rem 0rem 0.125rem; */
     }
 
@@ -1775,9 +1747,9 @@
         padding: 1.75rem !important;
         /* max-height: 350px !important; */
         border-radius: 0.75rem !important;
-        border: 1px solid var(--c-slate-4);
-        background: var(--c-slate-2);
-        color: var(--c-slate-12) !important;
+        border: 1px solid var(--secondary-4);
+        background: var(--secondary-2);
+        color: var(--secondary-12) !important;
         resize: none !important;
         outline: none !important;
         scrollbar-width: thin !important;
@@ -1808,7 +1780,7 @@
         font-size: 0.875rem !important;
         font-weight: 400 !important;
         line-height: 1.5rem !important;
-        color: var(--c-slate-12) !important;
+        color: var(--secondary-12) !important;
         background-color: transparent !important;
     }
 
@@ -1818,7 +1790,7 @@
         font-size: 0.875rem !important;
         font-weight: 400 !important;
         line-height: 1.5rem !important;
-        color: var(--c-slate-12) !important;
+        color: var(--secondary-12) !important;
         background-color: transparent !important;
     }
 
@@ -1842,7 +1814,7 @@
         gap: 0.375rem !important;
         font-size: 0.8125rem !important;
         font-weight: 500 !important;
-        color: var(--c-slate-11) !important;
+        color: var(--secondary-11) !important;
         top: 8px !important;
         right: 12px !important;
         padding: 6px 8px !important;
@@ -1862,13 +1834,13 @@
 
     .code-block button:hover,
     .code-block>button:hover {
-        background: var(--c-slate-3) !important;
-        background-color: var(--c-slate-3) !important;
+        background: var(--secondary-3) !important;
+        background-color: var(--secondary-3) !important;
     }
 
 
     .tab-style {
-        color: var(--c-slate-9);
+        color: var(--secondary-9);
         cursor: pointer;
         padding: 0.25em 0.5em;
         font-size: 0.9rem;
@@ -1881,7 +1853,7 @@
         display: inline-flex !important;
         gap: 2px !important;
         padding: 4px !important;
-        background: var(--c-slate-3) !important;
+        background: var(--secondary-3) !important;
         border-radius: 10px !important;
         border-bottom: none !important;
         box-shadow: none !important;
@@ -1904,7 +1876,7 @@
         padding: 8px 16px !important;
         font-size: 0.9375rem !important;
         font-weight: 450 !important;
-        color: var(--c-slate-11) !important;
+        color: var(--secondary-11) !important;
         border-radius: 7px !important;
         cursor: pointer;
         white-space: nowrap;
@@ -1930,7 +1902,7 @@
     }
 
     .pill-tab:hover {
-        color: var(--c-slate-11) !important;
+        color: var(--secondary-11) !important;
         background: transparent !important;
     }
 
@@ -1944,10 +1916,10 @@
 
     .pill-tab[data-state='active'],
     .pill-tab[data-state='active']:hover {
-        color: var(--c-slate-12) !important;
+        color: var(--secondary-12) !important;
         font-weight: 500 !important;
-        background: var(--c-slate-1) !important;
-        background-color: var(--c-slate-1) !important;
+        background: var(--secondary-1) !important;
+        background-color: var(--secondary-1) !important;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
     }
 
@@ -1961,7 +1933,7 @@
     }
 
     .tab-style:hover {
-        color: var(--c-slate-11);
+        color: var(--secondary-11);
     }
 
     .hover-card-shadow:hover {
@@ -1973,8 +1945,8 @@
     }
 
     :where(.dark, .dark *) .hover-card-shadow:hover {
-        background: var(--m-slate-10, #21252B);
-        box-shadow: 0 0 0 1px var(--m-slate-9, #2A3037);
+        background: var(--secondary-3);
+        box-shadow: 0 0 0 1px var(--secondary-4);
     }
 
     .navbar-shadow {
@@ -1982,7 +1954,7 @@
     }
 
     :where(.dark, .dark *) .navbar-shadow {
-        box-shadow: 0 0 0 1px var(--m-slate-9, #2A3037);
+        box-shadow: 0 0 0 1px var(--secondary-4);
     }
 
     .tab-style[data-state='active'] {
@@ -1990,7 +1962,7 @@
     }
 
     .tab-style:not([data-state='active']) {
-        color: var(--c-slate-12);
+        color: var(--secondary-12);
     }
 
     .demo-code-block {
@@ -1998,7 +1970,7 @@
         height: auto !important;
         margin: 0 !important;
         background: transparent !important;
-        color: var(--c-slate-9) !important;
+        color: var(--secondary-9) !important;
         resize: none !important;
         outline: none !important;
         scrollbar-width: thin !important;
@@ -2033,7 +2005,7 @@
         font-weight: 400 !important;
         line-height: 150% !important;
         letter-spacing: -0.01219rem !important;
-        color: var(--c-slate-12) !important;
+        color: var(--secondary-12) !important;
         background-color: transparent !important;
     }
 
diff --git a/docs/app/reflex_docs/components/button.py b/docs/app/reflex_docs/components/button.py
index 5687adc27c8..bdb82db571f 100644
--- a/docs/app/reflex_docs/components/button.py
+++ b/docs/app/reflex_docs/components/button.py
@@ -30,10 +30,10 @@ def get_variant_class(variant: str) -> str:
         "class_name": get_variant_class("red"),
     },
     "muted": {
-        "class_name": "bg-slate-3 hover:bg-slate-5 text-slate-9 border-t !border-slate-5",
+        "class_name": "bg-secondary-3 hover:bg-secondary-5 text-secondary-9 border-t !border-secondary-5",
     },
     "secondary": {
-        "class_name": "bg-slate-4 hover:bg-slate-5 text-slate-10 !border-none",
+        "class_name": "bg-secondary-4 hover:bg-secondary-5 text-secondary-10 !border-none",
     },
 }
 
diff --git a/docs/app/reflex_docs/components/docpage/navbar/buttons/sidebar.py b/docs/app/reflex_docs/components/docpage/navbar/buttons/sidebar.py
index 77e46752322..430e8d5d30a 100644
--- a/docs/app/reflex_docs/components/docpage/navbar/buttons/sidebar.py
+++ b/docs/app/reflex_docs/components/docpage/navbar/buttons/sidebar.py
@@ -18,9 +18,9 @@ def social_menu_item(
         "discord": "Join Reflex Discord community",
     }
     return rx.link(
-        get_icon(icon=icon, class_name="!text-slate-9"),
-        class_name="flex justify-center items-center gap-2 hover:bg-slate-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
-        + (" border-slate-4 border-x border-solid border-y-0" if border else ""),
+        get_icon(icon=icon, class_name="!text-secondary-9"),
+        class_name="flex justify-center items-center gap-2 hover:bg-secondary-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
+        + (" border-secondary-4 border-x border-solid border-y-0" if border else ""),
         href=url,
         is_external=True,
         custom_attrs={"aria-label": aria_labels.get(icon, f"Visit {icon}")},
@@ -36,7 +36,7 @@ def drawer_socials() -> rx.Component:
             border=True,
         ),
         social_menu_item("discord", DISCORD_URL),
-        class_name="flex flex-row items-center border-slate-4 border-y-0 !border-b w-full",
+        class_name="flex flex-row items-center border-secondary-4 border-y-0 !border-b w-full",
     )
 
 
@@ -47,8 +47,8 @@ def drawer_item(text: str, url: str) -> rx.Component:
         text,
         href=url,
         underline="none",
-        color="var(--c-slate-9)",
-        class_name="flex justify-center items-center border-slate-4 px-4 py-[0.875rem] border-t-0 border-b border-solid w-full font-small hover:!text-violet-9 border-x-0",
+        color="var(--secondary-9)",
+        class_name="flex justify-center items-center border-secondary-4 px-4 py-[0.875rem] border-t-0 border-b border-solid w-full font-small hover:!text-primary-9 border-x-0",
     )
 
 
@@ -72,20 +72,20 @@ def navbar_sidebar_drawer(trigger) -> rx.Component:
                     rx.el.button(
                         rx.color_mode.icon(
                             light_component=rx.icon(
-                                "sun", size=16, class_name="!text-slate-9"
+                                "sun", size=16, class_name="!text-secondary-9"
                             ),
                             dark_component=rx.icon(
-                                "moon", size=16, class_name="!text-slate-9"
+                                "moon", size=16, class_name="!text-secondary-9"
                             ),
                         ),
                         on_click=toggle_color_mode,
                         class_name="flex flex-row justify-center items-center px-3 py-0.5 w-full h-[47px]",
                         custom_attrs={"aria-label": "Toggle color mode"},
                     ),
-                    class_name="flex flex-col items-center dark:bg-m-slate-12 bg-m-slate-1 w-full h-full",
+                    class_name="flex flex-col items-center bg-secondary-1 w-full h-full",
                 ),
                 class_name=ui.cn(
-                    "dark:!bg-m-slate-12 !bg-m-slate-1 w-full h-full !outline-none",
+                    "!bg-secondary-1 w-full h-full !outline-none",
                     rx.cond(
                         HostingBannerState.is_banner_visible,
                         "!top-[137px]",
@@ -110,7 +110,7 @@ def docs_sidebar_drawer(sidebar: rx.Component, trigger) -> rx.Component:
                 rx.box(
                     rx.drawer.close(
                         rx.box(
-                            class_name="absolute left-1/2 transform -translate-x-1/2 top-[-12px] flex-shrink-0 bg-slate-9 rounded-full w-[96px] h-[5px]",
+                            class_name="absolute left-1/2 transform -translate-x-1/2 top-[-12px] flex-shrink-0 bg-secondary-9 rounded-full w-[96px] h-[5px]",
                         ),
                         as_child=True,
                     ),
diff --git a/docs/app/reflex_docs/components/hint.py b/docs/app/reflex_docs/components/hint.py
index ac1e9817aa6..1bc5e161558 100644
--- a/docs/app/reflex_docs/components/hint.py
+++ b/docs/app/reflex_docs/components/hint.py
@@ -16,7 +16,7 @@ def hint(
             rx.text(text),
             side=side,
             align=align,
-            class_name="flex justify-center items-center bg-slate-11 px-1.5 py-0.5 rounded-lg font-small text-white-1",
+            class_name="flex justify-center items-center bg-secondary-11 px-1.5 py-0.5 rounded-lg font-small text-white-1",
         ),
         class_name=class_name,
         default_open=active,
diff --git a/docs/app/reflex_docs/docgen_pipeline.py b/docs/app/reflex_docs/docgen_pipeline.py
index 100a1d8b731..c7709c86574 100644
--- a/docs/app/reflex_docs/docgen_pipeline.py
+++ b/docs/app/reflex_docs/docgen_pipeline.py
@@ -337,14 +337,14 @@ def quote(self, block: QuoteBlock) -> rx.Component:
         children = [self.transform_block(b) for b in block.children]
         return rx.box(
             *children,
-            class_name="border-l-[3px] border-slate-4 pl-6 mt-2 mb-6",
+            class_name="border-l-[3px] border-secondary-4 pl-6 mt-2 mb-6",
         )
 
     def table(self, block: TableBlock) -> rx.Component:
         header_cells = [
             rx.table.column_header_cell(
                 *_render_spans(cell.children),
-                class_name="font-small text-slate-12 font-bold",
+                class_name="font-small text-secondary-12 font-bold",
             )
             for cell in block.header.cells
         ]
@@ -353,7 +353,7 @@ def table(self, block: TableBlock) -> rx.Component:
             cells = [
                 rx.table.cell(
                     *_render_spans(cell.children),
-                    class_name="font-small text-slate-11",
+                    class_name="font-small text-secondary-11",
                 )
                 for cell in row.cells
             ]
@@ -364,7 +364,7 @@ def table(self, block: TableBlock) -> rx.Component:
             rx.table.body(*rows),
             variant="surface",
             size="1",
-            class_name="w-full border border-slate-4 mb-4",
+            class_name="w-full border border-secondary-4 mb-4",
         )
 
     def transform_table_row(self, row: TableRow) -> rx.Component:
@@ -524,11 +524,15 @@ def _render_alert(self, block: DirectiveBlock) -> rx.Component:
         }
         color: ColorType = colors.get(status, "slate")
         background_shade = 2 if status == "info" else 3
-        # For "info" alerts, use the neutral custom slate scale (--c-slate-*)
-        # so the card matches the codeblock styling instead of the blue-tinted
-        # default --slate-* scale that rx.color() produces.
-        bg_override = "var(--c-slate-2)" if status == "info" else None
-        border_override = "var(--c-slate-4)" if status == "info" else None
+        # For "info" alerts, use the site secondary scale (--secondary-*) so the
+        # card matches codeblock styling instead of rx.color("slate", ...).
+        is_info = status == "info"
+        foreground_override = "var(--secondary-11)" if is_info else None
+        bg_override = "var(--secondary-2)" if is_info else None
+        border_override = "var(--secondary-4)" if is_info else None
+
+        def foreground_color() -> str:
+            return foreground_override or f"{rx.color(color, 11)}"
 
         # First child may be a heading used as the alert title.
         children = block.children
@@ -549,13 +553,13 @@ def title_comp() -> rx.Component:
             return rx.box(
                 *_render_spans(title_spans),
                 class_name="font-[475]",
-                color=f"{rx.color(color, 11)}",
+                color=foreground_color(),
             )
 
         trigger: list[rx.Component] = [
             rx.box(
                 rx.icon(tag=icon_tag, size=18, margin_right=".5em"),
-                color=f"{rx.color(color, 11)}",
+                color=foreground_color(),
             ),
         ]
 
@@ -574,6 +578,7 @@ def title_comp() -> rx.Component:
                 background_shade=background_shade,
                 background_override=bg_override,
                 border_override=border_override,
+                foreground_override=foreground_override,
             )
 
         # Title only, or text-only (no heading) — simple non-collapsible box.
@@ -591,7 +596,7 @@ def title_comp() -> rx.Component:
                 rx.box(
                     *spans,
                     class_name="font-[475]",
-                    color=f"{rx.color(color, 11)}",
+                    color=foreground_color(),
                 ),
             )
         return rx.vstack(
@@ -659,14 +664,14 @@ def _render_quote_directive(self, block: DirectiveBlock) -> rx.Component:
                 '"',
                 *quote_parts,
                 '"',
-                class_name="text-slate-11 font-base italic",
+                class_name="text-secondary-11 font-base italic",
             ),
             rx.box(
-                rx.text(name, class_name="text-slate-11 font-base"),
-                rx.text(role, class_name="text-slate-10 font-base"),
+                rx.text(name, class_name="text-secondary-11 font-base"),
+                rx.text(role, class_name="text-secondary-10 font-base"),
                 class_name="flex flex-col gap-0.5",
             ),
-            class_name="flex flex-col gap-4 border-l-[3px] border-slate-4 pl-6 mt-2 mb-6",
+            class_name="flex flex-col gap-4 border-l-[3px] border-secondary-4 pl-6 mt-2 mb-6",
         )
 
     def _render_tabs(self, block: DirectiveBlock) -> rx.Component:
@@ -729,7 +734,7 @@ def _render_section(self, block: DirectiveBlock) -> rx.Component:
                             header,
                             style={
                                 "fontWeight": "600",
-                                "color": "var(--c-slate-12)",
+                                "color": "var(--secondary-12)",
                                 "fontSize": "1rem",
                                 "lineHeight": "1.5",
                             },
@@ -753,7 +758,7 @@ def _render_section(self, block: DirectiveBlock) -> rx.Component:
                     "gap": "1.25rem",
                     "width": "100%",
                     "paddingLeft": "1.5rem",
-                    "borderLeft": "1.5px solid var(--c-slate-4)",
+                    "borderLeft": "1.5px solid var(--secondary-4)",
                 },
             ),
             style={"width": "100%", "margin": "1.5rem 0"},
diff --git a/docs/app/reflex_docs/pages/docs/component.py b/docs/app/reflex_docs/pages/docs/component.py
index 148216bfd46..31954f6bcf8 100644
--- a/docs/app/reflex_docs/pages/docs/component.py
+++ b/docs/app/reflex_docs/pages/docs/component.py
@@ -89,18 +89,20 @@ class PropDocsState(rx.State):
 
 _PILL_BTN_CLASS = (
     "inline-flex h-7 cursor-pointer items-center justify-center rounded-md "
-    "border border-slate-5 bg-slate-1 px-2.5 text-sm font-medium text-slate-11 "
-    "transition-colors hover:border-slate-6 hover:bg-slate-2 hover:text-slate-12 "
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-7"
+    "border border-secondary-5 bg-secondary-1 px-2.5 text-sm font-medium text-secondary-11 "
+    "transition-colors hover:border-secondary-6 hover:bg-secondary-2 hover:text-secondary-12 "
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-7"
 )
 _PILL_BTN_ACTIVE_CLASS = (
     "inline-flex h-7 cursor-pointer items-center justify-center rounded-md "
-    "border border-slate-8 bg-slate-3 px-2.5 text-sm font-medium text-slate-12 "
-    "shadow-[inset_0_0_0_1px_var(--c-slate-6)] transition-colors "
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-7"
+    "border border-secondary-8 bg-secondary-3 px-2.5 text-sm font-medium text-secondary-12 "
+    "shadow-[inset_0_0_0_1px_var(--secondary-6)] transition-colors "
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-7"
 )
 _PROPS_TABLE_CELL_CLASS = "min-w-0 px-4 py-3 align-top"
-_PROPS_TABLE_HEADER_CLASS = "px-4 py-3 text-left text-xs font-semibold text-slate-10"
+_PROPS_TABLE_HEADER_CLASS = (
+    "px-4 py-3 text-left text-xs font-semibold text-secondary-11"
+)
 _PROPS_TABLE_COMPACT_CELL_CLASS = (
     "cell-content max-h-[4.25rem] overflow-hidden "
     "[mask-image:linear-gradient(to_bottom,black_82%,transparent)] "
@@ -209,10 +211,10 @@ def render_select(prop: PropDocumentation, component: type[Component], prop_dict
                 type="button",
                 class_name=(
                     "inline-flex h-8 w-32 cursor-pointer items-center justify-between "
-                    "rounded-md border border-slate-5 bg-slate-1 px-2.5 text-slate-11 "
-                    "transition-colors hover:border-slate-6 hover:bg-slate-2 "
-                    "hover:text-slate-12 focus-visible:outline-none "
-                    "focus-visible:ring-2 focus-visible:ring-slate-7"
+                    "rounded-md border border-secondary-5 bg-secondary-1 px-2.5 text-secondary-11 "
+                    "transition-colors hover:border-secondary-6 hover:bg-secondary-2 "
+                    "hover:text-secondary-12 focus-visible:outline-none "
+                    "focus-visible:ring-2 focus-visible:ring-secondary-7"
                 ),
             ),
             content=rx.box(
@@ -251,7 +253,10 @@ def hovercard(trigger: rx.Component, content: rx.Component) -> rx.Component:
             trigger,
         ),
         rx.hover_card.content(
-            content, side="top", align="center", class_name="font-small text-slate-11"
+            content,
+            side="top",
+            align="center",
+            class_name="font-small text-secondary-11",
         ),
     )
 
@@ -369,8 +374,8 @@ def prop_docs(
                             size=14,
                             class_name=rx.cond(
                                 expanded,
-                                "row-expand-icon mt-0.5 shrink-0 rotate-180 text-slate-9 opacity-100 transition-[opacity,transform]",
-                                "row-expand-icon mt-0.5 shrink-0 text-slate-9 opacity-0 transition-[opacity,transform] group-hover:opacity-100",
+                                "row-expand-icon mt-0.5 shrink-0 rotate-180 text-secondary-9 opacity-100 transition-[opacity,transform]",
+                                "row-expand-icon mt-0.5 shrink-0 text-secondary-9 opacity-0 transition-[opacity,transform] group-hover:opacity-100",
                             ),
                         )
                         if expanded is not None
@@ -418,11 +423,11 @@ def prop_docs(
                             rx.icon(
                                 tag="info",
                                 size=15,
-                                class_name="!text-slate-9 shrink-0",
+                                class_name="!text-secondary-9 shrink-0",
                             ),
                             rx.text(
                                 f"Union[{', '.join(all_types)}]",
-                                class_name="font-small text-slate-11",
+                                class_name="font-small text-secondary-11",
                             ),
                         ),
                     ),
@@ -434,7 +439,7 @@ def prop_docs(
                 rx.box(
                     render_inline_markdown(
                         description,
-                        class_name="font-small text-slate-11 whitespace-normal leading-snug break-words",
+                        class_name="font-small text-secondary-11 whitespace-normal leading-snug break-words",
                     ),
                     class_name=cell_content_class,
                 ),
@@ -456,8 +461,10 @@ def generate_props(
     prop_list = list(props)
     if len(prop_list) == 0:
         return rx.box(
-            rx.heading("Props", as_="h3", class_name="font-large text-slate-12"),
-            rx.text("No component specific props", class_name="text-slate-9 font-base"),
+            rx.heading("Props", as_="h3", class_name="font-large text-secondary-12"),
+            rx.text(
+                "No component specific props", class_name="text-secondary-11 font-base"
+            ),
             class_name="flex flex-col overflow-x-auto justify-start py-2 w-full",
         )
 
@@ -517,7 +524,7 @@ def generate_props(
         cells, is_long_row, expanded_name, expanded = prop_docs(prop, component)
         row_props = {
             "class_name": ui.cn(
-                "border-b border-slate-4 last:border-b-0 transition-colors hover:bg-slate-2",
+                "border-b border-secondary-4 last:border-b-0 transition-colors hover:bg-secondary-2",
                 "group cursor-pointer" if is_long_row else "",
             )
         }
@@ -530,7 +537,7 @@ def generate_props(
             )
         )
 
-    body = rx.el.tbody(*rows, class_name="bg-slate-1")
+    body = rx.el.tbody(*rows, class_name="bg-secondary-1")
 
     comp: rx.Component
     try:
@@ -586,10 +593,10 @@ def _is_bool_prop(p: PropDocumentation) -> bool:
                 return False
 
         line_class = "font-mono text-sm whitespace-pre"
-        kw_class = "text-violet-11"
+        kw_class = "text-primary-11"
         str_class = "text-orange-11"
         bool_class = "text-blue-11"
-        prop_name_class = "text-slate-12"
+        prop_name_class = "text-secondary-12"
         token_re = re.compile(
             r'(rx\.[\w.]+)|("[^"]*")|(\b(?:True|False|None)\b)|(\b\d+(?:\.\d+)?\b)|(\w+)|(\s+)|(.)'
         )
@@ -704,17 +711,17 @@ def _render_dynamic_prop(indent: str, p, var) -> rx.Component:
                 comp,
                 class_name=(
                     "flex flex-col items-center justify-center p-6 flex-1 "
-                    "bg-slate-2 border-b lg:border-b-0 lg:border-r "
-                    "border-slate-4 min-w-0"
+                    "bg-secondary-2 border-b lg:border-b-0 lg:border-r "
+                    "border-secondary-4 min-w-0"
                 ),
             ),
             rx.el.div(
                 *code_children,
-                class_name="flex-1 p-4 bg-slate-1 min-w-0 overflow-x-auto",
+                class_name="flex-1 p-4 bg-secondary-1 min-w-0 overflow-x-auto",
             ),
             class_name=(
                 "flex flex-col lg:flex-row w-full rounded-xl border "
-                "border-slate-4 overflow-hidden"
+                "border-secondary-4 overflow-hidden"
             ),
         )
     else:
@@ -727,20 +734,20 @@ def _render_dynamic_prop(indent: str, p, var) -> rx.Component:
                 rx.el.div(
                     rx.code(
                         prop.name,
-                        class_name="code-style text-nowrap leading-normal text-slate-11",
+                        class_name="code-style text-nowrap leading-normal text-secondary-11",
                     ),
                     control,
                     class_name=(
                         "grid grid-cols-[8rem_minmax(0,1fr)] items-start gap-4 "
-                        "border-b border-slate-4 px-4 py-3 transition-colors "
-                        "last:border-b-0 hover:bg-slate-2"
+                        "border-b border-secondary-4 px-4 py-3 transition-colors "
+                        "last:border-b-0 hover:bg-secondary-2"
                     ),
                 )
                 for prop, control in interactive_controls
             ],
             class_name=(
                 "mb-4 w-full min-w-0 overflow-hidden rounded-xl border "
-                "border-slate-4 bg-slate-1 shadow-small"
+                "border-secondary-4 bg-secondary-1 shadow-small"
             ),
         )
 
@@ -750,7 +757,7 @@ def _render_dynamic_prop(indent: str, p, var) -> rx.Component:
         rx.heading(
             "Props",
             as_="h3",
-            class_name="font-large text-slate-12 mt-4 mb-2 text-left self-start",
+            class_name="font-large text-secondary-12 mt-4 mb-2 text-left self-start",
         ),
         rx.box(
             rx.el.table(
@@ -769,12 +776,12 @@ def _render_dynamic_prop(indent: str, p, var) -> rx.Component:
                             class_name=ui.cn(_PROPS_TABLE_HEADER_CLASS, "w-[55%]"),
                         ),
                     ),
-                    class_name="border-b border-slate-4 bg-slate-2",
+                    class_name="border-b border-secondary-4 bg-secondary-2",
                 ),
                 body,
                 class_name="w-full table-fixed border-collapse text-left",
             ),
-            class_name="mb-4 w-full min-w-0 overflow-hidden rounded-xl border border-slate-4 bg-slate-1 shadow-small",
+            class_name="mb-4 w-full min-w-0 overflow-hidden rounded-xl border border-secondary-4 bg-secondary-1 shadow-small",
         ),
     )
 
@@ -787,25 +794,27 @@ def generate_event_triggers(
     if not custom_handlers:
         return rx.box(
             rx.heading(
-                "Event Triggers", as_="h3", class_name="font-large text-slate-12"
+                "Event Triggers", as_="h3", class_name="font-large text-secondary-12"
             ),
             rx.link(
                 "See the full list of default event triggers",
                 href="https://reflex.dev/docs/api-reference/event-triggers/",
-                class_name="text-violet-11 font-base",
+                class_name="text-primary-11 font-base",
                 is_external=True,
             ),
             class_name="py-2 overflow-x-auto justify-start flex flex-col gap-4",
         )
     table_header_class_name = (
-        "font-small text-slate-12 text-normal w-auto justify-start pl-4 font-bold"
+        "font-small text-secondary-12 text-normal w-auto justify-start pl-4 font-bold"
     )
     return rx.box(
-        rx.heading("Event Triggers", as_="h3", class_name="font-large text-slate-12"),
+        rx.heading(
+            "Event Triggers", as_="h3", class_name="font-large text-secondary-12"
+        ),
         rx.link(
             "See the full list of default event triggers",
             href="https://reflex.dev/docs/api-reference/event-triggers/",
-            class_name="text-violet-11 font-base",
+            class_name="text-primary-11 font-base",
             is_external=True,
         ),
         rx.scroll_area(
@@ -826,7 +835,7 @@ def generate_event_triggers(
                             "Description", class_name=table_header_class_name
                         ),
                     ),
-                    class_name="bg-slate-3",
+                    class_name="bg-secondary-3",
                 ),
                 rx.table.body(
                     *[
@@ -837,16 +846,16 @@ def generate_event_triggers(
                             ),
                             rx.table.cell(
                                 handler.description or "",
-                                class_name="justify-start p-4 text-slate-11 font-small",
+                                class_name="justify-start p-4 text-secondary-11 font-small",
                             ),
                         )
                         for handler in custom_handlers
                     ],
-                    class_name="bg-slate-2",
+                    class_name="bg-secondary-2",
                 ),
                 variant="surface",
                 size="1",
-                class_name="w-full border border-slate-4",
+                class_name="w-full border border-secondary-4",
             ),
             class_name="w-full justify-start overflow-hidden",
         ),
@@ -863,7 +872,9 @@ def generate_valid_children(comp: type[Component]) -> rx.Component:
         for child in comp._valid_children
     ]
     return rx.box(
-        rx.heading("Valid Children", as_="h3", class_name="font-large text-slate-12"),
+        rx.heading(
+            "Valid Children", as_="h3", class_name="font-large text-secondary-12"
+        ),
         rx.box(*valid_children, class_name="flex flex-row gap-2 flex-wrap"),
         class_name="pb-6 w-full items-start flex flex-col gap-4",
     )
@@ -921,9 +932,9 @@ def multi_docs(
         component_docs(component_tuple, previews) for component_tuple in ll_list[1:]
     ]
 
-    active_class_name = "font-small bg-slate-2 p-2 text-slate-11 rounded-xl shadow-large w-28 cursor-default border border-slate-4 text-center"
+    active_class_name = "font-small bg-secondary-2 p-2 text-secondary-11 rounded-xl shadow-large w-28 cursor-default border border-secondary-4 text-center"
 
-    non_active_class_name = "font-small w-28 transition-color hover:text-slate-11 text-slate-9 p-2 text-center"
+    non_active_class_name = "font-small w-28 transition-color hover:text-secondary-12 text-secondary-11 p-2 text-center"
 
     def links(current_page, ll_doc_exists, path):
         path = str(path).rstrip("/")
@@ -943,7 +954,7 @@ def links(current_page, ll_doc_exists, path):
                             href=path + "/low",
                             underline="none",
                         ),
-                        class_name="bg-slate-3 rounded-[1.125rem] p-2 gap-2 flex items-center justify-center",
+                        class_name="bg-secondary-3 rounded-[1.125rem] p-2 gap-2 flex items-center justify-center",
                     ),
                     class_name="flex mb-2",
                 )
@@ -963,7 +974,7 @@ def links(current_page, ll_doc_exists, path):
                             href=path + "/low",
                             underline="none",
                         ),
-                        class_name="bg-slate-3 rounded-[1.125rem] p-2 gap-2 flex items-center justify-center",
+                        class_name="bg-secondary-3 rounded-[1.125rem] p-2 gap-2 flex items-center justify-center",
                     ),
                     class_name="flex mb-2",
                 )
diff --git a/docs/app/reflex_docs/pages/docs/custom_components.py b/docs/app/reflex_docs/pages/docs/custom_components.py
index a30b76702fd..4e4ea054682 100644
--- a/docs/app/reflex_docs/pages/docs/custom_components.py
+++ b/docs/app/reflex_docs/pages/docs/custom_components.py
@@ -137,9 +137,9 @@ def filter_item(
                 class_name="size-2 justify-end bg-violet-9 rounded-full",
             ),
         ),
-        class_name="flex flex-row gap-[14px] items-center justify-start w-full cursor-pointer hover:bg-slate-3 transition-bg text-nowrap overflow-hidden p-[8px_14px]",
-        border_top=f"1px solid {c_color('slate', 5)}" if border else "none",
-        border_bottom=f"1px solid {c_color('slate', 5)}" if border else "none",
+        class_name="flex flex-row gap-[14px] items-center justify-start w-full cursor-pointer hover:bg-secondary-3 transition-bg text-nowrap overflow-hidden p-[8px_14px]",
+        border_top="1px solid var(--secondary-4)" if border else "none",
+        border_bottom="1px solid var(--secondary-4)" if border else "none",
         on_click=on_click,
     )
 
@@ -174,11 +174,11 @@ def filter_item(
     "overflow": "hidden",
     "padding": "0px",
     "cursor": "default",
-    "background_color": c_color("slate", 2),
-    "border": f"1px solid {c_color('slate', 5)}",
+    "background_color": "var(--secondary-2)",
+    "border": "1px solid var(--secondary-4)",
     "box-shadow": "0px 2px 4px rgba(0, 0, 0, 0.05)",
     "border-radius": "12px",
-    "color": c_color("slate", 9),
+    "color": "var(--secondary-9)",
     **base,
 }
 
@@ -282,7 +282,7 @@ def download(download_url: str) -> rx.Component:
         underline="none",
         href=download_url,
         is_external=True,
-        class_name="text-slate-9 hover:!text-slate-9 bg-slate-1 hover:bg-slate-3 transition-bg cursor-pointer rounded-[6px]",
+        class_name="text-secondary-9 hover:!text-secondary-9 bg-secondary-1 hover:bg-secondary-3 transition-bg cursor-pointer rounded-[6px]",
         title="Documentation",
     )
 
@@ -309,7 +309,7 @@ def table_rows(category: dict):
                 ),
                 get_icon(icon="copy", class_name="p-[5px]"),
                 on_click=rx.set_clipboard("pip install " + category["package_name"]),
-                class_name="flex flex-row gap-1.5 text-slate-9 w-full items-center overflow-hidden border border-slate-5 bg-slate-1 hover:bg-slate-3 transition-bg cursor-pointer shadow-small rounded-[6px] px-1.5 max-w-[20rem]",
+                class_name="flex flex-row gap-1.5 text-secondary-9 w-full items-center overflow-hidden border border-secondary-5 bg-secondary-1 hover:bg-secondary-3 transition-bg cursor-pointer shadow-small rounded-[6px] px-1.5 max-w-[20rem]",
             )
         ),
         rx.table.cell(download(category["download_url"])),
diff --git a/docs/app/reflex_docs/pages/docs/env_vars.py b/docs/app/reflex_docs/pages/docs/env_vars.py
index 985bff34cf6..1d34426c9f4 100644
--- a/docs/app/reflex_docs/pages/docs/env_vars.py
+++ b/docs/app/reflex_docs/pages/docs/env_vars.py
@@ -80,19 +80,19 @@ def generate_env_var_table(cls, include_internal: bool = False) -> rx.Component:
                     rx.table.row(
                         rx.table.column_header_cell(
                             "Name",
-                            class_name="font-small text-slate-12 text-normal w-[20%] justify-start pl-4 font-bold",
+                            class_name="font-small text-secondary-12 text-normal w-[20%] justify-start pl-4 font-bold",
                         ),
                         rx.table.column_header_cell(
                             "Type",
-                            class_name="font-small text-slate-12 text-normal w-[15%] justify-start pl-4 font-bold",
+                            class_name="font-small text-secondary-12 text-normal w-[15%] justify-start pl-4 font-bold",
                         ),
                         rx.table.column_header_cell(
                             "Default",
-                            class_name="font-small text-slate-12 text-normal w-[15%] justify-start pl-4 font-bold",
+                            class_name="font-small text-secondary-12 text-normal w-[15%] justify-start pl-4 font-bold",
                         ),
                         rx.table.column_header_cell(
                             "Description",
-                            class_name="font-small text-slate-12 text-normal w-[50%] justify-start pl-4 font-bold",
+                            class_name="font-small text-secondary-12 text-normal w-[50%] justify-start pl-4 font-bold",
                         ),
                     )
                 ),
@@ -120,7 +120,7 @@ def generate_env_var_table(cls, include_internal: bool = False) -> rx.Component:
                             ),
                             rx.table.cell(
                                 render_markdown(cls.get_env_var_docstring(name) or ""),
-                                class_name="font-small text-slate-11 w-[50%]",
+                                class_name="font-small text-secondary-11 w-[50%]",
                             ),
                         )
                         for name, var in env_vars
diff --git a/docs/app/reflex_docs/pages/docs/library.py b/docs/app/reflex_docs/pages/docs/library.py
index e0991cb140b..3cf8e95808f 100644
--- a/docs/app/reflex_docs/pages/docs/library.py
+++ b/docs/app/reflex_docs/pages/docs/library.py
@@ -49,12 +49,12 @@ def generate_gallery(
                 rx.link(
                     rx.el.h1(
                         get_display_name(category),
-                        class_name="font-large text-slate-12",
+                        class_name="font-large text-secondary-12",
                     ),
-                    get_icon("new_tab", class_name="text-slate-11 [&>svg]:size-4"),
+                    get_icon("new_tab", class_name="text-secondary-11 [&>svg]:size-4"),
                     href=f"/library/{prefix.strip('/') + '/' if prefix.strip('/') else ''}{category.lower()}",
                     underline="none",
-                    class_name="px-4 py-2 bg-slate-1 hover:bg-slate-3 transition-bg flex flex-row justify-between items-center !text-slate-12",
+                    class_name="px-4 py-2 bg-secondary-1 hover:bg-secondary-3 transition-bg flex flex-row justify-between items-center !text-secondary-12",
                 ),
                 rx.box(
                     *[
@@ -65,15 +65,15 @@ def generate_gallery(
                                 clist=c,
                                 prefix=prefix,
                             ),
-                            class_name="font-small text-slate-11 hover:!text-violet-9 transition-color w-fit",
+                            class_name="font-small text-secondary-11 hover:!text-primary-9 transition-color w-fit",
                         )
                         for c in get_components_for_category(
                             category, components[category]
                         )
                     ],
-                    class_name="flex flex-col gap-2.5 px-4 py-2 border-t border-slate-5",
+                    class_name="flex flex-col gap-2.5 px-4 py-2 border-t border-secondary-5",
                 ),
-                class_name="flex flex-col border border-slate-5 rounded-xl bg-slate-2 shadow-large overflow-hidden",
+                class_name="flex flex-col border border-secondary-5 rounded-xl bg-secondary-2 shadow-large overflow-hidden",
             )
             for category in components
         ]
diff --git a/docs/app/reflex_docs/pages/docs/recipes_overview.py b/docs/app/reflex_docs/pages/docs/recipes_overview.py
index bc51f72dea0..35517a00867 100644
--- a/docs/app/reflex_docs/pages/docs/recipes_overview.py
+++ b/docs/app/reflex_docs/pages/docs/recipes_overview.py
@@ -32,27 +32,27 @@ def component_grid():
                 rx.box(
                     rx.el.h1(
                         rx.utils.format.to_title_case(category),
-                        class_name="font-large text-slate-12",
+                        class_name="font-large text-secondary-12",
                     ),
                     rx.icon(
                         icons.get(category, "shapes"),
                         size=18,
-                        class_name="!text-slate-9",
+                        class_name="!text-secondary-9",
                     ),
-                    class_name="px-4 py-2 flex flex-row !text-slate-12 gap-3 items-center justify-between",
+                    class_name="px-4 py-2 flex flex-row !text-secondary-12 gap-3 items-center justify-between",
                 ),
                 rx.box(
                     *[
                         rx.link(
                             format_titles(c),
                             href=get_component_link(category, c),
-                            class_name="font-small text-slate-11 hover:!text-violet-9 transition-color w-fit",
+                            class_name="font-small text-secondary-11 hover:!text-primary-9 transition-color w-fit",
                         )
                         for c in recipes_list[category]
                     ],
-                    class_name="flex flex-col gap-3 px-4 py-2 border-t border-slate-5",
+                    class_name="flex flex-col gap-3 px-4 py-2 border-t border-secondary-5",
                 ),
-                class_name="flex flex-col border border-slate-5 rounded-xl bg-slate-2 shadow-large overflow-hidden",
+                class_name="flex flex-col border border-secondary-5 rounded-xl bg-secondary-2 shadow-large overflow-hidden",
             )
         )
 
@@ -65,13 +65,13 @@ def info_card(title, content):
     return rx.box(
         rx.el.h2(
             title,
-            class_name="font-md-smbold text-slate-12",
+            class_name="font-md-smbold text-secondary-12",
         ),
         rx.text(
             content,
-            class_name="font-small text-slate-11",
+            class_name="font-small text-secondary-11",
         ),
-        class_name="flex flex-col border gap-2 border-slate-5 rounded-xl bg-slate-1 shadow-large overflow-hidden px-4 py-2",
+        class_name="flex flex-col border gap-2 border-secondary-5 rounded-xl bg-secondary-1 shadow-large overflow-hidden px-4 py-2",
     )
 
 
diff --git a/docs/app/reflex_docs/pages/docs/source.py b/docs/app/reflex_docs/pages/docs/source.py
index fd15d5d82c0..694931f6d21 100644
--- a/docs/app/reflex_docs/pages/docs/source.py
+++ b/docs/app/reflex_docs/pages/docs/source.py
@@ -9,7 +9,7 @@
 from reflex_docs.templates.docpage import h1_comp, h2_comp
 
 table_header_class_name = (
-    "font-small text-slate-12 text-normal w-auto justify-start pl-4 font-bold"
+    "font-small text-secondary-12 text-normal w-auto justify-start pl-4 font-bold"
 )
 
 
@@ -42,7 +42,7 @@ def format_fields(
                         ),
                         rx.table.cell(
                             render_markdown(field.description or ""),
-                            class_name="font-small text-slate-11",
+                            class_name="font-small text-secondary-11",
                         ),
                     )
                     for field in fields
@@ -73,7 +73,7 @@ def format_methods(methods: tuple[MethodDocumentation, ...]) -> rx.Component:
                     rx.table.cell(
                         method.description or "",
                         white_space="normal",
-                        class_name="font-small text-slate-11 text-nowrap",
+                        class_name="font-small text-secondary-11 text-nowrap",
                     ),
                 )
                 for method in methods
diff --git a/docs/app/reflex_docs/pages/docs_landing/__init__.py b/docs/app/reflex_docs/pages/docs_landing/__init__.py
index 9fd7511c31a..76025e0f2dd 100644
--- a/docs/app/reflex_docs/pages/docs_landing/__init__.py
+++ b/docs/app/reflex_docs/pages/docs_landing/__init__.py
@@ -46,5 +46,5 @@ def docs_landing() -> rx.Component:
             ),
             class_name="flex flex-col w-full relative h-full justify-center items-center",
         ),
-        class_name="flex flex-col w-full justify-center items-center relative dark:bg-m-slate-12 bg-m-slate-1",
+        class_name="flex flex-col w-full justify-center items-center relative bg-secondary-1",
     )
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py b/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
index 52bb83c635e..7527b4308c9 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
@@ -72,24 +72,24 @@ def card(
     return rx.el.div(
         rx.el.span(
             "Enterprise-only",
-            class_name="text-m-slate-12 dark:text-m-slate-3 text-xs font-medium bg-m-slate-1 dark:bg-m-slate-11 px-2.5 h-7 absolute top-0 right-0 border-b border-l rounded-bl-lg border-m-slate-4 dark:border-m-slate-9 flex justify-center items-center",
+            class_name="text-secondary-12 text-xs font-medium bg-secondary-1 px-2.5 h-7 absolute top-0 right-0 border-b border-l rounded-bl-lg border-secondary-4 flex justify-center items-center",
         )
         if enteprise_only
         else None,
         rx.el.div(
             rx.el.span(
                 title,
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-xl font-[575]",
+                class_name="text-secondary-12 text-xl font-[575]",
             ),
             rx.el.span(
                 description,
-                class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475]",
+                class_name="text-secondary-11 text-sm font-[475]",
             ),
             class_name="flex flex-col gap-2 p-8",
         ),
         content,
         rx.el.a(href=href, class_name="absolute inset-0"),
-        class_name="flex flex-col bg-white/96 dark:bg-m-slate-11 backdrop-blur-[16px] rounded-xl relative cursor-pointer transition-colors overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03)] dark:shadow-none dark:border-t  dark:border-m-slate-9",
+        class_name="flex flex-col bg-secondary-1/96 backdrop-blur-[16px] rounded-xl relative cursor-pointer transition-colors overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03)] dark:shadow-none dark:border dark:border-secondary-4",
     )
 
 
@@ -105,7 +105,7 @@ def integration_icon_marquee(integration_name: str) -> rx.Component:
         ),
         ui.avatar.fallback(
             integration_name[0],
-            class_name="text-m-slate-12 dark:text-m-slate-3 text-base font-semibold uppercase size-full",
+            class_name="text-secondary-12 text-base font-semibold uppercase size-full",
             unstyled=True,
         ),
         unstyled=True,
@@ -122,7 +122,7 @@ def integrations_marquee() -> rx.Component:
         marquee(
             *[integration_icon_marquee(name) for name in reversed(integration_names)],
             direction="left",
-            gradient_color="light-dark(rgba(255, 255, 255, 0.96), var(--m-slate-11))",
+            gradient_color="light-dark(rgba(255, 255, 255, 0.96), var(--secondary-1))",
             class_name="h-auto w-full overflow-hidden",
             gradient_width=65,
             speed=25,
@@ -131,7 +131,7 @@ def integrations_marquee() -> rx.Component:
         marquee(
             *[integration_icon_marquee(name) for name in integration_names],
             direction="right",
-            gradient_color="light-dark(rgba(255, 255, 255, 0.96), var(--m-slate-11))",
+            gradient_color="light-dark(rgba(255, 255, 255, 0.96), var(--secondary-1))",
             class_name="h-auto w-full overflow-hidden",
             gradient_width=65,
             speed=25,
@@ -147,11 +147,11 @@ def ai_builder_section() -> rx.Component:
             rx.el.div(
                 rx.el.h2(
                     "AI Builder",
-                    class_name="text-m-slate-12 dark:text-m-slate-3 text-3xl font-[575]",
+                    class_name="text-secondary-12 text-3xl font-[575]",
                 ),
                 rx.el.p(
                     "Learn how to build applications with Reflex AI.",
-                    class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475]",
+                    class_name="text-secondary-11 text-sm font-[475]",
                 ),
                 class_name="flex flex-col gap-4",
             ),
@@ -160,7 +160,7 @@ def ai_builder_section() -> rx.Component:
                     title="Getting Started",
                     description="A comprehensive guide to working effectively with AI Builder. The key to success is clarity, structure, and iteration.",
                     content=rx.image(
-                        src=f"{REFLEX_ASSETS_CDN}docs/{rx.color_mode_cond('light', 'dark')}/getting_started.svg",
+                        src=f"{REFLEX_ASSETS_CDN}docs/{rx.color_mode_cond('light', 'dark')}/getting_started_1.svg",
                         class_name="w-full h-auto pb-8",
                     ),
                     href=ai_builder_pages.overview.best_practices.path,
@@ -175,7 +175,7 @@ def ai_builder_section() -> rx.Component:
                     title="MCP",
                     description="The Reflex Model Context Protocol (MCP) provides AI assistants and coding tools with structured access to Reflex documentation and component information.",
                     content=rx.image(
-                        src=f"{REFLEX_ASSETS_CDN}docs/{rx.color_mode_cond('light', 'dark')}/mcp.svg",
+                        src=f"{REFLEX_ASSETS_CDN}docs/{rx.color_mode_cond('light', 'dark')}/mcp_1.svg",
                         class_name="w-full h-auto -mt-4",
                     ),
                     href=ai_builder_pages.integrations.mcp_overview.path,
@@ -185,5 +185,5 @@ def ai_builder_section() -> rx.Component:
             ),
             class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto",
         ),
-        class_name="bg-gradient-to-b from-white-1 to-m-slate-1 dark:from-m-slate-11 dark:to-m-slate-12 w-full lg:pt-24 lg:pb-24 pb-10 max-xl:px-6 max-lg:pt-10",
+        class_name="bg-gradient-to-b from-secondary-2 to-secondary-1 w-full lg:pt-24 lg:pb-24 pb-10 max-xl:px-6 max-lg:pt-10",
     )
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/divider.py b/docs/app/reflex_docs/pages/docs_landing/views/divider.py
index 1796075ba6f..6b545c1b9d7 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/divider.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/divider.py
@@ -5,13 +5,13 @@
 def divider(class_name: str = "") -> rx.Component:
     return rx.el.div(
         rx.el.div(
-            class_name="absolute top-0 -right-24 w-24 h-px bg-gradient-to-l from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+            class_name="absolute top-0 -right-24 w-24 h-px bg-gradient-to-l from-transparent to-current text-secondary-4"
         ),
         rx.el.div(
-            class_name="absolute top-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+            class_name="absolute top-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-secondary-4"
         ),
         class_name=ui.cn(
-            "w-full h-[1px] bg-m-slate-4 dark:bg-m-slate-10 relative max-w-(--landing-layout-max-width) mx-auto",
+            "w-full h-[1px] bg-secondary-4 relative max-w-(--landing-layout-max-width) mx-auto",
             class_name,
         ),
     )
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/framework.py b/docs/app/reflex_docs/pages/docs_landing/views/framework.py
index e7d46eba0f5..c857b5edefe 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/framework.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/framework.py
@@ -15,31 +15,31 @@ def docs_item(
         rx.el.div(
             ui.icon(
                 icon,
-                class_name="size-6 group-hover:text-primary-10 group-hover:dark:text-m-slate-5",
+                class_name="size-6 group-hover:text-primary-10 group-hover:dark:text-secondary-11",
                 stroke_width=1.5,
             ),
             rx.el.span(
                 title,
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-xl font-[575] group-hover:text-primary-10 group-hover:dark:text-m-slate-5",
+                class_name="text-secondary-12 text-xl font-[575] group-hover:text-primary-10 group-hover:dark:text-secondary-11",
             ),
             rx.el.div(
                 "Enterprise-only",
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-xs font-medium bg-m-slate-1 dark:bg-m-slate-11 px-2.5 h-7 border-b border rounded-lg border-m-slate-4 dark:border-m-slate-10 flex justify-center items-center ml-1",
+                class_name="text-secondary-12 text-xs font-medium bg-secondary-1 px-2.5 h-7 border-b border rounded-lg border-secondary-4 flex justify-center items-center ml-1",
             )
             if enterprise_only
             else None,
             ui.icon(
                 "ArrowRight01Icon",
-                class_name="size-4 ml-auto group-hover:text-primary-10 group-hover:dark:text-m-slate-5",
+                class_name="size-4 ml-auto group-hover:text-primary-10 group-hover:dark:text-secondary-11",
             ),
             class_name="flex row items-center gap-3 h-8",
         ),
         rx.el.p(
             description,
-            class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475]",
+            class_name="text-secondary-11 text-sm font-[475]",
         ),
         rx.el.a(to=href, class_name="absolute inset-0"),
-        class_name="flex flex-col gap-2 py-8 pr-8 relative group lg:max-w-[21rem] w-full max-lg:text-start hover:bg-[linear-gradient(243deg,var(--m-slate-2,#F6F7F9)_0%,var(--m-slate-1,#FCFCFD)_100%)] dark:hover:bg-[linear-gradient(243deg,var(--m-slate-11,#1D2025)_0%,var(--m-slate-12,#151618)_63.63%)]",
+        class_name="flex flex-col gap-2 py-8 pr-8 relative group lg:max-w-[21rem] w-full max-lg:text-start hover:bg-[linear-gradient(243deg,var(--secondary-2)_0%,var(--secondary-1)_100%)]",
     )
 
 
@@ -75,7 +75,7 @@ def component_link(name: str, href: str) -> rx.Component:
             ui.icon("ArrowRight01Icon", class_name="ml-auto"),
             variant="ghost",
             size="xs",
-            class_name="font-[525] w-full text-m-slate-12 dark:text-m-slate-3 px-0",
+            class_name="font-[525] w-full text-secondary-12 px-0",
         ),
         to=f"/library/{href.strip('/')}",
         class_name="w-full",
@@ -89,20 +89,20 @@ def components_section() -> rx.Component:
                 ui.icon("MenuSquareIcon", class_name="size-6", stroke_width=1.5),
                 rx.el.span(
                     "Component Library",
-                    class_name="text-m-slate-12 dark:text-m-slate-3 text-xl font-[575] group-hover:text-primary-10",
+                    class_name="text-secondary-12 text-xl font-[575] group-hover:text-primary-10",
                 ),
                 class_name="flex row items-center gap-3 h-8",
             ),
             rx.el.p(
                 "Build your app with our comprehensive collection of UI components and features.",
-                class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475] max-w-[16.5rem]",
+                class_name="text-secondary-11 text-sm font-[475] max-w-[16.5rem]",
             ),
             rx.el.a(
                 button(
                     "Browse All Components",
                     variant="outline",
                     native_button=False,
-                    class_name="font-[525] w-fit text-m-slate-12 dark:text-m-slate-3",
+                    class_name="font-[525] w-fit text-secondary-12",
                 ),
                 to=library.path,
                 class_name="w-fit mt-4",
@@ -140,7 +140,7 @@ def components_section() -> rx.Component:
             ),
             class_name="grid grid-cols-1 lg:grid-cols-2 lg:gap-28 gap-10 mt-auto",
         ),
-        class_name="flex flex-col gap-4 lg:px-8 pt-8 max-lg:pr-8 pb-6 h-auto w-full flex-1 border-r border-m-slate-4 dark:border-m-slate-10 border-y",
+        class_name="flex flex-col gap-4 lg:px-8 pt-8 max-lg:pr-8 pb-6 h-auto w-full flex-1 border-r border-secondary-4 border-y",
     )
 
 
@@ -152,7 +152,7 @@ def squares_divider() -> rx.Component:
             loading="lazy",
             class_name="pointer-events-none w-auto h-full",
         ),
-        class_name="flex p-4.5 h-auto border-r border-y border-m-slate-4 dark:border-m-slate-10 max-lg:hidden",
+        class_name="flex p-4.5 h-auto border-r border-y border-secondary-4 max-lg:hidden",
     )
 
 
@@ -161,26 +161,26 @@ def framework() -> rx.Component:
         rx.el.div(
             rx.el.h2(
                 "Framework",
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-3xl font-[575]",
+                class_name="text-secondary-12 text-3xl font-[575]",
             ),
             rx.el.p(
                 "Learn how to build applications with Reflex Framework.",
-                class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475]",
+                class_name="text-secondary-11 text-sm font-[475]",
             ),
             class_name="flex flex-col gap-4",
         ),
         rx.el.div(
             rx.el.div(
-                class_name="absolute bottom-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+                class_name="absolute bottom-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-secondary-4"
             ),
             rx.el.div(
-                class_name="absolute top-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+                class_name="absolute top-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-secondary-4"
             ),
             rx.el.div(
-                class_name="absolute bottom-0 -right-24 w-24 h-px bg-gradient-to-l from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+                class_name="absolute bottom-0 -right-24 w-24 h-px bg-gradient-to-l from-transparent to-current text-secondary-4"
             ),
             rx.el.div(
-                class_name="absolute right-0 -top-24 h-24 w-px bg-gradient-to-b from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+                class_name="absolute right-0 -top-24 h-24 w-px bg-gradient-to-b from-transparent to-current text-secondary-4"
             ),
             links_section(),
             squares_divider(),
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/hero.py b/docs/app/reflex_docs/pages/docs_landing/views/hero.py
index 42d9fba2c01..bde3723225d 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/hero.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/hero.py
@@ -12,17 +12,17 @@ def hero() -> rx.Component:
         rx.el.div(
             rx.el.p(
                 "About Reflex",
-                class_name="text-sm font-[525] text-primary-10 dark:text-m-slate-6",
+                class_name="text-sm font-[525] text-primary-10 dark:text-secondary-11",
             ),
             rx.el.h1(
                 "Reflex Documentation",
-                class_name="text-m-slate-12 dark:text-m-slate-3 lg:text-5xl text-3xl font-[575] lg:text-nowrap",
+                class_name="text-secondary-12 lg:text-5xl text-3xl font-[575] lg:text-nowrap",
             ),
             rx.el.p(
                 "Get up and running with Reflex in minutes. A complete set ",
                 rx.el.br(class_name="max-lg:hidden"),
                 " of resources to build, deploy, and scale your application. ",
-                class_name="text-base text-m-slate-7 dark:text-m-slate-6 font-[475]",
+                class_name="text-base text-secondary-11 font-[475]",
             ),
             rx.el.a(
                 button(
@@ -48,7 +48,7 @@ def hero() -> rx.Component:
             rx.image(
                 alt="Squares Docs Logo",
                 custom_attrs={"fetchPriority": "high"},
-                src=f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/squares_docs_logo.svg",
+                src=f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/squares_docs_logo_1.svg",
                 class_name="pointer-events-none h-auto w-auto lg:absolute max-lg:hidden",
             ),
             class_name=ui.cn(
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/hosting.py b/docs/app/reflex_docs/pages/docs_landing/views/hosting.py
index 4851decde7a..8fafce7a12a 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/hosting.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/hosting.py
@@ -9,11 +9,11 @@ def hosting_section() -> rx.Component:
         rx.el.div(
             rx.el.h2(
                 "Cloud",
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-3xl font-[575]",
+                class_name="text-secondary-12 text-3xl font-[575]",
             ),
             rx.el.p(
                 "Learn how to host your applications with Reflex Hosting.",
-                class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475]",
+                class_name="text-secondary-11 text-sm font-[475]",
             ),
             class_name="flex flex-col gap-4",
         ),
@@ -45,7 +45,7 @@ def hosting_section() -> rx.Component:
                 hosting_page.deploy_quick_start.path,
                 has_padding_left=True,
             ),
-            class_name="grid grid-cols-1 lg:grid-cols-2 border-t border-m-slate-4 dark:border-m-slate-10 relative",
+            class_name="grid grid-cols-1 lg:grid-cols-2 border-t border-secondary-4 relative",
         ),
         class_name="flex flex-col gap-10 max-lg:text-center relative max-w-(--landing-layout-max-width) mx-auto w-full justify-start max-xl:px-6 lg:mb-24 overflow-hidden",
     )
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/link_item.py b/docs/app/reflex_docs/pages/docs_landing/views/link_item.py
index f625c120e6a..6097a3dddd2 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/link_item.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/link_item.py
@@ -5,16 +5,16 @@
 def faded_borders() -> rx.Component:
     return rx.fragment(
         rx.el.div(
-            class_name="absolute bottom-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+            class_name="absolute bottom-0 -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-secondary-4"
         ),
         rx.el.div(
-            class_name="absolute -top-px -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+            class_name="absolute -top-px -left-24 w-24 h-px bg-gradient-to-r from-transparent to-current text-secondary-4"
         ),
         rx.el.div(
-            class_name="absolute bottom-0 -right-24 w-24 h-px bg-gradient-to-l from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+            class_name="absolute bottom-0 -right-24 w-24 h-px bg-gradient-to-l from-transparent to-current text-secondary-4"
         ),
         rx.el.div(
-            class_name="absolute right-0 -top-24 h-24 w-px bg-gradient-to-b from-transparent to-current text-m-slate-4 dark:text-m-slate-10"
+            class_name="absolute right-0 -top-24 h-24 w-px bg-gradient-to-b from-transparent to-current text-secondary-4"
         ),
     )
 
@@ -26,26 +26,26 @@ def link_item(
         rx.el.div(
             ui.icon(
                 icon,
-                class_name="size-6 shrink-0 group-hover:text-primary-10 group-hover:dark:text-m-slate-5",
+                class_name="size-6 shrink-0 group-hover:text-primary-10 group-hover:dark:text-secondary-11",
                 stroke_width=1.5,
             ),
             rx.el.span(
                 title,
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-xl font-[575] group-hover:text-primary-10 group-hover:dark:text-m-slate-5",
+                class_name="text-secondary-12 text-xl font-[575] group-hover:text-primary-10 group-hover:dark:text-secondary-11",
             ),
             ui.icon(
                 "ArrowRight01Icon",
-                class_name="size-4 ml-auto group-hover:text-primary-10 group-hover:dark:text-m-slate-5 shrink-0",
+                class_name="size-4 ml-auto group-hover:text-primary-10 group-hover:dark:text-secondary-11 shrink-0",
             ),
             class_name="flex flex-row gap-3 items-center max-lg:text-start",
         ),
         rx.el.span(
             description,
-            class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-[475] text-start",
+            class_name="text-secondary-11 text-sm font-[475] text-start",
         ),
         rx.el.a(to=href, class_name="absolute inset-0"),
         class_name=ui.cn(
-            "flex flex-col gap-2 pr-8 py-8 group border-r border-b border-m-slate-4 dark:border-m-slate-10 relative max-lg:p-6 hover:bg-[linear-gradient(243deg,var(--m-slate-2,#F6F7F9)_0%,var(--m-slate-1,#FCFCFD)_100%)] dark:hover:bg-[linear-gradient(243deg,var(--m-slate-11,#1D2025)_0%,var(--m-slate-12,#151618)_63.63%)]",
+            "flex flex-col gap-2 pr-8 py-8 group border-r border-b border-secondary-4 relative max-lg:p-6 hover:bg-[linear-gradient(243deg,var(--secondary-2)_0%,var(--secondary-1)_100%)]",
             "lg:pl-8 pl-6" if has_padding_left else "",
         ),
     )
diff --git a/docs/app/reflex_docs/pages/integrations/integration_gallery.py b/docs/app/reflex_docs/pages/integrations/integration_gallery.py
index 6318a55c2d3..c3e71ecbd56 100644
--- a/docs/app/reflex_docs/pages/integrations/integration_gallery.py
+++ b/docs/app/reflex_docs/pages/integrations/integration_gallery.py
@@ -19,7 +19,9 @@
 
 
 def integration_filter_button(data: dict):
-    active_pill = "border border-violet-8 bg-violet-3 hover:bg-violet-3 !text-violet-10"
+    active_pill = (
+        "border border-primary-8 bg-primary-3 hover:bg-primary-3 !text-primary-10"
+    )
 
     return ui.button(
         ui.icon(icon=data["icon"]),
diff --git a/docs/app/reflex_docs/pages/integrations/integration_header.py b/docs/app/reflex_docs/pages/integrations/integration_header.py
index 95434014fc9..c4aa997effb 100644
--- a/docs/app/reflex_docs/pages/integrations/integration_header.py
+++ b/docs/app/reflex_docs/pages/integrations/integration_header.py
@@ -5,12 +5,12 @@ def integration_header() -> rx.Component:
     return rx.el.section(
         rx.el.h1(
             "Integrations",
-            class_name="max-w-full inline-block bg-clip-text bg-gradient-to-r from-slate-12 to-slate-11 w-full font-xx-large text-center text-transparent text-balance mx-auto break-words",
+            class_name="max-w-full inline-block bg-clip-text bg-gradient-to-r from-secondary-12 to-secondary-11 w-full font-xx-large text-center text-transparent text-balance mx-auto break-words",
         ),
         rx.el.h2(
             """Easily connect with the tools your team already uses
     or extend your app with any Python SDK, library, or API.""",
-            class_name="max-w-full w-full font-semibold text-md text-center text-slate-11 -mt-2 md:text-2xl mx-auto text-balance word-wrap break-words md:whitespace-pre",
+            class_name="max-w-full w-full font-semibold text-md text-center text-secondary-11 -mt-2 md:text-2xl mx-auto text-balance word-wrap break-words md:whitespace-pre",
         ),
         class_name="flex flex-col justify-center items-center gap-4 mx-auto w-full max-w-[64.19rem] pb-[2.5rem] pt-12",
     )
diff --git a/docs/app/reflex_docs/pages/library_previews.py b/docs/app/reflex_docs/pages/library_previews.py
index 30a7421188b..e74bf40c8e3 100644
--- a/docs/app/reflex_docs/pages/library_previews.py
+++ b/docs/app/reflex_docs/pages/library_previews.py
@@ -71,12 +71,12 @@ def component_card(name: str, link: str, section: str) -> rx.Component:
             rx.box(
                 rx.text(
                     get_display_name(name),
-                    class_name="truncate font-base text-slate-12",
+                    class_name="truncate font-base text-secondary-12",
                 ),
-                rx.icon("chevron-right", size=14, class_name="!text-slate-9"),
+                rx.icon("chevron-right", size=14, class_name="!text-secondary-9"),
                 class_name="bottom-0 absolute flex flex-row justify-between w-full px-4 py-2 items-center",
             ),
-            class_name="rounded-xl border overflow-hidden relative box-border shadow-large bg-slate-2 hover:bg-slate-3 transition-bg border-slate-5",
+            class_name="rounded-xl border overflow-hidden relative box-border shadow-large bg-secondary-2 hover:bg-secondary-3 transition-bg border-secondary-5",
         ),
         href=link,
     )
diff --git a/docs/app/reflex_docs/templates/docpage/docpage.py b/docs/app/reflex_docs/templates/docpage/docpage.py
index 9a76ecef990..f3cef4eb9eb 100644
--- a/docs/app/reflex_docs/templates/docpage/docpage.py
+++ b/docs/app/reflex_docs/templates/docpage/docpage.py
@@ -115,7 +115,7 @@ def social_menu_item(icon: str, url: str, name: str) -> rx.Component:
             get_icon(icon, class_name="shrink-0"),
             variant="ghost",
             size="icon-sm",
-            class_name="text-m-slate-7 dark:text-m-slate-6",
+            class_name="text-secondary-11",
             native_button=False,
         ),
         href=url,
@@ -154,8 +154,8 @@ def thumb_card(score: int, icon: str, label: str) -> rx.Component:
         on_click=FeedbackState.set_score(score),
         class_name=rx.cond(
             FeedbackState.score == score,
-            "flex h-9 items-center justify-center gap-2 rounded-md border border-violet-6 bg-violet-3 px-3 text-sm font-medium text-violet-11 transition-colors",
-            "flex h-9 items-center justify-center gap-2 rounded-md border border-slate-5 bg-slate-1 px-3 text-sm font-medium text-slate-9 transition-colors hover:bg-slate-3 hover:text-slate-11",
+            "flex h-9 items-center justify-center gap-2 rounded-md border border-primary-6 bg-primary-3 px-3 text-sm font-medium text-primary-11 transition-colors",
+            "flex h-9 items-center justify-center gap-2 rounded-md border border-secondary-5 bg-secondary-1 px-3 text-sm font-medium text-secondary-9 transition-colors hover:bg-secondary-3 hover:text-secondary-11",
         ),
     )
 
@@ -178,11 +178,11 @@ def feedback_choice_button(label: str, icon: str, score: int, class_name: str):
         class_name=rx.cond(
             active,
             ui.cn(
-                "border-violet-6 bg-violet-3 text-violet-11 shadow-none",
+                "border-primary-6 bg-primary-3 text-primary-11 shadow-none",
                 class_name,
             ),
             ui.cn(
-                "border-slate-5 bg-slate-1 text-slate-9 shadow-large hover:bg-slate-3 hover:text-slate-11",
+                "border-secondary-5 bg-secondary-1 text-secondary-9 shadow-large hover:bg-secondary-3 hover:text-secondary-11",
                 class_name,
             ),
         ),
@@ -268,7 +268,7 @@ def feedback_button_toc() -> rx.Component:
             size="sm",
             type="button",
             on_click=FeedbackState.set_score(1),
-            class_name="justify-start pl-0 text-m-slate-7 dark:text-m-slate-6",
+            class_name="justify-start pl-0 text-secondary-11",
         ),
         content=feedback_content(),
     )
@@ -289,7 +289,7 @@ def copy_to_markdown(text: rx.Var[str]) -> rx.Component:
         type="button",
         size="sm",
         variant="ghost",
-        class_name="justify-start pl-0 text-m-slate-7 dark:text-m-slate-6",
+        class_name="justify-start pl-0 text-secondary-11",
         on_click=[
             rx.call_function(copied.set_value(True)),
             rx.set_clipboard(text),
@@ -305,7 +305,7 @@ def ask_ai_chat() -> rx.Component:
             "Ask AI about this page",
             size="sm",
             variant="ghost",
-            class_name="justify-start pl-0 text-m-slate-7 dark:text-m-slate-6",
+            class_name="justify-start pl-0 text-secondary-11",
             native_button=False,
         ),
         to="/ai/integrations/mcp-overview/",
@@ -317,7 +317,7 @@ def link_pill(text: str, href: str) -> rx.Component:
         text,
         href=href,
         underline="none",
-        class_name="lg:flex hidden flex-row justify-center items-center gap-2 lg:border-slate-5 bg-slate-3 lg:bg-slate-1 hover:bg-slate-3 shadow-none lg:shadow-large px-3 py-0.5 lg:border lg:border-solid border-none rounded-lg lg:rounded-full w-auto font-small font-small text-slate-9 !hover:text-slate-11 hover:!text-slate-9 truncate whitespace-nowrap transition-bg transition-color cursor-pointer",
+        class_name="lg:flex hidden flex-row justify-center items-center gap-2 lg:border-secondary-5 bg-secondary-3 lg:bg-secondary-1 hover:bg-secondary-3 shadow-none lg:shadow-large px-3 py-0.5 lg:border lg:border-solid border-none rounded-lg lg:rounded-full w-auto font-small font-small text-secondary-9 !hover:text-secondary-11 hover:!text-secondary-9 truncate whitespace-nowrap transition-bg transition-color cursor-pointer",
     )
 
 
@@ -330,10 +330,10 @@ def docpage_footer(path: rx.Var[str]) -> rx.Component:
             rx.box(
                 rx.text(
                     "Did you find this useful?",
-                    class_name="font-small text-slate-11 lg:text-slate-9 whitespace-nowrap",
+                    class_name="font-small text-secondary-11 lg:text-secondary-9 whitespace-nowrap",
                 ),
                 feedback_button(),
-                class_name="flex lg:flex-row flex-col items-center gap-3 lg:gap-4 bg-slate-3 lg:bg-transparent p-4 lg:p-0 rounded-lg w-full",
+                class_name="flex lg:flex-row flex-col items-center gap-3 lg:gap-4 bg-secondary-3 lg:bg-transparent p-4 lg:p-0 rounded-lg w-full",
             ),
             rx.box(
                 link_pill(
@@ -352,7 +352,7 @@ def docpage_footer(path: rx.Var[str]) -> rx.Component:
                 ),
                 class_name="lg:flex hidden flex-row items-center gap-2 w-auto",
             ),
-            class_name="flex flex-row justify-center lg:justify-between items-center border-slate-4 border-y-0 lg:border-y pt-0 lg:pt-8 pb-6 lg:pb-8 w-full",
+            class_name="flex flex-row justify-center lg:justify-between items-center border-secondary-4 border-y-0 lg:border-y pt-0 lg:pt-8 pb-6 lg:pb-8 w-full",
         ),
         rx.box(
             rx.box(
@@ -393,7 +393,7 @@ def docpage_footer(path: rx.Var[str]) -> rx.Component:
             rx.el.div(
                 rx.text(
                     f"Copyright © {datetime.now().year} Pynecone, Inc.",
-                    class_name="font-small text-slate-9",
+                    class_name="font-small text-secondary-9",
                 ),
                 server_status(StatusState.status),
                 class_name="flex flex-row items-center gap-4 justify-between w-full",
@@ -414,7 +414,7 @@ def _copy_page_menu_item(
     row = rx.el.div(
         rx.el.div(
             icon,
-            class_name="flex size-8 items-center justify-center rounded-md border border-slate-5 bg-secondary-2 text-secondary-11 shrink-0",
+            class_name="flex size-8 items-center justify-center rounded-md border border-secondary-5 bg-secondary-2 text-secondary-11 shrink-0",
         ),
         rx.el.div(
             rx.el.div(
@@ -706,7 +706,7 @@ def breadcrumb(path: str, nav_sidebar: rx.Component, doc_content: str | None = N
         label = to_title_case(to_snake_case(segment), sep=" ")
         label = _BREADCRUMB_LABEL_OVERRIDES.get(label, label)
         base_class = ui.cn(
-            "min-h-8 flex items-center text-sm font-[525] text-m-slate-12 dark:text-m-slate-3 last:text-m-slate-7 dark:last:text-m-slate-6",
+            "min-h-8 flex items-center text-sm font-[525] text-secondary-12 last:text-secondary-11",
             "truncate" if i == len(segments) - 1 else "",
         )
 
@@ -733,13 +733,13 @@ def breadcrumb(path: str, nav_sidebar: rx.Component, doc_content: str | None = N
             breadcrumbs.append(
                 ui.icon(
                     "ArrowRight01Icon",
-                    class_name="lg:flex hidden dark:text-m-slate-6 text-m-slate-7 size-4",
+                    class_name="lg:flex hidden text-secondary-11 size-4",
                 ),
             )
             breadcrumbs.append(
                 rx.text(
                     "/",
-                    class_name="font-sm dark:text-m-slate-6 text-m-slate-7 lg:hidden flex",
+                    class_name="font-sm text-secondary-11 lg:hidden flex",
                 )
             )
     from reflex_site_shared.views.hosting_banner import HostingBannerState
@@ -761,12 +761,12 @@ def breadcrumb(path: str, nav_sidebar: rx.Component, doc_content: str | None = N
             ui.icon(
                 "ArrowDown01Icon",
                 size=14,
-                class_name="!text-slate-9 lg:hidden flex",
+                class_name="!text-secondary-9 lg:hidden flex",
             ),
             class_name="flex flex-row items-center gap-2 lg:p-0 p-[0.563rem]",
         ),
         class_name=ui.cn(
-            "relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-slate-4 bg-slate-1 mt-[139px] lg:p-0 border-b lg:border-none w-full max-lg:py-2",
+            "relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-secondary-4 mt-[139px] lg:p-0 border-b lg:border-none w-full max-lg:py-2",
             rx.cond(
                 HostingBannerState.is_banner_visible,
                 "lg:mt-[139px]",
@@ -850,9 +850,11 @@ def wrapper(*args, **kwargs) -> rx.Component:
                             ),
                             underline="none",
                             href=prev.link,
-                            class_name="py-0.5 lg:py-0 rounded-lg lg:w-auto font-small text-slate-9 hover:!text-slate-11 transition-color",
+                            class_name="py-0.5 lg:py-0 rounded-lg lg:w-auto font-small text-secondary-9 hover:!text-secondary-11 transition-color",
+                        ),
+                        rx.text(
+                            next_prev_name, class_name="font-smbold text-secondary-12"
                         ),
-                        rx.text(next_prev_name, class_name="font-smbold text-slate-12"),
                         class_name="flex flex-col justify-start gap-1",
                     )
                 )
@@ -872,9 +874,11 @@ def wrapper(*args, **kwargs) -> rx.Component:
                             ),
                             underline="none",
                             href=next.link,
-                            class_name="py-0.5 lg:py-0 rounded-lg lg:w-auto font-small text-slate-9 hover:!text-slate-11 transition-color",
+                            class_name="py-0.5 lg:py-0 rounded-lg lg:w-auto font-small text-secondary-9 hover:!text-secondary-11 transition-color",
+                        ),
+                        rx.text(
+                            next_prev_name, class_name="font-smbold text-secondary-12"
                         ),
-                        rx.text(next_prev_name, class_name="font-smbold text-slate-12"),
                         class_name="flex flex-col justify-start gap-1 items-end",
                     )
                 )
@@ -905,8 +909,8 @@ def wrapper(*args, **kwargs) -> rx.Component:
                     rx.box(
                         sidebar,
                         class_name=(
-                            "w-[19.5rem] shrink-0 hidden lg:block z-10 border-r border-m-slate-4 dark:border-m-slate-10 sticky left-0 "
-                            "before:content-[''] before:absolute before:top-0 before:bottom-0 before:right-0 before:w-[100vw] before:bg-white-1 dark:before:bg-secondary-2 before:-z-10 "
+                            "w-[19.5rem] shrink-0 hidden lg:block z-10 border-r border-secondary-4 sticky left-0 "
+                            "before:content-[''] before:absolute before:top-0 before:bottom-0 before:right-0 before:w-[100vw] before:bg-white-1 before:-z-10 "
                             + rx.cond(
                                 HostingBannerState.is_banner_visible,
                                 " top-[113px] h-[calc(100vh-113px)]",
@@ -951,10 +955,10 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                     rx.icon(
                                         "align-left",
                                         size=14,
-                                        class_name="dark:text-m-slate-3 text-m-slate-12",
+                                        class_name="text-secondary-12",
                                     ),
                                     "On This Page",
-                                    class_name="text-sm h-8 flex items-center gap-1.5 justify-start font-[525] dark:text-m-slate-3 text-m-slate-12",
+                                    class_name="text-sm h-8 flex items-center gap-1.5 justify-start font-[525] text-secondary-12",
                                 ),
                                 rx.el.ul(
                                     *[
@@ -962,7 +966,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                             rx.el.li(
                                                 rx.el.a(
                                                     text,
-                                                    class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 pl-4 py-1 hover:text-m-slate-9 dark:hover:text-m-slate-5 transition-colors line-clamp-2",
+                                                    class_name="text-sm font-[525] text-secondary-11 pl-4 py-1 hover:text-secondary-12 transition-colors line-clamp-2",
                                                     href=path
                                                     + "#"
                                                     + text.lower().replace(" ", "-"),
@@ -973,7 +977,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                                 rx.el.li(
                                                     rx.el.a(
                                                         text,
-                                                        class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 pl-4 py-1 hover:text-m-slate-9 dark:hover:text-m-slate-5 transition-colors line-clamp-2",
+                                                        class_name="text-sm font-[525] text-secondary-11 pl-4 py-1 hover:text-secondary-12 transition-colors line-clamp-2",
                                                         href=path
                                                         + "#"
                                                         + text.lower().replace(
@@ -985,7 +989,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                                 else rx.el.li(
                                                     rx.el.a(
                                                         text,
-                                                        class_name="text-sm font-[525] text-m-slate-7 dark:text-m-slate-6 pl-8 py-1 hover:text-m-slate-9 dark:hover:text-m-slate-5 transition-colors line-clamp-2",
+                                                        class_name="text-sm font-[525] text-secondary-11 pl-8 py-1 hover:text-secondary-12 transition-colors line-clamp-2",
                                                         href=path
                                                         + "#"
                                                         + text.lower().replace(
@@ -998,7 +1002,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                         for level, text in toc
                                     ],
                                     id="toc-navigation",
-                                    class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:shadow-[1.5px_0_0_0_var(--m-slate-9)_inset] max-h-[60vh] overflow-y-auto scroll-mask-y-10 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+                                    class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--secondary-4)_inset] max-h-[60vh] overflow-y-auto scroll-mask-y-10 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
                                 ),
                                 rx.el.div(
                                     feedback_button_toc(),
@@ -1025,7 +1029,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                     ),
                     class_name="flex justify-center mx-auto mt-0 max-w-[108rem] h-full min-h-screen w-full",
                 ),
-                class_name="flex flex-col justify-center bg-m-slate-1 dark:bg-m-slate-12 w-full relative",
+                class_name="flex flex-col justify-center bg-secondary-1 w-full relative",
                 on_mount=rx.call_script(right_sidebar_item_highlight()),
             )
 
@@ -1073,7 +1077,7 @@ def hover_item(component: rx.Component, component_str: str) -> rx.Component:
                     class_name="flex-1 font-small truncate",
                 ),
                 on_click=rx.set_clipboard(component_str),
-                class_name="flex flex-row items-center gap-1.5 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pr-1.5 border rounded-md w-full max-w-[300px] text-slate-11 transition-bg cursor-pointer",
+                class_name="flex flex-row items-center gap-1.5 border-secondary-5 bg-secondary-1 hover:bg-secondary-3 shadow-small pr-1.5 border rounded-md w-full max-w-[300px] text-secondary-11 transition-bg cursor-pointer",
             ),
         ),
     )
@@ -1157,7 +1161,7 @@ def style_grid(
         rx.grid(
             rx.text("", size="5"),
             *[
-                rx.text(variant, class_name=text_cn + " text-slate-11")
+                rx.text(variant, class_name=text_cn + " text-secondary-11")
                 for variant in variants
             ],
             rx.text(
@@ -1194,7 +1198,7 @@ def style_grid(
                 )
                 for variant in variants
             ],
-            rx.text("Gray", class_name=text_cn + " text-slate-11"),
+            rx.text("Gray", class_name=text_cn + " text-secondary-11"),
             *[
                 hover_item(
                     component=used_component(
@@ -1226,7 +1230,7 @@ def style_grid(
             ],
             (
                 rx.fragment(
-                    rx.text("Disabled", class_name=text_cn + " text-slate-11"),
+                    rx.text("Disabled", class_name=text_cn + " text-secondary-11"),
                     *[
                         hover_item(
                             component=used_component(
@@ -1273,7 +1277,7 @@ def style_grid(
                             rx.icon(
                                 "check",
                                 size=15,
-                                class_name="top-1/2 left-1/2 absolute text-gray-12 transform -translate-x-1/2 -translate-y-1/2"
+                                class_name="top-1/2 left-1/2 absolute text-secondary-12 transform -translate-x-1/2 -translate-y-1/2"
                                 + rx.cond(
                                     RadixDocState.color == color,
                                     " block",
@@ -1285,7 +1289,7 @@ def style_grid(
                             class_name="relative rounded-md cursor-pointer shrink-0 size-[30px]"
                             + rx.cond(
                                 RadixDocState.color == color,
-                                " border-2 border-gray-12",
+                                " border-2 border-secondary-12",
                                 "",
                             ),
                         )
@@ -1296,5 +1300,5 @@ def style_grid(
                 ),
             ),
         ),
-        class_name="flex flex-col justify-center items-center gap-6 border-slate-4 bg-slate-2 mb-4 p-6 border rounded-xl",
+        class_name="flex flex-col justify-center items-center gap-6 border-secondary-4 bg-secondary-2 mb-4 p-6 border rounded-xl",
     )
diff --git a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py
index 53ba88f6b7f..e482e9e0d0b 100644
--- a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py
+++ b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py
@@ -4,7 +4,6 @@
 
 import reflex as rx
 import reflex_components_internal as ui
-from reflex_site_shared.styles.colors import c_color
 
 from .sidebar_items.ai import (
     ai_builder_integrations,
@@ -130,7 +129,7 @@ def sidebar_leaf(
             rx.cond(
                 is_active,
                 rx.el.div(
-                    class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-m-slate-2 dark:bg-slate-3 z-[-1]",
+                    class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-secondary-3 z-[-1]",
                 ),
                 rx.fragment(),
             ),
@@ -174,13 +173,13 @@ def sidebar_leaf_outer(
             rx.flex(
                 rx.text(
                     item_names,
-                    color=rx.cond(is_active, c_color("violet", 9), c_color("slate", 9)),
-                    _hover={
-                        "color": c_color("slate", 11),
-                    },
                     margin="0.5em 0.5em 0.2em 0.5em",
                     width="100%",
-                    class_name="m-0 transition-color",
+                    class_name=rx.cond(
+                        is_active,
+                        "m-0 transition-color text-primary-10",
+                        "m-0 transition-color text-secondary-11 hover:text-secondary-12",
+                    ),
                 ),
             ),
             href=item_link,
@@ -235,11 +234,11 @@ def sidebar_item_comp(
                     "ArrowDown01Icon",
                     class_name="size-4 group-open/details:rotate-180 transition-transform",
                 ),
-                class_name="!px-0 m-0 flex items-center justify-start !ml-[2.5rem] !bg-transparent !hover:bg-transparent !py-1 !pr-0 w-[calc(100%-2.5rem)] !text-m-slate-7 hover:!text-m-slate-11 dark:hover:!text-m-slate-5 dark:!text-m-slate-6 transition-color group xl:max-w-[14rem] cursor-pointer list-none [&::-webkit-details-marker]:hidden [&::marker]:hidden",
+                class_name="!px-0 m-0 flex items-center justify-start !ml-[2.5rem] !bg-transparent !hover:bg-transparent !py-1 !pr-0 w-[calc(100%-2.5rem)] !text-secondary-11 hover:!text-secondary-12 transition-color group xl:max-w-[14rem] cursor-pointer list-none [&::-webkit-details-marker]:hidden [&::marker]:hidden",
             ),
             rx.el.ul(
                 rx.el.li(
-                    class_name=f"m-0 p-0 absolute {child_guide_left_class} top-0 bottom-0 w-px bg-m-slate-4 dark:bg-m-slate-9 z-[-1] pointer-events-none !rounded-none list-none",
+                    class_name=f"m-0 p-0 absolute {child_guide_left_class} top-0 bottom-0 w-px bg-secondary-4 z-[-1] pointer-events-none !rounded-none list-none",
                 ),
                 *[
                     sidebar_item_comp(
@@ -358,7 +357,7 @@ def sidebar_category(
             rx.cond(
                 active,
                 rx.el.div(
-                    class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-m-slate-2 dark:bg-slate-3 z-[-1]",
+                    class_name="absolute left-0 top-1/2 -translate-y-1/2 w-full h-8 rounded-lg bg-secondary-3 z-[-1]",
                 ),
                 rx.fragment(),
             ),
@@ -373,7 +372,7 @@ def sidebar_category(
                 ),
                 class_name=ui.cn(
                     "cursor-pointer flex flex-row justify-start items-center gap-2.5 ml-[3rem] text-sm text-secondary-11 hover:text-secondary-12 h-8",
-                    rx.cond(active, "text-slate-12", ""),
+                    rx.cond(active, "text-primary-10 hover:text-primary-10", ""),
                 ),
             ),
             href=url,
@@ -398,7 +397,7 @@ def create_sidebar_section(
         rx.link(
             rx.el.h2(
                 section_title,
-                class_name="m-0 font-mono text-m-slate-12 dark:text-m-slate-3 hover:text-primary-10 dark:hover:text-primary-9 uppercase text-[0.8125rem] leading-6 font-medium",
+                class_name="m-0 font-mono text-secondary-12 hover:text-primary-10 dark:hover:text-primary-9 uppercase text-[0.8125rem] leading-6 font-medium",
             ),
             underline="none",
             href=section_url,
@@ -628,15 +627,15 @@ def sidebar_comp(
                     rx.icon("atom", size=16),  # pyright: ignore [reportCallIssue]
                     rx.el.h5(
                         "Custom Components",
-                        class_name="font-smbold text-[0.875rem] text-slate-12 leading-5 tracking-[-0.01313rem] transition-color",
+                        class_name="font-smbold text-[0.875rem] text-secondary-12 leading-5 tracking-[-0.01313rem] transition-color",
                     ),
-                    class_name="flex flex-row items-center gap-3 text-slate-12",
+                    class_name="flex flex-row items-center gap-3 text-secondary-12",
                 ),
                 rx.text(  # pyright: ignore [reportCallIssue]
                     "See what components people have made with Reflex!",
-                    class_name="font-small text-slate-9",
+                    class_name="font-small text-secondary-11",
                 ),
-                class_name="flex flex-col gap-2 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-large px-3.5 py-2 border rounded-xl transition-bg",
+                class_name="flex flex-col gap-2 border-secondary-5 bg-secondary-1 hover:bg-secondary-3 shadow-large px-3.5 py-2 border rounded-xl transition-bg",
             ),
             underline="none",
             href=custom_components.path,
diff --git a/docs/app/reflex_docs/views/animated_box.py b/docs/app/reflex_docs/views/animated_box.py
index ad3983a4a43..77d7bff7522 100644
--- a/docs/app/reflex_docs/views/animated_box.py
+++ b/docs/app/reflex_docs/views/animated_box.py
@@ -154,7 +154,7 @@ def status_badge(icon: str, text: str, class_name: str = ""):
             )
         ),
         rx.text(text, class_name="text-xs font-medium text-secondary-11"),
-        class_name=f"flex h-5 p-[0rem_0.375rem_0rem_0.125rem] items-center gap-0.5 rounded-[0.375rem] border border-slate-5 bg-slate-1 {class_name}",
+        class_name=f"flex h-5 p-[0rem_0.375rem_0rem_0.125rem] items-center gap-0.5 rounded-[0.375rem] border border-secondary-5 bg-secondary-1 {class_name}",
     )
 
 
@@ -209,30 +209,30 @@ def terminal_box():
         rx.box(
             rx.text(
                 "$",
-                class_name="text-slate-9 text-xs font-medium text-center leading-4 font-['JetBrains_Mono'] mr-4 self-baseline",
+                class_name="text-secondary-9 text-xs font-medium text-center leading-4 font-['JetBrains_Mono'] mr-4 self-baseline",
             ),
             rx.box(
                 rx.box(
                     rx.text(
                         "",
-                        class_name="text-slate-12 text-xs font-medium text-center leading-4 font-['JetBrains_Mono'] reflex-deploy mr-0.5",
+                        class_name="text-secondary-12 text-xs font-medium text-center leading-4 font-['JetBrains_Mono'] reflex-deploy mr-0.5",
                     ),
                     # Square
                     rx.box(
-                        class_name="w-2 h-4 border-2 border-slate-9 typing-square opacity-100 transition-all duration-200 ease-out"
+                        class_name="w-2 h-4 border-2 border-secondary-9 typing-square opacity-100 transition-all duration-200 ease-out"
                     ),
                     class_name="flex flex-row",
                 ),
                 rx.text(
                     "Deploying...",
-                    class_name="text-slate-9 text-xs font-medium text-center leading-4 font-['JetBrains_Mono'] deploying-text self-start hidden",
+                    class_name="text-secondary-9 text-xs font-medium text-center leading-4 font-['JetBrains_Mono'] deploying-text self-start hidden",
                 ),
                 class_name="flex flex-col",
             ),
             class_name="flex items-center p-5",
         ),
         purple_gradient_circle(),
-        class_name="flex w-[20rem] h-[5rem] flex-col flex-shrink-0 rounded-xl rounded-b-none border-t-[1px] border-r-[1px] border-l-[1px] border-slate-4 bg-[light-dark(rgba(249, 249, 251, 0.48), rgba(26,27,29,0.48))] backdrop-filter backdrop-blur-[10px] terminal-box transition-all duration-[550ms] ease-in-out z-[5] origin-bottom translate-y-0 absolute bottom-0 overflow-hidden",
+        class_name="flex w-[20rem] h-[5rem] flex-col flex-shrink-0 rounded-xl rounded-b-none border-t-[1px] border-r-[1px] border-l-[1px] border-secondary-4 bg-[light-dark(rgba(249, 249, 251, 0.48), rgba(26,27,29,0.48))] backdrop-filter backdrop-blur-[10px] terminal-box transition-all duration-[550ms] ease-in-out z-[5] origin-bottom translate-y-0 absolute bottom-0 overflow-hidden",
     )
 
 
@@ -247,10 +247,10 @@ def deploy_box():
                 },
             ),
             rx.box(
-                rx.text("My App", class_name="text-sm font-medium text-slate-12"),
+                rx.text("My App", class_name="text-sm font-medium text-secondary-12"),
                 rx.text(
                     "my-app.reflex.run",
-                    class_name="text-sm font-medium text-slate-9",
+                    class_name="text-sm font-medium text-secondary-9",
                 ),
                 class_name="flex flex-col",
             ),
@@ -269,7 +269,7 @@ def deploy_box():
             class_name="flex flex-row relative items-center w-full",
         ),
         purple_gradient_circle(),
-        class_name="flex w-[20rem] h-[4.5rem] flex-row flex-shrink-0 rounded-xl rounded-b-none border-t-[1px] border-r-[1px] border-l-[1px] border-slate-4 bg-[light-dark(rgba(249, 249, 251, 0.48), rgba(26,27,29,0.48))] backdrop-filter backdrop-blur-[10px] deploy-box transition-all duration-[550ms] ease-in-out z-[6] origin-bottom absolute items-center p-[1rem_1.625rem_1rem_1.25rem] overflow-hidden",
+        class_name="flex w-[20rem] h-[4.5rem] flex-row flex-shrink-0 rounded-xl rounded-b-none border-t-[1px] border-r-[1px] border-l-[1px] border-secondary-4 bg-[light-dark(rgba(249, 249, 251, 0.48), rgba(26,27,29,0.48))] backdrop-filter backdrop-blur-[10px] deploy-box transition-all duration-[550ms] ease-in-out z-[6] origin-bottom absolute items-center p-[1rem_1.625rem_1rem_1.25rem] overflow-hidden",
     )
 
 
@@ -286,7 +286,7 @@ def animated_box(relative: bool = False) -> rx.Component:
                     <defs>
                         <radialGradient id="paint0_radial_12785_6973" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(213 136) rotate(90) scale(136 213)">
                             <stop stop-color="var(--violet-3)"/>
-                            <stop offset="1" stop-color="var(--slate-1)" stop-opacity="0"/>
+                            <stop offset="1" stop-color="var(--secondary-1)" stop-opacity="0"/>
                         </radialGradient>
                     </defs>
                 </svg>
diff --git a/docs/app/reflex_docs/views/bottom_section/get_started.py b/docs/app/reflex_docs/views/bottom_section/get_started.py
index 6ea67ff9835..83c1604fb88 100644
--- a/docs/app/reflex_docs/views/bottom_section/get_started.py
+++ b/docs/app/reflex_docs/views/bottom_section/get_started.py
@@ -14,7 +14,7 @@ def code_block() -> rx.Component:
   <defs>
     <radialGradient id="paint0_radial_10744_8795" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(299 123.5) rotate(90) scale(123.5 299)">
       <stop stop-color="var(--violet-3)"/>
-      <stop offset="1" stop-color="var(--c-slate-1)" stop-opacity="0"/>
+      <stop offset="1" stop-color="var(--secondary-1)" stop-opacity="0"/>
     </radialGradient>
   </defs>
 </svg>""",
@@ -26,19 +26,19 @@ def code_block() -> rx.Component:
                 rx.el.p("$ pip install reflex"),
                 rx.el.p("$ reflex init"),
                 rx.el.p("$ reflex run"),
-                class_name="font-['JetBrains_Mono'] !font-semibold text-[0.8125rem] text-slate-12 leading-6 tracking-[-0.01219rem]",
+                class_name="font-['JetBrains_Mono'] !font-semibold text-[0.8125rem] text-secondary-12 leading-6 tracking-[-0.01219rem]",
             ),
             hint(
                 text="Copy",
                 content=rx.el.button(
                     get_icon(
                         "clipboard",
-                        class_name="!text-slate-9",
+                        class_name="!text-secondary-9",
                     ),
                     on_click=rx.set_clipboard(
                         "pip install reflex\nreflex init\nreflex run"
                     ),
-                    class_name="cursor-pointer self-baseline h-fit p-2 rounded-[0.625rem] hover:bg-slate-3 transition-bg",
+                    class_name="cursor-pointer self-baseline h-fit p-2 rounded-[0.625rem] hover:bg-secondary-3 transition-bg",
                     custom_attrs={"aria-label": "Copy code"},
                 ),
                 side="bottom",
@@ -62,7 +62,7 @@ def code_block() -> rx.Component:
             class_name="flex flex-row justify-between items-center gap-2",
         ),
         box_shadow="0px 24px 12px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0.00)), 0px 8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0.00)), 0px 2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0.00))",
-        class_name="relative flex flex-col gap-4 bg-[rgba(249,249,251,0.48)] dark:bg-[rgba(26,27,29,0.48)] backdrop-filter backdrop-blur-[6px] p-4 rounded-2xl max-w-[24.5rem] self-center w-full border border-slate-3",
+        class_name="relative flex flex-col gap-4 bg-[rgba(249,249,251,0.48)] dark:bg-[rgba(26,27,29,0.48)] backdrop-filter backdrop-blur-[6px] p-4 rounded-2xl max-w-[24.5rem] self-center w-full border border-secondary-3",
     )
 
 
diff --git a/docs/app/reflex_docs/views/bottom_section/newsletter.py b/docs/app/reflex_docs/views/bottom_section/newsletter.py
index 9b56396478e..4fee86cee7b 100644
--- a/docs/app/reflex_docs/views/bottom_section/newsletter.py
+++ b/docs/app/reflex_docs/views/bottom_section/newsletter.py
@@ -13,11 +13,11 @@ def newsletter_input() -> rx.Component:
                     rx.icon(
                         tag="circle-check",
                         size=16,
-                        class_name="!text-violet-9",
+                        class_name="!text-primary-9",
                     ),
                     rx.text(
                         "Thanks for subscribing!",
-                        class_name="font-base text-slate-11",
+                        class_name="font-base text-secondary-11",
                     ),
                     class_name="flex flex-row items-center gap-2",
                 ),
@@ -38,7 +38,7 @@ def newsletter_input() -> rx.Component:
   <defs>
     <radialGradient id="paint0_radial_10744_8734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200 44.5) rotate(90) scale(44.5 200)">
       <stop stop-color="var(--c-violet-3)"/>
-      <stop offset="1" stop-color="var(--c-slate-2)" stop-opacity="0"/>
+      <stop offset="1" stop-color="var(--secondary-2)" stop-opacity="0"/>
     </radialGradient>
   </defs>
 </svg>""",
@@ -48,7 +48,7 @@ def newsletter_input() -> rx.Component:
                         placeholder="Email",
                         name="input_email",
                         type="email",
-                        class_name="relative box-border border-slate-4 focus:border-violet-9 focus:border-1 bg-slate-2 p-[0.5rem_0.75rem] border rounded-xl font-base text-slate-11 placeholder:text-slate-9 outline-none focus:outline-none w-full",
+                        class_name="relative box-border border-secondary-4 focus:border-violet-9 focus:border-1 bg-secondary-2 p-[0.5rem_0.75rem] border rounded-xl font-base text-secondary-11 placeholder:text-secondary-9 outline-none focus:outline-none w-full",
                     ),
                     class_name="relative w-full flex items-center",
                 ),
@@ -60,7 +60,7 @@ def newsletter_input() -> rx.Component:
   <defs>
     <radialGradient id="paint0_radial_10744_8733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(91.5 44.5) rotate(90) scale(44.5 91.5)">
       <stop stop-color="var(--c-violet-3)"/>
-      <stop offset="1" stop-color="var(--c-slate-2)" stop-opacity="0"/>
+      <stop offset="1" stop-color="var(--secondary-2)" stop-opacity="0"/>
     </radialGradient>
   </defs>
 </svg>""",
@@ -84,10 +84,10 @@ def newsletter_input() -> rx.Component:
 def newsletter_card() -> rx.Component:
     return rx.box(
         rx.box(
-            rx.el.h2("Newsletter", class_name="font-large text-slate-12"),
+            rx.el.h2("Newsletter", class_name="font-large text-secondary-12"),
             rx.el.p(
                 """Get the latest updates and news about Reflex""",
-                class_name="font-base text-slate-10 whitespace-pre",
+                class_name="font-base text-secondary-11 whitespace-pre",
             ),
             class_name="flex flex-col items-center text-center gap-2",
         ),
diff --git a/docs/app/reflex_docs/views/docs_navbar.py b/docs/app/reflex_docs/views/docs_navbar.py
index 13d92039ba4..355167b0f15 100644
--- a/docs/app/reflex_docs/views/docs_navbar.py
+++ b/docs/app/reflex_docs/views/docs_navbar.py
@@ -183,7 +183,7 @@ def docs_navbar() -> rx.Component:
                 navigation_menu(),
                 class_name="relative flex w-full items-center h-full justify-between gap-6 mx-auto flex-row max-w-[108rem]",
             ),
-            class_name="w-full max-full h-[4.5rem] mx-auto flex flex-row items-center 3xl:px-16 px-6 backdrop-blur-[16px] shadow-[0_-2px_2px_1px_rgba(0,0,0,0.02),0_1px_1px_0_rgba(0,0,0,0.08),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] dark:shadow-none dark:border-b dark:border-m-slate-10 bg-gradient-to-b from-white to-m-slate-1 dark:from-m-slate-11 dark:to-m-slate-12",
+            class_name="w-full max-full h-[4.5rem] mx-auto flex flex-row items-center 3xl:px-16 px-6 backdrop-blur-[16px] shadow-[0_-2px_2px_1px_rgba(0,0,0,0.02),0_1px_1px_0_rgba(0,0,0,0.08),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] dark:shadow-none dark:border-b dark:border-secondary-4 bg-gradient-to-b from-secondary-2 to-secondary-1",
         ),
         class_name="flex flex-col w-full top-0 z-[9999] fixed self-center",
     )
diff --git a/docs/app/reflex_docs/views/inkeep.py b/docs/app/reflex_docs/views/inkeep.py
index c39a54c5438..72a826518e5 100644
--- a/docs/app/reflex_docs/views/inkeep.py
+++ b/docs/app/reflex_docs/views/inkeep.py
@@ -142,10 +142,10 @@ def add_hooks(self):
           type: "style",
           value: `
             [data-theme='light'] .ikp-search-bar__button {
-              color: var(--m-slate-7);
+              color: var(--secondary-11);
               padding: 0.375rem 0.5rem;
               border-radius: 0.5rem;
-              background: var(--m-slate-1);
+              background: var(--secondary-1);
               display: flex;
               flex-direction: row;
               align-items: center;
@@ -170,13 +170,13 @@ def add_hooks(self):
               transition: none;
             }
             [data-theme='dark'] .ikp-search-bar__button {
-              color: var(--m-slate-6);
+              color: var(--secondary-11);
               transition: none;
               height: 2rem !important;
               min-height: 2rem !important;
               padding: 0.375rem 0.5rem;
               border-radius: 0.5rem;
-              background: var(--m-slate-11);
+              background: var(--secondary-2);
               display: flex;
               max-width: 10rem;
               flex-direction: row;
@@ -197,10 +197,10 @@ def add_hooks(self):
               border: none;
             }
             [data-theme='light'] .ikp-search-bar__button:hover {
-              background: var(--m-slate-2);
+              background: var(--secondary-2);
             }
             [data-theme='dark'] .ikp-search-bar__button:hover {
-              background: var(--m-slate-10);
+              background: var(--secondary-3);
             }
             @media (min-width: 1024px) {
               .ikp-search-bar__button {
@@ -220,10 +220,10 @@ def add_hooks(self):
             }
 
             [data-theme='light'] .ikp-search-bar__button:hover {
-              background-color: var(--m-slate-2);
+              background-color: var(--secondary-2);
             }
             [data-theme='dark'] .ikp-search-bar__button:hover {
-              background-color: var(--m-slate-10);
+              background-color: var(--secondary-3);
             }
 
             [data-theme='dark'] .ikp-modal__overlay {
@@ -286,10 +286,10 @@ def add_hooks(self):
               align-items: center;
               border-radius: 0.25rem;
               box-shadow: none;
-              color: var(--m-slate-7, #67707E);
+              color: var(--secondary-11);
               font-family: "Instrument Sans";
-              --ikp-colors-transparent: var(--c-slate-3, #FCFCFD);
-              background: var(--c-slate-3, #F0F0F3) !important;
+              --ikp-colors-transparent: var(--secondary-3, #fcfcfd);
+              background: var(--secondary-3, #f0f0f3) !important;
               font-size: 0.8125rem;
               font-weight: 475;
               line-height: 1.25rem;
@@ -301,7 +301,7 @@ def add_hooks(self):
 
             .ikp-search-bar__text,
             .ikp-search-bar__icon {
-              color: var(--m-slate-7, #67707E);
+              color: var(--secondary-11);
               font-weight: 500;
               font-style: normal;
               line-height: 1.5rem;
diff --git a/docs/custom-components/prerequisites-for-publishing.md b/docs/custom-components/prerequisites-for-publishing.md
index 284f814814f..727ae8b1433 100644
--- a/docs/custom-components/prerequisites-for-publishing.md
+++ b/docs/custom-components/prerequisites-for-publishing.md
@@ -6,7 +6,7 @@ import reflex as rx
 image_style = {
     "width": "400px",
     "border_radius": "12px",
-    "border": "1px solid var(--c-slate-5)",
+    "border": "1px solid var(--secondary-5)",
 }
 ```
 
diff --git a/docs/enterprise/components.md b/docs/enterprise/components.md
index ae1d3944194..8ec5e64db7e 100644
--- a/docs/enterprise/components.md
+++ b/docs/enterprise/components.md
@@ -73,29 +73,29 @@ def enterprise_component_grid():
                 rx.link(
                     rx.el.h1(
                         section["title"],
-                        class_name="font-large text-slate-12",
+                        class_name="font-large text-secondary-12",
                     ),
-                    rx.icon("arrow_up_right", size=16, class_name="text-slate-11"),
+                    rx.icon("arrow_up_right", size=16, class_name="text-secondary-11"),
                     href=section["link"],
                     underline="none",
-                    class_name="px-4 py-2 bg-slate-1 hover:bg-slate-3 transition-bg flex flex-row justify-between items-center !text-slate-12",
+                    class_name="px-4 py-2 bg-secondary-1 hover:bg-secondary-3 transition-bg flex flex-row justify-between items-center !text-secondary-12",
                 ),
                 rx.text(
                     section["description"],
-                    class_name="px-4 py-2 font-small text-slate-9 border-t border-slate-5",
+                    class_name="px-4 py-2 font-small text-secondary-9 border-t border-secondary-5",
                 ),
                 rx.box(
                     *[
                         rx.link(
                             comp[0],
                             href=comp[1],
-                            class_name="font-small text-slate-11 hover:!text-violet-9 transition-color w-fit",
+                            class_name="font-small text-secondary-11 hover:!text-primary-9 transition-color w-fit",
                         )
                         for comp in section["components"]
                     ],
-                    class_name="flex flex-col gap-2.5 px-4 py-2 border-t border-slate-5",
+                    class_name="flex flex-col gap-2.5 px-4 py-2 border-t border-secondary-5",
                 ),
-                class_name="flex flex-col border border-slate-5 rounded-xl bg-slate-2 shadow-large overflow-hidden",
+                class_name="flex flex-col border border-secondary-5 rounded-xl bg-secondary-2 shadow-large overflow-hidden",
             )
         )
 
diff --git a/docs/getting_started/introduction.md b/docs/getting_started/introduction.md
index bb59b51b7ba..aad9221a1eb 100644
--- a/docs/getting_started/introduction.md
+++ b/docs/getting_started/introduction.md
@@ -109,7 +109,7 @@ def tabs():
             value="tab3",
             class_name="pt-4",
         ),
-        class_name="text-slate-12 font-normal",
+        class_name="text-secondary-12 font-normal",
         default_value="tab1",
         value=IntroTabsState.value,
         on_change=lambda x: IntroTabsState.change_value(x),
@@ -183,7 +183,7 @@ app.add_page(index)""",
     ),
     class_name=(
         "w-full flex flex-col overflow-hidden rounded-xl border "
-        "border-slate-4 bg-slate-2 py-1"
+        "border-secondary-4 bg-secondary-2 py-1"
     ),
 )
 ```
diff --git a/docs/hosting/deploy-with-github-actions.md b/docs/hosting/deploy-with-github-actions.md
index 6944e034b22..e7c2000b3b9 100644
--- a/docs/hosting/deploy-with-github-actions.md
+++ b/docs/hosting/deploy-with-github-actions.md
@@ -15,7 +15,7 @@ cell_style = {
     "font_size": "14px",
     "line_height": "1.5",
     "letter_spacing": "-0.0125em",
-    "color": "var(--c-slate-11)",
+    "color": "var(--secondary-11)",
 }
 
 github_actions_configs = [
diff --git a/docs/hosting/regions.md b/docs/hosting/regions.md
index 5d2387fe4f7..432c6c8f17d 100644
--- a/docs/hosting/regions.md
+++ b/docs/hosting/regions.md
@@ -77,7 +77,7 @@ rx.el.table(
                 class_name="px-6 py-3 text-left text-sm font-semibold text-secondary-12 text-nowrap",
             ),
         ),
-        class_name="bg-slate-2",
+        class_name="bg-secondary-2",
     ),
     rx.el.tbody(
         *[
@@ -85,7 +85,7 @@ rx.el.table(
                 rx.el.td(
                     rx.el.div(
                         region,
-                        class_name="h-5 rounded-md border justify-start items-center inline-flex bg-slate-1 text-xs font-medium shrink-0 px-1.5 w-fit text-slate-12 border-slate-6",
+                        class_name="h-5 rounded-md border justify-start items-center inline-flex bg-secondary-1 text-xs font-medium shrink-0 px-1.5 w-fit text-secondary-12 border-secondary-6",
                     ),
                     class_name="px-6 py-3",
                 ),
@@ -98,15 +98,15 @@ rx.el.table(
                         REGIONS_DICT[region],
                         class_name="flex flex-row items-center gap-2",
                     ),
-                    class_name="px-6 py-3 text-sm font-medium text-slate-9",
+                    class_name="px-6 py-3 text-sm font-medium text-secondary-9",
                 ),
-                class_name="even:bg-slate-2 odd:bg-slate-1 hover:bg-secondary-3",
+                class_name="even:bg-secondary-2 odd:bg-secondary-1 hover:bg-secondary-3",
             )
             for region in REGIONS_DICT.keys()
         ],
-        class_name="divide-y divide-slate-4",
+        class_name="divide-y divide-secondary-4",
     ),
-    class_name="w-full table-fixed rounded-xl overflow-hidden divide-y divide-slate-4",
+    class_name="w-full table-fixed rounded-xl overflow-hidden divide-y divide-secondary-4",
 )
 ```
 
diff --git a/docs/library/data-display/icon.md b/docs/library/data-display/icon.md
index 36a9bf78df7..3c799467358 100644
--- a/docs/library/data-display/icon.md
+++ b/docs/library/data-display/icon.md
@@ -20,14 +20,14 @@ def lucide_icons() -> rx.Component:
                 rx.icon(
                     tag="search",
                     size=20,
-                    class_name="shrink-0 !text-slate-11",
+                    class_name="shrink-0 !text-secondary-11",
                 ),
                 class_name="absolute left-2 top-1/2 transform -translate-y-1/2 z-[1] shrink-0 flex items-center justify-center pb-2",
             ),
             rx.el.input(
                 placeholder="Search icons...",
                 on_change=icon_search_cs.set_value,
-                class_name="relative box-border border-slate-4 focus:border-violet-9 focus:border-1 bg-slate-2 p-[0.5rem_0.75rem] border rounded-xl font-base text-slate-11 placeholder:text-slate-9 outline-none focus:outline-none w-full mb-2 pl-10",
+                class_name="relative box-border border-secondary-4 focus:border-violet-9 focus:border-1 bg-secondary-2 p-[0.5rem_0.75rem] border rounded-xl font-base text-secondary-11 placeholder:text-secondary-9 outline-none focus:outline-none w-full mb-2 pl-10",
             ),
             class_name="relative flex items-center",
         ),
@@ -40,7 +40,7 @@ def lucide_icons() -> rx.Component:
                         rx.tooltip(
                             rx.box(
                                 rx.icon(tag=icon),
-                                class_name="flex items-center justify-center rounded-md hover:bg-slate-3 transition-bg p-2 cursor-pointer",
+                                class_name="flex items-center justify-center rounded-md hover:bg-secondary-3 transition-bg p-2 cursor-pointer",
                                 on_click=[
                                     rx.set_clipboard(icon),
                                     rx.toast.success(f"Copied {icon} to clipboard"),
diff --git a/docs/library/other/memo.md b/docs/library/other/memo.md
index 1d78413c237..4897955723f 100644
--- a/docs/library/other/memo.md
+++ b/docs/library/other/memo.md
@@ -130,7 +130,7 @@ def card(
     return rx.box(
         rx.heading(title),
         children,
-        class_name="border border-slate-5 rounded-lg p-4",
+        class_name="border border-secondary-5 rounded-lg p-4",
     )
 
 
diff --git a/docs/styling/common-props.md b/docs/styling/common-props.md
index 74f56ec6a81..fb36748ce2e 100644
--- a/docs/styling/common-props.md
+++ b/docs/styling/common-props.md
@@ -10,7 +10,7 @@ cell_style = {
     "font_size": "14px",
     "line_height": "1.5",
     "letter_spacing": "-0.0125em",
-    "color": "var(--c-slate-11)",
+    "color": "var(--secondary-11)",
 }
 c_color = lambda color, shade: f"var(--c-{color}-{shade})"
 
diff --git a/docs/styling/responsive.md b/docs/styling/responsive.md
index f78a8bbc5c1..9dcabfb6990 100644
--- a/docs/styling/responsive.md
+++ b/docs/styling/responsive.md
@@ -8,7 +8,7 @@ cell_style = {
     "font_size": "14px",
     "line_height": "1.5",
     "letter_spacing": "-0.0125em",
-    "color": "var(--c-slate-11)",
+    "color": "var(--secondary-11)",
 }
 ```
 
diff --git a/docs/styling/theming.md b/docs/styling/theming.md
index aab8e43b877..d21aaa9de86 100644
--- a/docs/styling/theming.md
+++ b/docs/styling/theming.md
@@ -8,7 +8,7 @@ cell_style = {
     "font_size": "14px",
     "line_height": "1.5",
     "letter_spacing": "-0.0125em",
-    "color": "var(--c-slate-11)",
+    "color": "var(--secondary-11)",
 }
 ```
 
diff --git a/docs/utility_methods/router_attributes.md b/docs/utility_methods/router_attributes.md
index a9dbd5c3323..fd36a69968f 100644
--- a/docs/utility_methods/router_attributes.md
+++ b/docs/utility_methods/router_attributes.md
@@ -8,7 +8,7 @@ cell_style = {
     "font_size": "14px",
     "line_height": "1.5",
     "letter_spacing": "-0.0125em",
-    "color": "var(--c-slate-11)",
+    "color": "var(--secondary-11)",
 }
 
 
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/code.py b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/code.py
index 2da45e16140..769cc12d41f 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/code.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/code.py
@@ -63,9 +63,9 @@ def code_block(code: str, language: str):
                     ),
                     class_name=(
                         "list-none cursor-pointer text-center text-sm font-medium "
-                        "text-[var(--c-slate-11)] hover:text-[var(--c-slate-12)] "
+                        "text-[var(--secondary-11)] hover:text-[var(--secondary-12)] "
                         "pt-12 pb-3 rounded-b-xl "
-                        "bg-gradient-to-t from-[var(--c-slate-2)] from-55% to-transparent "
+                        "bg-gradient-to-t from-[var(--secondary-2)] from-55% to-transparent "
                         "group-open/details:pt-3 group-open/details:bg-none "
                         "[&::-webkit-details-marker]:hidden [&::marker]:hidden"
                     ),
@@ -74,7 +74,7 @@ def code_block(code: str, language: str):
             ),
             class_name=(
                 "relative max-h-[400px] overflow-hidden mt-4 mb-4 rounded-xl "
-                "border border-[var(--c-slate-4)] bg-[var(--c-slate-2)] "
+                "border border-[var(--secondary-4)] bg-[var(--secondary-2)] "
                 "[&_.code-block]:!border-0 "
                 "has-[details[open]]:max-h-none"
             ),
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/collapsible.py b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/collapsible.py
index c15b7383eca..fb2dc4485d1 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/collapsible.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/collapsible.py
@@ -16,6 +16,7 @@ def collapsible_box(
     background_shade: int = 3,
     background_override: str | None = None,
     border_override: str | None = None,
+    foreground_override: str | None = None,
 ) -> rx.Component:
     """Collapsible accordion wrapper shared by alert and video directives.
 
@@ -24,6 +25,7 @@ def collapsible_box(
     """
     bg = background_override or f"{rx.color(color, background_shade)}"
     border_color = border_override or f"{rx.color(color, 4)}"
+    foreground = foreground_override or f"{rx.color(color, 11)}"
     return rx.box(
         rx.accordion.root(
             rx.accordion.item(
@@ -32,7 +34,7 @@ def collapsible_box(
                         rx.hstack(
                             *trigger_children,
                             rx.spacer(),
-                            rx.accordion.icon(color=f"{rx.color(color, 11)}"),
+                            rx.accordion.icon(color=foreground),
                             align_items="center",
                             justify_content="left",
                             text_align="left",
@@ -40,7 +42,7 @@ def collapsible_box(
                             width="100%",
                         ),
                         padding="0px",
-                        color=f"{rx.color(color, 11)} !important",
+                        color=f"{foreground} !important",
                         background_color="transparent !important",
                         border_radius="12px",
                         _hover={},
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/demo.py b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/demo.py
index 1b7d7d6e147..85459084238 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/demo.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/demo.py
@@ -23,7 +23,7 @@ def docdemobox(*children, **props) -> rx.Component:
     return rx.box(
         *children,
         **props,
-        class_name="flex flex-col p-6 rounded-xl overflow-x-auto border border-slate-4 bg-slate-2 items-center justify-center w-full",
+        class_name="flex flex-col p-6 rounded-xl overflow-x-auto border border-secondary-4 bg-secondary-2 items-center justify-center w-full",
     )
 
 
@@ -151,7 +151,7 @@ def docgraphing(
     return rx.box(
         rx.flex(
             comp,
-            class_name="w-full flex flex-col p-6 rounded-xl overflow-x-auto border border-slate-4 bg-slate-2 items-center justify-center",
+            class_name="w-full flex flex-col p-6 rounded-xl overflow-x-auto border border-secondary-4 bg-secondary-2 items-center justify-center",
         ),
         rx.tabs.root(
             rx.tabs.list(
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py
index c07c6118c43..1d4751288de 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py
@@ -130,13 +130,13 @@ def create(
             rx.icon(
                 tag="link",
                 size=18,
-                class_name="!text-violet-11 invisible transition-[visibility_0.075s_ease-out] group-hover:visible mt-"
+                class_name="!text-primary-11 invisible transition-[visibility_0.075s_ease-out] group-hover:visible mt-"
                 + mt,
             ),
             underline="none",
             href=href,
             on_click=lambda: rx.set_clipboard(href),
-            class_name="flex flex-row items-center gap-2 hover:!text-violet-11 cursor-pointer mb-3 transition-colors group text-m-slate-12 dark:text-m-slate-3 ",
+            class_name="flex flex-row items-center gap-2 hover:!text-primary-11 cursor-pointer mb-3 transition-colors group text-secondary-12 ",
         )
 
 
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/typography.py b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/typography.py
index a0928d7072f..52d11557d77 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/typography.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/typography.py
@@ -114,7 +114,7 @@ def doclink(text: str, href: str, **props) -> rx.Component:
         text,
         href=href,
         **props,
-        class_name="text-m-slate-12 dark:text-m-slate-3 decoration-m-slate-12 dark:decoration-m-slate-3 underline",
+        class_name="text-secondary-12 decoration-secondary-12 underline",
     )
 
 
@@ -133,5 +133,5 @@ def doclink2(text: str, **props) -> rx.Component:
         text,
         **props,
         style=fonts.base,
-        class_name="text-m-slate-12 dark:text-m-slate-3 decoration-m-slate-12 dark:decoration-m-slate-3 underline",
+        class_name="text-secondary-12 decoration-secondary-12 underline",
     )
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py b/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py
index cbc127c9078..88b4a52ca0a 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/docs.py
@@ -16,11 +16,11 @@ def right_sidebar_item_highlight():
         const tocLinks = document.querySelectorAll('#toc-navigation a');
         const activeClasses = [
             'text-primary-9',
-            'dark:text-primary-11',
+            'dark:text-primary-10',
             'shadow-[1.5px_0_0_0_var(--primary-11)_inset]',
             'dark:shadow-[1.5px_0_0_0_var(--primary-9)_inset]',
         ];
-        const defaultClasses = ['text-m-slate-7', 'dark:text-m-slate-6'];
+        const defaultClasses = ['text-secondary-11'];
 
         function normalizeId(id) {
             return id.toLowerCase().replace(/\s+/g, '-');
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/icons.py b/packages/reflex-site-shared/src/reflex_site_shared/components/icons.py
index 316c40042ee..e9542673c1c 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/icons.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/icons.py
@@ -90,8 +90,8 @@
   <path d="M374.945 944.945L804.732 644.005L280.317 -104.937M291.44 913.953L766.955 692.216L380.56 -136.411M214.585 868.931L721.38 733.136L484.745 -150M146.716 811.248L669.393 765.52L589.707 -145.29M89.8944 742.655L612.571 788.384L692.257 -122.426M45.8472 665.238L552.643 801.034L789.278 -82.1019M15.9125 581.348L491.428 803.085L877.823 -25.5426M0.999961 493.535L430.787 794.475L955.202 45.5331M1.56259 404.466L372.563 775.466L1019.06 128.966M17.5833 316.848L318.524 746.635L1067.47 222.22M48.5754 233.343L270.312 708.858L1098.94 322.463M93.5971 156.488L229.393 663.283L1112.53 426.648M151.281 88.6189L197.009 611.296L1107.82 531.61M219.873 31.7975L174.145 554.474L1084.95 634.16M297.29 -12.2497L161.495 494.546L1044.63 731.181M381.18 -42.1842L159.444 433.331L988.071 819.726M468.994 -57.0968L168.053 372.69L916.995 897.105" stroke="url(#paint0_radial_10067_25682)" stroke-dasharray="3 3"/>
   <defs>
     <radialGradient id="paint0_radial_10067_25682" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(556.764 397.473) rotate(-90) scale(547.472 223.333)">
-      <stop offset="0.8" stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-1)" stop-opacity="0"/>
+      <stop offset="0.8" stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-1)" stop-opacity="0"/>
     </radialGradient>
   </defs>
 </svg>
@@ -102,8 +102,8 @@
 <path d="M738.584 0.998991L308.797 301.939L833.211 1050.88M822.089 31.9911L346.573 253.728L732.968 1082.35M898.943 77.0128L392.148 212.808L628.783 1095.94M966.812 134.696L444.136 180.424L523.821 1091.23M1023.63 203.289L500.957 157.56L421.272 1068.37M1067.68 280.706L560.886 144.91L324.25 1028.05M1097.62 364.596L622.1 142.859L235.705 971.487M1112.53 452.409L682.741 151.469L158.326 900.411M1111.97 541.478L740.966 170.478L94.4656 816.978M1095.94 629.096L795.005 199.309L46.0628 723.724M1064.95 712.601L843.216 237.086L14.5891 623.481M1019.93 789.456L884.136 282.661L1.00032 519.296M962.248 857.325L916.519 334.648L5.70944 414.334M893.655 914.147L939.384 391.47L28.5736 311.784M816.238 958.194L952.033 451.398L68.8979 214.763M732.348 988.128L954.085 512.613L125.457 126.218M644.535 1003.04L945.475 573.254L196.533 48.839" stroke="url(#paint0_radial_10067_25683)" stroke-dasharray="3 3"/>
 <defs>
 <radialGradient id="paint0_radial_10067_25683" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(556.764 548.471) rotate(90) scale(547.472 223.333)">
-<stop offset="0.893272" stop-color="var(--c-slate-4)"/>
-<stop offset="1" stop-color="var(--c-slate-1)" stop-opacity="0"/>
+<stop offset="0.893272" stop-color="var(--secondary-4)"/>
+<stop offset="1" stop-color="var(--secondary-1)" stop-opacity="0"/>
 </radialGradient>
 </defs>
 </svg>
@@ -113,8 +113,8 @@
 <path d="M853 73H817V1H853V73ZM853 73V109M853 73H937M853 109H817V181H853V109ZM853 109H937M937 109V181H973V109H937ZM937 109V73M937 73H973V1H937V73ZM121 109V181H157V109H121ZM121 109V73M121 109H37V181H1V1H157V73H121M121 73V37H37V73H121ZM349 181V1H469V37H385V73H469V109H385V181H349ZM505 181V1H541V145H625V181H505ZM661 181V1H781V37H697V73H781V109H697L697.526 145H781V181H661ZM193 1V181H313V145H229.526L229 109H313V73H229V37H313V1H193Z" stroke="url(#paint0_linear_10039_17181)" stroke-width="1.5"/>
 <defs>
 <linearGradient id="paint0_linear_10039_17181" x1="487" y1="1" x2="487" y2="181" gradientUnits="userSpaceOnUse">
-    <stop stop-color="var(--c-slate-4)"/>
-    <stop offset="1" stop-color="var(--c-slate-1)"/>
+    <stop stop-color="var(--secondary-4)"/>
+    <stop offset="1" stop-color="var(--secondary-1)"/>
 </linearGradient>
 </defs>
 </svg>
@@ -136,56 +136,56 @@
   <path d="M14.0802 3.24658C12.8714 5.48365 13.1948 8.10115 13.1948 8.10115C13.1948 8.10115 15.478 7.09165 16.6867 4.85457C17.8955 2.6175 17.5721 0 17.5721 0C17.5721 0 15.2889 1.00951 14.0802 3.24658Z" fill="url(#paint12_linear_10744_8875)"/>
   <defs>
     <linearGradient id="paint0_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint1_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint2_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint3_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint4_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint5_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint6_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint7_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint8_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint9_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint10_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint11_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
     <linearGradient id="paint12_linear_10744_8875" x1="28" y1="32" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop stop-color="var(--c-slate-5)"/>
-      <stop offset="1" stop-color="var(--c-slate-4)"/>
+      <stop stop-color="var(--secondary-5)"/>
+      <stop offset="1" stop-color="var(--secondary-4)"/>
     </linearGradient>
   </defs>
 </svg>
@@ -194,19 +194,19 @@
 feather_unstyled = """<svg xmlns="http://www.w3.org/2000/svg" width="28" height="64" viewBox="0 0 28 64" fill="none"><path d="M18.724 58.99c-3.765-.215-6.938 2.11-6.938 2.11s2.93 2.672 6.695 2.886 6.938-2.11 6.938-2.11-2.93-2.672-6.695-2.887m-6.154-8.042c-3.704-.754-7.142 1.092-7.142 1.092s2.566 3.069 6.27 3.823 7.143-1.093 7.143-1.093-2.567-3.068-6.27-3.822m-3.938-9.055c-3.245-1.08-6.501.198-6.501.198s2.004 3.028 5.25 4.107c3.244 1.08 6.5-.198 6.5-.198s-2.004-3.028-5.249-4.107M6.366 30.963C3.447 29.103 0 29.53 0 29.53s1.285 3.444 4.204 5.304 6.366 1.434 6.366 1.434-1.285-3.444-4.204-5.305m-.057-11.368C3.755 17.198.292 16.947.292 16.947s.677 3.636 3.23 6.033 6.016 2.647 6.016 2.647-.676-3.635-3.23-6.032m4.199-10.158C9.479 7.096 7.284 5.878 7.284 5.878s-.529 2.578.5 4.92c1.027 2.34 3.222 3.558 3.222 3.558s.529-2.578-.499-4.92" fill="currentColor"/><path d="M23.308 54.588C23.112 58.608 25.293 62 25.293 62s2.499-3.125 2.695-7.145-1.986-7.41-1.986-7.41-2.499 3.125-2.694 7.144m-5.573-7.337c-.702 3.954 1.032 7.627 1.032 7.627s2.871-2.736 3.572-6.69-1.032-7.628-1.032-7.628-2.871 2.737-3.572 6.69m-4.123-8.103c-1.007 3.463.194 6.942.194 6.942s2.833-2.137 3.84-5.6-.194-6.942-.194-6.942-2.833 2.137-3.84 5.6m-1.802-9.606c-1.74 3.114-1.335 6.795-1.335 6.795s3.224-1.368 4.963-4.482c1.74-3.114 1.335-6.795 1.335-6.795s-3.224 1.368-4.963 4.482m.095-10.285c-2.241 2.723-2.472 6.42-2.472 6.42s3.405-.718 5.646-3.44 2.472-6.42 2.472-6.42-3.404.717-5.646 3.44m2.348-8.337c-2.191 1.094-3.328 3.436-3.328 3.436s2.415.568 4.606-.526c2.19-1.095 3.328-3.437 3.328-3.437s-2.415-.568-4.606.526m-.173-7.672c-1.209 2.237-.885 4.854-.885 4.854s2.283-1.01 3.492-3.246C17.895 2.617 17.572 0 17.572 0S15.29 1.01 14.08 3.247" fill="currentColor"/></svg>"""
 
 cloud = """<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
-<path d="M29.9045 24.8605C30.2119 25.7282 29.7575 26.6807 28.8899 26.988C28.0005 27.303 26.973 27.981 25.8847 28.9357C24.8135 29.875 23.7715 31.0032 22.8485 32.1095C21.9289 33.212 21.1475 34.2683 20.5959 35.05C20.3205 35.4398 19.8869 36.0905 19.7404 36.3107C19.4182 36.8175 18.848 37.1122 18.2482 37.0813C17.6484 37.0507 17.1114 36.6995 16.8429 36.1623C16.1083 34.6933 15.4494 34.1083 15.1173 33.887C14.9768 33.7933 14.8818 33.7558 14.8441 33.743C13.9968 33.6643 13.3335 32.9515 13.3335 32.0837C13.3335 31.1632 14.0797 30.417 15.0002 30.417C15.2345 30.417 15.5725 30.484 15.7445 30.5332C16.0909 30.6322 16.509 30.8087 16.9664 31.1135C17.4235 31.4183 17.9029 31.8395 18.3842 32.416C18.9095 31.698 19.5569 30.852 20.289 29.9743C21.2779 28.789 22.4419 27.5213 23.6869 26.4295C24.9145 25.3528 26.3135 24.3642 27.777 23.8458C28.6447 23.5385 29.5972 23.9928 29.9045 24.8605Z" fill="var(--c-slate-9)"/>
-<path opacity="0.4" d="M9.75565 11.439C5.37837 12.3255 2.08398 16.1931 2.08398 20.8315C2.08398 25.963 6.1171 30.1525 11.1864 30.403C11.8323 28.9383 13.2971 27.916 15.0007 27.916C15.5537 27.916 16.1384 28.0445 16.4318 28.1283C16.9219 28.2685 17.4544 28.4876 18.0058 28.8136C18.1246 28.6676 18.2459 28.5201 18.3698 28.3718C19.4081 27.1273 20.6636 25.7551 22.0389 24.549C23.3714 23.3803 25.0491 22.1591 26.9429 21.4883C29.1121 20.7201 31.4933 21.8558 32.2616 24.025C33.0298 26.1941 31.8941 28.5753 29.7249 29.3436C29.3434 29.4786 28.7606 29.8096 28.0083 30.4148H29.1673C33.9998 30.4148 37.9173 26.4973 37.9173 21.6648C37.9173 17.255 34.6551 13.607 30.4123 13.0027C30.2386 7.40186 25.6436 2.91479 20.0006 2.91479C14.8937 2.91479 10.6462 6.58906 9.75565 11.439Z" fill="var(--c-slate-9)"/>
+<path d="M29.9045 24.8605C30.2119 25.7282 29.7575 26.6807 28.8899 26.988C28.0005 27.303 26.973 27.981 25.8847 28.9357C24.8135 29.875 23.7715 31.0032 22.8485 32.1095C21.9289 33.212 21.1475 34.2683 20.5959 35.05C20.3205 35.4398 19.8869 36.0905 19.7404 36.3107C19.4182 36.8175 18.848 37.1122 18.2482 37.0813C17.6484 37.0507 17.1114 36.6995 16.8429 36.1623C16.1083 34.6933 15.4494 34.1083 15.1173 33.887C14.9768 33.7933 14.8818 33.7558 14.8441 33.743C13.9968 33.6643 13.3335 32.9515 13.3335 32.0837C13.3335 31.1632 14.0797 30.417 15.0002 30.417C15.2345 30.417 15.5725 30.484 15.7445 30.5332C16.0909 30.6322 16.509 30.8087 16.9664 31.1135C17.4235 31.4183 17.9029 31.8395 18.3842 32.416C18.9095 31.698 19.5569 30.852 20.289 29.9743C21.2779 28.789 22.4419 27.5213 23.6869 26.4295C24.9145 25.3528 26.3135 24.3642 27.777 23.8458C28.6447 23.5385 29.5972 23.9928 29.9045 24.8605Z" fill="var(--secondary-9)"/>
+<path opacity="0.4" d="M9.75565 11.439C5.37837 12.3255 2.08398 16.1931 2.08398 20.8315C2.08398 25.963 6.1171 30.1525 11.1864 30.403C11.8323 28.9383 13.2971 27.916 15.0007 27.916C15.5537 27.916 16.1384 28.0445 16.4318 28.1283C16.9219 28.2685 17.4544 28.4876 18.0058 28.8136C18.1246 28.6676 18.2459 28.5201 18.3698 28.3718C19.4081 27.1273 20.6636 25.7551 22.0389 24.549C23.3714 23.3803 25.0491 22.1591 26.9429 21.4883C29.1121 20.7201 31.4933 21.8558 32.2616 24.025C33.0298 26.1941 31.8941 28.5753 29.7249 29.3436C29.3434 29.4786 28.7606 29.8096 28.0083 30.4148H29.1673C33.9998 30.4148 37.9173 26.4973 37.9173 21.6648C37.9173 17.255 34.6551 13.607 30.4123 13.0027C30.2386 7.40186 25.6436 2.91479 20.0006 2.91479C14.8937 2.91479 10.6462 6.58906 9.75565 11.439Z" fill="var(--secondary-9)"/>
 </svg>
 """
 
 database = """<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
 <g opacity="0.4">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1665 8.33341C4.1665 6.99526 4.89565 5.91998 5.77529 5.1401C6.65687 4.35848 7.83744 3.73075 9.1532 3.23733C11.7971 2.2459 15.3377 1.66675 19.1665 1.66675C22.9953 1.66675 26.536 2.2459 29.1798 3.23733C30.4955 3.73075 31.6762 4.35848 32.5577 5.1401C33.4373 5.91998 34.1665 6.99526 34.1665 8.33341V16.6461C34.1665 17.2586 34.1278 17.7669 34.0017 18.2109C33.91 18.5332 33.8643 18.6942 33.695 18.7491C33.5257 18.8039 33.3515 18.6667 33.0032 18.3922C32.294 17.8334 31.3992 17.5001 30.4263 17.5001C28.1252 17.5001 26.2597 19.3656 26.2597 21.6667V21.7241C26.2597 22.1064 26.2597 22.2976 26.1473 22.4354C26.0352 22.5734 25.8523 22.6112 25.4867 22.6869C23.4185 23.1147 21.245 23.3334 19.1665 23.3334C15.1853 23.3334 10.8557 22.5314 7.5845 20.9921C6.91282 20.6759 6.30525 20.3396 5.76327 19.9846C4.42212 19.1062 4.1665 18.2207 4.1665 16.6461V8.33341ZM10.1217 10.2308C9.13122 9.84091 8.42524 9.4214 7.98665 9.03255C7.39217 8.50548 7.39217 8.16135 7.98665 7.63428C8.45449 7.21951 9.22654 6.76983 10.3236 6.35843C12.5055 5.54023 15.6316 5.00008 19.1665 5.00008C22.7015 5.00008 25.8275 5.54023 28.0093 6.35843C29.1065 6.76983 29.8785 7.21951 30.3463 7.63428C30.9408 8.16135 30.9408 8.50548 30.3463 9.03255C29.8785 9.44731 29.1065 9.897 28.0093 10.3084C25.8275 11.1266 22.7015 11.6667 19.1665 11.6667C17.6713 11.6667 16.2493 11.5701 14.941 11.3967C13.3129 11.1809 11.7044 10.8538 10.1217 10.2308ZM11.193 16.8729C10.5318 16.6742 9.83475 17.0491 9.636 17.7102C9.43727 18.3714 9.8121 19.0684 10.4732 19.2671C11.5393 19.5876 12.7188 19.8479 13.9788 20.0391C14.6614 20.1427 15.2987 19.6734 15.4023 18.9909C15.5059 18.3082 15.0366 17.6711 14.354 17.5674C13.1952 17.3916 12.1322 17.1554 11.193 16.8729Z" fill="var(--c-slate-9)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2597 26.3412C26.2597 26.1517 26.2597 26.057 26.1988 26.007C26.138 25.957 26.0445 25.9755 25.8573 26.0124C23.6313 26.4512 21.3385 26.6665 19.1665 26.6665C14.7432 26.6665 10.182 25.8982 6.16517 24.0079C5.84324 23.8564 5.52504 23.6964 5.21229 23.5275C4.73184 23.2682 4.4916 23.1385 4.32905 23.2355C4.1665 23.3324 4.1665 23.5975 4.1665 24.1277V31.6665C4.1665 33.0047 4.89565 34.08 5.77529 34.8599C6.65687 35.6415 7.83744 36.2692 9.1532 36.7627C11.7971 37.754 15.3377 38.3332 19.1665 38.3332C21.4907 38.3332 23.7087 38.1199 25.6843 37.7304C26.0575 37.6567 26.183 37.1834 25.9178 36.9109C25.1763 36.1487 24.46 35.2365 23.9805 34.6249C23.7018 34.2697 23.4285 33.913 23.1932 33.5272C23.0267 33.2542 21.8835 31.3795 22.94 29.2015C23.744 27.5442 25.1962 26.9975 25.9845 26.8139C26.1198 26.7824 26.1873 26.7667 26.2235 26.7212C26.2597 26.6757 26.2597 26.6094 26.2597 26.477V26.3412ZM11.193 28.5397C10.5318 28.341 9.83475 28.7159 9.636 29.377C9.43727 30.0382 9.8121 30.7352 10.4732 30.9339C11.5393 31.2544 12.7188 31.5147 13.9788 31.7059C14.6614 31.8095 15.2987 31.3402 15.4023 30.6577C15.5059 29.975 15.0366 29.3379 14.354 29.2342C13.1952 29.0584 12.1322 28.8222 11.193 28.5397Z" fill="var(--c-slate-9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1665 8.33341C4.1665 6.99526 4.89565 5.91998 5.77529 5.1401C6.65687 4.35848 7.83744 3.73075 9.1532 3.23733C11.7971 2.2459 15.3377 1.66675 19.1665 1.66675C22.9953 1.66675 26.536 2.2459 29.1798 3.23733C30.4955 3.73075 31.6762 4.35848 32.5577 5.1401C33.4373 5.91998 34.1665 6.99526 34.1665 8.33341V16.6461C34.1665 17.2586 34.1278 17.7669 34.0017 18.2109C33.91 18.5332 33.8643 18.6942 33.695 18.7491C33.5257 18.8039 33.3515 18.6667 33.0032 18.3922C32.294 17.8334 31.3992 17.5001 30.4263 17.5001C28.1252 17.5001 26.2597 19.3656 26.2597 21.6667V21.7241C26.2597 22.1064 26.2597 22.2976 26.1473 22.4354C26.0352 22.5734 25.8523 22.6112 25.4867 22.6869C23.4185 23.1147 21.245 23.3334 19.1665 23.3334C15.1853 23.3334 10.8557 22.5314 7.5845 20.9921C6.91282 20.6759 6.30525 20.3396 5.76327 19.9846C4.42212 19.1062 4.1665 18.2207 4.1665 16.6461V8.33341ZM10.1217 10.2308C9.13122 9.84091 8.42524 9.4214 7.98665 9.03255C7.39217 8.50548 7.39217 8.16135 7.98665 7.63428C8.45449 7.21951 9.22654 6.76983 10.3236 6.35843C12.5055 5.54023 15.6316 5.00008 19.1665 5.00008C22.7015 5.00008 25.8275 5.54023 28.0093 6.35843C29.1065 6.76983 29.8785 7.21951 30.3463 7.63428C30.9408 8.16135 30.9408 8.50548 30.3463 9.03255C29.8785 9.44731 29.1065 9.897 28.0093 10.3084C25.8275 11.1266 22.7015 11.6667 19.1665 11.6667C17.6713 11.6667 16.2493 11.5701 14.941 11.3967C13.3129 11.1809 11.7044 10.8538 10.1217 10.2308ZM11.193 16.8729C10.5318 16.6742 9.83475 17.0491 9.636 17.7102C9.43727 18.3714 9.8121 19.0684 10.4732 19.2671C11.5393 19.5876 12.7188 19.8479 13.9788 20.0391C14.6614 20.1427 15.2987 19.6734 15.4023 18.9909C15.5059 18.3082 15.0366 17.6711 14.354 17.5674C13.1952 17.3916 12.1322 17.1554 11.193 16.8729Z" fill="var(--secondary-9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2597 26.3412C26.2597 26.1517 26.2597 26.057 26.1988 26.007C26.138 25.957 26.0445 25.9755 25.8573 26.0124C23.6313 26.4512 21.3385 26.6665 19.1665 26.6665C14.7432 26.6665 10.182 25.8982 6.16517 24.0079C5.84324 23.8564 5.52504 23.6964 5.21229 23.5275C4.73184 23.2682 4.4916 23.1385 4.32905 23.2355C4.1665 23.3324 4.1665 23.5975 4.1665 24.1277V31.6665C4.1665 33.0047 4.89565 34.08 5.77529 34.8599C6.65687 35.6415 7.83744 36.2692 9.1532 36.7627C11.7971 37.754 15.3377 38.3332 19.1665 38.3332C21.4907 38.3332 23.7087 38.1199 25.6843 37.7304C26.0575 37.6567 26.183 37.1834 25.9178 36.9109C25.1763 36.1487 24.46 35.2365 23.9805 34.6249C23.7018 34.2697 23.4285 33.913 23.1932 33.5272C23.0267 33.2542 21.8835 31.3795 22.94 29.2015C23.744 27.5442 25.1962 26.9975 25.9845 26.8139C26.1198 26.7824 26.1873 26.7667 26.2235 26.7212C26.2597 26.6757 26.2597 26.6094 26.2597 26.477V26.3412ZM11.193 28.5397C10.5318 28.341 9.83475 28.7159 9.636 29.377C9.43727 30.0382 9.8121 30.7352 10.4732 30.9339C11.5393 31.2544 12.7188 31.5147 13.9788 31.7059C14.6614 31.8095 15.2987 31.3402 15.4023 30.6577C15.5059 29.975 15.0366 29.3379 14.354 29.2342C13.1952 29.0584 12.1322 28.8222 11.193 28.5397Z" fill="var(--secondary-9)"/>
 </g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1937 16.8697C10.5325 16.6709 9.83548 17.0457 9.63675 17.7069C9.438 18.368 9.81285 19.065 10.474 19.2639C11.54 19.5844 12.7195 19.8445 13.9796 20.0359C14.6621 20.1394 15.2994 19.67 15.403 18.9875C15.5066 18.305 15.0373 17.6677 14.3548 17.5642C13.1959 17.3882 12.1329 17.152 11.1937 16.8697Z" fill="var(--c-slate-9)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1937 28.5364C10.5325 28.3376 9.83548 28.7124 9.63675 29.3736C9.438 30.0348 9.81285 30.7318 10.474 30.9306C11.54 31.2511 12.7195 31.5113 13.9796 31.7026C14.6621 31.8061 15.2994 31.3368 15.403 30.6543C15.5066 29.9718 15.0373 29.3344 14.3548 29.2309C13.1959 29.0549 12.1329 28.8188 11.1937 28.5364Z" fill="var(--c-slate-9)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0931 21.6667C32.0931 20.7462 31.3468 20 30.4265 20C29.506 20 28.7598 20.7462 28.7598 21.6667V29.1667H27.7693C27.4521 29.1665 27.1328 29.1643 26.8175 29.2037C26.6068 29.23 25.6466 29.3497 25.1895 30.2923C24.7311 31.2372 25.2345 32.0707 25.3433 32.251C25.5206 32.545 25.7365 32.8125 25.948 33.0822C26.4391 33.7087 27.0756 34.5157 27.7098 35.1673C28.4286 35.9062 29.3271 36.6667 30.4166 36.6667C31.5061 36.6667 32.4046 35.9062 33.1235 35.1673C33.7576 34.5157 34.3941 33.7087 34.8853 33.0822C35.0968 32.8125 35.3125 32.545 35.49 32.251C35.5988 32.0707 36.1021 31.237 35.6438 30.2923C35.3316 29.6488 34.7005 29.2892 34.0101 29.203C33.7161 29.1662 33.3566 29.1665 33.064 29.1667H32.0931V21.6667Z" fill="var(--c-slate-9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1937 16.8697C10.5325 16.6709 9.83548 17.0457 9.63675 17.7069C9.438 18.368 9.81285 19.065 10.474 19.2639C11.54 19.5844 12.7195 19.8445 13.9796 20.0359C14.6621 20.1394 15.2994 19.67 15.403 18.9875C15.5066 18.305 15.0373 17.6677 14.3548 17.5642C13.1959 17.3882 12.1329 17.152 11.1937 16.8697Z" fill="var(--secondary-9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1937 28.5364C10.5325 28.3376 9.83548 28.7124 9.63675 29.3736C9.438 30.0348 9.81285 30.7318 10.474 30.9306C11.54 31.2511 12.7195 31.5113 13.9796 31.7026C14.6621 31.8061 15.2994 31.3368 15.403 30.6543C15.5066 29.9718 15.0373 29.3344 14.3548 29.2309C13.1959 29.0549 12.1329 28.8188 11.1937 28.5364Z" fill="var(--secondary-9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0931 21.6667C32.0931 20.7462 31.3468 20 30.4265 20C29.506 20 28.7598 20.7462 28.7598 21.6667V29.1667H27.7693C27.4521 29.1665 27.1328 29.1643 26.8175 29.2037C26.6068 29.23 25.6466 29.3497 25.1895 30.2923C24.7311 31.2372 25.2345 32.0707 25.3433 32.251C25.5206 32.545 25.7365 32.8125 25.948 33.0822C26.4391 33.7087 27.0756 34.5157 27.7098 35.1673C28.4286 35.9062 29.3271 36.6667 30.4166 36.6667C31.5061 36.6667 32.4046 35.9062 33.1235 35.1673C33.7576 34.5157 34.3941 33.7087 34.8853 33.0822C35.0968 32.8125 35.3125 32.545 35.49 32.251C35.5988 32.0707 36.1021 31.237 35.6438 30.2923C35.3316 29.6488 34.7005 29.2892 34.0101 29.203C33.7161 29.1662 33.3566 29.1665 33.064 29.1667H32.0931V21.6667Z" fill="var(--secondary-9)"/>
 </svg>
 """
 
@@ -225,15 +225,15 @@
 """
 
 eye_big = """<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
-<path opacity="0.4" d="M20.0002 7.08325C15.7159 7.08325 12.0434 8.96893 9.20068 11.1882C6.35538 13.4095 4.25226 16.0328 3.07585 17.6824L2.98715 17.8061C2.56523 18.3929 2.0835 19.0629 2.0835 19.9999C2.0835 20.9369 2.56523 21.6069 2.98715 22.1938L3.07585 22.3174C4.25226 23.9671 6.35538 26.5903 9.20068 28.8116C12.0434 31.0309 15.7159 32.9166 20.0002 32.9166C24.2845 32.9166 27.9568 31.0309 30.7997 28.8116C33.645 26.5903 35.748 23.9671 36.9245 22.3174L37.0132 22.1938C37.4352 21.6069 37.9168 20.9369 37.9168 19.9999C37.9168 19.0629 37.4352 18.3929 37.0132 17.8061L36.9245 17.6824C35.748 16.0328 33.645 13.4095 30.7997 11.1882C27.9568 8.96893 24.2845 7.08325 20.0002 7.08325Z" fill="var(--c-slate-9)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0001 25.8334C16.7784 25.8334 14.1667 23.2217 14.1667 20.0001C14.1667 16.7784 16.7784 14.1667 20.0001 14.1667C23.2217 14.1667 25.8334 16.7784 25.8334 20.0001C25.8334 23.2217 23.2217 25.8334 20.0001 25.8334Z" fill="var(--c-slate-9)"/>
+<path opacity="0.4" d="M20.0002 7.08325C15.7159 7.08325 12.0434 8.96893 9.20068 11.1882C6.35538 13.4095 4.25226 16.0328 3.07585 17.6824L2.98715 17.8061C2.56523 18.3929 2.0835 19.0629 2.0835 19.9999C2.0835 20.9369 2.56523 21.6069 2.98715 22.1938L3.07585 22.3174C4.25226 23.9671 6.35538 26.5903 9.20068 28.8116C12.0434 31.0309 15.7159 32.9166 20.0002 32.9166C24.2845 32.9166 27.9568 31.0309 30.7997 28.8116C33.645 26.5903 35.748 23.9671 36.9245 22.3174L37.0132 22.1938C37.4352 21.6069 37.9168 20.9369 37.9168 19.9999C37.9168 19.0629 37.4352 18.3929 37.0132 17.8061L36.9245 17.6824C35.748 16.0328 33.645 13.4095 30.7997 11.1882C27.9568 8.96893 24.2845 7.08325 20.0002 7.08325Z" fill="var(--secondary-9)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0001 25.8334C16.7784 25.8334 14.1667 23.2217 14.1667 20.0001C14.1667 16.7784 16.7784 14.1667 20.0001 14.1667C23.2217 14.1667 25.8334 16.7784 25.8334 20.0001C25.8334 23.2217 23.2217 25.8334 20.0001 25.8334Z" fill="var(--secondary-9)"/>
 </svg>
 """
 
-image_ai = """<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="injected-svg" data-src="https://cdn.hugeicons.com/icons/ai-image-bulk-rounded.svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" color="var(--c-slate-9)">
-<path d="M9.5 8.5C9.5 9.60457 8.60457 10.5 7.5 10.5C6.39543 10.5 5.5 9.60457 5.5 8.5C5.5 7.39543 6.39543 6.5 7.5 6.5C8.60457 6.5 9.5 7.39543 9.5 8.5Z" fill="var(--c-slate-9)"></path>
-<path d="M18.5 1.25C18.8138 1.25 19.0945 1.4454 19.2034 1.73972L19.4613 2.43675C19.8233 3.4151 19.9388 3.68091 20.1289 3.87106C20.3191 4.06121 20.5849 4.17667 21.5633 4.53869L22.2603 4.79661C22.5546 4.90552 22.75 5.18617 22.75 5.5C22.75 5.81383 22.5546 6.09448 22.2603 6.20339L21.5633 6.46131C20.5849 6.82333 20.3191 6.93879 20.1289 7.12894C19.9388 7.31909 19.8233 7.5849 19.4613 8.56325L19.2034 9.26028C19.0945 9.5546 18.8138 9.75 18.5 9.75C18.1862 9.75 17.9055 9.5546 17.7966 9.26028L17.5387 8.56325C17.1767 7.5849 17.0612 7.31909 16.8711 7.12894C16.6809 6.93879 16.4151 6.82333 15.4367 6.46131L14.7397 6.20339C14.4454 6.09448 14.25 5.81383 14.25 5.5C14.25 5.18617 14.4454 4.90552 14.7397 4.79661L15.4367 4.53869C16.4151 4.17667 16.6809 4.06121 16.8711 3.87106C17.0612 3.68091 17.1767 3.4151 17.5387 2.43675L17.7966 1.73972C17.9055 1.4454 18.1862 1.25 18.5 1.25Z" fill="var(--c-slate-9)"></path>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M11.5015 2.25H11.4273H11.4273C9.30315 2.24998 7.60973 2.24996 6.28198 2.42847C4.91104 2.61279 3.78471 3.00337 2.89404 3.89404C2.00337 4.78471 1.61279 5.91104 1.42847 7.28198C1.24996 8.60973 1.24998 10.3031 1.25 12.4273V12.4273V12.5727V12.5727C1.24998 14.6969 1.24996 16.3903 1.42847 17.718C1.61279 19.089 2.00337 20.2153 2.89404 21.106C3.78471 21.9966 4.91104 22.3872 6.28198 22.5715C7.60974 22.75 9.30317 22.75 11.4274 22.75H11.5727C13.6968 22.75 15.3903 22.75 16.718 22.5715C18.089 22.3872 19.2153 21.9966 20.106 21.106C20.9966 20.2153 21.3872 19.089 21.5715 17.718C21.75 16.3903 21.75 14.6968 21.75 12.5727V12.4987C21.75 11.9817 21.75 11.4923 21.7477 11.0309C21.7451 10.4918 21.3059 10.0569 20.7667 10.0595C20.2276 10.0622 19.7927 10.5014 19.7954 11.0405C19.7976 11.4966 19.7976 11.9814 19.7976 12.5C19.7976 12.799 19.7976 13.0861 19.7971 13.362C13.7051 10.3912 9.3109 15.6805 5.41613 20.3954C4.91695 20.2327 4.56206 20.0129 4.27458 19.7254C3.80713 19.258 3.51865 18.6123 3.36344 17.4579C3.20446 16.2753 3.20238 14.7135 3.20238 12.5C3.20238 10.2865 3.20446 8.72466 3.36344 7.54213C3.51865 6.38769 3.80713 5.74203 4.27458 5.27458C4.74203 4.80713 5.38769 4.51865 6.54213 4.36344C7.72466 4.20446 9.28655 4.20238 11.5 4.20238C12.0186 4.20238 12.5034 4.20238 12.9595 4.20463C13.4986 4.20729 13.9378 3.77239 13.9405 3.23326C13.9431 2.69413 13.5082 2.25493 12.9691 2.25227C12.5078 2.25 12.0184 2.25 11.5015 2.25Z" fill="var(--c-slate-9)"></path>
+image_ai = """<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="injected-svg" data-src="https://cdn.hugeicons.com/icons/ai-image-bulk-rounded.svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" color="var(--secondary-9)">
+<path d="M9.5 8.5C9.5 9.60457 8.60457 10.5 7.5 10.5C6.39543 10.5 5.5 9.60457 5.5 8.5C5.5 7.39543 6.39543 6.5 7.5 6.5C8.60457 6.5 9.5 7.39543 9.5 8.5Z" fill="var(--secondary-9)"></path>
+<path d="M18.5 1.25C18.8138 1.25 19.0945 1.4454 19.2034 1.73972L19.4613 2.43675C19.8233 3.4151 19.9388 3.68091 20.1289 3.87106C20.3191 4.06121 20.5849 4.17667 21.5633 4.53869L22.2603 4.79661C22.5546 4.90552 22.75 5.18617 22.75 5.5C22.75 5.81383 22.5546 6.09448 22.2603 6.20339L21.5633 6.46131C20.5849 6.82333 20.3191 6.93879 20.1289 7.12894C19.9388 7.31909 19.8233 7.5849 19.4613 8.56325L19.2034 9.26028C19.0945 9.5546 18.8138 9.75 18.5 9.75C18.1862 9.75 17.9055 9.5546 17.7966 9.26028L17.5387 8.56325C17.1767 7.5849 17.0612 7.31909 16.8711 7.12894C16.6809 6.93879 16.4151 6.82333 15.4367 6.46131L14.7397 6.20339C14.4454 6.09448 14.25 5.81383 14.25 5.5C14.25 5.18617 14.4454 4.90552 14.7397 4.79661L15.4367 4.53869C16.4151 4.17667 16.6809 4.06121 16.8711 3.87106C17.0612 3.68091 17.1767 3.4151 17.5387 2.43675L17.7966 1.73972C17.9055 1.4454 18.1862 1.25 18.5 1.25Z" fill="var(--secondary-9)"></path>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M11.5015 2.25H11.4273H11.4273C9.30315 2.24998 7.60973 2.24996 6.28198 2.42847C4.91104 2.61279 3.78471 3.00337 2.89404 3.89404C2.00337 4.78471 1.61279 5.91104 1.42847 7.28198C1.24996 8.60973 1.24998 10.3031 1.25 12.4273V12.4273V12.5727V12.5727C1.24998 14.6969 1.24996 16.3903 1.42847 17.718C1.61279 19.089 2.00337 20.2153 2.89404 21.106C3.78471 21.9966 4.91104 22.3872 6.28198 22.5715C7.60974 22.75 9.30317 22.75 11.4274 22.75H11.5727C13.6968 22.75 15.3903 22.75 16.718 22.5715C18.089 22.3872 19.2153 21.9966 20.106 21.106C20.9966 20.2153 21.3872 19.089 21.5715 17.718C21.75 16.3903 21.75 14.6968 21.75 12.5727V12.4987C21.75 11.9817 21.75 11.4923 21.7477 11.0309C21.7451 10.4918 21.3059 10.0569 20.7667 10.0595C20.2276 10.0622 19.7927 10.5014 19.7954 11.0405C19.7976 11.4966 19.7976 11.9814 19.7976 12.5C19.7976 12.799 19.7976 13.0861 19.7971 13.362C13.7051 10.3912 9.3109 15.6805 5.41613 20.3954C4.91695 20.2327 4.56206 20.0129 4.27458 19.7254C3.80713 19.258 3.51865 18.6123 3.36344 17.4579C3.20446 16.2753 3.20238 14.7135 3.20238 12.5C3.20238 10.2865 3.20446 8.72466 3.36344 7.54213C3.51865 6.38769 3.80713 5.74203 4.27458 5.27458C4.74203 4.80713 5.38769 4.51865 6.54213 4.36344C7.72466 4.20446 9.28655 4.20238 11.5 4.20238C12.0186 4.20238 12.5034 4.20238 12.9595 4.20463C13.4986 4.20729 13.9378 3.77239 13.9405 3.23326C13.9431 2.69413 13.5082 2.25493 12.9691 2.25227C12.5078 2.25 12.0184 2.25 11.5015 2.25Z" fill="var(--secondary-9)"></path>
 </svg>
 """
 
@@ -245,11 +245,11 @@
 </svg>
 """
 
-contributors = """<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" class="injected-svg" data-src="https://cdn.hugeicons.com/icons/user-multiple-02-bulk-rounded.svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" color="var(--c-slate-9)">
-<path opacity="0.4" d="M4.25 7C4.25 4.37665 6.37665 2.25 9 2.25C11.6234 2.25 13.75 4.37665 13.75 7C13.75 9.62335 11.6234 11.75 9 11.75C6.37665 11.75 4.25 9.62335 4.25 7Z" fill="var(--c-slate-9)"></path>
-<path opacity="0.4" d="M1.25 19C1.25 15.8244 3.82436 13.25 7 13.25H11C14.1756 13.25 16.75 15.8244 16.75 19C16.75 20.5188 15.5188 21.75 14 21.75H4C2.48122 21.75 1.25 20.5188 1.25 19Z" fill="var(--c-slate-9)"></path>
-<path d="M13.374 11.4644C13.8812 11.6492 14.4288 11.75 15 11.75C17.6233 11.75 19.75 9.62335 19.75 7C19.75 4.37665 17.6233 2.25 15 2.25C14.4288 2.25 13.8812 2.35081 13.374 2.5356C14.5317 3.67 15.25 5.25111 15.25 7C15.25 8.74889 14.5317 10.33 13.374 11.4644Z" fill="var(--c-slate-9)"></path>
-<path d="M17.24 21.75H19.9995C21.5183 21.75 22.7495 20.5188 22.7495 19C22.7495 15.8244 20.1752 13.25 16.9995 13.25H15.416C17.1391 14.5754 18.2495 16.658 18.2495 19C18.2495 20.0488 17.8697 21.0088 17.24 21.75Z" fill="var(--c-slate-9)"></path>
+contributors = """<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" class="injected-svg" data-src="https://cdn.hugeicons.com/icons/user-multiple-02-bulk-rounded.svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" color="var(--secondary-9)">
+<path opacity="0.4" d="M4.25 7C4.25 4.37665 6.37665 2.25 9 2.25C11.6234 2.25 13.75 4.37665 13.75 7C13.75 9.62335 11.6234 11.75 9 11.75C6.37665 11.75 4.25 9.62335 4.25 7Z" fill="var(--secondary-9)"></path>
+<path opacity="0.4" d="M1.25 19C1.25 15.8244 3.82436 13.25 7 13.25H11C14.1756 13.25 16.75 15.8244 16.75 19C16.75 20.5188 15.5188 21.75 14 21.75H4C2.48122 21.75 1.25 20.5188 1.25 19Z" fill="var(--secondary-9)"></path>
+<path d="M13.374 11.4644C13.8812 11.6492 14.4288 11.75 15 11.75C17.6233 11.75 19.75 9.62335 19.75 7C19.75 4.37665 17.6233 2.25 15 2.25C14.4288 2.25 13.8812 2.35081 13.374 2.5356C14.5317 3.67 15.25 5.25111 15.25 7C15.25 8.74889 14.5317 10.33 13.374 11.4644Z" fill="var(--secondary-9)"></path>
+<path d="M17.24 21.75H19.9995C21.5183 21.75 22.7495 20.5188 22.7495 19C22.7495 15.8244 20.1752 13.25 16.9995 13.25H15.416C17.1391 14.5754 18.2495 16.658 18.2495 19C18.2495 20.0488 17.8697 21.0088 17.24 21.75Z" fill="var(--secondary-9)"></path>
 </svg>
 """
 
@@ -315,11 +315,11 @@
   <path d="M78 526C78 460 87 363.259 284 283C481 202.741 481 129 481 0M54 526C54 460 63 363.259 260 283C457 202.741 457 129 457 0M30 526C30 460 39 363.259 236 283C433 202.741 433 129 433 0M6 526C6 460 15 363.259 212 283C409 202.741 409 129 409 0M-18 526C-18 460 -9 363.259 188 283C385 202.741 385 129 385 0M-42 526C-42 460 -33 363.259 164 283C361 202.741 361 129 361 0M-66 526C-66 460 -57 363.259 140 283C337 202.741 337 129 337 0M-90 526C-90 460 -81 363.259 116 283C313 202.741 313 129 313 0M-114 526C-114 460 -105 363.259 92 283C289 202.741 289 129 289 0M-138 526C-138 460 -129 363.259 68 283C265 202.741 265 129 265 0M-162 526C-162 460 -153 363.259 44 283C241 202.741 241 129 241 0M-186 526C-186 460 -177 363.259 20 283C217 202.741 217 129 217 0M-210 526C-210 460 -201 363.259 -4 283C193 202.741 193 129 193 0M-234 526C-234 460 -225 363.259 -28 283C169 202.741 169 129 169 0M-258 526C-258 460 -249 363.259 -52 283C145 202.741 145 129 145 0M-282 526C-282 460 -273 363.259 -76 283C121 202.741 121 129 121 0M-306 526C-306 460 -297 363.259 -100 283C97 202.741 97 129 97 0M-330 526C-330 460 -321 363.259 -124 283C73 202.741 73 129 73 0M-354 526C-354 460 -345 363.259 -148 283C49 202.741 49 129 49 0M-378 526C-378 460 -369 363.259 -172 283C25 202.741 25 129 25 0" stroke="url(#paint0_linear_10583_5494)"/>
   <defs>
     <linearGradient id="paint0_linear_10583_5494" x1="183.5" y1="515.5" x2="504" y2="1.35484e-05" gradientUnits="userSpaceOnUse">
-      <stop offset="0.100401" stop-color="var(--c-slate-1)"/>
+      <stop offset="0.100401" stop-color="var(--secondary-1)"/>
       <stop offset="0.296955" stop-color="var(--wave-line-1)"/>
-      <stop offset="0.5" stop-color="var(--c-slate-1)"/>
+      <stop offset="0.5" stop-color="var(--secondary-1)"/>
       <stop offset="0.7" stop-color="var(--wave-line-2)"/>
-      <stop offset="1" stop-color="var(--c-slate-1)"/>
+      <stop offset="1" stop-color="var(--secondary-1)"/>
     </linearGradient>
   </defs>
 </svg>
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/marquee.py b/packages/reflex-site-shared/src/reflex_site_shared/components/marquee.py
index 6d5b00528bf..be2e49daaa0 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/marquee.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/marquee.py
@@ -26,7 +26,7 @@ class Marquee(rx.NoSSRComponent):
 
     # Gradient props
     gradient: rx.Var[bool] = rx.Var.create(True)
-    gradient_color: rx.Var[str] = rx.Var.create("var(--c-slate-1)")
+    gradient_color: rx.Var[str] = rx.Var.create("var(--secondary-1)")
     gradient_width: rx.Var[int | str] = rx.Var.create(250)
 
 
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py b/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
index 202a08c4c0b..0eccadd00d1 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
@@ -57,9 +57,9 @@ def app_dialog_with_trigger(
                 rx.el.div(
                     rx.el.div(
                         rx.el.p(
-                            app_name, class_name="text-md !text-slate-11 font-bold"
+                            app_name, class_name="text-md !text-secondary-11 font-bold"
                         ),
-                        rx.el.p(app_author, class_name="text-sm !text-slate-9"),
+                        rx.el.p(app_author, class_name="text-sm !text-secondary-9"),
                         class_name="flex flex-row gap-x-2 items-center",
                     ),
                     rx.link(
@@ -193,12 +193,12 @@ def extended_gallery_grid_item(
                 rx.el.div(
                     rx.el.span(
                         app_name,
-                        class_name="text-sm font-semibold text-slate-12 dark:text-m-slate-3 truncate min-w-0 max-w-[90%]",
+                        class_name="text-sm font-semibold text-secondary-12 truncate min-w-0 max-w-[90%]",
                     ),
                     rx.el.div(
                         rx.el.span(
                             "App Integrations: ",
-                            class_name="text-slate-9 text-sm font-medium",
+                            class_name="text-secondary-9 text-sm font-medium",
                         ),
                         rx.el.div(
                             integrations_stack(app_integrations),
@@ -207,13 +207,13 @@ def extended_gallery_grid_item(
                         class_name="flex flex-row items-center gap-2 mt-2",
                     ),
                     class_name=(
-                        "flex flex-col w-full px-4 py-3 border-t border-m-slate-4 dark:border-m-slate-12 gap-2 relative pb-4",
+                        "flex flex-col w-full px-4 py-3 border-t border-secondary-4 gap-2 relative pb-4",
                     ),
                 ),
                 class_name="flex flex-col w-full",
             ),
             key=app_name,
-            class_name="group cursor-pointer rounded-2xl shadow-small border border-slate-4 dark:border-m-slate-12 bg-white-1 dark:bg-m-slate-14 flex flex-col w-full relative overflow-hidden",
+            class_name="group cursor-pointer rounded-2xl shadow-small border border-secondary-4 bg-secondary-1 flex flex-col w-full relative overflow-hidden",
         ),
     )
 
@@ -266,11 +266,11 @@ def create_header():
         rx.box(
             rx.el.h1(
                 "Reflex Build Templates",
-                class_name="text-slate-12 text-4xl font-bold mb-6",
+                class_name="text-secondary-12 text-4xl font-bold mb-6",
             ),
             rx.el.p(
                 "Production-ready app templates built with Reflex — explore dashboards, tools, and AI-powered apps.",
-                class_name="text-slate-11 text-lg leading-relaxed mb-12 max-w-lg font-medium",
+                class_name="text-secondary-11 text-lg leading-relaxed mb-12 max-w-lg font-medium",
             ),
             class_name="mb-8 lg:mb-0 text-center",
         ),
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py b/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
index 36df863ea85..52070736621 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
@@ -58,9 +58,9 @@ def app_dialog_with_trigger(
                 rx.el.div(
                     rx.el.div(
                         rx.el.p(
-                            app_name, class_name="text-md !text-slate-11 font-bold"
+                            app_name, class_name="text-md !text-secondary-11 font-bold"
                         ),
-                        rx.el.p(app_author, class_name="text-sm !text-slate-9"),
+                        rx.el.p(app_author, class_name="text-sm !text-secondary-9"),
                         class_name="flex flex-row gap-x-2 items-center",
                     ),
                     rx.link(
@@ -194,12 +194,12 @@ def extended_gallery_grid_item(
                 rx.el.div(
                     rx.el.span(
                         app_name,
-                        class_name="text-sm font-semibold text-slate-12 dark:text-m-slate-3 truncate min-w-0 max-w-[90%]",
+                        class_name="text-sm font-semibold text-secondary-12 truncate min-w-0 max-w-[90%]",
                     ),
                     rx.el.div(
                         rx.el.span(
                             "App Integrations: ",
-                            class_name="text-slate-9 text-sm font-medium",
+                            class_name="text-secondary-9 text-sm font-medium",
                         ),
                         rx.el.div(
                             integrations_stack(app_integrations),
@@ -208,13 +208,13 @@ def extended_gallery_grid_item(
                         class_name="flex flex-row items-center gap-2 mt-2",
                     ),
                     class_name=(
-                        "flex flex-col w-full px-4 py-3 border-t border-m-slate-4 dark:border-m-slate-12 gap-2 relative pb-4",
+                        "flex flex-col w-full px-4 py-3 border-t border-secondary-4 gap-2 relative pb-4",
                     ),
                 ),
                 class_name="flex flex-col w-full",
             ),
             key=app_name,
-            class_name="group cursor-pointer rounded-2xl shadow-small border border-slate-4 dark:border-m-slate-12 bg-white-1 dark:bg-m-slate-14 flex flex-col w-full relative overflow-hidden",
+            class_name="group cursor-pointer rounded-2xl shadow-small border border-secondary-4 bg-secondary-1 flex flex-col w-full relative overflow-hidden",
         ),
     )
 
@@ -267,11 +267,11 @@ def create_header():
         rx.box(
             rx.el.h1(
                 "Reflex Build Templates",
-                class_name="text-slate-12 text-4xl font-bold mb-6",
+                class_name="text-secondary-12 text-4xl font-bold mb-6",
             ),
             rx.el.p(
                 "Production-ready app templates built with Reflex — explore dashboards, tools, and AI-powered apps.",
-                class_name="text-slate-11 text-lg leading-relaxed mb-12 max-w-lg font-medium",
+                class_name="text-secondary-11 text-lg leading-relaxed mb-12 max-w-lg font-medium",
             ),
             class_name="mb-8 lg:mb-0 text-center",
         ),
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/styles/custom-colors.css b/packages/reflex-site-shared/src/reflex_site_shared/styles/custom-colors.css
deleted file mode 100644
index 6e0f5c5fa5d..00000000000
--- a/packages/reflex-site-shared/src/reflex_site_shared/styles/custom-colors.css
+++ /dev/null
@@ -1,182 +0,0 @@
-/* Custom colors */
-
-.light,
-.light-theme {
-  /* Slate */
-  --c-slate-1: #fcfcfd;
-  --c-slate-2: #f9f9fb;
-  --c-slate-3: #f0f0f3;
-  --c-slate-4: #e8e8ec;
-  --c-slate-5: #e0e1e6;
-  --c-slate-6: #d9d9e0;
-  --c-slate-7: #cdced6;
-  --c-slate-8: #b9bbc6;
-  --c-slate-9: #8b8d98;
-  --c-slate-10: #80838d;
-  --c-slate-11: #60646c;
-  --c-slate-12: #1c2024;
-  --slate-1: #fbfcfe;
-  --slate-2: #f7fafd;
-  --slate-3: #edf1f6;
-  --slate-4: #e4e9f1;
-  --slate-5: #dbe1eb;
-  --slate-6: #d3dae6;
-  --slate-7: #c7d0de;
-  --slate-8: #b1bdcf;
-  --slate-9: #838fa1;
-  --slate-10: #798495;
-  --slate-11: #5c6573;
-  --slate-12: #1b212a;
-  --slate-a1: #0040c004;
-  --slate-a2: #0040c008;
-  --slate-a3: #00398e12;
-  --slate-a4: #0037801c;
-  --slate-a5: #00327924;
-  --slate-a6: #002e772d;
-  --slate-a7: #002d7039;
-  --slate-a8: #0028634e;
-  --slate-a9: #00193c7c;
-  --slate-a10: #00153686;
-  --slate-a11: #001027a4;
-  --slate-a12: #000711e5;
-  /* Violet */
-  --c-violet-1: #fdfcfe;
-  --c-violet-2: #fafbff;
-  --c-violet-3: #f4f0fe;
-  --c-violet-4: #ebe4ff;
-  --c-violet-5: #e1d9ff;
-  --c-violet-6: #d4cafe;
-  --c-violet-7: #c2b5f5;
-  --c-violet-8: #aa99ec;
-  --c-violet-9: #6e56cf;
-  --c-violet-10: #654dc4;
-  --c-violet-11: #6550b9;
-  --c-violet-12: #2f265f;
-  /* Jade */
-  --c-jade-8: #56ba9f;
-  --c-jade-8-a: rgba(86, 186, 159, 0.16);
-  /* Red */
-  --c-red-9: #e5484d;
-  --c-red-10: #dc3e42;
-  /* White */
-  --c-white-1: #ffffff;
-  --glow: #ebe4ff;
-  --wave-line-1: #d4cafe;
-  --wave-line-2: #ebe4ff;
-  /* Marketing Colors */
-  --m-slate-1: #fcfcfd;
-  --m-slate-2: #f6f7f9;
-  --m-slate-3: #eeeff2;
-  --m-slate-4: #e5e8eb;
-  --m-slate-5: #cacdd4;
-  --m-slate-6: #979faa;
-  --m-slate-7: #67707e;
-  --m-slate-8: #3c434e;
-  --m-slate-9: #2a3037;
-  --m-slate-10: #21252b;
-  --m-slate-11: #1d2025;
-  --m-slate-12: #151618;
-  --m-slate-13: #1c2024;
-  --m-slate-14: #1a1b1d;
-  --m-slate-15: #151618;
-  --m-violet-1: #fdfcfe;
-  --m-violet-2: #faf8ff;
-  --m-violet-3: #f4f0fe;
-  --m-violet-4: #ebe4ff;
-  --m-violet-5: #e1d9ff;
-  --m-violet-6: #d4cafe;
-  --m-violet-7: #c2b5f5;
-  --m-violet-8: #aa99ec;
-  --m-violet-9: #6e56cf;
-  --m-violet-10: #654dc4;
-  --m-violet-11: #6550b9;
-  --m-violet-12: #2f265f;
-}
-
-.dark,
-.dark-theme {
-  /* Slate */
-  --slate-1: #141619;
-  --slate-2: #1b1d20;
-  --slate-3: #22252a;
-  --slate-4: #282b31;
-  --slate-5: #2e3238;
-  --slate-6: #353a42;
-  --slate-7: #414852;
-  --slate-8: #58616f;
-  --slate-9: #656e7d;
-  --slate-10: #737c8a;
-  --slate-11: #adb4bf;
-  --slate-12: #eceef1;
-  /* #151618 */
-  --c-slate-2: #1a1b1d;
-  /* #1A1B1D */
-  --c-slate-3: #222326;
-  /* #222326 */
-  --c-slate-4: #27282b;
-  /* #27282B */
-  --c-slate-5: #303236;
-  /* #303236 */
-  --c-slate-6: #4b4d53;
-  /* #4B4D53 */
-  --c-slate-7: #5e5f69;
-  /* #5E5F69 */
-  --c-slate-8: #6e7287;
-  /* #6E7287 */
-  --c-slate-9: #9a9cac;
-  /* #9A9CAC */
-  --c-slate-10: #d9d9e0;
-  /* #D9D9E0 */
-  --c-slate-11: #e0e1e6;
-  /* #E0E1E6 */
-  --c-slate-12: #fcfcfd;
-  /* #FCFCFD */
-  /* Violet */
-  --c-violet-1: #16112c;
-  --c-violet-2: #140e2b;
-  --c-violet-3: #261958;
-  --c-violet-4: #2f1c78;
-  --c-violet-5: #352088;
-  --c-violet-6: #4329ac;
-  --c-violet-7: #5638d3;
-  --c-violet-8: #5f43d0;
-  --c-violet-9: #baa7ff;
-  --c-violet-10: #d6c8fb;
-  --c-violet-11: #ede8fe;
-  --c-violet-12: #faf5fe;
-  /* Jade */
-  --c-jade-8: #56ba9f;
-  --c-jade-8-a: rgba(86, 186, 159, 0.16);
-  /* Red */
-  --c-red-9: #e5484d;
-  --c-red-10: #dc3e42;
-  /* White */
-  --c-white-1: #1b1d20;
-  --glow: #261958;
-  --wave-line-1: #2f1c78;
-  --wave-line-2: #261958;
-  --m-slate-1: #fcfcfd;
-  --m-slate-2: #f6f7f9;
-  --m-slate-3: #eeeff2;
-  --m-slate-4: #e5e8eb;
-  --m-slate-5: #cacdd4;
-  --m-slate-6: #979faa;
-  --m-slate-7: #67707e;
-  --m-slate-8: #3c434e;
-  --m-slate-9: #2a3037;
-  --m-slate-10: #21252b;
-  --m-slate-11: #1d2025;
-  --m-slate-12: #151618;
-  --m-violet-1: #fdfcfe;
-  --m-violet-2: #faf8ff;
-  --m-violet-3: #f4f0fe;
-  --m-violet-4: #ebe4ff;
-  --m-violet-5: #e1d9ff;
-  --m-violet-6: #d4cafe;
-  --m-violet-7: #c2b5f5;
-  --m-violet-8: #aa99ec;
-  --m-violet-9: #6e56cf;
-  --m-violet-10: #654dc4;
-  --m-violet-11: #6550b9;
-  --m-violet-12: #2f265f;
-}
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/styles/globals.css b/packages/reflex-site-shared/src/reflex_site_shared/styles/globals.css
deleted file mode 100644
index 344511c1213..00000000000
--- a/packages/reflex-site-shared/src/reflex_site_shared/styles/globals.css
+++ /dev/null
@@ -1,2051 +0,0 @@
-@import "tailwindcss-animated";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-:root {
-    /* Primary */
-    --primary-1: var(--violet-1);
-    --primary-2: var(--violet-2);
-    --primary-3: var(--violet-3);
-    --primary-4: var(--violet-4);
-    --primary-5: var(--violet-5);
-    --primary-6: var(--violet-6);
-    --primary-7: var(--violet-7);
-    --primary-8: var(--violet-8);
-    --primary-9: var(--violet-9);
-    --primary-10: var(--violet-10);
-    --primary-11: var(--violet-11);
-    --primary-12: var(--violet-12);
-    --primary-a1: var(--violet-a1);
-    --primary-a2: var(--violet-a2);
-    --primary-a3: var(--violet-a3);
-    --primary-a4: var(--violet-a4);
-    --primary-a5: var(--violet-a5);
-    --primary-a6: var(--violet-a6);
-    --primary-a7: var(--violet-a7);
-    --primary-a8: var(--violet-a8);
-    --primary-a9: var(--violet-a9);
-    --primary-a10: var(--violet-a10);
-    --primary-a11: var(--violet-a11);
-    --primary-a12: var(--violet-a12);
-    /* Contrast */
-    --primary-contrast: var(--violet-contrast);
-    /* Secondary */
-    --secondary-1: var(--slate-1);
-    --secondary-2: var(--slate-2);
-    --secondary-3: var(--slate-3);
-    --secondary-4: var(--slate-4);
-    --secondary-5: var(--slate-5);
-    --secondary-6: var(--slate-6);
-    --secondary-7: var(--slate-7);
-    --secondary-8: var(--slate-8);
-    --secondary-9: var(--slate-9);
-    --secondary-10: var(--slate-10);
-    --secondary-11: var(--slate-11);
-    --secondary-12: var(--slate-12);
-    --secondary-a1: var(--slate-a1);
-    --secondary-a2: var(--slate-a2);
-    --secondary-a3: var(--slate-a3);
-    --secondary-a4: var(--slate-a4);
-    --secondary-a5: var(--slate-a5);
-    --secondary-a6: var(--slate-a6);
-    --secondary-a7: var(--slate-a7);
-    --secondary-a8: var(--slate-a8);
-    --secondary-a9: var(--slate-a9);
-    --secondary-a10: var(--slate-a10);
-    --secondary-a11: var(--slate-a11);
-    --secondary-a12: var(--slate-a12);
-    /* Info */
-    --info-1: var(--blue-1);
-    --info-2: var(--blue-2);
-    --info-3: var(--blue-3);
-    --info-4: var(--blue-4);
-    --info-5: var(--blue-5);
-    --info-6: var(--blue-6);
-    --info-7: var(--blue-7);
-    --info-8: var(--blue-8);
-    --info-9: var(--blue-9);
-    --info-10: var(--blue-10);
-    --info-11: var(--blue-11);
-    --info-12: var(--blue-12);
-    --info-a1: var(--blue-a1);
-    --info-a2: var(--blue-a2);
-    --info-a3: var(--blue-a3);
-    --info-a4: var(--blue-a4);
-    --info-a5: var(--blue-a5);
-    --info-a6: var(--blue-a6);
-    --info-a7: var(--blue-a7);
-    --info-a8: var(--blue-a8);
-    --info-a9: var(--blue-a9);
-    --info-a10: var(--blue-a10);
-    --info-a11: var(--blue-a11);
-    --info-a12: var(--blue-a12);
-    /* Success */
-    --success-1: var(--jade-1);
-    --success-2: var(--jade-2);
-    --success-3: var(--jade-3);
-    --success-4: var(--jade-4);
-    --success-5: var(--jade-5);
-    --success-6: var(--jade-6);
-    --success-7: var(--jade-7);
-    --success-8: var(--jade-8);
-    --success-9: var(--jade-9);
-    --success-10: var(--jade-10);
-    --success-11: var(--jade-11);
-    --success-12: var(--jade-12);
-    --success-a1: var(--jade-a1);
-    --success-a2: var(--jade-a2);
-    --success-a3: var(--jade-a3);
-    --success-a4: var(--jade-a4);
-    --success-a5: var(--jade-a5);
-    --success-a6: var(--jade-a6);
-    --success-a7: var(--jade-a7);
-    --success-a8: var(--jade-a8);
-    --success-a9: var(--jade-a9);
-    --success-a10: var(--jade-a10);
-    --success-a11: var(--jade-a11);
-    --success-a12: var(--jade-a12);
-    /* Destructive */
-    --destructive-1: var(--red-1);
-    --destructive-2: var(--red-2);
-    --destructive-3: var(--red-3);
-    --destructive-4: var(--red-4);
-    --destructive-5: var(--red-5);
-    --destructive-6: var(--red-6);
-    --destructive-7: var(--red-7);
-    --destructive-8: var(--red-8);
-    --destructive-9: var(--red-9);
-    --destructive-10: var(--red-10);
-    --destructive-11: var(--red-11);
-    --destructive-12: var(--red-12);
-    --destructive-a1: var(--red-a1);
-    --destructive-a2: var(--red-a2);
-    --destructive-a3: var(--red-a3);
-    --destructive-a4: var(--red-a4);
-    --destructive-a5: var(--red-a5);
-    --destructive-a6: var(--red-a6);
-    --destructive-a7: var(--red-a7);
-    --destructive-a8: var(--red-a8);
-    --destructive-a9: var(--red-a9);
-    --destructive-a10: var(--red-a10);
-    --destructive-a11: var(--red-a11);
-    --destructive-a12: var(--red-a12);
-    /* Warning */
-    --warning-1: var(--amber-1);
-    --warning-2: var(--amber-2);
-    --warning-3: var(--amber-3);
-    --warning-4: var(--amber-4);
-    --warning-5: var(--amber-5);
-    --warning-6: var(--amber-6);
-    --warning-7: var(--amber-7);
-    --warning-8: var(--amber-8);
-    --warning-9: var(--amber-9);
-    --warning-10: var(--amber-10);
-    --warning-11: var(--amber-11);
-    --warning-12: var(--amber-12);
-    --warning-a1: var(--amber-a1);
-    --warning-a2: var(--amber-a2);
-    --warning-a3: var(--amber-a3);
-    --warning-a4: var(--amber-a4);
-    --warning-a5: var(--amber-a5);
-    --warning-a6: var(--amber-a6);
-    --warning-a7: var(--amber-a7);
-    --warning-a8: var(--amber-a8);
-    --warning-a9: var(--amber-a9);
-    --warning-a10: var(--amber-a10);
-    --warning-a11: var(--amber-a11);
-    --warning-a12: var(--amber-a12);
-    /* Radius */
-    --radius: 0.5rem;
-    /* Font */
-    --font-sans: "Instrument Sans", sans-serif;
-    --font-mono: "JetBrains Mono", monospace;
-    --font-instrument-sans: 'Instrument Sans', sans-serif;
-    --font-source-code-pro: 'Source Code Pro', monospace;
-    --font-jetbrains: "JetBrains Mono", monospace;
-    /* Shadow (light) */
-    --shadow-small-adaptive: 0px 2px 5px 0px rgba(28, 32, 36, 0.03);
-    --shadow-medium-adaptive: 0px 4px 8px 0px rgba(28, 32, 36, 0.04);
-    --shadow-large-adaptive:
-        0px 24px 12px 0px rgba(28, 32, 36, 0.02),
-        0px 8px 8px 0px rgba(28, 32, 36, 0.02),
-        0px 2px 6px 0px rgba(28, 32, 36, 0.02);
-    --shadow-large-negative-adaptive:
-        0px -24px 12px 0px rgba(28, 32, 36, 0.02),
-        0px -8px 8px 0px rgba(28, 32, 36, 0.02),
-        0px -2px 6px 0px rgba(28, 32, 36, 0.02);
-    --shadow-large-negative-primary-adaptive:
-        0px -32px 48px 0px color-mix(in srgb, var(--primary-9) 8%, transparent),
-        0px -16px 32px 0px color-mix(in srgb, var(--primary-9) 10%, transparent),
-        0px -8px 24px 0px color-mix(in srgb, var(--primary-9) 12%, transparent),
-        0px -2px 16px 0px color-mix(in srgb, var(--primary-9) 14%, transparent);
-    --shadow-x-large-adaptive:
-        0 0 0 1px rgba(0, 0, 0, 0.04),
-        0 4px 8px 0 rgba(0, 0, 0, 0.02),
-        0 1px 1px 0 rgba(0, 0, 0, 0.01),
-        0 4px 8px 0 rgba(0, 0, 0, 0.03),
-        0 0 0 1px #fff inset;
-    --shadow-inner-adaptive: 0 6px 16px 0 rgba(0, 0, 0, 0.04) inset;
-    --shadow-button-outline-adaptive:
-        0 -1px 0 0 rgba(0, 0, 0, 0.08) inset,
-        0 0 0 1px rgba(0, 0, 0, 0.08) inset,
-        0 1px 2px 0 rgba(0, 0, 0, 0.02),
-        0 1px 4px 0 rgba(0, 0, 0, 0.02);
-    --shadow-card-xs-no-left-adaptive:
-        0 -1px 0 0 rgba(0, 0, 0, 0.16) inset,
-        0 1px 0 0 rgba(0, 0, 0, 0.08) inset,
-        -1px 0 0 0 rgba(0, 0, 0, 0.08) inset,
-        0 1px 2px 0 rgba(0, 0, 0, 0.02),
-        0 1px 4px 0 rgba(0, 0, 0, 0.02);
-    --shadow-card-small-adaptive:
-        0 0 0 1px rgba(0, 0, 0, 0.04),
-        0 4px 8px 0 rgba(0, 0, 0, 0.04),
-        0 1px 1px 0 rgba(0, 0, 0, 0.01),
-        0 2px 4px 0 rgba(0, 0, 0, 0.03);
-    color-scheme: light dark;
-}
-
-.dark {
-    /* Shadow (dark) */
-    --shadow-small-adaptive: none;
-    --shadow-medium-adaptive: none;
-    --shadow-large-adaptive: none;
-    --shadow-large-negative-adaptive: none;
-    --shadow-large-negative-primary-adaptive:
-        0px -32px 48px 0px color-mix(in srgb, var(--primary-9) 4%, transparent),
-        0px -16px 32px 0px color-mix(in srgb, var(--primary-9) 8%, transparent),
-        0px -8px 24px 0px color-mix(in srgb, var(--primary-9) 12%, transparent),
-        0px -2px 16px 0px color-mix(in srgb, var(--primary-9) 16%, transparent);
-    --shadow-x-large-adaptive: none;
-    --shadow-inner-adaptive: none;
-    --shadow-button-outline-adaptive: none;
-    --shadow-card-xs-no-left-adaptive: none;
-    --shadow-card-small-adaptive: none;
-}
-
-@theme {
-    /* Custom Palette */
-    --color-white-1: var(--c-white-1);
-    --color-slate-1: var(--c-slate-1);
-    --color-slate-2: var(--c-slate-2);
-    --color-slate-3: var(--c-slate-3);
-    --color-slate-4: var(--c-slate-4);
-    --color-slate-5: var(--c-slate-5);
-    --color-slate-6: var(--c-slate-6);
-    --color-slate-7: var(--c-slate-7);
-    --color-slate-8: var(--c-slate-8);
-    --color-slate-9: var(--c-slate-9);
-    --color-slate-10: var(--c-slate-10);
-    --color-slate-11: var(--c-slate-11);
-    --color-slate-12: var(--c-slate-12);
-    --color-violet-2: var(--c-violet-2);
-    --color-violet-3: var(--c-violet-3);
-    --color-violet-4: var(--c-violet-4);
-    --color-violet-5: var(--c-violet-5);
-    --color-violet-6: var(--c-violet-6);
-    --color-violet-7: var(--c-violet-7);
-    --color-violet-8: var(--c-violet-8);
-    --color-violet-9: var(--c-violet-9);
-    --color-violet-10: var(--c-violet-10);
-    --color-violet-11: var(--c-violet-11);
-    --color-violet-12: var(--c-violet-12);
-    --color-transparent: transparent;
-    /* Contrast */
-    --color-primary-contrast: var(--primary-contrast);
-    /* Primary */
-    --color-primary-1: var(--primary-1);
-    --color-primary-2: var(--primary-2);
-    --color-primary-3: var(--primary-3);
-    --color-primary-4: var(--primary-4);
-    --color-primary-5: var(--primary-5);
-    --color-primary-6: var(--primary-6);
-    --color-primary-7: var(--primary-7);
-    --color-primary-8: var(--primary-8);
-    --color-primary-9: var(--primary-9);
-    --color-primary-10: var(--primary-10);
-    --color-primary-11: var(--primary-11);
-    --color-primary-12: var(--primary-12);
-    --color-primary-a1: var(--primary-a1);
-    --color-primary-a2: var(--primary-a2);
-    --color-primary-a3: var(--primary-a3);
-    --color-primary-a4: var(--primary-a4);
-    --color-primary-a5: var(--primary-a5);
-    --color-primary-a6: var(--primary-a6);
-    --color-primary-a7: var(--primary-a7);
-    --color-primary-a8: var(--primary-a8);
-    --color-primary-a9: var(--primary-a9);
-    --color-primary-a10: var(--primary-a10);
-    --color-primary-a11: var(--primary-a11);
-    --color-primary-a12: var(--primary-a12);
-    /* Secondary */
-    --color-secondary-1: var(--secondary-1);
-    --color-secondary-2: var(--secondary-2);
-    --color-secondary-3: var(--secondary-3);
-    --color-secondary-4: var(--secondary-4);
-    --color-secondary-5: var(--secondary-5);
-    --color-secondary-6: var(--secondary-6);
-    --color-secondary-7: var(--secondary-7);
-    --color-secondary-8: var(--secondary-8);
-    --color-secondary-9: var(--secondary-9);
-    --color-secondary-10: var(--secondary-10);
-    --color-secondary-11: var(--secondary-11);
-    --color-secondary-12: var(--secondary-12);
-    --color-secondary-a1: var(--secondary-a1);
-    --color-secondary-a2: var(--secondary-a2);
-    --color-secondary-a3: var(--secondary-a3);
-    --color-secondary-a4: var(--secondary-a4);
-    --color-secondary-a5: var(--secondary-a5);
-    --color-secondary-a6: var(--secondary-a6);
-    --color-secondary-a7: var(--secondary-a7);
-    --color-secondary-a8: var(--secondary-a8);
-    --color-secondary-a9: var(--secondary-a9);
-    --color-secondary-a10: var(--secondary-a10);
-    --color-secondary-a11: var(--secondary-a11);
-    --color-secondary-a12: var(--secondary-a12);
-    /* Info */
-    --color-info-1: var(--info-1);
-    --color-info-2: var(--info-2);
-    --color-info-3: var(--info-3);
-    --color-info-4: var(--info-4);
-    --color-info-5: var(--info-5);
-    --color-info-6: var(--info-6);
-    --color-info-7: var(--info-7);
-    --color-info-8: var(--info-8);
-    --color-info-9: var(--info-9);
-    --color-info-10: var(--info-10);
-    --color-info-11: var(--info-11);
-    --color-info-12: var(--info-12);
-    --color-info-a1: var(--info-a1);
-    --color-info-a2: var(--info-a2);
-    --color-info-a3: var(--info-a3);
-    --color-info-a4: var(--info-a4);
-    --color-info-a5: var(--info-a5);
-    --color-info-a6: var(--info-a6);
-    --color-info-a7: var(--info-a7);
-    --color-info-a8: var(--info-a8);
-    --color-info-a9: var(--info-a9);
-    --color-info-a10: var(--info-a10);
-    --color-info-a11: var(--info-a11);
-    --color-info-a12: var(--info-a12);
-    /* Success */
-    --color-success-1: var(--success-1);
-    --color-success-2: var(--success-2);
-    --color-success-3: var(--success-3);
-    --color-success-4: var(--success-4);
-    --color-success-5: var(--success-5);
-    --color-success-6: var(--success-6);
-    --color-success-7: var(--success-7);
-    --color-success-8: var(--success-8);
-    --color-success-9: var(--success-9);
-    --color-success-10: var(--success-10);
-    --color-success-11: var(--success-11);
-    --color-success-12: var(--success-12);
-    --color-success-a1: var(--success-a1);
-    --color-success-a2: var(--success-a2);
-    --color-success-a3: var(--success-a3);
-    --color-success-a4: var(--success-a4);
-    --color-success-a5: var(--success-a5);
-    --color-success-a6: var(--success-a6);
-    --color-success-a7: var(--success-a7);
-    --color-success-a8: var(--success-a8);
-    --color-success-a9: var(--success-a9);
-    --color-success-a10: var(--success-a10);
-    --color-success-a11: var(--success-a11);
-    --color-success-a12: var(--success-a12);
-    /* Warning */
-    --color-warning-1: var(--warning-1);
-    --color-warning-2: var(--warning-2);
-    --color-warning-3: var(--warning-3);
-    --color-warning-4: var(--warning-4);
-    --color-warning-5: var(--warning-5);
-    --color-warning-6: var(--warning-6);
-    --color-warning-7: var(--warning-7);
-    --color-warning-8: var(--warning-8);
-    --color-warning-9: var(--warning-9);
-    --color-warning-10: var(--warning-10);
-    --color-warning-11: var(--warning-11);
-    --color-warning-12: var(--warning-12);
-    --color-warning-a1: var(--warning-a1);
-    --color-warning-a2: var(--warning-a2);
-    --color-warning-a3: var(--warning-a3);
-    --color-warning-a4: var(--warning-a4);
-    --color-warning-a5: var(--warning-a5);
-    --color-warning-a6: var(--warning-a6);
-    --color-warning-a7: var(--warning-a7);
-    --color-warning-a8: var(--warning-a8);
-    --color-warning-a9: var(--warning-a9);
-    --color-warning-a10: var(--warning-a10);
-    --color-warning-a11: var(--warning-a11);
-    --color-warning-a12: var(--warning-a12);
-    /* Destructive */
-    --color-destructive-1: var(--destructive-1);
-    --color-destructive-2: var(--destructive-2);
-    --color-destructive-3: var(--destructive-3);
-    --color-destructive-4: var(--destructive-4);
-    --color-destructive-5: var(--destructive-5);
-    --color-destructive-6: var(--destructive-6);
-    --color-destructive-7: var(--destructive-7);
-    --color-destructive-8: var(--destructive-8);
-    --color-destructive-9: var(--destructive-9);
-    --color-destructive-10: var(--destructive-10);
-    --color-destructive-11: var(--destructive-11);
-    --color-destructive-12: var(--destructive-12);
-    --color-destructive-a1: var(--destructive-a1);
-    --color-destructive-a2: var(--destructive-a2);
-    --color-destructive-a3: var(--destructive-a3);
-    --color-destructive-a4: var(--destructive-a4);
-    --color-destructive-a5: var(--destructive-a5);
-    --color-destructive-a6: var(--destructive-a6);
-    --color-destructive-a7: var(--destructive-a7);
-    --color-destructive-a8: var(--destructive-a8);
-    --color-destructive-a9: var(--destructive-a9);
-    --color-destructive-a10: var(--destructive-a10);
-    --color-destructive-a11: var(--destructive-a11);
-    --color-destructive-a12: var(--destructive-a12);
-    /* Radix Colors */
-    --color-gray-1: var(--gray-1);
-    --color-gray-2: var(--gray-2);
-    --color-gray-3: var(--gray-3);
-    --color-gray-4: var(--gray-4);
-    --color-gray-5: var(--gray-5);
-    --color-gray-6: var(--gray-6);
-    --color-gray-7: var(--gray-7);
-    --color-gray-8: var(--gray-8);
-    --color-gray-9: var(--gray-9);
-    --color-gray-10: var(--gray-10);
-    --color-gray-11: var(--gray-11);
-    --color-gray-12: var(--gray-12);
-    --color-gray-a1: var(--gray-a1);
-    --color-gray-a2: var(--gray-a2);
-    --color-gray-a3: var(--gray-a3);
-    --color-gray-a4: var(--gray-a4);
-    --color-gray-a5: var(--gray-a5);
-    --color-gray-a6: var(--gray-a6);
-    --color-gray-a7: var(--gray-a7);
-    --color-gray-a8: var(--gray-a8);
-    --color-gray-a9: var(--gray-a9);
-    --color-gray-a10: var(--gray-a10);
-    --color-gray-a11: var(--gray-a11);
-    --color-gray-a12: var(--gray-a12);
-
-    --color-mauve-1: var(--mauve-1);
-    --color-mauve-2: var(--mauve-2);
-    --color-mauve-3: var(--mauve-3);
-    --color-mauve-4: var(--mauve-4);
-    --color-mauve-5: var(--mauve-5);
-    --color-mauve-6: var(--mauve-6);
-    --color-mauve-7: var(--mauve-7);
-    --color-mauve-8: var(--mauve-8);
-    --color-mauve-9: var(--mauve-9);
-    --color-mauve-10: var(--mauve-10);
-    --color-mauve-11: var(--mauve-11);
-    --color-mauve-12: var(--mauve-12);
-    --color-mauve-a1: var(--mauve-a1);
-    --color-mauve-a2: var(--mauve-a2);
-    --color-mauve-a3: var(--mauve-a3);
-    --color-mauve-a4: var(--mauve-a4);
-    --color-mauve-a5: var(--mauve-a5);
-    --color-mauve-a6: var(--mauve-a6);
-    --color-mauve-a7: var(--mauve-a7);
-    --color-mauve-a8: var(--mauve-a8);
-    --color-mauve-a9: var(--mauve-a9);
-    --color-mauve-a10: var(--mauve-a10);
-    --color-mauve-a11: var(--mauve-a11);
-    --color-mauve-a12: var(--mauve-a12);
-
-    --color-sage-1: var(--sage-1);
-    --color-sage-2: var(--sage-2);
-    --color-sage-3: var(--sage-3);
-    --color-sage-4: var(--sage-4);
-    --color-sage-5: var(--sage-5);
-    --color-sage-6: var(--sage-6);
-    --color-sage-7: var(--sage-7);
-    --color-sage-8: var(--sage-8);
-    --color-sage-9: var(--sage-9);
-    --color-sage-10: var(--sage-10);
-    --color-sage-11: var(--sage-11);
-    --color-sage-12: var(--sage-12);
-    --color-sage-a1: var(--sage-a1);
-    --color-sage-a2: var(--sage-a2);
-    --color-sage-a3: var(--sage-a3);
-    --color-sage-a4: var(--sage-a4);
-    --color-sage-a5: var(--sage-a5);
-    --color-sage-a6: var(--sage-a6);
-    --color-sage-a7: var(--sage-a7);
-    --color-sage-a8: var(--sage-a8);
-    --color-sage-a9: var(--sage-a9);
-    --color-sage-a10: var(--sage-a10);
-    --color-sage-a11: var(--sage-a11);
-    --color-sage-a12: var(--sage-a12);
-
-    --color-olive-1: var(--olive-1);
-    --color-olive-2: var(--olive-2);
-    --color-olive-3: var(--olive-3);
-    --color-olive-4: var(--olive-4);
-    --color-olive-5: var(--olive-5);
-    --color-olive-6: var(--olive-6);
-    --color-olive-7: var(--olive-7);
-    --color-olive-8: var(--olive-8);
-    --color-olive-9: var(--olive-9);
-    --color-olive-10: var(--olive-10);
-    --color-olive-11: var(--olive-11);
-    --color-olive-12: var(--olive-12);
-    --color-olive-a1: var(--olive-a1);
-    --color-olive-a2: var(--olive-a2);
-    --color-olive-a3: var(--olive-a3);
-    --color-olive-a4: var(--olive-a4);
-    --color-olive-a5: var(--olive-a5);
-    --color-olive-a6: var(--olive-a6);
-    --color-olive-a7: var(--olive-a7);
-    --color-olive-a8: var(--olive-a8);
-    --color-olive-a9: var(--olive-a9);
-    --color-olive-a10: var(--olive-a10);
-    --color-olive-a11: var(--olive-a11);
-    --color-olive-a12: var(--olive-a12);
-
-    --color-sand-1: var(--sand-1);
-    --color-sand-2: var(--sand-2);
-    --color-sand-3: var(--sand-3);
-    --color-sand-4: var(--sand-4);
-    --color-sand-5: var(--sand-5);
-    --color-sand-6: var(--sand-6);
-    --color-sand-7: var(--sand-7);
-    --color-sand-8: var(--sand-8);
-    --color-sand-9: var(--sand-9);
-    --color-sand-10: var(--sand-10);
-    --color-sand-11: var(--sand-11);
-    --color-sand-12: var(--sand-12);
-    --color-sand-a1: var(--sand-a1);
-    --color-sand-a2: var(--sand-a2);
-    --color-sand-a3: var(--sand-a3);
-    --color-sand-a4: var(--sand-a4);
-    --color-sand-a5: var(--sand-a5);
-    --color-sand-a6: var(--sand-a6);
-    --color-sand-a7: var(--sand-a7);
-    --color-sand-a8: var(--sand-a8);
-    --color-sand-a9: var(--sand-a9);
-    --color-sand-a10: var(--sand-a10);
-    --color-sand-a11: var(--sand-a11);
-    --color-sand-a12: var(--sand-a12);
-
-    --color-tomato-1: var(--tomato-1);
-    --color-tomato-2: var(--tomato-2);
-    --color-tomato-3: var(--tomato-3);
-    --color-tomato-4: var(--tomato-4);
-    --color-tomato-5: var(--tomato-5);
-    --color-tomato-6: var(--tomato-6);
-    --color-tomato-7: var(--tomato-7);
-    --color-tomato-8: var(--tomato-8);
-    --color-tomato-9: var(--tomato-9);
-    --color-tomato-10: var(--tomato-10);
-    --color-tomato-11: var(--tomato-11);
-    --color-tomato-12: var(--tomato-12);
-    --color-tomato-a1: var(--tomato-a1);
-    --color-tomato-a2: var(--tomato-a2);
-    --color-tomato-a3: var(--tomato-a3);
-    --color-tomato-a4: var(--tomato-a4);
-    --color-tomato-a5: var(--tomato-a5);
-    --color-tomato-a6: var(--tomato-a6);
-    --color-tomato-a7: var(--tomato-a7);
-    --color-tomato-a8: var(--tomato-a8);
-    --color-tomato-a9: var(--tomato-a9);
-    --color-tomato-a10: var(--tomato-a10);
-    --color-tomato-a11: var(--tomato-a11);
-    --color-tomato-a12: var(--tomato-a12);
-
-    --color-red-1: var(--red-1);
-    --color-red-2: var(--red-2);
-    --color-red-3: var(--red-3);
-    --color-red-4: var(--red-4);
-    --color-red-5: var(--red-5);
-    --color-red-6: var(--red-6);
-    --color-red-7: var(--red-7);
-    --color-red-8: var(--red-8);
-    --color-red-9: var(--red-9);
-    --color-red-10: var(--red-10);
-    --color-red-11: var(--red-11);
-    --color-red-12: var(--red-12);
-    --color-red-a1: var(--red-a1);
-    --color-red-a2: var(--red-a2);
-    --color-red-a3: var(--red-a3);
-    --color-red-a4: var(--red-a4);
-    --color-red-a5: var(--red-a5);
-    --color-red-a6: var(--red-a6);
-    --color-red-a7: var(--red-a7);
-    --color-red-a8: var(--red-a8);
-    --color-red-a9: var(--red-a9);
-    --color-red-a10: var(--red-a10);
-    --color-red-a11: var(--red-a11);
-    --color-red-a12: var(--red-a12);
-
-    --color-ruby-1: var(--ruby-1);
-    --color-ruby-2: var(--ruby-2);
-    --color-ruby-3: var(--ruby-3);
-    --color-ruby-4: var(--ruby-4);
-    --color-ruby-5: var(--ruby-5);
-    --color-ruby-6: var(--ruby-6);
-    --color-ruby-7: var(--ruby-7);
-    --color-ruby-8: var(--ruby-8);
-    --color-ruby-9: var(--ruby-9);
-    --color-ruby-10: var(--ruby-10);
-    --color-ruby-11: var(--ruby-11);
-    --color-ruby-12: var(--ruby-12);
-    --color-ruby-a1: var(--ruby-a1);
-    --color-ruby-a2: var(--ruby-a2);
-    --color-ruby-a3: var(--ruby-a3);
-    --color-ruby-a4: var(--ruby-a4);
-    --color-ruby-a5: var(--ruby-a5);
-    --color-ruby-a6: var(--ruby-a6);
-    --color-ruby-a7: var(--ruby-a7);
-    --color-ruby-a8: var(--ruby-a8);
-    --color-ruby-a9: var(--ruby-a9);
-    --color-ruby-a10: var(--ruby-a10);
-    --color-ruby-a11: var(--ruby-a11);
-    --color-ruby-a12: var(--ruby-a12);
-
-    --color-crimson-1: var(--crimson-1);
-    --color-crimson-2: var(--crimson-2);
-    --color-crimson-3: var(--crimson-3);
-    --color-crimson-4: var(--crimson-4);
-    --color-crimson-5: var(--crimson-5);
-    --color-crimson-6: var(--crimson-6);
-    --color-crimson-7: var(--crimson-7);
-    --color-crimson-8: var(--crimson-8);
-    --color-crimson-9: var(--crimson-9);
-    --color-crimson-10: var(--crimson-10);
-    --color-crimson-11: var(--crimson-11);
-    --color-crimson-12: var(--crimson-12);
-    --color-crimson-a1: var(--crimson-a1);
-    --color-crimson-a2: var(--crimson-a2);
-    --color-crimson-a3: var(--crimson-a3);
-    --color-crimson-a4: var(--crimson-a4);
-    --color-crimson-a5: var(--crimson-a5);
-    --color-crimson-a6: var(--crimson-a6);
-    --color-crimson-a7: var(--crimson-a7);
-    --color-crimson-a8: var(--crimson-a8);
-    --color-crimson-a9: var(--crimson-a9);
-    --color-crimson-a10: var(--crimson-a10);
-    --color-crimson-a11: var(--crimson-a11);
-    --color-crimson-a12: var(--crimson-a12);
-
-    --color-pink-1: var(--pink-1);
-    --color-pink-2: var(--pink-2);
-    --color-pink-3: var(--pink-3);
-    --color-pink-4: var(--pink-4);
-    --color-pink-5: var(--pink-5);
-    --color-pink-6: var(--pink-6);
-    --color-pink-7: var(--pink-7);
-    --color-pink-8: var(--pink-8);
-    --color-pink-9: var(--pink-9);
-    --color-pink-10: var(--pink-10);
-    --color-pink-11: var(--pink-11);
-    --color-pink-12: var(--pink-12);
-    --color-pink-a1: var(--pink-a1);
-    --color-pink-a2: var(--pink-a2);
-    --color-pink-a3: var(--pink-a3);
-    --color-pink-a4: var(--pink-a4);
-    --color-pink-a5: var(--pink-a5);
-    --color-pink-a6: var(--pink-a6);
-    --color-pink-a7: var(--pink-a7);
-    --color-pink-a8: var(--pink-a8);
-    --color-pink-a9: var(--pink-a9);
-    --color-pink-a10: var(--pink-a10);
-    --color-pink-a11: var(--pink-a11);
-    --color-pink-a12: var(--pink-a12);
-
-    --color-plum-1: var(--plum-1);
-    --color-plum-2: var(--plum-2);
-    --color-plum-3: var(--plum-3);
-    --color-plum-4: var(--plum-4);
-    --color-plum-5: var(--plum-5);
-    --color-plum-6: var(--plum-6);
-    --color-plum-7: var(--plum-7);
-    --color-plum-8: var(--plum-8);
-    --color-plum-9: var(--plum-9);
-    --color-plum-10: var(--plum-10);
-    --color-plum-11: var(--plum-11);
-    --color-plum-12: var(--plum-12);
-    --color-plum-a1: var(--plum-a1);
-    --color-plum-a2: var(--plum-a2);
-    --color-plum-a3: var(--plum-a3);
-    --color-plum-a4: var(--plum-a4);
-    --color-plum-a5: var(--plum-a5);
-    --color-plum-a6: var(--plum-a6);
-    --color-plum-a7: var(--plum-a7);
-    --color-plum-a8: var(--plum-a8);
-    --color-plum-a9: var(--plum-a9);
-    --color-plum-a10: var(--plum-a10);
-    --color-plum-a11: var(--plum-a11);
-    --color-plum-a12: var(--plum-a12);
-
-    --color-purple-1: var(--purple-1);
-    --color-purple-2: var(--purple-2);
-    --color-purple-3: var(--purple-3);
-    --color-purple-4: var(--purple-4);
-    --color-purple-5: var(--purple-5);
-    --color-purple-6: var(--purple-6);
-    --color-purple-7: var(--purple-7);
-    --color-purple-8: var(--purple-8);
-    --color-purple-9: var(--purple-9);
-    --color-purple-10: var(--purple-10);
-    --color-purple-11: var(--purple-11);
-    --color-purple-12: var(--purple-12);
-    --color-purple-a1: var(--purple-a1);
-    --color-purple-a2: var(--purple-a2);
-    --color-purple-a3: var(--purple-a3);
-    --color-purple-a4: var(--purple-a4);
-    --color-purple-a5: var(--purple-a5);
-    --color-purple-a6: var(--purple-a6);
-    --color-purple-a7: var(--purple-a7);
-    --color-purple-a8: var(--purple-a8);
-    --color-purple-a9: var(--purple-a9);
-    --color-purple-a10: var(--purple-a10);
-    --color-purple-a11: var(--purple-a11);
-    --color-purple-a12: var(--purple-a12);
-
-    --color-iris-1: var(--iris-1);
-    --color-iris-2: var(--iris-2);
-    --color-iris-3: var(--iris-3);
-    --color-iris-4: var(--iris-4);
-    --color-iris-5: var(--iris-5);
-    --color-iris-6: var(--iris-6);
-    --color-iris-7: var(--iris-7);
-    --color-iris-8: var(--iris-8);
-    --color-iris-9: var(--iris-9);
-    --color-iris-10: var(--iris-10);
-    --color-iris-11: var(--iris-11);
-    --color-iris-12: var(--iris-12);
-    --color-iris-a1: var(--iris-a1);
-    --color-iris-a2: var(--iris-a2);
-    --color-iris-a3: var(--iris-a3);
-    --color-iris-a4: var(--iris-a4);
-    --color-iris-a5: var(--iris-a5);
-    --color-iris-a6: var(--iris-a6);
-    --color-iris-a7: var(--iris-a7);
-    --color-iris-a8: var(--iris-a8);
-    --color-iris-a9: var(--iris-a9);
-    --color-iris-a10: var(--iris-a10);
-    --color-iris-a11: var(--iris-a11);
-    --color-iris-a12: var(--iris-a12);
-
-    --color-indigo-1: var(--indigo-1);
-    --color-indigo-2: var(--indigo-2);
-    --color-indigo-3: var(--indigo-3);
-    --color-indigo-4: var(--indigo-4);
-    --color-indigo-5: var(--indigo-5);
-    --color-indigo-6: var(--indigo-6);
-    --color-indigo-7: var(--indigo-7);
-    --color-indigo-8: var(--indigo-8);
-    --color-indigo-9: var(--indigo-9);
-    --color-indigo-10: var(--indigo-10);
-    --color-indigo-11: var(--indigo-11);
-    --color-indigo-12: var(--indigo-12);
-    --color-indigo-a1: var(--indigo-a1);
-    --color-indigo-a2: var(--indigo-a2);
-    --color-indigo-a3: var(--indigo-a3);
-    --color-indigo-a4: var(--indigo-a4);
-    --color-indigo-a5: var(--indigo-a5);
-    --color-indigo-a6: var(--indigo-a6);
-    --color-indigo-a7: var(--indigo-a7);
-    --color-indigo-a8: var(--indigo-a8);
-    --color-indigo-a9: var(--indigo-a9);
-    --color-indigo-a10: var(--indigo-a10);
-    --color-indigo-a11: var(--indigo-a11);
-    --color-indigo-a12: var(--indigo-a12);
-
-    --color-blue-1: var(--blue-1);
-    --color-blue-2: var(--blue-2);
-    --color-blue-3: var(--blue-3);
-    --color-blue-4: var(--blue-4);
-    --color-blue-5: var(--blue-5);
-    --color-blue-6: var(--blue-6);
-    --color-blue-7: var(--blue-7);
-    --color-blue-8: var(--blue-8);
-    --color-blue-9: var(--blue-9);
-    --color-blue-10: var(--blue-10);
-    --color-blue-11: var(--blue-11);
-    --color-blue-12: var(--blue-12);
-    --color-blue-a1: var(--blue-a1);
-    --color-blue-a2: var(--blue-a2);
-    --color-blue-a3: var(--blue-a3);
-    --color-blue-a4: var(--blue-a4);
-    --color-blue-a5: var(--blue-a5);
-    --color-blue-a6: var(--blue-a6);
-    --color-blue-a7: var(--blue-a7);
-    --color-blue-a8: var(--blue-a8);
-    --color-blue-a9: var(--blue-a9);
-    --color-blue-a10: var(--blue-a10);
-    --color-blue-a11: var(--blue-a11);
-    --color-blue-a12: var(--blue-a12);
-
-    --color-cyan-1: var(--cyan-1);
-    --color-cyan-2: var(--cyan-2);
-    --color-cyan-3: var(--cyan-3);
-    --color-cyan-4: var(--cyan-4);
-    --color-cyan-5: var(--cyan-5);
-    --color-cyan-6: var(--cyan-6);
-    --color-cyan-7: var(--cyan-7);
-    --color-cyan-8: var(--cyan-8);
-    --color-cyan-9: var(--cyan-9);
-    --color-cyan-10: var(--cyan-10);
-    --color-cyan-11: var(--cyan-11);
-    --color-cyan-12: var(--cyan-12);
-    --color-cyan-a1: var(--cyan-a1);
-    --color-cyan-a2: var(--cyan-a2);
-    --color-cyan-a3: var(--cyan-a3);
-    --color-cyan-a4: var(--cyan-a4);
-    --color-cyan-a5: var(--cyan-a5);
-    --color-cyan-a6: var(--cyan-a6);
-    --color-cyan-a7: var(--cyan-a7);
-    --color-cyan-a8: var(--cyan-a8);
-    --color-cyan-a9: var(--cyan-a9);
-    --color-cyan-a10: var(--cyan-a10);
-    --color-cyan-a11: var(--cyan-a11);
-    --color-cyan-a12: var(--cyan-a12);
-
-    --color-teal-1: var(--teal-1);
-    --color-teal-2: var(--teal-2);
-    --color-teal-3: var(--teal-3);
-    --color-teal-4: var(--teal-4);
-    --color-teal-5: var(--teal-5);
-    --color-teal-6: var(--teal-6);
-    --color-teal-7: var(--teal-7);
-    --color-teal-8: var(--teal-8);
-    --color-teal-9: var(--teal-9);
-    --color-teal-10: var(--teal-10);
-    --color-teal-11: var(--teal-11);
-    --color-teal-12: var(--teal-12);
-    --color-teal-a1: var(--teal-a1);
-    --color-teal-a2: var(--teal-a2);
-    --color-teal-a3: var(--teal-a3);
-    --color-teal-a4: var(--teal-a4);
-    --color-teal-a5: var(--teal-a5);
-    --color-teal-a6: var(--teal-a6);
-    --color-teal-a7: var(--teal-a7);
-    --color-teal-a8: var(--teal-a8);
-    --color-teal-a9: var(--teal-a9);
-    --color-teal-a10: var(--teal-a10);
-    --color-teal-a11: var(--teal-a11);
-    --color-teal-a12: var(--teal-a12);
-
-    --color-jade-1: var(--jade-1);
-    --color-jade-2: var(--jade-2);
-    --color-jade-3: var(--jade-3);
-    --color-jade-4: var(--jade-4);
-    --color-jade-5: var(--jade-5);
-    --color-jade-6: var(--jade-6);
-    --color-jade-7: var(--jade-7);
-    --color-jade-8: var(--jade-8);
-    --color-jade-9: var(--jade-9);
-    --color-jade-10: var(--jade-10);
-    --color-jade-11: var(--jade-11);
-    --color-jade-12: var(--jade-12);
-    --color-jade-a1: var(--jade-a1);
-    --color-jade-a2: var(--jade-a2);
-    --color-jade-a3: var(--jade-a3);
-    --color-jade-a4: var(--jade-a4);
-    --color-jade-a5: var(--jade-a5);
-    --color-jade-a6: var(--jade-a6);
-    --color-jade-a7: var(--jade-a7);
-    --color-jade-a8: var(--jade-a8);
-    --color-jade-a9: var(--jade-a9);
-    --color-jade-a10: var(--jade-a10);
-    --color-jade-a11: var(--jade-a11);
-    --color-jade-a12: var(--jade-a12);
-
-    --color-green-1: var(--green-1);
-    --color-green-2: var(--green-2);
-    --color-green-3: var(--green-3);
-    --color-green-4: var(--green-4);
-    --color-green-5: var(--green-5);
-    --color-green-6: var(--green-6);
-    --color-green-7: var(--green-7);
-    --color-green-8: var(--green-8);
-    --color-green-9: var(--green-9);
-    --color-green-10: var(--green-10);
-    --color-green-11: var(--green-11);
-    --color-green-12: var(--green-12);
-    --color-green-a1: var(--green-a1);
-    --color-green-a2: var(--green-a2);
-    --color-green-a3: var(--green-a3);
-    --color-green-a4: var(--green-a4);
-    --color-green-a5: var(--green-a5);
-    --color-green-a6: var(--green-a6);
-    --color-green-a7: var(--green-a7);
-    --color-green-a8: var(--green-a8);
-    --color-green-a9: var(--green-a9);
-    --color-green-a10: var(--green-a10);
-    --color-green-a11: var(--green-a11);
-    --color-green-a12: var(--green-a12);
-
-    --color-grass-1: var(--grass-1);
-    --color-grass-2: var(--grass-2);
-    --color-grass-3: var(--grass-3);
-    --color-grass-4: var(--grass-4);
-    --color-grass-5: var(--grass-5);
-    --color-grass-6: var(--grass-6);
-    --color-grass-7: var(--grass-7);
-    --color-grass-8: var(--grass-8);
-    --color-grass-9: var(--grass-9);
-    --color-grass-10: var(--grass-10);
-    --color-grass-11: var(--grass-11);
-    --color-grass-12: var(--grass-12);
-    --color-grass-a1: var(--grass-a1);
-    --color-grass-a2: var(--grass-a2);
-    --color-grass-a3: var(--grass-a3);
-    --color-grass-a4: var(--grass-a4);
-    --color-grass-a5: var(--grass-a5);
-    --color-grass-a6: var(--grass-a6);
-    --color-grass-a7: var(--grass-a7);
-    --color-grass-a8: var(--grass-a8);
-    --color-grass-a9: var(--grass-a9);
-    --color-grass-a10: var(--grass-a10);
-    --color-grass-a11: var(--grass-a11);
-    --color-grass-a12: var(--grass-a12);
-
-    --color-brown-1: var(--brown-1);
-    --color-brown-2: var(--brown-2);
-    --color-brown-3: var(--brown-3);
-    --color-brown-4: var(--brown-4);
-    --color-brown-5: var(--brown-5);
-    --color-brown-6: var(--brown-6);
-    --color-brown-7: var(--brown-7);
-    --color-brown-8: var(--brown-8);
-    --color-brown-9: var(--brown-9);
-    --color-brown-10: var(--brown-10);
-    --color-brown-11: var(--brown-11);
-    --color-brown-12: var(--brown-12);
-    --color-brown-a1: var(--brown-a1);
-    --color-brown-a2: var(--brown-a2);
-    --color-brown-a3: var(--brown-a3);
-    --color-brown-a4: var(--brown-a4);
-    --color-brown-a5: var(--brown-a5);
-    --color-brown-a6: var(--brown-a6);
-    --color-brown-a7: var(--brown-a7);
-    --color-brown-a8: var(--brown-a8);
-    --color-brown-a9: var(--brown-a9);
-    --color-brown-a10: var(--brown-a10);
-    --color-brown-a11: var(--brown-a11);
-    --color-brown-a12: var(--brown-a12);
-
-    --color-orange-1: var(--orange-1);
-    --color-orange-2: var(--orange-2);
-    --color-orange-3: var(--orange-3);
-    --color-orange-4: var(--orange-4);
-    --color-orange-5: var(--orange-5);
-    --color-orange-6: var(--orange-6);
-    --color-orange-7: var(--orange-7);
-    --color-orange-8: var(--orange-8);
-    --color-orange-9: var(--orange-9);
-    --color-orange-10: var(--orange-10);
-    --color-orange-11: var(--orange-11);
-    --color-orange-12: var(--orange-12);
-    --color-orange-a1: var(--orange-a1);
-    --color-orange-a2: var(--orange-a2);
-    --color-orange-a3: var(--orange-a3);
-    --color-orange-a4: var(--orange-a4);
-    --color-orange-a5: var(--orange-a5);
-    --color-orange-a6: var(--orange-a6);
-    --color-orange-a7: var(--orange-a7);
-    --color-orange-a8: var(--orange-a8);
-    --color-orange-a9: var(--orange-a9);
-    --color-orange-a10: var(--orange-a10);
-    --color-orange-a11: var(--orange-a11);
-    --color-orange-a12: var(--orange-a12);
-
-    --color-sky-1: var(--sky-1);
-    --color-sky-2: var(--sky-2);
-    --color-sky-3: var(--sky-3);
-    --color-sky-4: var(--sky-4);
-    --color-sky-5: var(--sky-5);
-    --color-sky-6: var(--sky-6);
-    --color-sky-7: var(--sky-7);
-    --color-sky-8: var(--sky-8);
-    --color-sky-9: var(--sky-9);
-    --color-sky-10: var(--sky-10);
-    --color-sky-11: var(--sky-11);
-    --color-sky-12: var(--sky-12);
-    --color-sky-a1: var(--sky-a1);
-    --color-sky-a2: var(--sky-a2);
-    --color-sky-a3: var(--sky-a3);
-    --color-sky-a4: var(--sky-a4);
-    --color-sky-a5: var(--sky-a5);
-    --color-sky-a6: var(--sky-a6);
-    --color-sky-a7: var(--sky-a7);
-    --color-sky-a8: var(--sky-a8);
-    --color-sky-a9: var(--sky-a9);
-    --color-sky-a10: var(--sky-a10);
-    --color-sky-a11: var(--sky-a11);
-    --color-sky-a12: var(--sky-a12);
-
-    --color-mint-1: var(--mint-1);
-    --color-mint-2: var(--mint-2);
-    --color-mint-3: var(--mint-3);
-    --color-mint-4: var(--mint-4);
-    --color-mint-5: var(--mint-5);
-    --color-mint-6: var(--mint-6);
-    --color-mint-7: var(--mint-7);
-    --color-mint-8: var(--mint-8);
-    --color-mint-9: var(--mint-9);
-    --color-mint-10: var(--mint-10);
-    --color-mint-11: var(--mint-11);
-    --color-mint-12: var(--mint-12);
-    --color-mint-a1: var(--mint-a1);
-    --color-mint-a2: var(--mint-a2);
-    --color-mint-a3: var(--mint-a3);
-    --color-mint-a4: var(--mint-a4);
-    --color-mint-a5: var(--mint-a5);
-    --color-mint-a6: var(--mint-a6);
-    --color-mint-a7: var(--mint-a7);
-    --color-mint-a8: var(--mint-a8);
-    --color-mint-a9: var(--mint-a9);
-    --color-mint-a10: var(--mint-a10);
-    --color-mint-a11: var(--mint-a11);
-    --color-mint-a12: var(--mint-a12);
-
-    --color-lime-1: var(--lime-1);
-    --color-lime-2: var(--lime-2);
-    --color-lime-3: var(--lime-3);
-    --color-lime-4: var(--lime-4);
-    --color-lime-5: var(--lime-5);
-    --color-lime-6: var(--lime-6);
-    --color-lime-7: var(--lime-7);
-    --color-lime-8: var(--lime-8);
-    --color-lime-9: var(--lime-9);
-    --color-lime-10: var(--lime-10);
-    --color-lime-11: var(--lime-11);
-    --color-lime-12: var(--lime-12);
-    --color-lime-a1: var(--lime-a1);
-    --color-lime-a2: var(--lime-a2);
-    --color-lime-a3: var(--lime-a3);
-    --color-lime-a4: var(--lime-a4);
-    --color-lime-a5: var(--lime-a5);
-    --color-lime-a6: var(--lime-a6);
-    --color-lime-a7: var(--lime-a7);
-    --color-lime-a8: var(--lime-a8);
-    --color-lime-a9: var(--lime-a9);
-    --color-lime-a10: var(--lime-a10);
-    --color-lime-a11: var(--lime-a11);
-    --color-lime-a12: var(--lime-a12);
-
-    --color-yellow-1: var(--yellow-1);
-    --color-yellow-2: var(--yellow-2);
-    --color-yellow-3: var(--yellow-3);
-    --color-yellow-4: var(--yellow-4);
-    --color-yellow-5: var(--yellow-5);
-    --color-yellow-6: var(--yellow-6);
-    --color-yellow-7: var(--yellow-7);
-    --color-yellow-8: var(--yellow-8);
-    --color-yellow-9: var(--yellow-9);
-    --color-yellow-10: var(--yellow-10);
-    --color-yellow-11: var(--yellow-11);
-    --color-yellow-12: var(--yellow-12);
-    --color-yellow-a1: var(--yellow-a1);
-    --color-yellow-a2: var(--yellow-a2);
-    --color-yellow-a3: var(--yellow-a3);
-    --color-yellow-a4: var(--yellow-a4);
-    --color-yellow-a5: var(--yellow-a5);
-    --color-yellow-a6: var(--yellow-a6);
-    --color-yellow-a7: var(--yellow-a7);
-    --color-yellow-a8: var(--yellow-a8);
-    --color-yellow-a9: var(--yellow-a9);
-    --color-yellow-a10: var(--yellow-a10);
-    --color-yellow-a11: var(--yellow-a11);
-    --color-yellow-a12: var(--yellow-a12);
-
-    --color-amber-1: var(--amber-1);
-    --color-amber-2: var(--amber-2);
-    --color-amber-3: var(--amber-3);
-    --color-amber-4: var(--amber-4);
-    --color-amber-5: var(--amber-5);
-    --color-amber-6: var(--amber-6);
-    --color-amber-7: var(--amber-7);
-    --color-amber-8: var(--amber-8);
-    --color-amber-9: var(--amber-9);
-    --color-amber-10: var(--amber-10);
-    --color-amber-11: var(--amber-11);
-    --color-amber-12: var(--amber-12);
-    --color-amber-a1: var(--amber-a1);
-    --color-amber-a2: var(--amber-a2);
-    --color-amber-a3: var(--amber-a3);
-    --color-amber-a4: var(--amber-a4);
-    --color-amber-a5: var(--amber-a5);
-    --color-amber-a6: var(--amber-a6);
-    --color-amber-a7: var(--amber-a7);
-    --color-amber-a8: var(--amber-a8);
-    --color-amber-a9: var(--amber-a9);
-    --color-amber-a10: var(--amber-a10);
-    --color-amber-a11: var(--amber-a11);
-    --color-amber-a12: var(--amber-a12);
-
-    --color-gold-1: var(--gold-1);
-    --color-gold-2: var(--gold-2);
-    --color-gold-3: var(--gold-3);
-    --color-gold-4: var(--gold-4);
-    --color-gold-5: var(--gold-5);
-    --color-gold-6: var(--gold-6);
-    --color-gold-7: var(--gold-7);
-    --color-gold-8: var(--gold-8);
-    --color-gold-9: var(--gold-9);
-    --color-gold-10: var(--gold-10);
-    --color-gold-11: var(--gold-11);
-    --color-gold-12: var(--gold-12);
-    --color-gold-a1: var(--gold-a1);
-    --color-gold-a2: var(--gold-a2);
-    --color-gold-a3: var(--gold-a3);
-    --color-gold-a4: var(--gold-a4);
-    --color-gold-a5: var(--gold-a5);
-    --color-gold-a6: var(--gold-a6);
-    --color-gold-a7: var(--gold-a7);
-    --color-gold-a8: var(--gold-a8);
-    --color-gold-a9: var(--gold-a9);
-    --color-gold-a10: var(--gold-a10);
-    --color-gold-a11: var(--gold-a11);
-    --color-gold-a12: var(--gold-a12);
-
-    --color-bronze-1: var(--bronze-1);
-    --color-bronze-2: var(--bronze-2);
-    --color-bronze-3: var(--bronze-3);
-    --color-bronze-4: var(--bronze-4);
-    --color-bronze-5: var(--bronze-5);
-    --color-bronze-6: var(--bronze-6);
-    --color-bronze-7: var(--bronze-7);
-    --color-bronze-8: var(--bronze-8);
-    --color-bronze-9: var(--bronze-9);
-    --color-bronze-10: var(--bronze-10);
-    --color-bronze-11: var(--bronze-11);
-    --color-bronze-12: var(--bronze-12);
-    --color-bronze-a1: var(--bronze-a1);
-    --color-bronze-a2: var(--bronze-a2);
-    --color-bronze-a3: var(--bronze-a3);
-    --color-bronze-a4: var(--bronze-a4);
-    --color-bronze-a5: var(--bronze-a5);
-    --color-bronze-a6: var(--bronze-a6);
-    --color-bronze-a7: var(--bronze-a7);
-    --color-bronze-a8: var(--bronze-a8);
-    --color-bronze-a9: var(--bronze-a9);
-    --color-bronze-a10: var(--bronze-a10);
-    --color-bronze-a11: var(--bronze-a11);
-    --color-bronze-a12: var(--bronze-a12);
-    /* Marketing Colors */
-    --color-m-slate-1: var(--m-slate-1);
-    --color-m-slate-2: var(--m-slate-2);
-    --color-m-slate-3: var(--m-slate-3);
-    --color-m-slate-4: var(--m-slate-4);
-    --color-m-slate-5: var(--m-slate-5);
-    --color-m-slate-6: var(--m-slate-6);
-    --color-m-slate-7: var(--m-slate-7);
-    --color-m-slate-8: var(--m-slate-8);
-    --color-m-slate-9: var(--m-slate-9);
-    --color-m-slate-10: var(--m-slate-10);
-    --color-m-slate-11: var(--m-slate-11);
-    --color-m-slate-12: var(--m-slate-12);
-    --color-m-slate-13: var(--m-slate-13);
-    --color-m-slate-14: var(--m-slate-14);
-    --color-m-slate-15: var(--m-slate-15);
-    --color-m-violet-1: var(--m-violet-1);
-    --color-m-violet-2: var(--m-violet-2);
-    --color-m-violet-3: var(--m-violet-3);
-    --color-m-violet-4: var(--m-violet-4);
-    --color-m-violet-5: var(--m-violet-5);
-    --color-m-violet-6: var(--m-violet-6);
-    --color-m-violet-7: var(--m-violet-7);
-    --color-m-violet-8: var(--m-violet-8);
-    --color-m-violet-9: var(--m-violet-9);
-    --color-m-violet-10: var(--m-violet-10);
-    --color-m-violet-11: var(--m-violet-11);
-    --color-m-violet-12: var(--m-violet-12);
-
-    /* Font */
-    --font-sans: var(--font-instrument-sans);
-    --font-mono: var(--font-jetbrains);
-    /* Shadow */
-    --shadow-none: none;
-    --shadow-small: var(--shadow-small-adaptive);
-    --shadow-medium: var(--shadow-medium-adaptive);
-    --shadow-large: var(--shadow-large-adaptive);
-    --shadow-large-negative: var(--shadow-large-negative-adaptive);
-    --shadow-large-negative-primary: var(--shadow-large-negative-primary-adaptive);
-    --shadow-x-large: var(--shadow-x-large-adaptive);
-    --shadow-inner: var(--shadow-inner-adaptive);
-    --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.04),
-        0 4px 8px 0 rgba(0, 0, 0, 0.07),
-        0 1px 1px 0 rgba(0, 0, 0, 0.01),
-        0 0 0 1px #FFF inset;
-    --shadow-button-bordered:
-        0 0 0 1px var(--primary-9) inset,
-        0 2px 0 0 rgba(255, 255, 255, 0.22) inset;
-    --shadow-button-outline: var(--shadow-button-outline-adaptive);
-    --shadow-card-xs-no-left: var(--shadow-card-xs-no-left-adaptive);
-    --shadow-card-small: var(--shadow-card-small-adaptive);
-    --shadow-card-dark: 0 0 0 1px var(--m-slate-9, #2A3037);
-    --text-xs: 0.8125rem;
-    --text-xs--line-height: 1.25rem;
-    --text-sm: 0.875rem;
-    --text-sm--line-height: 1.5rem;
-    --text-base: 1rem;
-    --text-base--line-height: 1.625rem;
-    --text-base--letter-spacing: -0.0025rem;
-    --text-lg: 1.125rem;
-    --text-lg--line-height: 1.625rem;
-    --text-xl: 1.25rem;
-    --text-xl--line-height: 1.75rem;
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: 2.25rem;
-    --text-2xl--letter-spacing: -0.0225rem;
-    --text-3xl: 2rem;
-    --text-3xl--line-height: 2.5rem;
-    --text-4xl: 2.5rem;
-    --text-4xl--line-height: 3rem;
-    --text-4xl--letter-spacing: -0.075rem;
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 3.5rem;
-    --text-5xl--letter-spacing: -0.0975rem;
-    --text-6xl: 3.5rem;
-    --text-6xl--line-height: 4rem;
-    --text-6xl--letter-spacing: -0.1925rem;
-    --breakpoint-3xl: 110rem;
-
-    /* Animation */
-    --animate-accordion-down: accordion-down 0.2s ease-out;
-    --animate-accordion-up: accordion-up 0.2s ease-out;
-    --animate-spin: spin 1s linear infinite;
-    --animate-blur-in: blur-in 0.15s ease forwards;
-    --animate-border: border 3s linear infinite;
-    --animate-slide-in-right: slide-in-right both;
-    --animate-slide-in-left: slide-in-left both;
-    --animate-slide-in-up: slide-in-up both;
-    --animate-slide-in-down: slide-in-down both;
-    --animate-scale-rotate-in: scale-rotate-in both;
-    --animate-scale-in-top-right: scale-in-top-right both;
-    --animate-slide-down: slide-down 2.4s linear infinite;
-    --animate-slide-down-full: slide-down-full 2.4s linear infinite;
-    --animate-blink: blink 1.25s step-end infinite;
-    --animate-ellipse-1: ellipse-1 2400ms ease-out infinite;
-    --animate-ellipse-2: ellipse-2 2400ms ease-out infinite;
-    --animate-ellipse-3: ellipse-3 2400ms ease-out infinite;
-    --animate-ellipse-4: ellipse-4 2400ms ease-out infinite;
-    --animate-ellipse-reversed: ellipse-reversed 2400ms ease-out infinite;
-    /* Radius */
-    --radius-ui-xxs: calc(var(--radius) - 0.25rem);
-    --radius-ui-xs: var(--radius);
-    --radius-ui-sm: var(--radius);
-    --radius-ui-md: calc(var(--radius) + 0.125rem);
-    --radius-ui-lg: calc(var(--radius) + 0.125rem);
-    --radius-ui-xl: calc(var(--radius) + 0.375rem);
-    --radius-ui-2xl: calc(var(--radius) + 0.5rem);
-    /* Width */
-    --layout-max-width: 81rem;
-    --docs-layout-max-width: 69rem;
-
-    @keyframes accordion-down {
-        from {
-            height: 0;
-        }
-
-        to {
-            height: var(--radix-accordion-content-height);
-        }
-    }
-
-    @keyframes accordion-up {
-        from {
-            height: var(--radix-accordion-content-height);
-        }
-
-        to {
-            height: 0;
-        }
-    }
-
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-
-        to {
-            transform: rotate(360deg);
-        }
-    }
-
-    @keyframes blur-in {
-        0% {
-            filter: blur(4px);
-        }
-
-        100% {
-            filter: blur(0);
-        }
-    }
-
-    @keyframes border {
-        to {
-            --border-angle: 360deg;
-        }
-    }
-
-    @keyframes fade-in-scale {
-        0% {
-            opacity: 0;
-            transform: scale(0.95);
-        }
-
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-
-    @keyframes slide-in-right {
-        from {
-            transform: translateX(100%);
-        }
-
-        to {
-            transform: translateX(0);
-        }
-    }
-
-    @keyframes slide-in-left {
-        from {
-            transform: translateX(-100%);
-        }
-
-        to {
-            transform: translateX(0);
-        }
-    }
-
-    @keyframes slide-in-up {
-        from {
-            transform: translateY(100%);
-        }
-
-        to {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes slide-in-down {
-        from {
-            transform: translateY(-100%);
-        }
-
-        to {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes scale-rotate-in {
-        0% {
-            transform: scale(0) rotate(-100deg);
-        }
-
-        100% {
-            transform: scale(1) rotate(0deg);
-        }
-    }
-
-    @keyframes scale-in-top-right {
-        from {
-            transform: scale(0);
-            transform-origin: top right;
-        }
-
-        to {
-            transform: scale(1);
-            transform-origin: top right;
-        }
-    }
-
-    @keyframes slide-down-full {
-        0% {
-            transform: translateY(-100%);
-        }
-
-        100% {
-            transform: translateY(calc(100vh + 5rem));
-        }
-
-    }
-
-    @keyframes blink {
-        50% {
-            opacity: 0;
-        }
-    }
-
-    @keyframes slide-center-to-left {
-
-        0%,
-        100% {
-            transform: translateX(0) translateY(-50%);
-        }
-
-        50% {
-            transform: translateX(-200%) translateY(-50%);
-        }
-    }
-
-    @keyframes slide-center-to-right {
-
-        0%,
-        100% {
-            transform: translateX(0) translateY(-50%);
-        }
-
-        50% {
-            transform: translateX(200%) translateY(-50%);
-        }
-    }
-
-    @keyframes fade-scale-out {
-        0% {
-            opacity: 1;
-            transform: scale(1);
-        }
-
-        7.5%,
-        50% {
-            opacity: 0;
-            transform: scale(0.55);
-        }
-
-        56.5%,
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-
-    @keyframes fade-scale-in {
-        0% {
-            opacity: 0;
-            transform: scale(0.55);
-        }
-
-        7.5%,
-        50% {
-            opacity: 1;
-            transform: scale(1);
-        }
-
-        56.5%,
-        100% {
-            opacity: 0;
-            transform: scale(0.55);
-        }
-    }
-
-    @keyframes ellipse-slide-left {
-        0% {
-            left: -13.75rem;
-        }
-
-        7.5% {
-            left: 17rem;
-        }
-
-        20% {
-            left: 17rem;
-        }
-
-        22% {
-            left: 14rem;
-        }
-
-        24% {
-            left: 10rem;
-        }
-
-        27.5% {
-            left: 4rem;
-        }
-
-        30% {
-            left: -2rem;
-        }
-
-        34.5% {
-            left: -13.75rem;
-        }
-
-        50% {
-            left: -13.75rem;
-        }
-
-        57.5% {
-            left: 17rem;
-        }
-
-        70% {
-            left: 17rem;
-        }
-
-        72% {
-            left: 14rem;
-        }
-
-        74% {
-            left: 10rem;
-        }
-
-        77.5% {
-            left: 4rem;
-        }
-
-        80% {
-            left: -2rem;
-        }
-
-        84.5% {
-            left: -13.75rem;
-        }
-
-        100% {
-            left: -13.75rem;
-        }
-    }
-
-    @keyframes ellipse-slide-right {
-        0% {
-            right: -13.75rem;
-        }
-
-        7.5% {
-            right: 17rem;
-        }
-
-        20% {
-            right: 17rem;
-        }
-
-        22% {
-            right: 14rem;
-        }
-
-        24% {
-            right: 10rem;
-        }
-
-        27.5% {
-            right: 4rem;
-        }
-
-        30% {
-            right: -2rem;
-        }
-
-        34.5% {
-            right: -13.75rem;
-        }
-
-        50% {
-            right: -13.75rem;
-        }
-
-        57.5% {
-            right: 17rem;
-        }
-
-        70% {
-            right: 17rem;
-        }
-
-        72% {
-            right: 14rem;
-        }
-
-        74% {
-            right: 10rem;
-        }
-
-        77.5% {
-            right: 4rem;
-        }
-
-        80% {
-            right: -2rem;
-        }
-
-        84.5% {
-            right: -13.75rem;
-        }
-
-        100% {
-            right: -13.75rem;
-        }
-    }
-
-    @keyframes prompt-box-line {
-        0% {
-            filter: blur(8px);
-            opacity: 0;
-            transform: scale(0.25);
-        }
-
-        100% {
-            filter: blur(0);
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-
-    @keyframes ellipse-1 {
-        0% {
-            top: calc(-100% - 16.81rem);
-        }
-
-        100% {
-            top: calc(100% + 2rem);
-        }
-    }
-
-    @keyframes ellipse-2 {
-        0% {
-            top: calc(-100% - 10.12rem);
-        }
-
-        100% {
-            top: calc(100% + 3.06rem);
-        }
-    }
-
-    @keyframes ellipse-3 {
-        0% {
-            top: calc(-100% - 10rem);
-        }
-
-        100% {
-            top: calc(100% + 11.69rem);
-        }
-    }
-
-    @keyframes ellipse-4 {
-        0% {
-            top: calc(-100% - 2rem);
-        }
-
-        100% {
-            top: calc(100% + 19.31rem);
-        }
-    }
-
-
-}
-
-@layer base {
-
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--c-slate-3, currentColor);
-    }
-
-    body {
-        @apply isolate font-sans antialiased;
-        font-feature-settings: "rlig" 1, "calt" 1;
-    }
-
-    :where([data-sonner-toast]) {
-        @apply font-sans text-sm;
-    }
-
-    .section-content {
-        @apply flex flex-col justify-center items-center gap-10 mx-auto mt-4 mb-20 px-4 lg:px-6 pt-24 lg:pt-52 w-full max-w-6xl;
-    }
-
-    .section-header {
-        @apply flex flex-col justify-center items-start lg:items-center gap-6 w-full lg:text-center text-start;
-    }
-
-    .gradient-heading {
-        @apply inline-block bg-clip-text bg-gradient-to-r from-slate-12 to-slate-11 w-full text-transparent text-center text-balance;
-    }
-
-    .table-header {
-        @apply justify-start pl-4 w-auto font-bold text-slate-12 text-sm;
-    }
-}
-
-@layer utilities {
-    .font-instrument-sans {
-        font-family: var(--font-instrument-sans);
-    }
-
-    .font-code {
-        font-family: var(--font-jetbrains);
-        font-size: 0.95rem;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 1.5rem;
-        letter-spacing: -0.00406rem;
-    }
-
-    .code-style {
-        font-family: var(--font-jetbrains);
-        font-size: 0.835rem;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        letter-spacing: -0.00406rem;
-        color: var(--c-slate-11);
-        background-color: var(--c-slate-3);
-        border-radius: 0.25rem;
-        border-width: 1px;
-        border-color: var(--c-slate-4);
-        /* padding: 0rem 0.125rem 0rem 0.125rem; */
-    }
-
-    .code-error-style {
-        font-family: var(--font-jetbrains);
-        font-size: 0.835rem;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        letter-spacing: -0.00406rem;
-        color: var(--red-11);
-        background-color: var(--red-3);
-        border-radius: 0.25rem;
-        border-width: 1px;
-        border-color: var(--red-5);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .markdown-code>p {
-        margin: 0 !important;
-    }
-
-    .markdown-code>p>code {
-        font-family: var(--font-jetbrains);
-        font-size: 0.835rem;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 1.75rem;
-        letter-spacing: -0.00406rem;
-        color: var(--c-violet-9);
-        background-color: var(--c-violet-3);
-        border-radius: 0.25rem;
-        border-width: 1px;
-        border-color: var(--c-violet-4);
-        padding: 0rem 0.125rem 0rem 0.125rem;
-    }
-
-    .markdown-code code {
-        font-family: var(--font-jetbrains);
-        font-size: 0.835rem;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 1.75rem;
-        letter-spacing: -0.00406rem;
-        color: var(--c-violet-9);
-        background-color: var(--c-violet-3);
-        border-radius: 0.25rem;
-        border-width: 1px;
-        border-color: var(--c-violet-4);
-        padding: 0rem 0.125rem 0rem 0.125rem;
-    }
-
-    .code-block {
-        width: 100% !important;
-        height: auto !important;
-        margin: 0 !important;
-        padding: 1.75rem !important;
-        /* max-height: 350px !important; */
-        border-radius: 0.75rem !important;
-        border: 1px solid var(--c-slate-4);
-        background: var(--c-slate-2);
-        color: var(--c-slate-12) !important;
-        resize: none !important;
-        outline: none !important;
-        scrollbar-width: thin !important;
-        font-family: var(--font-jetbrains) !important;
-    }
-
-    .code-block>* {
-        background: transparent !important;
-        font-family: var(--font-jetbrains) !important;
-        font-size: 0.875rem !important;
-        font-style: normal !important;
-        font-weight: 400 !important;
-        line-height: 1.5rem !important;
-        /* 184.615% */
-        letter-spacing: -0.00406rem !important;
-    }
-
-    .code-block pre {
-        font-family: var(--font-jetbrains) !important;
-        padding: 0 !important;
-        font-size: 0.875rem !important;
-        font-weight: 400 !important;
-        line-height: 1.5rem !important;
-        color: var(--c-slate-12) !important;
-        background-color: transparent !important;
-    }
-
-    .code-block code {
-        font-family: var(--font-jetbrains) !important;
-        padding: 0 !important;
-        font-size: 0.875rem !important;
-        font-weight: 400 !important;
-        line-height: 1.5rem !important;
-        color: var(--c-slate-12) !important;
-        background-color: transparent !important;
-    }
-
-    @media (max-width: 768px) {
-        .code-block {
-            padding: 1rem !important;
-        }
-    }
-
-
-    .tab-style {
-        color: var(--c-slate-9);
-        cursor: pointer;
-        padding: 0.25em 0.5em;
-        font-size: 0.9rem;
-        font-weight: 500;
-        line-height: 1.25rem;
-        letter-spacing: -0.01094rem;
-    }
-
-    .tab-style:hover {
-        color: var(--c-slate-11);
-    }
-
-    .hover-card-shadow:hover {
-        background: var(0 3px 6px 0 rgba(0, 0, 0, 0.03),
-                0 1px 0 0 #FFF inset,
-                0 1px 0 0 rgba(0, 0, 0, 0.04),
-                0 0 0 1px rgba(0, 0, 0, 0.08), linear-gradient(180deg, var(--secondary-1, #FCFCFD) 0%, var(--white-1, #FFF) 100%));
-        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.03), 0 1px 0 0 #FFF inset, 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.08);
-    }
-
-    :where(.dark, .dark *) .hover-card-shadow:hover {
-        background: var(--m-slate-10, #21252B);
-        box-shadow: 0 0 0 1px var(--m-slate-9, #2A3037);
-    }
-
-    .navbar-shadow {
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 -1px 1px 0 rgba(0, 0, 0, 0.04), 0 16px 32px 0 rgba(0, 0, 0, 0.08), 0 1px 1px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.03);
-    }
-
-    :where(.dark, .dark *) .navbar-shadow {
-        box-shadow: 0 0 0 1px var(--m-slate-9, #2A3037);
-    }
-
-    .tab-style[data-state='active'] {
-        color: var(--c-violet-9);
-    }
-
-    .tab-style:not([data-state='active']) {
-        color: var(--c-slate-12);
-    }
-
-    .demo-code-block {
-        width: 100% !important;
-        height: auto !important;
-        margin: 0 !important;
-        background: transparent !important;
-        color: var(--c-slate-9) !important;
-        resize: none !important;
-        outline: none !important;
-        scrollbar-width: thin !important;
-        font-family: "JetBrains Mono" !important;
-    }
-
-    .demo-code-block>* {
-        background: transparent !important;
-        font-family: "JetBrains Mono" !important;
-        font-size: 0.8125rem !important;
-        font-style: normal !important;
-        font-weight: 400 !important;
-        line-height: 150% !important;
-        letter-spacing: -0.01219rem !important;
-    }
-
-    .demo-code-block pre {
-        background: transparent !important;
-        font-family: var(--font-jetbrains) !important;
-        font-size: 0.8125rem !important;
-        font-style: normal !important;
-        font-weight: 400 !important;
-        line-height: 150% !important;
-        letter-spacing: -0.01219rem !important;
-        padding: 2.5rem !important;
-    }
-
-    .demo-code-block code {
-        font-family: var(--font-jetbrains) !important;
-        padding: 0 !important;
-        font-size: 0.8125rem !important;
-        font-weight: 400 !important;
-        line-height: 150% !important;
-        letter-spacing: -0.01219rem !important;
-        color: var(--c-slate-12) !important;
-        background-color: transparent !important;
-    }
-
-    .font-small {
-        font-family: var(--font-instrument-sans);
-        font-size: 0.9rem;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 1.25rem;
-        /* 142.857% */
-        letter-spacing: -0.01094rem;
-    }
-
-    .font-md {
-        font-family: var(--font-instrument-sans);
-        font-size: 1.125rem;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 1.625rem;
-        letter-spacing: -0.01688rem;
-    }
-
-    .font-smbold {
-        font-family: var(--font-instrument-sans);
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.5rem;
-        /* 150% */
-        letter-spacing: -0.015rem;
-
-    }
-
-    .font-md-smbold {
-        font-family: var(--font-instrument-sans);
-        font-size: 1.125rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.625rem;
-        letter-spacing: -0.01688rem;
-    }
-
-    .font-small-smbold {
-        /* Small Semibold */
-        font-family: var(--font-instrument-sans);
-        font-size: 0.875rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.25rem;
-        /* 142.857% */
-        letter-spacing: -0.01094rem;
-    }
-
-    .font-base {
-        font-family: var(--font-instrument-sans);
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 1.5rem;
-        /* 150% */
-        letter-spacing: -0.015rem;
-    }
-
-    .font-large {
-        font-family: "Instrument Sans";
-        font-size: 1.5rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 2rem;
-        /* 133.333% */
-        letter-spacing: -0.03rem;
-    }
-
-    .font-x-large {
-        font-family: var(--font-instrument-sans);
-        font-size: 2rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 2.5rem;
-        /* 125% */
-        letter-spacing: -0.06rem;
-    }
-
-    .font-xx-large {
-        font-family: var(--font-instrument-sans);
-        font-size: 3rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 3.5rem;
-        /* 116.667% */
-        letter-spacing: -0.15rem;
-    }
-
-    .font-xxx-large {
-        font-family: var(--font-instrument-sans);
-        font-size: 3.5rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 4rem;
-        /* 114.286% */
-        letter-spacing: -0.175rem;
-    }
-
-    .v-link {
-        color: var(--c-violet-9);
-    }
-
-    .hidden-scrollbar::-webkit-scrollbar {
-        background-color: transparent;
-    }
-
-    .hidden-scrollbar::-webkit-scrollbar-thumb {
-        background-color: transparent;
-    }
-
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .no-scrollbar::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* Hide scrollbar for IE, Edge and Firefox */
-    .no-scrollbar {
-        -ms-overflow-style: none;
-        /* IE and Edge */
-        scrollbar-width: none;
-        /* Firefox */
-    }
-
-    @supports ((-webkit-touch-callout: none) or (font: -apple-system-body) or (-moz-appearance: none)) {
-
-        .safari-nav-positioner,
-        .safari-nav-positioner[data-slot='navigation-menu-positioner'] {
-            transition: none !important;
-            transition-property: none !important;
-            transition-duration: 0ms !important;
-        }
-    }
-}
-
-@property --border-angle {
-    inherits: false;
-    initial-value: 0deg;
-    syntax: '<angle>';
-}
-
-@layer base {
-
-    button,
-    [role='button'] {
-        cursor: pointer;
-    }
-
-    button:disabled,
-    [role='button']:disabled {
-        cursor: default;
-    }
-
-    body {
-        @apply isolate bg-slate-1 font-sans antialiased;
-    }
-}
\ No newline at end of file
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/styles/styles.py b/packages/reflex-site-shared/src/reflex_site_shared/styles/styles.py
index e50ab3286dd..113092d10e6 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/styles/styles.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/styles/styles.py
@@ -44,7 +44,7 @@ def get_code_style_rdx(color: str):  # type: ignore[reportArgumentType]
 
 cell_style = {
     **fonts.small,
-    "color": c_color("slate", 11),
+    "color": "var(--secondary-11)",
     "line_height": "1.5",
 }
 
@@ -57,7 +57,7 @@ def get_code_style_rdx(color: str):  # type: ignore[reportArgumentType]
 
 # The base application style.
 BASE_STYLE = {
-    "background_color": "var(--c-slate-1)",
+    "background_color": "var(--secondary-1)",
     "::selection": {
         "background_color": rx.color("accent", 5, True),
     },
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/templates/marketing_page.py b/packages/reflex-site-shared/src/reflex_site_shared/templates/marketing_page.py
index cfc79dc447a..917a3ba13eb 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/templates/marketing_page.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/templates/marketing_page.py
@@ -85,7 +85,7 @@ def wrapper(*children, **props) -> rx.Component:
                         ),
                     ),
                 ),
-                class_name="flex flex-col w-full justify-center items-center relative dark:bg-m-slate-12 bg-m-slate-1",
+                class_name="flex flex-col w-full justify-center items-center relative bg-secondary-1",
             )
 
         return Route(
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py b/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py
index f997566670f..7ff3c21ded0 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/utils/docpage.py
@@ -14,11 +14,11 @@ def right_sidebar_item_highlight():
         const tocLinks = document.querySelectorAll('#toc-navigation a');
         const activeClasses = [
             'text-primary-9',
-            'dark:text-primary-11',
+            'dark:text-primary-10',
             'shadow-[1.5px_0_0_0_var(--primary-11)_inset]',
             'dark:shadow-[1.5px_0_0_0_var(--primary-9)_inset]',
         ];
-        const defaultClasses = ['text-m-slate-7', 'dark:text-m-slate-6'];
+        const defaultClasses = ['text-secondary-11'];
 
         function normalizeId(id) {
             return id.toLowerCase().replace(/\s+/g, '-');
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/cta_card.py b/packages/reflex-site-shared/src/reflex_site_shared/views/cta_card.py
index 24f2e0b7bfc..ed5ac81140c 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/cta_card.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/cta_card.py
@@ -19,11 +19,11 @@ def cta_card() -> rx.Component:
         rx.el.div(
             rx.el.span(
                 "The Platform to Build and Scale Enterprise Apps",
-                class_name="text-slate-12 lg:text-3xl text-2xl font-[575]",
+                class_name="text-secondary-12 lg:text-3xl text-2xl font-[575]",
             ),
             rx.el.span(
                 "Describe your idea, and let AI transform it into a complete, production-ready Python web application.",
-                class_name="text-m-slate-7 dark:text-m-slate-6 text-sm font-medium",
+                class_name="text-secondary-11 text-sm font-medium",
             ),
             rx.el.div(
                 rx.el.elements.a(
@@ -46,10 +46,10 @@ def cta_card() -> rx.Component:
             class_name="flex flex-col gap-6 justify-center max-w-[29.25rem]",
         ),
         rx.image(
-            f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/cta_gray_lines_2.svg",
+            f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/cta_gray_lines_3.svg",
             class_name="w-auto h-full pointer-events-none",
             loading="lazy",
             alt="CTA Card",
         ),
-        class_name="flex flex-row justify-between max-w-(--landing-layout-max-width) mx-auto w-full bg-white/96 dark:bg-m-slate-11 backdrop-blur-[16px] rounded-xl relative overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03)] dark:shadow-none dark:border dark:border-m-slate-9 pl-16 max-lg:hidden mb-12 mt-24",
+        class_name="flex flex-row justify-between max-w-(--landing-layout-max-width) mx-auto w-full bg-secondary-1/96 backdrop-blur-[16px] rounded-xl relative overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_12px_24px_0_rgba(0,0,0,0.08),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_8px_0_rgba(0,0,0,0.03)] dark:shadow-none dark:border dark:border-secondary-4 pl-16 max-lg:hidden mb-12 mt-24",
     )
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/hosting_banner.py b/packages/reflex-site-shared/src/reflex_site_shared/views/hosting_banner.py
index 7d7c1375234..a50f4a46bbb 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/hosting_banner.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/hosting_banner.py
@@ -106,15 +106,15 @@ def hosting_banner() -> rx.Component:
                             # Header text with responsive spans
                             rx.el.span(
                                 "New",
-                                class_name="items-center font-[525] px-2.5 h-7 rounded-lg text-sm text-m-slate-3 z-[1] max-lg:hidden lg:inline-flex border border-white/16",
+                                class_name="items-center font-[525] px-2.5 h-7 rounded-lg text-sm text-white z-[1] max-lg:hidden lg:inline-flex border border-white/16",
                             ),
                             rx.el.span(
                                 "Reflex Agent Toolkit is launching",
                                 rx.el.span(
                                     ". Get early access",
-                                    class_name="lg:hidden text-m-slate-6 dark:text-m-slate-2",
+                                    class_name="lg:hidden text-white/70",
                                 ),
-                                class_name="text-m-slate-3 font-[525] text-sm lg:text-nowrap inline-block",
+                                class_name="text-white font-[525] text-sm lg:text-nowrap inline-block",
                             ),
                             rx.el.span(
                                 class_name="w-px h-7 bg-gradient-to-b from-transparent via-white/24 to-transparent max-lg:hidden",
@@ -145,10 +145,10 @@ def hosting_banner() -> rx.Component:
                     ),
                     aria_label="Close banner",
                     type="button",
-                    class_name="cursor-pointer hover:text-m-slate-5 transition-colors text-m-slate-3 z-10 size-10 flex items-center justify-center shrink-0 md:col-start-3 justify-self-end ml-auto",
+                    class_name="cursor-pointer hover:text-white/80 transition-colors text-white z-10 size-10 flex items-center justify-center shrink-0 md:col-start-3 justify-self-end ml-auto",
                     on_click=HostingBannerState.hide_banner,
                 ),
-                class_name="px-5 lg:px-0 w-screen min-h-[2rem] lg:h-10 flex md:grid md:grid-cols-[1fr_auto_1fr] items-center bg-m-slate-12 dark:bg-[#6550B9] gap-4 overflow-hidden relative lg:py-0 py-2 max-w-full group",
+                class_name="px-5 lg:px-0 w-screen min-h-[2rem] lg:h-10 flex md:grid md:grid-cols-[1fr_auto_1fr] items-center bg-secondary-12 dark:bg-[#6550B9] gap-4 overflow-hidden relative lg:py-0 py-2 max-w-full group",
             ),
         ),
         on_mount=HostingBannerState.show_agent_toolkit_banner,
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py b/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
index 1044ff11c4a..8f295db5d40 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
@@ -196,7 +196,7 @@ def products_ship_column_body() -> rx.Component:
         ),
         rx.el.div(
             rx.image(
-                src=f"{REFLEX_ASSETS_CDN}landing/features/{rx.color_mode_cond('light', 'dark')}/ship_navbar_3.svg",
+                src=f"{REFLEX_ASSETS_CDN}landing/features/{rx.color_mode_cond('light', 'dark')}/ship_navbar_4.svg",
                 alt="Deploy, monitor & scale",
                 loading="lazy",
                 class_name="h-auto w-full max-w-full object-cover",
@@ -397,7 +397,7 @@ def blog_item(post: BlogPostDict) -> rx.Component:
             ),
             rx.image(
                 src=f"{REFLEX_ASSETS_CDN}common/{rx.color_mode_cond('light', 'dark')}/squares_blog.svg",
-                class_name="pointer-events-none",
+                class_name="pointer-events-none dark:opacity-50",
                 alt="Squares Blog",
             ),
             class_name="flex flex-row items-center justify-start gap-6",
@@ -838,7 +838,7 @@ def marketing_navbar() -> rx.Component:
         rx.el.header(
             logo(),
             navigation_menu(),
-            class_name="w-full max-w-[81rem] h-[4.5rem] mx-auto flex flex-row items-center p-5 rounded-b-xl backdrop-blur-[16px] shadow-[0_-2px_2px_1px_rgba(0,0,0,0.02),0_1px_1px_0_rgba(0,0,0,0.08),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] dark:shadow-none dark:border-x dark:border-b dark:border-m-slate-10 bg-gradient-to-b from-white to-m-slate-1 dark:from-m-slate-11 dark:to-m-slate-12",
+            class_name="w-full max-w-[81rem] h-[4.5rem] mx-auto flex flex-row items-center p-5 rounded-b-xl backdrop-blur-[16px] shadow-[0_-2px_2px_1px_rgba(0,0,0,0.02),0_1px_1px_0_rgba(0,0,0,0.08),0_4px_8px_0_rgba(0,0,0,0.03),0_0_0_1px_#FFF_inset] dark:shadow-none dark:border-x dark:border-b dark:border-secondary-4 bg-gradient-to-b from-secondary-2 to-secondary-1",
         ),
         class_name="flex flex-col w-full top-0 z-[9999] fixed self-center",
     )
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py b/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py
index d4fa049e34b..435a46f562f 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py
@@ -26,9 +26,9 @@ def social_menu_item(
         "discord": "Join Reflex Discord community",
     }
     return rx.link(
-        get_icon(icon=icon, class_name="!text-slate-9"),
-        class_name="flex justify-center items-center gap-2 hover:bg-slate-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
-        + (" border-slate-4 border-x border-solid border-y-0" if border else ""),
+        get_icon(icon=icon, class_name="!text-secondary-9"),
+        class_name="flex justify-center items-center gap-2 hover:bg-secondary-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
+        + (" border-secondary-4 border-x border-solid border-y-0" if border else ""),
         href=url,
         is_external=True,
         custom_attrs={"aria-label": aria_labels.get(icon, f"Visit {icon}")},
@@ -49,7 +49,7 @@ def drawer_socials() -> rx.Component:
             border=True,
         ),
         social_menu_item("discord", DISCORD_URL),
-        class_name="flex flex-row items-center border-slate-4 border-y-0 !border-b w-full",
+        class_name="flex flex-row items-center border-secondary-4 border-y-0 !border-b w-full",
     )
 
 
@@ -65,8 +65,8 @@ def drawer_item(text: str, url: str) -> rx.Component:
         text,
         href=url,
         underline="none",
-        color="var(--c-slate-9)",
-        class_name="flex justify-center items-center border-slate-4 px-4 py-[0.875rem] border-t-0 border-b border-solid w-full font-small hover:!text-violet-9 border-x-0",
+        color="var(--secondary-9)",
+        class_name="flex justify-center items-center border-secondary-4 px-4 py-[0.875rem] border-t-0 border-b border-solid w-full font-small hover:!text-primary-9 border-x-0",
     )
 
 
@@ -95,20 +95,20 @@ def navbar_sidebar_drawer(trigger: rx.Component) -> rx.Component:
                     rx.el.button(
                         rx.color_mode.icon(
                             light_component=rx.icon(
-                                "sun", size=16, class_name="!text-slate-9"
+                                "sun", size=16, class_name="!text-secondary-9"
                             ),
                             dark_component=rx.icon(
-                                "moon", size=16, class_name="!text-slate-9"
+                                "moon", size=16, class_name="!text-secondary-9"
                             ),
                         ),
                         on_click=toggle_color_mode,
                         class_name="flex flex-row justify-center items-center px-3 py-0.5 w-full h-[47px]",
                         custom_attrs={"aria-label": "Toggle color mode"},
                     ),
-                    class_name="flex flex-col items-center dark:bg-m-slate-12 bg-m-slate-1 w-full h-full",
+                    class_name="flex flex-col items-center bg-secondary-1 w-full h-full",
                 ),
                 class_name=ui.cn(
-                    "dark:!bg-m-slate-12 !bg-m-slate-1 w-full h-full !outline-none",
+                    "!bg-secondary-1 w-full h-full !outline-none",
                     rx.cond(
                         HostingBannerState.is_banner_visible,
                         "!top-[137px]",
@@ -137,7 +137,7 @@ def docs_sidebar_drawer(sidebar: rx.Component, trigger: rx.Component) -> rx.Comp
                 rx.box(
                     rx.drawer.close(
                         rx.box(
-                            class_name="absolute left-1/2 transform -translate-x-1/2 top-[-12px] flex-shrink-0 bg-slate-9 rounded-full w-[96px] h-[5px]",
+                            class_name="absolute left-1/2 transform -translate-x-1/2 top-[-12px] flex-shrink-0 bg-secondary-9 rounded-full w-[96px] h-[5px]",
                         ),
                         as_child=True,
                     ),