diff --git a/.changeset/noodles-component-typography.md b/.changeset/noodles-component-typography.md
new file mode 100644
index 00000000000..2a8abf33b18
--- /dev/null
+++ b/.changeset/noodles-component-typography.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+ActionList, Button: Support scoped label and button typography customization while preserving default styling.
diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
index 7a4a9065c0a..44e1df2c411 100644
--- a/packages/react/src/ActionList/ActionList.module.css
+++ b/packages/react/src/ActionList/ActionList.module.css
@@ -221,7 +221,7 @@
       outline: 2px solid transparent;
 
       & .ItemLabel {
-        font-weight: var(--base-text-weight-semibold);
+        font-weight: var(--ActionList--label-fontWeight-selected, var(--base-text-weight-semibold));
         color: var(--control-fgColor-rest);
       }
 
@@ -578,7 +578,7 @@
       background: var(--control-transparent-bgColor-selected);
 
       & .ItemLabel {
-        font-weight: var(--base-text-weight-semibold);
+        font-weight: var(--ActionList--label-fontWeight-selected, var(--base-text-weight-semibold));
       }
 
       & .ActionListSubContent::before,
@@ -708,12 +708,12 @@ span wrapping svg or text */
 /* text */
 .ItemLabel {
   position: relative;
-  font-size: var(--text-body-size-medium);
+  font-size: var(--ActionList--label-fontSize-medium, var(--text-body-size-medium));
   font-weight: var(--base-text-weight-normal);
   /* stylelint-disable-next-line primer/typography */
   line-height: 20px;
   /* temporary until we fix line-height rounding in primitives */
-  color: var(--fgColor-default);
+  color: var(--ActionList--label-fgColor, var(--fgColor-default));
   grid-area: label;
   /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
   word-break: break-word;
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
index 278b4979314..3e508c19a75 100644
--- a/packages/react/src/Button/ButtonBase.module.css
+++ b/packages/react/src/Button/ButtonBase.module.css
@@ -6,8 +6,8 @@
   /* stylelint-disable-next-line primer/spacing */
   padding: 0 var(--control-medium-paddingInline-normal);
   font-family: inherit;
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-medium);
+  font-size: var(--Button--fontSize-medium, var(--text-body-size-medium));
+  font-weight: var(--Button--fontWeight, var(--base-text-weight-medium));
   color: var(--button-default-fgColor-rest);
   text-align: center;
   text-decoration: none;
diff --git a/packages/react/src/stories/NoodlesPage.fixtures.ts b/packages/react/src/stories/NoodlesPage.fixtures.ts
new file mode 100644
index 00000000000..569a9d0fc74
--- /dev/null
+++ b/packages/react/src/stories/NoodlesPage.fixtures.ts
@@ -0,0 +1,87 @@
+export interface NoodlesPageFixture {
+  id: string
+  title: string
+  count?: number
+  parentId?: string
+}
+
+export interface NoodlesSectionFixture {
+  heading: string
+  paragraph?: string
+  items?: readonly string[]
+}
+
+export const noodlesProjectCover: NoodlesPageFixture = {
+  id: 'project-cover',
+  title: 'Octoinvaders \u00b7 Ink Shield',
+}
+
+export const noodlesProjectPages: readonly NoodlesPageFixture[] = [
+  {id: 'onboarding', title: 'First-use onboarding', parentId: 'project-cover'},
+  {id: 'redirect', title: 'Redirect timing', parentId: 'project-cover'},
+  {id: 'pacing', title: 'Wave-two pacing', parentId: 'project-cover'},
+  {id: 'accessible-feedback', title: 'Accessible shield feedback', parentId: 'project-cover'},
+  {id: 'guardrails', title: 'Rollout guardrails', parentId: 'project-cover'},
+]
+
+export const noodlesPages: readonly NoodlesPageFixture[] = [
+  {id: 'status-updates', title: 'Status updates', count: 12},
+  {id: 'standups', title: 'Standups', count: 60},
+  {id: 'prototype', title: 'Ink Shield interactive prototype'},
+  {id: 'visual-direction', title: 'Octoinvaders visual direction'},
+  {id: 'inspiration', title: 'Arcade inspiration'},
+  {id: 'feature-brief', title: 'Feature brief'},
+  {id: 'mechanics', title: 'Mechanics specification'},
+  {id: 'waves', title: 'Wave and character design'},
+  {id: 'art-audio', title: 'Art and audio direction'},
+  {id: 'dashboard', title: 'Kusto playtest dashboard'},
+  {id: 'delivery', title: 'Ink Shield delivery board'},
+  {id: 'telemetry', title: 'Telemetry and experiment plan'},
+  {id: 'checklist', title: 'Playtest and launch checklist'},
+]
+
+export const noodlesReports = [
+  'October 2, 2026',
+  'September 25, 2026',
+  'September 18, 2026',
+  'September 11, 2026',
+  'September 4, 2026',
+  'August 28, 2026',
+  'August 21, 2026',
+  'August 14, 2026',
+  'August 7, 2026',
+  'July 31, 2026',
+  'July 24, 2026',
+  'July 17, 2026',
+] as const
+
+// Original demo copy, not content copied from the authenticated reference.
+export const noodlesStatusSections: readonly NoodlesSectionFixture[] = [
+  {
+    heading: '1/ What got done this week? What was the outcome?',
+    items: [
+      'Finished the last input and reporting improvements, then practiced switching the shield off without stopping a session.',
+      'Prepared the delivery board, owner rotation, and the small-cohort release checklist.',
+      'The fictional playtest suggests clearer shield guidance and steadier pacing. We will verify these observations with a new cohort.',
+    ],
+  },
+  {
+    heading: '2/ What is the plan for next week?',
+    items: [
+      'Invite the next internal group and review the experience together each day.',
+      'Expand the audience only after the team reviews the results and signs off on the release.',
+    ],
+  },
+  {
+    heading: '3/ What risks, decisions, or blockers need attention?',
+    paragraph:
+      'These are fictional planning notes, not production measurements. A wider release needs a fresh playtest and an accessibility review.',
+  },
+  {
+    heading: '4/ What help do you need?',
+    items: [
+      'A second reviewer for the keyboard and controller flows.',
+      'A release partner to confirm ownership of the monitoring checklist.',
+    ],
+  },
+]
diff --git a/packages/react/src/stories/NoodlesPage.stories.module.css b/packages/react/src/stories/NoodlesPage.stories.module.css
new file mode 100644
index 00000000000..f44dc7b2654
--- /dev/null
+++ b/packages/react/src/stories/NoodlesPage.stories.module.css
@@ -0,0 +1,382 @@
+.ThemePortals {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.Page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  min-height: 480px;
+}
+
+.Surface {
+  flex: 1;
+  min-height: 0;
+}
+
+.Workspace {
+  height: 100%;
+  min-height: 0;
+  padding: var(--base-size-8);
+  color: var(--fgColor-default);
+  background: var(--bgColor-muted);
+}
+
+.Layout {
+  height: 100%;
+}
+
+/* Keep PageLayout's flex wrappers shrinkable so the document and navigation scroll independently. */
+.Layout,
+.Layout > div,
+.Layout > div > div,
+.ContentRegion,
+.ContentRegion > div {
+  min-height: 0;
+  flex-wrap: nowrap;
+}
+
+.ContentRegion > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.Sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding-right: var(--base-size-8);
+  padding-bottom: var(--base-size-8);
+}
+
+.Brand,
+.Account {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  min-height: var(--control-large-size);
+}
+
+.Brand {
+  justify-content: space-between;
+  min-height: calc(var(--control-large-size) + var(--base-size-8));
+  padding-inline: var(--base-size-8) var(--base-size-4);
+}
+
+.Wordmark {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  font-family: var(--fontStack-monospace);
+  font-size: var(--NoodlesPage--wordmark-fontSize, inherit);
+  line-height: var(--NoodlesPage--wordmark-lineHeight, inherit);
+  color: var(--fgColor-muted);
+}
+
+.Project {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--control-large-size);
+  margin-top: var(--base-size-6);
+  margin-bottom: var(--base-size-4);
+  border-radius: var(--borderRadius-medium);
+}
+
+.Project:where(:hover, :focus-within) {
+  background-color: var(--NoodlesPage--project-bgColor-hover, var(--button-invisible-bgColor-hover));
+}
+
+.NoodleCover {
+  display: block;
+  width: var(--base-size-16);
+  height: var(--base-size-24);
+  background: linear-gradient(
+    135deg,
+    var(--bgColor-emphasis),
+    color-mix(in srgb, var(--bgColor-done-emphasis) 25%, var(--bgColor-emphasis)),
+    color-mix(in srgb, var(--bgColor-accent-emphasis) 35%, var(--bgColor-emphasis))
+  );
+  border: var(--borderWidth-thin) solid var(--borderColor-muted);
+  border-radius: var(--base-size-2);
+}
+
+.CoverChevron {
+  display: flex;
+  color: var(--fgColor-onEmphasis);
+}
+
+.Navigation {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.SidebarFooter {
+  display: grid;
+  flex-shrink: 0;
+  margin-top: var(--base-size-16);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-20);
+}
+
+.Account {
+  position: relative;
+  min-height: var(--control-small-size);
+  margin-top: calc(var(--base-size-16) + var(--borderWidth-thin));
+  gap: 0;
+
+  &::before {
+    position: absolute;
+    top: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));
+    inset-inline: var(--base-size-8);
+    height: var(--borderWidth-thin);
+    content: '';
+    background: var(--borderColor-default);
+  }
+}
+
+.Avatar {
+  display: grid;
+  width: var(--base-size-20);
+  height: var(--base-size-20);
+  place-items: center;
+  font-size: calc(var(--text-body-size-small) - var(--base-size-4));
+  color: var(--fgColor-onEmphasis);
+  background: var(--bgColor-emphasis);
+  border-radius: var(--borderRadius-full);
+}
+
+.PagePanel {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bgColor-default);
+  border-radius: var(--borderRadius-large);
+}
+
+.Header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--base-size-4);
+  min-height: var(--NoodlesPage--header-minHeight, var(--control-large-size));
+  padding: var(--base-size-4) var(--base-size-8);
+  font-size: var(--text-body-size-small);
+}
+
+.Breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-4);
+  min-width: 0;
+}
+
+.CurrentTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.HeaderActions,
+.SecondaryActions {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-4);
+}
+
+.HeaderActions {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.HeaderDivider {
+  height: var(--base-size-16);
+  margin-inline: var(--base-size-4);
+  border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.ScrollArea {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+.Document {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--NoodlesPage--document-width, 768px);
+  margin-inline: auto;
+  padding: var(--base-size-64) var(--base-size-40) var(--base-size-128);
+  font-size: var(--text-body-size-medium);
+  line-height: var(--text-body-lineHeight-medium);
+
+  p {
+    margin: var(--base-size-12) 0 0;
+  }
+
+  ul {
+    display: grid;
+    gap: var(--base-size-16);
+    padding-left: var(--base-size-24);
+    margin: var(--base-size-12) 0 0;
+  }
+
+  li {
+    padding-left: var(--base-size-4);
+  }
+
+  li::marker {
+    color: var(--fgColor-muted);
+  }
+}
+
+.PagePanel:where([data-wide='true']) .Document {
+  max-width: 1120px;
+}
+
+.Introduction,
+.Section {
+  position: relative;
+  margin-top: var(--base-size-32);
+}
+
+.BlockHandle {
+  position: absolute;
+  top: 50%;
+  left: calc(-1 * var(--base-size-24));
+  color: var(--fgColor-muted);
+  opacity: 0;
+}
+
+.Section:hover .BlockHandle {
+  opacity: 1;
+}
+
+.EditorFooter {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--base-size-4);
+  min-height: var(--control-medium-size);
+  padding-inline: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+}
+
+.Notice {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Muted {
+  color: var(--fgColor-muted);
+}
+
+.Comments {
+  height: 100%;
+  min-width: 0;
+  overflow: auto;
+  padding: var(--base-size-16);
+  border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+
+  form {
+    display: grid;
+    gap: var(--base-size-12);
+  }
+
+  li {
+    overflow-wrap: anywhere;
+  }
+}
+
+.CommentsRegion > [data-component='PageLayout.Pane'] {
+  height: 100%;
+  min-height: 0;
+}
+
+@media (max-width: 1100px) {
+  .SecondaryActions {
+    display: none;
+  }
+
+  .Workspace:where([data-comments='true']) {
+    .Layout > div > div {
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
+
+    .SidebarRegion {
+      display: none;
+    }
+
+    .CommentsRegion {
+      flex-shrink: 0;
+      width: 100%;
+      height: min(320px, 40dvh);
+
+      > [data-component='PageLayout.Pane'] {
+        width: 100%;
+      }
+    }
+
+    .Comments {
+      max-height: 40dvh;
+      border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+      border-left: 0;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .Layout {
+    flex-direction: column;
+  }
+
+  .SidebarRegion {
+    width: 100%;
+    height: 30dvh;
+  }
+
+  .Sidebar {
+    padding-right: 0;
+  }
+
+  .Project,
+  .SidebarFooter {
+    display: none;
+  }
+
+  .Header {
+    flex-wrap: wrap;
+  }
+
+  .Breadcrumb {
+    flex: 1;
+    max-width: 100%;
+  }
+
+  .HeaderActions {
+    margin-left: 0;
+  }
+
+  .Document {
+    padding: var(--base-size-32) var(--base-size-24) var(--base-size-64);
+  }
+
+  .BlockHandle {
+    display: none;
+  }
+}
diff --git a/packages/react/src/stories/NoodlesPage.stories.tsx b/packages/react/src/stories/NoodlesPage.stories.tsx
new file mode 100644
index 00000000000..95096b9c7e1
--- /dev/null
+++ b/packages/react/src/stories/NoodlesPage.stories.tsx
@@ -0,0 +1,772 @@
+import {useId, useMemo, useRef, useState} from 'react'
+import {clsx} from 'clsx'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  BookIcon,
+  ChevronDownIcon,
+  CodeSquareIcon,
+  CommentDiscussionIcon,
+  CommentIcon,
+  CopyIcon,
+  GearIcon,
+  GrabberIcon,
+  HomeIcon,
+  KebabHorizontalIcon,
+  LinkIcon,
+  PaperclipIcon,
+  PencilIcon,
+  PlusIcon,
+  ScreenFullIcon,
+  SidebarCollapseIcon,
+  SidebarExpandIcon,
+  SyncIcon,
+  ZapIcon,
+} from '@primer/octicons-react'
+import {ActionList} from '../ActionList'
+import {ActionMenu} from '../ActionMenu'
+import {Button, IconButton} from '../Button'
+import CounterLabel from '../CounterLabel'
+import {Dialog} from '../Dialog'
+import FormControl from '../FormControl'
+import Heading from '../Heading'
+import {NavList} from '../NavList'
+import {PageLayout} from '../PageLayout'
+import {PortalContext, registerPortalRoot} from '../Portal'
+import Textarea from '../Textarea'
+import TextInput from '../TextInput'
+import {
+  noodlesPages,
+  noodlesProjectCover,
+  noodlesProjectPages,
+  noodlesReports,
+  noodlesStatusSections,
+} from './NoodlesPage.fixtures'
+import type {NoodlesPageFixture} from './NoodlesPage.fixtures'
+import classes from './NoodlesPage.stories.module.css'
+import theme from './NoodlesPage.theme.module.css'
+
+const meta = {
+  title: 'Examples/Noodles page',
+  globals: {colorScheme: 'light'},
+  parameters: {
+    layout: 'fullscreen',
+    controls: {disable: true},
+    docs: {
+      description: {
+        component:
+          'PageLayout provides the sidebar, document and comments regions. The native resizable sidebar supports dragging and keyboard resizing from 240px to 480px, preserves its width through navigation toggles and focus mode, and resets to 312px on double-click or reload. ' +
+          'A standalone Noodles-inspired workspace with a fixed, page-scoped Noodles theme. NoodlesPage.theme.module.css owns theme tokens and component overrides, including the transparent sidebar divider; NoodlesPage.stories.module.css owns the story layout, scrolling and responsive regions. Five optional ActionList and Button styling hooks provide its label typography and button typography; existing semantic tokens handle the remaining colors and selection styling. Menus and dialogs inherit the same theme through a registered portal container. Navigation, page creation, comments, attachments, reading width, focus mode and Markdown preview work locally with original fictional report fixtures. No account connection, remote writes or persistence. Reloading resets the demo.',
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+type UtilityDialog = 'agent' | 'settings' | 'attachments' | null
+type EditDialog = 'new' | 'rename' | null
+const initialPages = [noodlesProjectCover, ...noodlesProjectPages, ...noodlesPages]
+
+function NoodleCover() {
+  return <span className={classes.NoodleCover} aria-hidden="true" />
+}
+
+function DemoAvatar() {
+  return (
+    <span className={classes.Avatar} aria-hidden="true">
+      M
+    </span>
+  )
+}
+
+function NoodleSwitcherIcon() {
+  return (
+    <span className={classes.CoverChevron} aria-hidden="true">
+      <ChevronDownIcon size={12} />
+    </span>
+  )
+}
+
+function NoodlesPage() {
+  const [pages, setPages] = useState([...initialPages])
+  const [selectedId, setSelectedId] = useState('status-updates')
+  const [reportIndex, setReportIndex] = useState(0)
+  const [sidebarVisible, setSidebarVisible] = useState(true)
+  const [sidebarWidth, setSidebarWidth] = useState(312)
+  const [focusMode, setFocusMode] = useState(false)
+  const [wide, setWide] = useState(false)
+  const [markdown, setMarkdown] = useState(false)
+  const [commentsOpen, setCommentsOpen] = useState(false)
+  const [notesByPage, setNotesByPage] = useState<Record<string, string[]>>({})
+  const [noteDraft, setNoteDraft] = useState('')
+  const [utilityDialog, setUtilityDialog] = useState<UtilityDialog>(null)
+  const [editDialog, setEditDialog] = useState<EditDialog>(null)
+  const [draftTitle, setDraftTitle] = useState('')
+  const [titleError, setTitleError] = useState(false)
+  const [attachmentsByPage, setAttachmentsByPage] = useState<Record<string, string[]>>({})
+  const [deliveryGroup, setDeliveryGroup] = useState('Third slice')
+  const [notice, setNotice] = useState('')
+  const [reportTitles, setReportTitles] = useState<Record<string, string>>({})
+  const id = useId()
+  const nextId = useRef(0)
+  const titleRef = useRef<HTMLInputElement>(null)
+  const selected = pages.find(page => page.id === selectedId)
+  if (!selected) throw new Error(`Unknown local Noodles page: ${selectedId}`)
+  const reportDate = noodlesReports.find((_, index) => index === reportIndex)
+  if (!reportDate) throw new Error(`Unknown local Noodles report: ${reportIndex}`)
+  const isReport = selected.id === 'status-updates'
+  const pageKey = isReport ? reportDate : selected.id
+  const notes = notesByPage[pageKey] ?? []
+  const attachments = attachmentsByPage[pageKey] ?? []
+  const title = isReport ? (reportTitles[reportDate] ?? reportDate) : selected.title
+  const markdownPreview = [
+    `# ${title}`,
+    '',
+    isReport ? `## Week ${12 - reportIndex}: Rollout readiness` : `## ${selected.title}`,
+    '',
+    'Demo notes for the Octoinvaders Ink Shield team.',
+    ...noodlesStatusSections.flatMap(section => [
+      '',
+      `## ${section.heading}`,
+      '',
+      ...(section.items?.map(item => `- ${item}`) ?? [section.paragraph]),
+    ]),
+  ].join('\n')
+
+  function openEditor(mode: EditDialog) {
+    setDraftTitle(mode === 'rename' ? title : '')
+    setTitleError(false)
+    setEditDialog(mode)
+  }
+
+  function addPage(pageTitle: string, parentId?: string) {
+    const page = {id: `${id}-page-${nextId.current++}`, title: pageTitle, parentId}
+    setPages(current => [...current, page])
+    setSelectedId(page.id)
+    setNotice(`Created "${pageTitle}" locally. Nothing was saved remotely.`)
+  }
+
+  function reset() {
+    setPages([...initialPages])
+    setSelectedId('status-updates')
+    setReportIndex(0)
+    setReportTitles({})
+    setNotesByPage({})
+    setAttachmentsByPage({})
+    setNoteDraft('')
+    setMarkdown(false)
+    setNotice('Local pages, comments and attachments reset.')
+  }
+
+  function openCover() {
+    setSelectedId('project-cover')
+    setMarkdown(false)
+  }
+
+  function renderPage(page: NoodlesPageFixture) {
+    return (
+      <NavList.Item
+        key={page.id}
+        href={`#${id}-${page.id}`}
+        aria-current={selectedId === page.id ? 'page' : undefined}
+        onClick={event => {
+          event.preventDefault()
+          setSelectedId(page.id)
+          setMarkdown(false)
+        }}
+      >
+        {page.title}
+        {page.count !== undefined && (
+          <NavList.TrailingVisual>
+            <CounterLabel className={theme.Count} title={`${page.count} pages`}>
+              {page.count}
+            </CounterLabel>
+          </NavList.TrailingVisual>
+        )}
+      </NavList.Item>
+    )
+  }
+
+  return (
+    <div className={classes.Workspace} data-sidebar={sidebarVisible && !focusMode} data-comments={commentsOpen}>
+      <PageLayout className={classes.Layout} containerWidth="full" padding="none" rowGap="none" columnGap="none">
+        {sidebarVisible && !focusMode && (
+          <PageLayout.Sidebar
+            className={clsx(classes.SidebarRegion, theme.SidebarRegion)}
+            aria-label="Page navigation"
+            resizable
+            width={{min: '240px', default: '312px', max: '480px'}}
+            currentWidth={sidebarWidth}
+            onResizeEnd={setSidebarWidth}
+          >
+            <aside className={classes.Sidebar} aria-label="Page navigation">
+              <div className={classes.Brand}>
+                <span className={classes.Wordmark}>
+                  <LinkIcon size={16} /> Noodles
+                </span>
+                <IconButton
+                  icon={SidebarCollapseIcon}
+                  variant="invisible"
+                  size="small"
+                  className={theme.NavigationToggle}
+                  aria-label="Hide page navigation"
+                  onClick={() => setSidebarVisible(false)}
+                />
+              </div>
+              <div className={classes.Project}>
+                <ActionMenu>
+                  <ActionMenu.Anchor>
+                    <IconButton
+                      icon={NoodleSwitcherIcon}
+                      variant="invisible"
+                      size="small"
+                      className={theme.ProjectSwitch}
+                      aria-label="Switch noodle"
+                    />
+                  </ActionMenu.Anchor>
+                  <ActionMenu.Overlay className={theme.MenuOverlay}>
+                    <ActionList selectionVariant="single">
+                      <ActionList.Group>
+                        <ActionList.GroupHeading>Favourite noodles</ActionList.GroupHeading>
+                        <ActionList.Item selected onSelect={openCover}>
+                          {noodlesProjectCover.title}
+                        </ActionList.Item>
+                      </ActionList.Group>
+                    </ActionList>
+                  </ActionMenu.Overlay>
+                </ActionMenu>
+                <Button
+                  as="a"
+                  href={`#${id}-document`}
+                  aria-label={`Open ${noodlesProjectCover.title} cover`}
+                  className={theme.ProjectCoverLink}
+                  variant="invisible"
+                  leadingVisual={NoodleCover}
+                  block
+                  alignContent="start"
+                  onClick={event => {
+                    event.preventDefault()
+                    openCover()
+                  }}
+                >
+                  {noodlesProjectCover.title}
+                </Button>
+                <ActionMenu>
+                  <ActionMenu.Anchor>
+                    <IconButton
+                      icon={PlusIcon}
+                      variant="invisible"
+                      size="small"
+                      className={theme.ProjectCreate}
+                      aria-label="Create"
+                    />
+                  </ActionMenu.Anchor>
+                  <ActionMenu.Overlay className={theme.MenuOverlay}>
+                    <ActionList>
+                      <ActionList.Item onSelect={() => openEditor('new')}>
+                        New page
+                        <ActionList.Description variant="block">Create content</ActionList.Description>
+                      </ActionList.Item>
+                    </ActionList>
+                  </ActionMenu.Overlay>
+                </ActionMenu>
+              </div>
+              <div className={clsx(classes.Navigation, theme.Navigation)}>
+                <NavList aria-label="Noodle pages">
+                  <NavList.Item>
+                    {noodlesProjectCover.title}
+                    <NavList.SubNav>
+                      {pages.filter(page => page.parentId === 'project-cover').map(renderPage)}
+                    </NavList.SubNav>
+                  </NavList.Item>
+                  {pages.filter(page => page.id !== 'project-cover' && !page.parentId).map(renderPage)}
+                </NavList>
+                <Button
+                  className={theme.NewPage}
+                  variant="invisible"
+                  leadingVisual={PlusIcon}
+                  block
+                  alignContent="start"
+                  onClick={() => openEditor('new')}
+                >
+                  New page
+                </Button>
+              </div>
+              <nav className={clsx(classes.SidebarFooter, theme.SidebarFooter)} aria-label="User profile and settings">
+                <Button
+                  className={theme.SidebarAction}
+                  variant="invisible"
+                  leadingVisual={CommentDiscussionIcon}
+                  trailingAction={PlusIcon}
+                  block
+                  alignContent="start"
+                  onClick={() => setUtilityDialog('agent')}
+                >
+                  Connect agent
+                </Button>
+                <Button
+                  className={theme.SidebarAction}
+                  variant="invisible"
+                  leadingVisual={BookIcon}
+                  block
+                  alignContent="start"
+                  onClick={() => setUtilityDialog('settings')}
+                >
+                  Noodle settings
+                </Button>
+                <div className={clsx(classes.Account, theme.Account)}>
+                  <Button
+                    className={theme.AccountButton}
+                    variant="invisible"
+                    size="small"
+                    leadingVisual={DemoAvatar}
+                    alignContent="start"
+                    aria-label="Demo account settings"
+                    onClick={() => setUtilityDialog('settings')}
+                  >
+                    Mona &middot; Demo account
+                  </Button>
+                  <IconButton
+                    icon={GearIcon}
+                    variant="invisible"
+                    size="small"
+                    aria-label="App settings"
+                    onClick={() => setUtilityDialog('settings')}
+                  />
+                </div>
+              </nav>
+            </aside>
+          </PageLayout.Sidebar>
+        )}
+        <PageLayout.Content as="div" className={classes.ContentRegion} width="full" padding="none">
+          <div className={classes.PagePanel} data-focus={focusMode} data-wide={wide}>
+            <header className={classes.Header}>
+              {(!sidebarVisible || focusMode) && (
+                <IconButton
+                  icon={SidebarExpandIcon}
+                  variant="invisible"
+                  size="small"
+                  aria-label="Show page navigation"
+                  onClick={() => {
+                    setSidebarVisible(true)
+                    setFocusMode(false)
+                  }}
+                />
+              )}
+              {selected.id === 'project-cover' && (
+                <IconButton icon={HomeIcon} variant="invisible" aria-label="Open noodle cover" onClick={openCover} />
+              )}
+              <div className={clsx(classes.Breadcrumb, theme.Breadcrumb)} role="group" aria-label="Current page">
+                <Button
+                  variant="invisible"
+                  size="small"
+                  leadingVisual={CodeSquareIcon}
+                  onClick={() => {
+                    setSelectedId('status-updates')
+                    setReportIndex(0)
+                  }}
+                >
+                  {isReport ? 'Status updates' : 'Workspace'}
+                </Button>
+                <span className={classes.Muted} aria-hidden="true">
+                  /
+                </span>
+                {isReport ? (
+                  <ActionMenu>
+                    <ActionMenu.Button size="small" variant="invisible">
+                      {title}
+                    </ActionMenu.Button>
+                    <ActionMenu.Overlay className={theme.MenuOverlay} width="medium">
+                      <ActionList selectionVariant="single">
+                        {noodlesReports.map((report, index) => (
+                          <ActionList.Item
+                            key={report}
+                            selected={reportIndex === index}
+                            onSelect={() => setReportIndex(index)}
+                          >
+                            {report}
+                          </ActionList.Item>
+                        ))}
+                      </ActionList>
+                    </ActionMenu.Overlay>
+                  </ActionMenu>
+                ) : (
+                  <span className={classes.CurrentTitle}>{title}</span>
+                )}
+                <ActionMenu>
+                  <ActionMenu.Anchor>
+                    <IconButton icon={KebabHorizontalIcon} aria-label="Page actions" size="small" variant="invisible" />
+                  </ActionMenu.Anchor>
+                  <ActionMenu.Overlay className={theme.MenuOverlay}>
+                    <ActionList>
+                      <ActionList.Item onSelect={() => openEditor('rename')}>
+                        <ActionList.LeadingVisual>
+                          <PencilIcon />
+                        </ActionList.LeadingVisual>
+                        Rename page
+                      </ActionList.Item>
+                      <ActionList.Item onSelect={() => addPage(`${title} (copy)`, selected.parentId)}>
+                        <ActionList.LeadingVisual>
+                          <CopyIcon />
+                        </ActionList.LeadingVisual>
+                        Duplicate page
+                      </ActionList.Item>
+                      <ActionList.Divider />
+                      <ActionList.Item onSelect={reset}>
+                        <ActionList.LeadingVisual>
+                          <SyncIcon />
+                        </ActionList.LeadingVisual>
+                        Reset local changes
+                      </ActionList.Item>
+                    </ActionList>
+                  </ActionMenu.Overlay>
+                </ActionMenu>
+                <IconButton
+                  icon={PlusIcon}
+                  size="small"
+                  variant="invisible"
+                  aria-label="Add tab"
+                  onClick={() => openEditor('new')}
+                />
+              </div>
+              <div className={classes.HeaderActions}>
+                <IconButton
+                  icon={CommentIcon}
+                  size="small"
+                  variant="invisible"
+                  aria-label="Page comments"
+                  aria-expanded={commentsOpen}
+                  aria-controls={`${id}-comments`}
+                  onClick={() => setCommentsOpen(value => !value)}
+                />
+                <div className={classes.SecondaryActions}>
+                  <IconButton
+                    icon={PaperclipIcon}
+                    size="small"
+                    variant="invisible"
+                    aria-label="Page attachments"
+                    onClick={() => setUtilityDialog('attachments')}
+                  />
+                  <IconButton
+                    icon={ZapIcon}
+                    size="small"
+                    variant="invisible"
+                    aria-label="Page automation"
+                    onClick={() => setUtilityDialog('agent')}
+                  />
+                  <IconButton
+                    icon={CommentDiscussionIcon}
+                    size="small"
+                    variant="invisible"
+                    aria-label="Open assistant"
+                    onClick={() => setUtilityDialog('agent')}
+                  />
+                </div>
+                <IconButton
+                  icon={ScreenFullIcon}
+                  size="small"
+                  variant="invisible"
+                  aria-label="Focus mode"
+                  aria-pressed={focusMode}
+                  onClick={() => setFocusMode(value => !value)}
+                />
+                <span className={classes.HeaderDivider} />
+                <IconButton
+                  icon={ArrowUpIcon}
+                  size="small"
+                  variant="invisible"
+                  aria-label="Previous report"
+                  disabled={!isReport || reportIndex === noodlesReports.length - 1}
+                  onClick={() => setReportIndex(index => index + 1)}
+                />
+                <IconButton
+                  icon={ArrowDownIcon}
+                  size="small"
+                  variant="invisible"
+                  aria-label="Next report"
+                  disabled={!isReport || reportIndex === 0}
+                  onClick={() => setReportIndex(index => index - 1)}
+                />
+              </div>
+            </header>
+            <main id={`${id}-document`} className={classes.ScrollArea} aria-label="Noodles document" tabIndex={0}>
+              <article className={classes.Document}>
+                {markdown ? (
+                  <Textarea block readOnly rows={28} aria-label="Markdown preview" value={markdownPreview} />
+                ) : (
+                  <>
+                    <Heading as="h1" className={theme.Title}>
+                      {title}
+                    </Heading>
+                    <section className={classes.Introduction}>
+                      <Heading as="h2" className={theme.SectionHeading}>
+                        {isReport ? `Week ${12 - reportIndex}: Rollout readiness` : selected.title}
+                      </Heading>
+                      <p>
+                        {isReport
+                          ? 'Demo weekly report for the Octoinvaders Ink Shield team.'
+                          : 'A local planning page for the Octoinvaders Ink Shield project.'}
+                      </p>
+                    </section>
+                    {noodlesStatusSections.map((section, index) => (
+                      <section className={classes.Section} key={section.heading}>
+                        <span className={classes.BlockHandle} aria-hidden="true">
+                          <GrabberIcon size={16} />
+                        </span>
+                        <Heading as="h2" className={theme.SectionHeading}>
+                          {section.heading}
+                        </Heading>
+                        {section.items ? (
+                          <ul>
+                            {section.items.map(item => (
+                              <li key={item}>{item}</li>
+                            ))}
+                          </ul>
+                        ) : (
+                          <p>{section.paragraph}</p>
+                        )}
+                        {!isReport && index === 0 && (
+                          <p className={classes.Muted}>Use the page menu to rename or duplicate this fixture.</p>
+                        )}
+                      </section>
+                    ))}
+                  </>
+                )}
+              </article>
+            </main>
+            <footer className={classes.EditorFooter}>
+              <Button
+                variant="invisible"
+                size="small"
+                leadingVisual={PencilIcon}
+                aria-label={markdown ? 'Switch to Rich text' : 'Switch to Markdown'}
+                onClick={() => setMarkdown(value => !value)}
+              >
+                {markdown ? 'Markdown' : 'Rich text'}
+              </Button>
+              <ActionMenu>
+                <ActionMenu.Anchor>
+                  <IconButton icon={KebabHorizontalIcon} variant="invisible" size="small" aria-label="Editor options" />
+                </ActionMenu.Anchor>
+                <ActionMenu.Overlay className={theme.MenuOverlay}>
+                  <ActionList selectionVariant="single">
+                    <ActionList.Item selected={!wide} onSelect={() => setWide(false)}>
+                      Comfortable width
+                    </ActionList.Item>
+                    <ActionList.Item selected={wide} onSelect={() => setWide(true)}>
+                      Wide page
+                    </ActionList.Item>
+                  </ActionList>
+                </ActionMenu.Overlay>
+              </ActionMenu>
+              <span className={classes.Notice} role="status">
+                {notice}
+              </span>
+              <ActionMenu>
+                <ActionMenu.Button size="small">{deliveryGroup}</ActionMenu.Button>
+                <ActionMenu.Overlay className={theme.MenuOverlay}>
+                  <ActionList selectionVariant="single">
+                    {['First slice', 'Second slice', 'Third slice'].map(group => (
+                      <ActionList.Item
+                        key={group}
+                        selected={deliveryGroup === group}
+                        onSelect={() => setDeliveryGroup(group)}
+                      >
+                        {group}
+                      </ActionList.Item>
+                    ))}
+                  </ActionList>
+                </ActionMenu.Overlay>
+              </ActionMenu>
+              <IconButton
+                icon={SyncIcon}
+                size="small"
+                variant="invisible"
+                aria-label="Reset prototype data"
+                onClick={reset}
+              />
+            </footer>
+          </div>
+        </PageLayout.Content>
+        {commentsOpen && (
+          <PageLayout.Pane
+            className={classes.CommentsRegion}
+            position="end"
+            width={{min: '0px', default: '320px', max: '320px'}}
+            padding="none"
+            aria-label="Page comments"
+          >
+            <aside className={classes.Comments} id={`${id}-comments`} aria-label="Page comments">
+              <Heading as="h2" className={theme.SectionHeading}>
+                Comments
+              </Heading>
+              <p className={classes.Muted}>Local demo notes only. Nothing is sent to the reference app.</p>
+              {notes.length ? (
+                <ul>
+                  {notes.map((note, index) => (
+                    <li key={`${index}-${note}`}>{note}</li>
+                  ))}
+                </ul>
+              ) : (
+                <p>No comments yet.</p>
+              )}
+              <form
+                onSubmit={event => {
+                  event.preventDefault()
+                  const note = noteDraft.trim()
+                  if (!note) {
+                    setNotice('Enter a comment before posting.')
+                    return
+                  }
+                  setNotesByPage(current => ({...current, [pageKey]: [...(current[pageKey] ?? []), note]}))
+                  setNoteDraft('')
+                }}
+              >
+                <FormControl>
+                  <FormControl.Label>Add a comment</FormControl.Label>
+                  <Textarea block rows={4} value={noteDraft} onChange={event => setNoteDraft(event.target.value)} />
+                </FormControl>
+                <Button type="submit" variant="primary" disabled={!noteDraft.trim()}>
+                  Comment
+                </Button>
+              </form>
+            </aside>
+          </PageLayout.Pane>
+        )}
+      </PageLayout>
+      {editDialog && (
+        <Dialog
+          title={editDialog === 'new' ? 'New page' : 'Rename page'}
+          onClose={() => setEditDialog(null)}
+          initialFocusRef={titleRef}
+          footerButtons={[
+            {content: 'Cancel', onClick: () => setEditDialog(null)},
+            {
+              content: editDialog === 'new' ? 'Create page' : 'Save title',
+              buttonType: 'primary',
+              type: 'submit',
+              form: `${id}-page-form`,
+            },
+          ]}
+        >
+          <form
+            id={`${id}-page-form`}
+            onSubmit={event => {
+              event.preventDefault()
+              const value = draftTitle.trim()
+              if (!value) {
+                setTitleError(true)
+                titleRef.current?.focus()
+                return
+              }
+              if (editDialog === 'new') addPage(value)
+              else if (isReport) setReportTitles(current => ({...current, [reportDate]: value}))
+              else setPages(current => current.map(page => (page.id === selectedId ? {...page, title: value} : page)))
+              setEditDialog(null)
+            }}
+          >
+            <FormControl required>
+              <FormControl.Label>Page title</FormControl.Label>
+              <TextInput
+                block
+                ref={titleRef}
+                value={draftTitle}
+                onChange={event => {
+                  setDraftTitle(event.target.value)
+                  setTitleError(false)
+                }}
+              />
+              {titleError && <FormControl.Validation variant="error">Enter a page title.</FormControl.Validation>}
+              <FormControl.Caption>Stored in this demo until reload.</FormControl.Caption>
+            </FormControl>
+          </form>
+        </Dialog>
+      )}
+      {utilityDialog && (
+        <Dialog
+          title={
+            utilityDialog === 'attachments'
+              ? 'Page attachments'
+              : utilityDialog === 'agent'
+                ? 'Connect agent'
+                : 'Noodle settings'
+          }
+          onClose={() => setUtilityDialog(null)}
+        >
+          {utilityDialog === 'attachments' ? (
+            <>
+              {attachments.length ? (
+                <ul>
+                  {attachments.map(name => (
+                    <li key={name}>{name}</li>
+                  ))}
+                </ul>
+              ) : (
+                <p>No attachments yet.</p>
+              )}
+              <Button
+                leadingVisual={LinkIcon}
+                onClick={() =>
+                  setAttachmentsByPage(current => ({
+                    ...current,
+                    [pageKey]: [...(current[pageKey] ?? []), `demo-notes-${attachments.length + 1}.txt`],
+                  }))
+                }
+              >
+                Add demo attachment
+              </Button>
+              <p className={classes.Muted}>Names only; no files are read, uploaded or downloaded.</p>
+            </>
+          ) : utilityDialog === 'agent' ? (
+            <p>
+              This prototype does not connect to an agent or request credentials. Try creating local pages and comments
+              instead.
+            </p>
+          ) : (
+            <>
+              <p>
+                This is a local demo of the Octoinvaders &middot; Ink Shield workspace. Changes stay in this story until
+                you reload or reset the demo.
+              </p>
+              <Button
+                onClick={() => {
+                  reset()
+                  setUtilityDialog(null)
+                }}
+              >
+                Reset local demo
+              </Button>
+            </>
+          )}
+        </Dialog>
+      )}
+    </div>
+  )
+}
+
+function NoodlesStory() {
+  const portalContainerName = useId()
+  const portalContext = useMemo(() => ({portalContainerName}), [portalContainerName])
+
+  return (
+    <PortalContext.Provider value={portalContext}>
+      <div className={clsx(classes.Page, theme.NoodlesTheme)}>
+        <div className={classes.Surface}>
+          <NoodlesPage />
+        </div>
+        <div
+          className={classes.ThemePortals}
+          ref={node => {
+            if (node) registerPortalRoot(node, portalContainerName)
+          }}
+        />
+      </div>
+    </PortalContext.Provider>
+  )
+}
+
+export const Default: Story = {
+  render: () => <NoodlesStory />,
+}
diff --git a/packages/react/src/stories/NoodlesPage.theme.module.css b/packages/react/src/stories/NoodlesPage.theme.module.css
new file mode 100644
index 00000000000..803b073f128
--- /dev/null
+++ b/packages/react/src/stories/NoodlesPage.theme.module.css
@@ -0,0 +1,237 @@
+.NoodlesTheme {
+  --fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --fontStack-sansSerif: var(--fontStack-system);
+  --fontStack-sansSerifDisplay: var(--fontStack-system);
+  --text-body-size-small: 13px;
+  --text-body-size-medium: 16px;
+  --text-body-size-large: 18px;
+  --text-body-lineHeight-medium: 1.7;
+  --text-body-weight: 400;
+  --base-text-weight-normal: 400;
+  --base-text-weight-medium: 500;
+  --base-text-weight-semibold: 500;
+  --text-title-size-small: 20px;
+  --text-title-size-medium: 24px;
+  --text-title-size-large: 36px;
+  --text-title-weight-small: 600;
+  --text-title-weight-medium: 600;
+  --text-title-weight-large: 500;
+  --text-title-lineHeight-medium: 1.292;
+  --text-title-lineHeight-large: 1.105;
+  --borderRadius-default: 6px;
+  --borderRadius-small: 4px;
+  --borderRadius-medium: 8px;
+  --borderRadius-large: 16px;
+  --bgColor-default: #fff;
+  --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #fff;
+  --bgColor-emphasis: #1f2328;
+  --fgColor-default: #1f2328;
+  --fgColor-muted: #59636e;
+  --borderColor-default: #d1d9e0;
+  --control-fgColor-rest: var(--fgColor-default);
+  --control-transparent-bgColor-hover: color-mix(in srgb, #1f2328 8%, transparent);
+  --control-transparent-bgColor-active: color-mix(in srgb, #1f2328 13%, transparent);
+  --control-transparent-bgColor-selected: #e7ecf0;
+  --ActionList--label-fontSize-medium: 13px;
+  --ActionList--label-fontWeight-selected: 400;
+  --ActionList--label-fgColor: #59636e;
+  --Button--fontWeight: 400;
+  --Button--fontSize-medium: var(--text-body-size-small);
+  --button-invisible-bgColor-active: transparent;
+  --button-invisible-bgColor-hover: color-mix(in srgb, #1f2328 8%, transparent);
+  --button-default-fgColor-rest: var(--fgColor-default);
+  --button-default-bgColor-rest: #fff;
+  --button-default-bgColor-hover: #eaeef2;
+  --button-default-bgColor-active: #eaeef2;
+  --button-default-shadow-resting: none;
+  --button-primary-bgColor-rest: #1f2328;
+  --button-primary-bgColor-hover: #1f2328;
+  --button-primary-bgColor-active: #1f2328;
+  --button-primary-fgColor-rest: #fff;
+  --button-primary-borderColor-rest: #1f2328;
+  --control-borderColor-rest: #818b98;
+  --NoodlesPage--header-minHeight: calc(var(--control-large-size) + var(--base-size-8));
+  --NoodlesPage--project-paddingInline: calc(var(--base-size-8) + var(--borderWidth-thin));
+  --NoodlesPage--project-bgColor-hover: #e7ecf0;
+  --NoodlesPage--wordmark-fontSize: var(--base-size-12);
+  --NoodlesPage--wordmark-lineHeight: var(--base-size-16);
+
+  font-family: var(--fontStack-system);
+  font-size: var(--text-body-size-medium);
+  line-height: var(--text-body-lineHeight-medium);
+
+  .Navigation {
+    --borderColor-accent-emphasis: transparent;
+  }
+
+  .ProjectCoverLink {
+    font-weight: var(--base-text-weight-medium);
+  }
+}
+
+/* Hide the permanent line without removing PageLayout's resize target. */
+.SidebarRegion > [data-component='PageLayout.VerticalDivider'] {
+  background-color: transparent;
+}
+
+.NavigationToggle {
+  width: var(--control-xsmall-size);
+  height: var(--control-xsmall-size);
+}
+
+.ProjectCoverLink {
+  width: calc(100% - var(--base-size-32));
+  height: 100%;
+  padding-inline: var(--NoodlesPage--project-paddingInline, var(--control-medium-paddingInline-normal));
+}
+
+.ProjectCoverLink:where(:hover) {
+  background-color: transparent;
+}
+
+.ProjectSwitch {
+  position: absolute;
+  top: calc((var(--control-large-size) - var(--control-small-size)) / 2);
+  left: calc(
+    var(--NoodlesPage--project-paddingInline, var(--control-medium-paddingInline-normal)) + var(--borderWidth-thin) -
+      var(--base-size-6)
+  );
+  z-index: 1;
+}
+
+.ProjectCreate {
+  position: absolute;
+  top: calc((var(--control-large-size) - var(--control-xsmall-size)) / 2);
+  right: var(--base-size-8);
+  width: var(--control-xsmall-size);
+  height: var(--control-xsmall-size);
+}
+
+.SidebarFooter .SidebarAction,
+.Navigation .NewPage {
+  min-width: 0;
+  height: var(--control-medium-size);
+  min-height: var(--control-medium-size);
+  padding: var(--base-size-6) var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--base-size-20);
+  border: 0;
+}
+
+.SidebarAction [data-component='leadingVisual'],
+.NewPage [data-component='leadingVisual'] {
+  margin-inline-end: var(--base-size-6);
+}
+
+.SidebarFooter [data-component='text'],
+.NewPage [data-component='text'] {
+  line-height: var(--base-size-20);
+}
+
+.SidebarAction [data-component='trailingAction'] svg,
+.NewPage [data-component='leadingVisual'] svg {
+  width: calc(var(--base-size-16) - var(--base-size-2));
+  height: calc(var(--base-size-16) - var(--base-size-2));
+}
+
+.Navigation .NewPage {
+  margin-top: var(--base-size-2);
+  color: var(--fgColor-muted);
+  opacity: 0.5;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--fgColor-default);
+    background: transparent;
+    opacity: 1;
+  }
+}
+
+.Navigation .Count {
+  min-width: calc(var(--base-size-16) + var(--base-size-2));
+  height: calc(var(--base-size-16) + var(--base-size-2));
+  padding: 0 calc(var(--base-size-4) + var(--borderWidth-thin));
+  font-size: calc(var(--text-body-size-small) - var(--base-size-2));
+  font-weight: var(--base-text-weight-normal);
+  font-variant-numeric: tabular-nums;
+  line-height: calc(var(--base-size-16) + var(--base-size-2));
+  color: var(--fgColor-muted);
+  background: rgb(129 139 152 / 0.11);
+  border: 0;
+  border-radius: var(--borderRadius-full);
+}
+
+.MenuOverlay {
+  background: var(--bgColor-default);
+  border-radius: min(var(--borderRadius-large), var(--base-size-12));
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--borderColor-default) 50%, transparent),
+    0 6px 12px -3px rgb(26 26 26 / 0.04),
+    0 6px 18px rgb(26 26 26 / 0.12);
+
+  [data-component='ActionList'] {
+    padding: var(--base-size-4);
+  }
+
+  [data-component='ActionList.Item'] {
+    margin-inline: 0;
+
+    > [data-size] {
+      padding: var(--base-size-4) var(--base-size-8);
+    }
+  }
+
+  [data-component='ActionList.Item.Label'] {
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-normal);
+    line-height: var(--base-size-20);
+    color: var(--fgColor-default);
+  }
+
+  [data-component='ActionList.Divider'] {
+    margin: var(--base-size-4) var(--base-size-8);
+  }
+}
+
+.Account .AccountButton {
+  flex: 1;
+  min-width: 0;
+  height: var(--control-small-size);
+  padding: 0 var(--base-size-4);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--base-size-20);
+}
+
+.Title {
+  margin: 0;
+  font-size: var(--text-title-size-large);
+  font-weight: var(--text-title-weight-large);
+  line-height: var(--text-title-lineHeight-large);
+  overflow-wrap: anywhere;
+}
+
+.SectionHeading {
+  margin: 0;
+  font-size: var(--text-title-size-medium);
+  font-weight: var(--text-title-weight-medium);
+  line-height: var(--text-title-lineHeight-medium);
+  overflow-wrap: anywhere;
+}
+
+.Breadcrumb > button {
+  min-width: 0;
+  max-width: 240px;
+}
+
+@media (max-width: 767px) {
+  .SidebarRegion > [data-component='PageLayout.VerticalDivider'] {
+    display: none;
+  }
+
+  .Breadcrumb > button {
+    max-width: 144px;
+  }
+}