diff --git a/.changeset/sweet-times-make.md b/.changeset/sweet-times-make.md
new file mode 100644
index 00000000000..adabae1d5f0
--- /dev/null
+++ b/.changeset/sweet-times-make.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Remove use of useResponsiveValue hook - PageLayout
diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index d8cbee7e572..5c3041059ea 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -125,6 +125,78 @@ body[data-page-layout-dragging='true'] * {
       inset 0 1px 0 0 var(--borderColor-default);
   }
 
+  /* Narrow viewport */
+  @media (--viewportRange-narrow) {
+    &:where([data-variant-narrow='none']) {
+      display: none;
+    }
+
+    &:where([data-variant-narrow='line']) {
+      display: block;
+      height: 1px;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-default);
+    }
+
+    &:where([data-variant-narrow='filled']) {
+      display: block;
+      height: var(--base-size-8);
+      background-color: var(--bgColor-inset);
+      box-shadow:
+        /* stylelint-disable-next-line primer/box-shadow */
+        inset 0 -1px 0 0 var(--borderColor-default),
+        inset 0 1px 0 0 var(--borderColor-default);
+    }
+  }
+
+  /* Regular viewport */
+  @media (--viewportRange-regular) {
+    &:where([data-variant-regular='none']) {
+      display: none;
+    }
+
+    &:where([data-variant-regular='line']) {
+      display: block;
+      height: 1px;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-default);
+    }
+
+    &:where([data-variant-regular='filled']) {
+      display: block;
+      height: var(--base-size-8);
+      background-color: var(--bgColor-inset);
+      box-shadow:
+        /* stylelint-disable-next-line primer/box-shadow */
+        inset 0 -1px 0 0 var(--borderColor-default),
+        inset 0 1px 0 0 var(--borderColor-default);
+    }
+  }
+
+  /* Wide viewport */
+  @media (--viewportRange-wide) {
+    &:where([data-variant-wide='none']) {
+      display: none;
+    }
+
+    &:where([data-variant-wide='line']) {
+      display: block;
+      height: 1px;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-default);
+    }
+
+    &:where([data-variant-wide='filled']) {
+      display: block;
+      height: var(--base-size-8);
+      background-color: var(--bgColor-inset);
+      box-shadow:
+        /* stylelint-disable-next-line primer/box-shadow */
+        inset 0 -1px 0 0 var(--borderColor-default),
+        inset 0 1px 0 0 var(--borderColor-default);
+    }
+  }
+
   @media screen and (min-width: 768px) {
     margin-right: 0 !important;
     margin-left: 0 !important;
@@ -155,12 +227,109 @@ body[data-page-layout-dragging='true'] * {
       inset -1px 0 0 0 var(--borderColor-default),
       inset 1px 0 0 0 var(--borderColor-default);
   }
+
+  /* Narrow viewport */
+  @media (--viewportRange-narrow) {
+    &:where([data-variant-narrow='none']) {
+      display: none;
+    }
+
+    &:where([data-variant-narrow='line']) {
+      display: block;
+      width: 1px;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-default);
+    }
+
+    &:where([data-variant-narrow='filled']) {
+      display: block;
+      width: var(--base-size-8);
+      background-color: var(--bgColor-inset);
+      box-shadow:
+        /* stylelint-disable-next-line primer/box-shadow */
+        inset -1px 0 0 0 var(--borderColor-default),
+        inset 1px 0 0 0 var(--borderColor-default);
+    }
+  }
+
+  /* Regular viewport */
+  @media (--viewportRange-regular) {
+    &:where([data-variant-regular='none']) {
+      display: none;
+    }
+
+    &:where([data-variant-regular='line']) {
+      display: block;
+      width: 1px;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-default);
+    }
+
+    &:where([data-variant-regular='filled']) {
+      display: block;
+      width: var(--base-size-8);
+      background-color: var(--bgColor-inset);
+      box-shadow:
+        /* stylelint-disable-next-line primer/box-shadow */
+        inset -1px 0 0 0 var(--borderColor-default),
+        inset 1px 0 0 0 var(--borderColor-default);
+    }
+  }
+
+  /* Wide viewport */
+  @media (--viewportRange-wide) {
+    &:where([data-variant-wide='none']) {
+      display: none;
+    }
+
+    &:where([data-variant-wide='line']) {
+      display: block;
+      width: 1px;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-default);
+    }
+
+    &:where([data-variant-wide='filled']) {
+      display: block;
+      width: var(--base-size-8);
+      background-color: var(--bgColor-inset);
+      box-shadow:
+        /* stylelint-disable-next-line primer/box-shadow */
+        inset -1px 0 0 0 var(--borderColor-default),
+        inset 1px 0 0 0 var(--borderColor-default);
+    }
+  }
 }
 
 .Header {
   width: 100%;
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--spacing);
+
+  &:where([data-hidden='true']) {
+    display: none;
+  }
+
+  /* Narrow viewport */
+  @media (--viewportRange-narrow) {
+    &:where([data-hidden-narrow='true']) {
+      display: none;
+    }
+  }
+
+  /* Regular viewport */
+  @media (--viewportRange-regular) {
+    &:where([data-hidden-regular='true']) {
+      display: none;
+    }
+  }
+
+  /* Wide viewport */
+  @media (--viewportRange-wide) {
+    &:where([data-hidden-wide='true']) {
+      display: none;
+    }
+  }
 }
 
 .HeaderContent {
@@ -191,6 +360,27 @@ body[data-page-layout-dragging='true'] * {
   &:where([data-is-hidden='true']) {
     display: none;
   }
+
+  /* Narrow viewport */
+  @media (--viewportRange-narrow) {
+    &:where([data-is-hidden-narrow='true']) {
+      display: none;
+    }
+  }
+
+  /* Regular viewport */
+  @media (--viewportRange-regular) {
+    &:where([data-is-hidden-regular='true']) {
+      display: none;
+    }
+  }
+
+  /* Wide viewport */
+  @media (--viewportRange-wide) {
+    &:where([data-is-hidden-wide='true']) {
+      display: none;
+    }
+  }
 }
 
 .Content {
@@ -229,21 +419,49 @@ body[data-page-layout-dragging='true'] * {
     display: none;
   }
 
-  &:where([data-position='end']) {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-top: var(--spacing-row);
-    flex-direction: column;
-    order: var(--region-order-pane-end);
+  /* Narrow viewport */
+  @media (--viewportRange-narrow) {
+    &:where([data-is-hidden-narrow='true']) {
+      display: none;
+    }
+
+    &:where([data-position-narrow='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--spacing-row);
+      flex-direction: column;
+      order: var(--region-order-pane-end);
+    }
+
+    &:where([data-position-narrow='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--spacing-row);
+      flex-direction: column-reverse;
+      order: var(--region-order-pane-start);
+    }
   }
 
-  &:where([data-position='start']) {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-bottom: var(--spacing-row);
-    flex-direction: column-reverse;
-    order: var(--region-order-pane-start);
+  /* Base position (non-responsive) - applies at narrow viewports only */
+  @media (--viewportRange-narrow) {
+    &:where([data-position='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--spacing-row);
+      flex-direction: column;
+      order: var(--region-order-pane-end);
+    }
+
+    &:where([data-position='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--spacing-row);
+      flex-direction: column-reverse;
+      order: var(--region-order-pane-start);
+    }
   }
 
   @media screen and (min-width: 768px) {
+    &:where([data-is-hidden-regular='true']) {
+      display: none;
+    }
+
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -255,21 +473,59 @@ body[data-page-layout-dragging='true'] * {
       max-height: 100vh;
     }
 
+    /* Base position (non-responsive) - applies at regular+ viewports */
     &:where([data-position='end']) {
       /* stylelint-disable-next-line primer/spacing */
       margin-left: var(--spacing-column);
       flex-direction: row-reverse;
+      order: var(--region-order-pane-end);
     }
 
     &:where([data-position='start']) {
       /* stylelint-disable-next-line primer/spacing */
       margin-right: var(--spacing-column);
       flex-direction: row;
+      order: var(--region-order-pane-start);
+    }
+
+    &:where([data-position-regular='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--spacing-column);
+      flex-direction: row-reverse;
+      order: var(--region-order-pane-end);
+    }
+
+    &:where([data-position-regular='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-right: var(--spacing-column);
+      flex-direction: row;
+      order: var(--region-order-pane-start);
+    }
+  }
+
+  @media (--viewportRange-wide) {
+    &:where([data-is-hidden-wide='true']) {
+      display: none;
+    }
+
+    &:where([data-position-wide='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--spacing-column);
+      flex-direction: row-reverse;
+      order: var(--region-order-pane-end);
+    }
+
+    &:where([data-position-wide='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-right: var(--spacing-column);
+      flex-direction: row;
+      order: var(--region-order-pane-start);
     }
   }
 }
 
 .PaneVerticalDivider {
+  /* Base position (non-responsive) */
   &:where([data-position='start']) {
     /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--spacing);
@@ -279,6 +535,49 @@ body[data-page-layout-dragging='true'] * {
     /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--spacing);
   }
+
+  /* Responsive position */
+  @media (--viewportRange-narrow) {
+    &:where([data-position-narrow='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--spacing);
+      margin-right: 0;
+    }
+
+    &:where([data-position-narrow='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-right: var(--spacing);
+      margin-left: 0;
+    }
+  }
+
+  @media (--viewportRange-regular) {
+    &:where([data-position-regular='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--spacing);
+      margin-right: 0;
+    }
+
+    &:where([data-position-regular='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-right: var(--spacing);
+      margin-left: 0;
+    }
+  }
+
+  @media (--viewportRange-wide) {
+    &:where([data-position-wide='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: var(--spacing);
+      margin-right: 0;
+    }
+
+    &:where([data-position-wide='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-right: var(--spacing);
+      margin-left: 0;
+    }
+  }
 }
 
 .Pane {
@@ -309,6 +608,49 @@ body[data-page-layout-dragging='true'] * {
     /* stylelint-disable-next-line primer/spacing */
     margin-bottom: var(--spacing);
   }
+
+  /* Responsive position */
+  @media (--viewportRange-narrow) {
+    &:where([data-position-narrow='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--spacing);
+      margin-bottom: 0;
+    }
+
+    &:where([data-position-narrow='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--spacing);
+      margin-top: 0;
+    }
+  }
+
+  @media (--viewportRange-regular) {
+    &:where([data-position-regular='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--spacing);
+      margin-bottom: 0;
+    }
+
+    &:where([data-position-regular='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--spacing);
+      margin-top: 0;
+    }
+  }
+
+  @media (--viewportRange-wide) {
+    &:where([data-position-wide='start']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--spacing);
+      margin-bottom: 0;
+    }
+
+    &:where([data-position-wide='end']) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: var(--spacing);
+      margin-top: 0;
+    }
+  }
 }
 
 .FooterWrapper {
@@ -317,6 +659,31 @@ body[data-page-layout-dragging='true'] * {
 
   /* stylelint-disable-next-line primer/spacing */
   margin-top: var(--spacing);
+
+  &:where([data-hidden='true']) {
+    display: none;
+  }
+
+  /* Narrow viewport */
+  @media (--viewportRange-narrow) {
+    &:where([data-hidden-narrow='true']) {
+      display: none;
+    }
+  }
+
+  /* Regular viewport */
+  @media (--viewportRange-regular) {
+    &:where([data-hidden-regular='true']) {
+      display: none;
+    }
+  }
+
+  /* Wide viewport */
+  @media (--viewportRange-wide) {
+    &:where([data-hidden-wide='true']) {
+      display: none;
+    }
+  }
 }
 
 .FooterHorizontalDivider {
diff --git a/packages/react/src/PageLayout/PageLayout.responsive.stories.tsx b/packages/react/src/PageLayout/PageLayout.responsive.stories.tsx
new file mode 100644
index 00000000000..c32b9c6f9a4
--- /dev/null
+++ b/packages/react/src/PageLayout/PageLayout.responsive.stories.tsx
@@ -0,0 +1,309 @@
+import type {Meta, StoryFn} from '@storybook/react-vite'
+import {Placeholder} from '../Placeholder'
+import {PageLayout} from './PageLayout'
+
+const meta: Meta = {
+  title: 'Components/PageLayout/Responsive Variants',
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true},
+  },
+}
+
+export default meta
+
+/**
+ * Test responsive divider variants on Header.
+ * Resize the viewport to see different divider styles at different breakpoints.
+ */
+export const HeaderDividerResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header divider={{narrow: 'filled', regular: 'line', wide: 'none'}}>
+      <Placeholder height={64} label="Header divider: filled (narrow) → line (regular) → none (wide)" />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+  </PageLayout>
+)
+
+HeaderDividerResponsive.parameters = {
+  docs: {
+    description: {
+      story:
+        'The header divider changes based on viewport width: **filled** on narrow viewports, **line** on regular viewports, and **none** on wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive hidden state on Header.
+ * Resize the viewport to see the header hide/show at different breakpoints.
+ */
+export const HeaderHiddenResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header hidden={{narrow: false, regular: false, wide: true}}>
+      <Placeholder height={64} label="Header: visible (narrow + regular) → hidden (wide)" />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane>
+      <Placeholder height={200} label="Pane" />
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
+HeaderHiddenResponsive.parameters = {
+  docs: {
+    description: {
+      story: 'The header is **visible** on narrow and regular viewports, and **hidden** on wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive divider variants on Footer.
+ * Resize the viewport to see different divider styles at different breakpoints.
+ */
+export const FooterDividerResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Footer divider={{narrow: 'none', regular: 'line', wide: 'line'}}>
+      <Placeholder height={64} label="Footer divider: none (narrow) → line (regular + wide)" />
+    </PageLayout.Footer>
+  </PageLayout>
+)
+
+FooterDividerResponsive.parameters = {
+  docs: {
+    description: {
+      story: 'The footer divider is **none** on narrow viewports, and **line** on regular and wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive hidden state on Footer.
+ * Resize the viewport to see the footer hide/show at different breakpoints.
+ */
+export const FooterHiddenResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane>
+      <Placeholder height={200} label="Pane" />
+    </PageLayout.Pane>
+    <PageLayout.Footer hidden={{narrow: false, regular: false, wide: true}}>
+      <Placeholder height={64} label="Footer: visible (narrow + regular) → hidden (wide)" />
+    </PageLayout.Footer>
+  </PageLayout>
+)
+
+FooterHiddenResponsive.parameters = {
+  docs: {
+    description: {
+      story: 'The footer is **visible** on narrow and regular viewports, and **hidden** on wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive hidden state on Content.
+ * Resize the viewport to see the content hide/show at different breakpoints.
+ */
+export const ContentHiddenResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header>
+      <Placeholder height={64} label="Header" />
+    </PageLayout.Header>
+    <PageLayout.Content hidden={{narrow: true, regular: false, wide: false}}>
+      <Placeholder height={400} label="Content: hidden (narrow) → visible (regular + wide)" />
+    </PageLayout.Content>
+    <PageLayout.Pane>
+      <Placeholder height={200} label="Pane" />
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
+ContentHiddenResponsive.parameters = {
+  docs: {
+    description: {
+      story: 'The content is **hidden** on narrow viewports, and **visible** on regular and wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive position on Pane.
+ * Resize the viewport to see the pane move between start and end positions.
+ */
+export const PanePositionResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header>
+      <Placeholder height={64} label="Header" />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane position={{narrow: 'end', regular: 'start', wide: 'start'}}>
+      <Placeholder height={200} label="Pane position: end (narrow) → start (regular + wide)" />
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
+PanePositionResponsive.parameters = {
+  docs: {
+    description: {
+      story:
+        'The pane position changes based on viewport width: **end** (below content) on narrow viewports, **start** (left sidebar) on regular and wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive divider variants on Pane.
+ * Resize the viewport to see different divider styles at different breakpoints.
+ */
+export const PaneDividerResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane divider={{narrow: 'filled', regular: 'line', wide: 'none'}}>
+      <Placeholder height={200} label="Pane divider: filled (narrow) → line (regular) → none (wide)" />
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
+PaneDividerResponsive.parameters = {
+  docs: {
+    description: {
+      story:
+        'The pane divider changes based on viewport width: **filled** on narrow viewports, **line** on regular viewports, and **none** on wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test responsive hidden state on Pane.
+ * Resize the viewport to see the pane hide/show at different breakpoints.
+ */
+export const PaneHiddenResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header>
+      <Placeholder height={64} label="Header" />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane hidden={{narrow: true, regular: false, wide: false}}>
+      <Placeholder height={200} label="Pane: hidden (narrow) → visible (regular + wide)" />
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
+PaneHiddenResponsive.parameters = {
+  docs: {
+    description: {
+      story: 'The pane is **hidden** on narrow viewports, and **visible** on regular and wide viewports.',
+    },
+  },
+}
+
+/**
+ * Test all responsive variants together in a complex layout.
+ * This story demonstrates multiple responsive properties working together.
+ */
+export const ComplexResponsiveLayout: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header
+      divider={{narrow: 'filled', regular: 'line', wide: 'none'}}
+      hidden={{narrow: false, regular: false, wide: false}}
+    >
+      <Placeholder height={64} label="Header divider: filled (narrow) → line (regular) → none (wide)" />
+    </PageLayout.Header>
+    <PageLayout.Content hidden={{narrow: false, regular: false, wide: false}}>
+      <Placeholder height={400} label="Content (always visible)" />
+    </PageLayout.Content>
+    <PageLayout.Pane
+      position={{narrow: 'end', regular: 'start', wide: 'start'}}
+      divider={{narrow: 'filled', regular: 'line', wide: 'line'}}
+      hidden={{narrow: false, regular: false, wide: false}}
+    >
+      <Placeholder height={200} label="Pane: end + filled divider (narrow) → start + line divider (regular + wide)" />
+    </PageLayout.Pane>
+    <PageLayout.Footer divider={{narrow: 'filled', regular: 'line', wide: 'none'}}>
+      <Placeholder height={64} label="Footer divider: filled (narrow) → line (regular) → none (wide)" />
+    </PageLayout.Footer>
+  </PageLayout>
+)
+
+ComplexResponsiveLayout.parameters = {
+  docs: {
+    description: {
+      story:
+        'A complex layout demonstrating multiple responsive properties working together. Resize the viewport to see how all the responsive variants change at different breakpoints.',
+    },
+  },
+}
+
+/**
+ * Test responsive behavior with backward compatibility props.
+ * This ensures the deprecated props still work correctly.
+ */
+export const BackwardCompatibilityTest: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header divider="line" dividerWhenNarrow="filled">
+      <Placeholder height={64} label="Header using deprecated dividerWhenNarrow prop" />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane position="start" positionWhenNarrow="end" divider="line" dividerWhenNarrow="filled">
+      <Placeholder height={200} label="Pane using deprecated positionWhenNarrow and dividerWhenNarrow props" />
+    </PageLayout.Pane>
+    <PageLayout.Footer divider="line" dividerWhenNarrow="filled">
+      <Placeholder height={64} label="Footer using deprecated dividerWhenNarrow prop" />
+    </PageLayout.Footer>
+  </PageLayout>
+)
+
+BackwardCompatibilityTest.parameters = {
+  docs: {
+    description: {
+      story:
+        'Tests backward compatibility with deprecated props like `dividerWhenNarrow` and `positionWhenNarrow`. These should still work correctly alongside the new responsive value format.',
+    },
+  },
+}
+
+/**
+ * Test SSR-safe responsive behavior.
+ * This story ensures no layout shift occurs during hydration.
+ */
+export const SSRSafeResponsive: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Header divider={{narrow: 'filled', regular: 'line'}}>
+      <Placeholder height={64} label="Header divider: filled (narrow) → line (regular + wide)" />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder height={400} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Pane position={{narrow: 'end', regular: 'start'}} divider={{narrow: 'filled', regular: 'line'}}>
+      <Placeholder height={200} label="Pane: end + filled divider (narrow) → start + line divider (regular + wide)" />
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
+SSRSafeResponsive.parameters = {
+  docs: {
+    description: {
+      story:
+        'Demonstrates SSR-safe responsive behavior. The header divider is **filled** on narrow viewports and **line** on regular and wide viewports. The pane is positioned at **end** with a **filled** divider on narrow viewports, and at **start** with a **line** divider on regular and wide viewports. All responsive values are handled through CSS data attributes and media queries, preventing layout shift during hydration. This follows ADR-018 for responsive values.',
+    },
+  },
+}
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 8d8ae16fbfd..29afbe4477a 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -3,11 +3,12 @@ import {clsx} from 'clsx'
 import {useId} from '../hooks/useId'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
-import {isResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
+import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import {useSlots} from '../hooks/useSlots'
 import {canUseDOM} from '../utils/environment'
 import {useOverflow} from '../hooks/useOverflow'
 import {warning} from '../utils/warning'
+import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes'
 
 import classes from './PageLayout.module.css'
 import type {FCWithSlotMarker, WithSlotMarker} from '../utils/types'
@@ -118,7 +119,7 @@ type DividerProps = {
   variant?: 'none' | 'line' | 'filled' | ResponsiveValue<'none' | 'line' | 'filled'>
   className?: string
   style?: React.CSSProperties
-  position?: keyof typeof panePositions
+  position?: keyof typeof panePositions | ResponsiveValue<keyof typeof panePositions>
 }
 
 const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
@@ -128,13 +129,12 @@ const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   style,
 }) => {
   const {padding} = React.useContext(PageLayoutContext)
-  const responsiveVariant = useResponsiveValue(variant, 'none')
 
   return (
     <div
       className={clsx(classes.HorizontalDivider, className)}
-      data-variant={responsiveVariant}
-      data-position={position}
+      {...getResponsiveAttributes('variant', variant)}
+      {...getResponsiveAttributes('position', position)}
       style={
         {
           '--spacing-divider': `var(--spacing-${padding})`,
@@ -166,7 +166,6 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
 }) => {
   const [isDragging, setIsDragging] = React.useState(false)
   const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false)
-  const responsiveVariant = useResponsiveValue(variant, 'none')
 
   const stableOnDrag = React.useRef(onDrag)
   const stableOnDragEnd = React.useRef(onDragEnd)
@@ -263,8 +262,8 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
   return (
     <div
       className={clsx(classes.VerticalDivider, className)}
-      data-variant={responsiveVariant}
-      data-position={position}
+      {...getResponsiveAttributes('variant', variant)}
+      {...getResponsiveAttributes('position', position)}
       style={style}
     >
       {draggable ? (
@@ -356,15 +355,13 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
       ? {regular: divider, narrow: dividerWhenNarrow}
       : divider
 
-  const dividerVariant = useResponsiveValue(dividerProp, 'none')
-  const isHidden = useResponsiveValue(hidden, false)
   const {rowGap} = React.useContext(PageLayoutContext)
 
   return (
     <header
       aria-label={label}
       aria-labelledby={labelledBy}
-      hidden={isHidden}
+      {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.Header, className)}
       style={
         {
@@ -384,7 +381,7 @@ const Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>> =
         {children}
       </div>
       <HorizontalDivider
-        variant={dividerVariant}
+        variant={dividerProp}
         className={classes.HeaderHorizontalDivider}
         style={
           {
@@ -444,7 +441,6 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
   className,
   style,
 }) => {
-  const isHidden = useResponsiveValue(hidden, false)
   const Component = as
 
   return (
@@ -453,7 +449,7 @@ const Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>
       aria-labelledby={labelledBy}
       style={style}
       className={clsx(classes.ContentWrapper, className)}
-      data-is-hidden={isHidden}
+      {...getResponsiveAttributes('is-hidden', hidden)}
     >
       <div
         className={classes.Content}
@@ -589,17 +585,16 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         ? {regular: responsivePosition, narrow: positionWhenNarrow}
         : responsivePosition
 
-    const position = useResponsiveValue(positionProp, 'end')
-
     // Combine divider and dividerWhenNarrow for backwards compatibility
     const dividerProp =
       !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== 'inherit'
         ? {regular: responsiveDivider, narrow: dividerWhenNarrow}
         : responsiveDivider
 
-    const dividerVariant = useResponsiveValue(dividerProp, 'none')
-
-    const isHidden = useResponsiveValue(responsiveHidden, false)
+    // For components that need responsive values in JavaScript logic, we'll use a fallback value
+    // The actual responsive behavior will be handled by CSS through data attributes
+    const position = isResponsiveValue(positionProp) ? 'end' : positionProp
+    const dividerVariant = isResponsiveValue(dividerProp) ? 'none' : dividerProp
 
     const {rowGap, columnGap, paneRef} = React.useContext(PageLayoutContext)
 
@@ -671,20 +666,20 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             ...style,
           } as React.CSSProperties
         }
-        data-is-hidden={isHidden}
-        data-position={position}
+        {...getResponsiveAttributes('is-hidden', responsiveHidden)}
+        {...getResponsiveAttributes('position', positionProp)}
         data-sticky={sticky || undefined}
       >
         {/* Show a horizontal divider when viewport is narrow. Otherwise, show a vertical divider. */}
         <HorizontalDivider
-          variant={{narrow: dividerVariant, regular: 'none'}}
+          variant={isResponsiveValue(dividerProp) ? dividerProp : {narrow: dividerVariant, regular: 'none'}}
           className={classes.PaneHorizontalDivider}
           style={
             {
               '--spacing': `var(--spacing-${rowGap})`,
             } as React.CSSProperties
           }
-          position={position}
+          position={positionProp}
         />
         <div
           ref={paneRef}
@@ -707,11 +702,19 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {children}
         </div>
         <VerticalDivider
-          variant={{
-            narrow: 'none',
-            // If pane is resizable, always show a vertical divider on regular viewports
-            regular: resizable ? 'line' : dividerVariant,
-          }}
+          variant={
+            isResponsiveValue(dividerProp)
+              ? {
+                  narrow: 'none',
+                  regular: resizable ? 'line' : dividerProp.regular || 'none',
+                  wide: resizable ? 'line' : dividerProp.wide || dividerProp.regular || 'none',
+                }
+              : {
+                  narrow: 'none',
+                  // If pane is resizable, always show a vertical divider on regular viewports
+                  regular: resizable ? 'line' : dividerVariant,
+                }
+          }
           // If pane is resizable, the divider should be draggable
           draggable={resizable}
           onDrag={(delta, isKeyboard = false) => {
@@ -730,7 +733,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             if (!paneRect) return
             updatePaneWidth(paneRect.width)
           }}
-          position={position}
+          position={positionProp}
           // Reset pane width on double click
           onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))}
           className={classes.PaneVerticalDivider}
@@ -799,15 +802,13 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
       ? {regular: divider, narrow: dividerWhenNarrow}
       : divider
 
-  const dividerVariant = useResponsiveValue(dividerProp, 'none')
-  const isHidden = useResponsiveValue(hidden, false)
   const {rowGap} = React.useContext(PageLayoutContext)
 
   return (
     <footer
       aria-label={label}
       aria-labelledby={labelledBy}
-      hidden={isHidden}
+      {...getResponsiveAttributes('hidden', hidden)}
       className={clsx(classes.FooterWrapper, className)}
       style={
         {
@@ -823,7 +824,7 @@ const Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>> =
             '--spacing': `var(--spacing-${rowGap})`,
           } as React.CSSProperties
         }
-        variant={dividerVariant}
+        variant={dividerProp}
       />
       <div
         className={classes.FooterContent}
diff --git a/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index 9c210ca99bf..5ac82e6ca02 100644
--- a/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`PageLayout > renders condensed layout 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-hidden="false"
         style="--spacing: var(--spacing-condensed);"
       >
         <div
@@ -50,7 +51,8 @@ exports[`PageLayout > renders condensed layout 1`] = `
           <div
             class="prc-PageLayout-HorizontalDivider-8Nn4S prc-PageLayout-PaneHorizontalDivider-wnCG-"
             data-position="end"
-            data-variant="none"
+            data-variant-narrow="none"
+            data-variant-regular="none"
             style="--spacing-divider: var(--spacing-condensed); --spacing: var(--spacing-condensed);"
           />
           <div
@@ -62,13 +64,15 @@ exports[`PageLayout > renders condensed layout 1`] = `
           <div
             class="prc-PageLayout-VerticalDivider-f4Vw0 prc-PageLayout-PaneVerticalDivider-o0OsY"
             data-position="end"
-            data-variant="none"
+            data-variant-narrow="none"
+            data-variant-regular="none"
             style="--spacing: var(--spacing-condensed);"
           />
         </div>
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-hidden="false"
         style="--spacing: var(--spacing-condensed);"
       >
         <div
@@ -100,6 +104,7 @@ exports[`PageLayout > renders default layout 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
         <div
@@ -138,7 +143,8 @@ exports[`PageLayout > renders default layout 1`] = `
           <div
             class="prc-PageLayout-HorizontalDivider-8Nn4S prc-PageLayout-PaneHorizontalDivider-wnCG-"
             data-position="end"
-            data-variant="none"
+            data-variant-narrow="none"
+            data-variant-regular="none"
             style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
           />
           <div
@@ -150,13 +156,15 @@ exports[`PageLayout > renders default layout 1`] = `
           <div
             class="prc-PageLayout-VerticalDivider-f4Vw0 prc-PageLayout-PaneVerticalDivider-o0OsY"
             data-position="end"
-            data-variant="none"
+            data-variant-narrow="none"
+            data-variant-regular="none"
             style="--spacing: var(--spacing-normal);"
           />
         </div>
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
         <div
@@ -188,6 +196,7 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
         <div
@@ -220,13 +229,16 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
         <div
           class="prc-PageLayout-PaneWrapper-RIDY-"
           data-is-hidden="false"
-          data-position="end"
+          data-position-narrow="start"
+          data-position-regular="end"
           style="--offset-header: 0px; --spacing-row: var(--spacing-normal); --spacing-column: var(--spacing-normal);"
         >
           <div
             class="prc-PageLayout-HorizontalDivider-8Nn4S prc-PageLayout-PaneHorizontalDivider-wnCG-"
-            data-position="end"
-            data-variant="none"
+            data-position-narrow="start"
+            data-position-regular="end"
+            data-variant-narrow="none"
+            data-variant-regular="none"
             style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
           />
           <div
@@ -237,14 +249,17 @@ exports[`PageLayout > renders pane in different position when narrow 1`] = `
           </div>
           <div
             class="prc-PageLayout-VerticalDivider-f4Vw0 prc-PageLayout-PaneVerticalDivider-o0OsY"
-            data-position="end"
-            data-variant="none"
+            data-position-narrow="start"
+            data-position-regular="end"
+            data-variant-narrow="none"
+            data-variant-regular="none"
             style="--spacing: var(--spacing-normal);"
           />
         </div>
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
         <div
@@ -276,6 +291,7 @@ exports[`PageLayout > renders with dividers 1`] = `
     >
       <header
         class="prc-PageLayout-Header-EJ5fp"
+        data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
         <div
@@ -286,7 +302,8 @@ exports[`PageLayout > renders with dividers 1`] = `
         </div>
         <div
           class="prc-PageLayout-HorizontalDivider-8Nn4S prc-PageLayout-HeaderHorizontalDivider-F16w2"
-          data-variant="line"
+          data-variant-narrow="filled"
+          data-variant-regular="line"
           style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
         />
       </header>
@@ -314,7 +331,8 @@ exports[`PageLayout > renders with dividers 1`] = `
           <div
             class="prc-PageLayout-HorizontalDivider-8Nn4S prc-PageLayout-PaneHorizontalDivider-wnCG-"
             data-position="start"
-            data-variant="none"
+            data-variant-narrow="filled"
+            data-variant-regular="line"
             style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
           />
           <div
@@ -326,18 +344,22 @@ exports[`PageLayout > renders with dividers 1`] = `
           <div
             class="prc-PageLayout-VerticalDivider-f4Vw0 prc-PageLayout-PaneVerticalDivider-o0OsY"
             data-position="start"
-            data-variant="line"
+            data-variant-narrow="none"
+            data-variant-regular="line"
+            data-variant-wide="line"
             style="--spacing: var(--spacing-normal);"
           />
         </div>
       </div>
       <footer
         class="prc-PageLayout-FooterWrapper-CHYtZ"
+        data-hidden="false"
         style="--spacing: var(--spacing-normal);"
       >
         <div
           class="prc-PageLayout-HorizontalDivider-8Nn4S prc-PageLayout-FooterHorizontalDivider-QqvMj"
-          data-variant="none"
+          data-variant-narrow="line"
+          data-variant-regular="none"
           style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
         />
         <div
diff --git a/packages/react/src/Placeholder.module.css b/packages/react/src/Placeholder.module.css
index 6aa4f63fa21..9350d004294 100644
--- a/packages/react/src/Placeholder.module.css
+++ b/packages/react/src/Placeholder.module.css
@@ -5,6 +5,7 @@
 
   width: var(--placeholder-width, 100%);
   height: var(--placeholder-height);
+  padding: var(--base-size-4) var(--base-size-24);
   display: grid;
   place-items: center;
   background-color: var(--bgColor-inset);