From 327754a907c118a5dbe9c11a6bafbe1f1a433320 Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Fri, 5 Jun 2026 17:48:06 +0200
Subject: [PATCH 1/4] [theme] add page-bg variable

---
 tools/theme/src/theme.ts                            | 12 +++++++++---
 website/docs/style/design-tokens/design-tokens.json | 12 +++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index c08a7dcb9e..0d3b1e5aa2 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -1450,9 +1450,12 @@ export const theme: Theme = {
         value: success.opaqueAt(L_BG_LIGHT),
         description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.',
       },
-      header_bg: { value: '#382E5E' },
-      header_border_primary: { value: '#382E5E' },
-      header_border_secondary: { value: 'rgba(255,255,255, 0.15)' },
+      header_bg: { value: '{semanticTokens.colors.page.bg}' },
+      header_border_primary: { value: '{semanticTokens.colors.border.primary}' },
+      header_border_secondary: { value: '{semanticTokens.colors.border.primary}' },
+      page_bg: { value: neutral.at(0.97),
+        description: 'Background fill for the whole product page.',
+      },
       sidebar_nav_control_hover: {
         value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
         description: 'Sidebar navigation row hover background.',
@@ -2481,6 +2484,9 @@ type SemanticColors = {
       secondary: Value;
     };
   };
+  page: {
+    bg: Value;
+  };
   sidebar: {
     nav: {
       control: {
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index 2abd9f9dc1..a05816fff2 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -2349,17 +2349,23 @@
   },
   {
     "name": "--intergalactic-header-bg",
-    "value": "#382E5E",
+    "value": "oklch(0.97 0.001 180)",
     "components": []
   },
   {
     "name": "--intergalactic-header-border-primary",
-    "value": "#382E5E",
+    "value": "oklch(0.137 0.026 175.7 / 0.161)",
     "components": []
   },
   {
     "name": "--intergalactic-header-border-secondary",
-    "value": "rgba(255,255,255, 0.15)",
+    "value": "oklch(0.137 0.026 175.7 / 0.161)",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-page-bg",
+    "value": "oklch(0.97 0.001 180)",
+    "description": "Background fill for the whole product page.",
     "components": []
   },
   {

From d66ed64be3492fd5865d3f41c14f3b00784862bc Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Fri, 5 Jun 2026 18:10:38 +0200
Subject: [PATCH 2/4] [stories] update stories for theme

---
 stories/patterns/core/advanced/all-components.tsx             | 2 +-
 .../core/advanced/components/Components/PaywallMessage.tsx    | 4 ++--
 .../patterns/core/advanced/components/Components/index.tsx    | 2 +-
 .../tests/all-components/components/Dashboard/Dashboard.tsx   | 2 +-
 stories/patterns/core/tests/all-components/index.tsx          | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/stories/patterns/core/advanced/all-components.tsx b/stories/patterns/core/advanced/all-components.tsx
index af7cb5a78f..a55cafe3f5 100644
--- a/stories/patterns/core/advanced/all-components.tsx
+++ b/stories/patterns/core/advanced/all-components.tsx
@@ -13,7 +13,7 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
   const [tab, setTab] = React.useState(defaultTab);
 
   return (
-    <Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }} p={8}>
+    <Box w='calc(100vw - 64px)' bg='page-bg' p={8}>
       <PageHeader />
 
       <TabLine size='l' mx={-8} px={8} mt={8} value={tab} onChange={setTab}>
diff --git a/stories/patterns/core/advanced/components/Components/PaywallMessage.tsx b/stories/patterns/core/advanced/components/Components/PaywallMessage.tsx
index ffa999573d..412b561899 100644
--- a/stories/patterns/core/advanced/components/Components/PaywallMessage.tsx
+++ b/stories/patterns/core/advanced/components/Components/PaywallMessage.tsx
@@ -35,9 +35,9 @@ export function PaywallMessage() {
         <Box
           p={6}
           wMax={400}
+          bg='page-bg'
+          borderRadius='popper-rounded'
           style={{
-            borderRadius: 'var(--intergalactic-popper-rounded)',
-            backgroundColor: 'var(--intergalactic-bg-primary-neutral)',
             boxShadow: 'var(--intergalactic-box-shadow-popper)',
           }}
         >
diff --git a/stories/patterns/core/advanced/components/Components/index.tsx b/stories/patterns/core/advanced/components/Components/index.tsx
index ecfc700693..ad2bba833e 100644
--- a/stories/patterns/core/advanced/components/Components/index.tsx
+++ b/stories/patterns/core/advanced/components/Components/index.tsx
@@ -102,7 +102,7 @@ export function Components() {
           </Card.Body>
         </Card>
 
-        <Flex direction='column' px={4} gap={6} w='100%' aria-labelledby='components-surface-heading'>
+        <Flex direction='column' gap={6} w='100%' aria-labelledby='components-surface-heading'>
           <Text tag='h3' size={400} id='components-surface-heading'>
             Surface
           </Text>
diff --git a/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx b/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx
index 10737436ed..0b4761dcf8 100644
--- a/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx
+++ b/stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx
@@ -119,7 +119,7 @@ export function Dashboard({ showPrimaryTableFooter = false }: DashboardProps) {
   );
 
   return (
-    <Box style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }}>
+    <Box bg='page-bg'>
       <Box my={4} w='100%'>
         <FeedbackRatingFormExample />
       </Box>
diff --git a/stories/patterns/core/tests/all-components/index.tsx b/stories/patterns/core/tests/all-components/index.tsx
index 2aeab39043..cb2c1591c4 100644
--- a/stories/patterns/core/tests/all-components/index.tsx
+++ b/stories/patterns/core/tests/all-components/index.tsx
@@ -17,7 +17,7 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
   const [tab, setTab] = React.useState(defaultTab);
 
   return (
-    <Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)', overflowX: 'clip' }} p={8}>
+    <Box w='calc(100vw - 64px)' bg='page-bg' style={{ overflowX: 'clip' }} p={8}>
       <PageHeader />
 
       <TabLine size='l' mx={-8} px={8} mt={8} value={tab} onChange={setTab}>

From ecb65866a86b8c8f851f965a5b0cfe2b0a7cfe70 Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Mon, 8 Jun 2026 14:53:37 +0200
Subject: [PATCH 3/4] [theme] add several common variables

---
 tools/theme/src/theme.ts                       | 12 ++++++++++++
 .../style/design-tokens/design-tokens.json     | 18 ++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 0d3b1e5aa2..1e9ff0bc80 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -1456,6 +1456,15 @@ export const theme: Theme = {
       page_bg: { value: neutral.at(0.97),
         description: 'Background fill for the whole product page.',
       },
+      page_footer_bg: { value: '{semanticTokens.colors.page.bg}',
+        description: 'Background fill for the product page footer.',
+      },
+      sidebar_nav_bg: { value: '{semanticTokens.colors.page.bg}',
+        description: 'Background fill for the product page sidebar.',
+      },
+      sidebar_nav_border: { value: '{semanticTokens.colors.border.primary}',
+        description: 'Color for the border of the page sidebar.',
+      },
       sidebar_nav_control_hover: {
         value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
         description: 'Sidebar navigation row hover background.',
@@ -2486,9 +2495,12 @@ type SemanticColors = {
   };
   page: {
     bg: Value;
+    footer_bg: Value;
   };
   sidebar: {
     nav: {
+      bg: Value;
+      border: Value;
       control: {
         hover: Value;
         active: Value;
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index a05816fff2..dfd57e3df8 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -2368,6 +2368,24 @@
     "description": "Background fill for the whole product page.",
     "components": []
   },
+  {
+    "name": "--intergalactic-page-footer-bg",
+    "value": "oklch(0.97 0.001 180)",
+    "description": "Background fill for the product page footer.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-sidebar-nav-bg",
+    "value": "oklch(0.97 0.001 180)",
+    "description": "Background fill for the product page sidebar.",
+    "components": []
+  },
+  {
+    "name": "--intergalactic-sidebar-nav-border",
+    "value": "oklch(0.137 0.026 175.7 / 0.161)",
+    "description": "Color for the border of the page sidebar.",
+    "components": []
+  },
   {
     "name": "--intergalactic-sidebar-nav-control-hover",
     "value": "oklch(0.176 0.033 175.6 / 0.056)",

From c0cfcb12e568602a00d50e5eed5dc7996ccb65bb Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Mon, 8 Jun 2026 15:02:36 +0200
Subject: [PATCH 4/4] [theme] update name for footer variable

---
 tools/theme/src/theme.ts                            | 6 ++++--
 website/docs/style/design-tokens/design-tokens.json | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 1e9ff0bc80..4594df68d9 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -1456,7 +1456,7 @@ export const theme: Theme = {
       page_bg: { value: neutral.at(0.97),
         description: 'Background fill for the whole product page.',
       },
-      page_footer_bg: { value: '{semanticTokens.colors.page.bg}',
+      footer_bg: { value: '{semanticTokens.colors.page.bg}',
         description: 'Background fill for the product page footer.',
       },
       sidebar_nav_bg: { value: '{semanticTokens.colors.page.bg}',
@@ -2495,7 +2495,9 @@ type SemanticColors = {
   };
   page: {
     bg: Value;
-    footer_bg: Value;
+  };
+  footer: {
+    bg: Value;
   };
   sidebar: {
     nav: {
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index dfd57e3df8..8b9ccea181 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -2369,7 +2369,7 @@
     "components": []
   },
   {
-    "name": "--intergalactic-page-footer-bg",
+    "name": "--intergalactic-footer-bg",
     "value": "oklch(0.97 0.001 180)",
     "description": "Background fill for the product page footer.",
     "components": []