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}>
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index c08a7dcb9e..4594df68d9 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -1450,9 +1450,21 @@ 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.',
+      },
+      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.',
@@ -2481,8 +2493,16 @@ type SemanticColors = {
       secondary: Value;
     };
   };
+  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 2abd9f9dc1..8b9ccea181 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -2349,17 +2349,41 @@
   },
   {
     "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": []
+  },
+  {
+    "name": "--intergalactic-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": []
   },
   {