diff --git a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
index 1345fc3e93d53..b5e1bdcf8f345 100644
--- a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
+++ b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
@@ -39,7 +39,7 @@ const SecurityDescription = ({
         {getSecuritySchemaTypeName(securitySchema)}
       </p>
       {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
-        <p className={clsx("bg-docs-bg-surface", "p-1")}>
+        <p className={clsx("bg-medusa-bg-subtle", "p-1")}>
           <strong>
             {securitySchema.type === "http"
               ? "HTTP Authorization Scheme"
diff --git a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
index 56db8bfeabb48..ba79ebf6f91c1 100644
--- a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
+++ b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
@@ -12,7 +12,7 @@ const TagsOperationParametersNested = ({
       {...props}
       className={clsx(
         props.className,
-        "bg-docs-bg-surface px-1 pt-1",
+        "bg-medusa-bg-subtle px-1 pt-1",
         "border-medusa-border-base my-1 rounded-sm border"
       )}
     >
diff --git a/www/apps/ui/src/components/component-example.tsx b/www/apps/ui/src/components/component-example.tsx
index f06e4f135e0a5..6b1aa1082da01 100644
--- a/www/apps/ui/src/components/component-example.tsx
+++ b/www/apps/ui/src/components/component-example.tsx
@@ -44,7 +44,7 @@ export function ComponentExample({
           >
             <div
               className={clx(
-                "bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
+                "bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
                 "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
               )}
             >
diff --git a/www/packages/docs-ui/src/components/Bordered/index.tsx b/www/packages/docs-ui/src/components/Bordered/index.tsx
index ebe6723d0d485..f598f8f96a65a 100644
--- a/www/packages/docs-ui/src/components/Bordered/index.tsx
+++ b/www/packages/docs-ui/src/components/Bordered/index.tsx
@@ -9,8 +9,8 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
   return (
     <span
       className={clsx(
-        "border-medusa-border-strong bg-docs-bg",
-        "dark:bg-docs-bg-dark mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
+        "border-medusa-border-strong bg-medusa-bg-base",
+        "mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
         "no-zoom-img",
         wrapperClassName
       )}
diff --git a/www/packages/docs-ui/src/components/LearningPath/index.tsx b/www/packages/docs-ui/src/components/LearningPath/index.tsx
index e9d87564e3dc5..ae3d2cf1e8084 100644
--- a/www/packages/docs-ui/src/components/LearningPath/index.tsx
+++ b/www/packages/docs-ui/src/components/LearningPath/index.tsx
@@ -35,7 +35,7 @@ export const LearningPath = ({
   return (
     <div
       className={clsx(
-        "rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-docs-bg-surface mt-docs_1.5 mb-docs_4",
+        "rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-medusa-bg-subtle mt-docs_1.5 mb-docs_4",
         className
       )}
     >
diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js
index 36d42dbcd4892..ec37502293af3 100644
--- a/www/packages/tailwind/base.tailwind.config.js
+++ b/www/packages/tailwind/base.tailwind.config.js
@@ -186,43 +186,36 @@ module.exports = {
             },
           },
         },
-        /* docs defaults */
-        docs: {
-          bg: {
-            DEFAULT: "var(--docs-bg)",
-            surface: "var(--docs-bg-surface)",
-          },
-        },
       },
       boxShadow: {
         "elevation-card-rest":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
         "elevation-card-rest-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         "elevation-card-hover":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
         "elevation-card-hover-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
         "elevation-tooltip":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
         "elevation-tooltip-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
         "elevation-flyout":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
         "elevation-flyout-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
         "elevation-modal":
           "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
         "elevation-modal-dark":
-          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
+          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
         "button-neutral":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
         "button-neutral-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
         "button-neutral-focused":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
         "button-neutral-focused-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
         "button-danger":
           "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1)",
         "button-danger-dark":
@@ -241,15 +234,15 @@ module.exports = {
           "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
 
         "elevation-code-block":
-          "0px 0px 0px 1px #18181B inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20) inset",
+          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
         "elevation-code-block-dark":
-          "0px 0px 0px 1px #27272A inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.10) inset",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         active: "0px 0px 0px 3px #E1F0FF",
         "active-dark": "0px 0px 0px 3px #2C2250",
         "border-base":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
         "border-base-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px #18181B, 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
       },
       borderRadius: {
         xxs: "2px",
@@ -323,128 +316,128 @@ module.exports = {
       },
       fontSize: {
         h1: [
-          "32px",
+          "2rem",
           {
-            lineHeight: "44px",
+            lineHeight: "2.75rem",
             fontWeight: "500",
           },
         ],
         h2: [
-          "24px",
+          "1.5rem",
           {
-            lineHeight: "32px",
+            lineHeight: "2rem",
             fontWeight: "500",
           },
         ],
         h3: [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.75rem",
             fontWeight: "500",
           },
         ],
         h4: [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-large-plus": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-large": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-medium-plus": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-medium": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-small-plus": [
-          "13px",
+          "0.8125rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-small": [
-          "13px",
+          "0.8125rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-x-small-plus": [
-          "12px",
+          "0.75rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-x-small": [
-          "13px",
+          "0.75rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "x-large-plus": [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "32px",
+            lineHeight: "1.6875rem",
             fontWeight: "500",
           },
         ],
         "x-large": [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "32px",
+            lineHeight: "1.6875rem",
             fontWeight: "400",
           },
         ],
         "large-plus": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.5rem",
             fontWeight: "500",
           },
         ],
         large: [
-          "16px",
+          "1rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.5rem",
             fontWeight: "400",
           },
         ],
         "medium-plus": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "24px",
+            lineHeight: "1.3125rem",
             fontWeight: "500",
           },
         ],
         medium: [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "24px",
+            lineHeight: "1.3125rem",
             fontWeight: "400",
           },
         ],
@@ -458,7 +451,7 @@ module.exports = {
         "code-body": [
           "12px",
           {
-            lineHeight: "22px",
+            lineHeight: "18px",
             fontWeight: "400",
           },
         ],
diff --git a/www/packages/tailwind/theme-presets.js b/www/packages/tailwind/theme-presets.js
index f0cf3b5edf4e7..ed3bf8cac7a53 100644
--- a/www/packages/tailwind/theme-presets.js
+++ b/www/packages/tailwind/theme-presets.js
@@ -11,7 +11,7 @@ const light = {
   "--docs-bg-switch-off": "rgba(228, 228, 231, 1)",
   "--docs-bg-switch-off-hover": "rgba(212, 212, 216, 1)",
   "--docs-bg-interactive": "rgba(59, 130, 246, 1)",
-  "--docs-bg-overlay": "rgba(9, 9, 11, 0.4)",
+  "--docs-bg-overlay": "rgba(24, 24, 27, 0.4)",
   "--docs-bg-disabled": "rgba(244, 244, 245, 1)",
   "--docs-bg-highlight": "rgba(239, 246, 255, 1)",
   "--docs-bg-highlight-hover": "rgba(219, 234, 254, 1)",
@@ -20,7 +20,7 @@ const light = {
   "--docs-bg-field-component": "rgba(255, 255, 255, 1)",
   "--docs-bg-field-component-hover": "rgba(250, 250, 250, 1)",
 
-  "--docs-fg-base": "rgba(9, 9, 11, 1)",
+  "--docs-fg-base": "rgba(24, 24, 27, 1)",
   "--docs-fg-subtle": "rgba(82, 82, 91, 1)",
   "--docs-fg-muted": "rgba(161, 161, 170, 1)",
   "--docs-fg-disabled": "rgba(212, 212, 216, 1)",
@@ -59,12 +59,12 @@ const light = {
   "--docs-tags-purple-bg": "rgba(237, 233, 254, 1)",
   "--docs-tags-purple-bg-hover": "rgba(221, 214, 254, 1)",
   "--docs-tags-purple-text": "rgba(91, 33, 182, 1)",
-  "--docs-tags-purple-icon": "rgba(139, 92, 246, 1)",
+  "--docs-tags-purple-icon": "rgba(167, 139, 250, 1)",
   "--docs-tags-purple-border": "rgba(221, 214, 254, 1)",
   "--docs-tags-blue-bg": "rgba(219, 234, 254, 1)",
   "--docs-tags-blue-bg-hover": "rgba(191, 219, 254, 1)",
   "--docs-tags-blue-text": "rgba(30, 64, 175, 1)",
-  "--docs-tags-blue-icon": "rgba(59, 130, 246, 1)",
+  "--docs-tags-blue-icon": "rgba(96, 165, 250, 1)",
   "--docs-tags-blue-border": "rgba(191, 219, 254, 1)",
   "--docs-tags-green-bg": "rgba(209, 250, 229, 1)",
   "--docs-tags-green-bg-hover": "rgba(167, 243, 208, 1)",
@@ -72,7 +72,7 @@ const light = {
   "--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
   "--docs-tags-green-border": "rgba(167, 243, 208, 1)",
   "--docs-tags-orange-bg": "rgba(255, 237, 213, 1)",
-  "--docs-tags-orange-bg-hover": "rgba(253, 230, 138, 1)",
+  "--docs-tags-orange-bg-hover": "rgba(254, 215, 170, 1)",
   "--docs-tags-orange-text": "rgba(154, 52, 18, 1)",
   "--docs-tags-orange-icon": "rgba(249, 115, 22, 1)",
   "--docs-tags-orange-border": "rgba(254, 215, 170, 1)",
@@ -88,9 +88,6 @@ const light = {
   "--docs-code-bg-header": "rgba(31, 41, 55, 1)",
   "--docs-code-border": "rgba(55, 65, 81, 1)",
 
-  "--docs-bg": "var(--docs-bg-base)",
-  "--docs-bg-surface": "var(--docs-bg-subtle)",
-
   "--docs-contrast-bg-base": "rgba(24, 24, 27, 1)",
   "--docs-contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
   "--docs-contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
@@ -105,31 +102,33 @@ const light = {
 }
 
 const dark = {
-  "--docs-bg-base": "rgba(24, 24, 27, 1)",
+  "--docs-bg-base": "rgba(33, 33, 36, 1)",
   "--docs-bg-base-hover": "rgba(39, 39, 42, 1)",
   "--docs-bg-base-pressed": "rgba(63, 63, 70, 1)",
-  "--docs-bg-subtle": "rgba(9, 9, 11, 1)",
-  "--docs-bg-subtle-hover": "rgba(24, 24, 27, 1)",
-  "--docs-bg-subtle-pressed": "rgba(63, 63, 70, 1)",
+  "--docs-bg-subtle": "rgba(24, 24, 27, 1)",
+  "--docs-bg-subtle-hover": "rgba(33, 33, 36, 1)",
+  "--docs-bg-subtle-pressed": "rgba(39, 39, 42, 1)",
   "--docs-bg-component": "rgba(39, 39, 42, 1)",
   "--docs-bg-component-pressed": "rgba(255, 255, 255, 0.16)",
   "--docs-bg-component-hover": "rgba(255, 255, 255, 0.1)",
   "--docs-bg-switch-off": "rgba(63, 63, 70, 1)",
   "--docs-bg-switch-off-hover": "rgba(82, 82, 91, 1)",
   "--docs-bg-interactive": "rgba(96, 165, 250, 1)",
-  "--docs-bg-overlay": "rgba(9, 9, 11, 0.72)",
+  "--docs-bg-overlay": "rgba(24, 24, 27, 0.72)",
   "--docs-bg-disabled": "rgba(39, 39, 42, 1)",
   "--docs-bg-highlight": "rgba(23, 37, 84, 1)",
   "--docs-bg-highlight-hover": "rgba(30, 58, 138, 1)",
   "--docs-bg-field": "rgba(255, 255, 255, 0.04)",
   "--docs-bg-field-hover": "rgba(255, 255, 255, 0.08)",
+  "--docs-bg-field-component": "rgba(33, 33, 36, 1)",
+  "--docs-bg-field-component-hover": "rgba(39, 39, 42, 1)",
 
   "--docs-fg-base": "rgba(244, 244, 245, 1)",
   "--docs-fg-subtle": "rgba(161, 161, 170, 1)",
   "--docs-fg-muted": "rgba(113, 113, 122, 1)",
   "--docs-fg-disabled": "rgba(82, 82, 91, 1)",
   "--docs-fg-on-color": "rgba(255, 255, 255, 1)",
-  "--docs-fg-on-inverted": "rgba(9, 9, 11, 1)",
+  "--docs-fg-on-inverted": "rgba(24, 24, 27, 1)",
   "--docs-fg-interactive": "rgba(96, 165, 250, 1)",
   "--docs-fg-interactive-hover": "rgba(147, 197, 253, 1)",
   "--docs-fg-error": "rgba(251, 113, 133, 1)",
@@ -145,28 +144,28 @@ const dark = {
   "--docs-button-inverted": "rgba(82, 82, 91, 1)",
   "--docs-button-inverted-hover": "rgba(113, 113, 122, 1)",
   "--docs-button-inverted-pressed": "rgba(161, 161, 170, 1)",
-  "--docs-button-neutral": "rgba(39, 39, 42, 1)",
-  "--docs-button-neutral-hover": "rgba(63, 63, 70, 1)",
-  "--docs-button-neutral-pressed": "rgba(82, 82, 91, 1)",
+  "--docs-button-neutral": "rgba(255, 255, 255, 0.04)",
+  "--docs-button-neutral-hover": "rgba(255, 255, 255, 0.08)",
+  "--docs-button-neutral-pressed": "rgba(255, 255, 255, 0.12)",
   "--docs-button-danger": "rgba(159, 18, 57, 1)",
   "--docs-button-danger-hover": "rgba(190, 18, 60, 1)",
   "--docs-button-danger-pressed": "rgba(225, 29, 72, 1)",
   "--docs-button-transparent": "rgba(255, 255, 255, 0)",
-  "--docs-button-transparent-hover": "rgba(39, 39, 42, 1)",
-  "--docs-button-transparent-pressed": "rgba(63, 63, 70, 1)",
+  "--docs-button-transparent-hover": "rgba(255, 255, 255, 0.08)",
+  "--docs-button-transparent-pressed": "rgba(255, 255, 255, 0.12)",
 
   "--docs-tags-neutral-bg": "rgba(255, 255, 255, 0.08)",
-  "--docs-tags-neutral-bg-hover": "rgba(63, 63, 70, 1)",
+  "--docs-tags-neutral-bg-hover": "rgba(255, 255, 255, 0.12)",
   "--docs-tags-neutral-text": "rgba(212, 212, 216, 1)",
   "--docs-tags-neutral-icon": "rgba(113, 113, 122, 1)",
-  "--docs-tags-neutral-border": "rgba(63, 63, 70, 1)",
+  "--docs-tags-neutral-border": "rgba(255, 255, 255, 0.06)",
   "--docs-tags-purple-bg": "rgba(46, 16, 101, 1)",
-  "--docs-tags-purple-bg-hover": "rgba(76, 29, 149, 1)",
+  "--docs-tags-purple-bg-hover": "rgba(91, 33, 182, 1)",
   "--docs-tags-purple-text": "rgba(196, 181, 253, 1)",
   "--docs-tags-purple-icon": "rgba(167, 139, 250, 1)",
   "--docs-tags-purple-border": "rgba(91, 33, 182, 1)",
   "--docs-tags-blue-bg": "rgba(23, 37, 84, 1)",
-  "--docs-tags-blue-bg-hover": "rgba(30, 42, 138, 1)",
+  "--docs-tags-blue-bg-hover": "rgba(30, 58, 138, 1)",
   "--docs-tags-blue-text": "rgba(147, 197, 253, 1)",
   "--docs-tags-blue-icon": "rgba(96, 165, 250, 1)",
   "--docs-tags-blue-border": "rgba(30, 58, 138, 1)",
@@ -176,7 +175,7 @@ const dark = {
   "--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
   "--docs-tags-green-border": "rgba(6, 78, 59, 1)",
   "--docs-tags-orange-bg": "rgba(67, 20, 7, 1)",
-  "--docs-tags-orange-bg-hover": "rgba(120, 53, 15, 1)",
+  "--docs-tags-orange-bg-hover": "rgba(124, 45, 18, 1)",
   "--docs-tags-orange-text": "rgba(253, 186, 116, 1)",
   "--docs-tags-orange-icon": "rgba(251, 146, 60, 1)",
   "--docs-tags-orange-border": "rgba(124, 45, 18, 1)",
@@ -192,12 +191,9 @@ const dark = {
   "--docs-code-bg-header": "rgba(24, 24, 26, 1)",
   "--docs-code-border": "rgba(46, 48, 53, 1)",
 
-  "--docs-bg": "var(--docs-bg-subtle)",
-  "--docs-bg-surface": "var(--docs-bg-base)",
-
   "--docs-contrast-bg-base": "rgba(39, 39, 42, 1)",
-  "--docs-contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
-  "--docs-contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
+  "--docs-contrast-bg-base-pressed": "rgba(82, 82, 91, 1)",
+  "--docs-contrast-bg-base-hover": "rgba(63, 63, 70, 1)",
   "--docs-contrast-bg-subtle": "rgba(47, 47, 50, 1)",
   "--docs-contrast-bg-highlight": "rgba(82, 82, 91, 1)",
   "--docs-contrast-bg-alpha": "rgba(63, 63, 70, 0.9)",