diff --git a/components/appframe/README.md b/components/appframe/README.md
new file mode 100644
index 00000000000..b598e7cdebf
--- /dev/null
+++ b/components/appframe/README.md
@@ -0,0 +1,7 @@
+# @spectrum-css/appframe
+
+> The Spectrum CSS app frame component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/appframe).
diff --git a/components/appframe/dist/metadata.json b/components/appframe/dist/metadata.json
new file mode 100644
index 00000000000..5b382893818
--- /dev/null
+++ b/components/appframe/dist/metadata.json
@@ -0,0 +1,67 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [
+    ".spectrum--dark .spectrum-AppFrame",
+    ".spectrum-AppFrame",
+    ".spectrum-AppFrame--noSideNav",
+    ".spectrum-AppFrame-content",
+    ".spectrum-AppFrame-content .spectrum-AppFrame-section:last-of-type",
+    ".spectrum-AppFrame-content > main",
+    ".spectrum-AppFrame-content--rounded",
+    ".spectrum-AppFrame-content--rounded .spectrum-AppFrame-section:last-of-type",
+    ".spectrum-AppFrame-content-intro",
+    ".spectrum-AppFrame-header",
+    ".spectrum-AppFrame-section",
+    ".spectrum-AppFrame-section + .spectrum-AppFrame-section",
+    ".spectrum-AppFrame-section .spectrum-AppFrame-section-heading",
+    ".spectrum-AppFrame-section-grid",
+    ".spectrum-AppFrame-section-grid > .spectrum-AppFrame-section-grid-item--wide",
+    ".spectrum-AppFrame-section-grid:is(ul)",
+    ".spectrum-AppFrame-section-inner > .spectrum-Body",
+    ".spectrum-AppFrame-section-inner > .spectrum-Heading",
+    ".spectrum-AppFrame-section-inner:not(:last-child)",
+    ".spectrum-AppFrame-side-nav"
+  ],
+  "modifiers": [
+    "--mod-app-frame-background",
+    "--mod-app-frame-content-background",
+    "--mod-app-frame-content-corner-radius",
+    "--mod-app-frame-header-height",
+    "--mod-app-frame-intro-background",
+    "--mod-app-frame-max-readable-characters",
+    "--mod-app-frame-section-grid-gap",
+    "--mod-app-frame-section-inner-area-vertical-gap",
+    "--mod-app-frame-section-padding"
+  ],
+  "component": [
+    "--spectrum-app-frame-background",
+    "--spectrum-app-frame-content-background",
+    "--spectrum-app-frame-content-corner-radius",
+    "--spectrum-app-frame-end-side-column-inline-size",
+    "--spectrum-app-frame-header-height",
+    "--spectrum-app-frame-intro-background",
+    "--spectrum-app-frame-max-readable-characters",
+    "--spectrum-app-frame-section-gap",
+    "--spectrum-app-frame-section-grid-gap",
+    "--spectrum-app-frame-section-heading-margin-block",
+    "--spectrum-app-frame-section-inner-area-vertical-gap",
+    "--spectrum-app-frame-section-padding",
+    "--spectrum-app-frame-start-side-column-inline-size",
+    "--spectrum-app-frame-to-edge"
+  ],
+  "global": [
+    "--spectrum-background-base-color",
+    "--spectrum-background-layer-1-color",
+    "--spectrum-component-height-400",
+    "--spectrum-corner-radius-extra-large-default",
+    "--spectrum-spacing-200",
+    "--spectrum-spacing-300",
+    "--spectrum-spacing-400",
+    "--spectrum-spacing-600"
+  ],
+  "passthroughs": [],
+  "high-contrast": [
+    "--highcontrast-app-frame-background",
+    "--highcontrast-app-frame-content-background"
+  ]
+}
diff --git a/components/appframe/index.css b/components/appframe/index.css
new file mode 100644
index 00000000000..121646c1d61
--- /dev/null
+++ b/components/appframe/index.css
@@ -0,0 +1,165 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+.spectrum-AppFrame {
+	--spectrum-app-frame-background: var(--spectrum-background-layer-1-color);
+	--spectrum-app-frame-content-background: var(--spectrum-background-base-color);
+	--spectrum-app-frame-intro-background: linear-gradient(93.59deg, #ffeccf 0%, #ffa213 63%, #ff709f 100%);
+
+	--spectrum-app-frame-content-corner-radius: var(--spectrum-corner-radius-extra-large-default);
+
+	--spectrum-app-frame-section-gap: var(--spectrum-spacing-200);
+	--spectrum-app-frame-to-edge: var(--spectrum-spacing-200);
+	--spectrum-app-frame-section-padding: var(--spectrum-spacing-400) var(--spectrum-spacing-600) var(--spectrum-spacing-600);
+
+	--spectrum-app-frame-header-height: var(--spectrum-component-height-400);
+
+	--spectrum-app-frame-start-side-column-inline-size: minmax(var(--spectrum-component-height-400), max-content);
+	--spectrum-app-frame-end-side-column-inline-size: var(--spectrum-app-frame-to-edge);
+
+	--spectrum-app-frame-section-grid-gap: var(--spectrum-spacing-300);
+	--spectrum-app-frame-section-heading-margin-block: 0px var(--spectrum-spacing-400);
+	--spectrum-app-frame-section-inner-area-vertical-gap: var(--spectrum-spacing-600);
+
+	/* To-do: not sure about the best way to include this limit and where to apply. */
+	--spectrum-app-frame-max-readable-characters: 80ch;
+
+	/* To-do: For demo purposes only; would not convert to SWC. They would need a way of providing different gradients for light/dark. */
+	.spectrum--dark & {
+		--spectrum-app-frame-intro-background: linear-gradient(94.13deg, #003041 0%, #03638c 100%);
+	}
+}
+
+.spectrum-AppFrame {
+	background: var(--highcontrast-app-frame-background, var(--mod-app-frame-background, var(--spectrum-app-frame-background)));
+	inline-size: 100%;
+	block-size: 100vh;
+	position: relative;
+	display: grid;
+	grid-template-areas:
+		"head head head"
+		"side main endside";
+	grid-template-rows: var(--mod-app-frame-header-height, var(--spectrum-app-frame-header-height)) 1fr;
+	grid-template-columns: var(--spectrum-app-frame-start-side-column-inline-size) 1fr var(--spectrum-app-frame-end-side-column-inline-size);
+}
+
+.spectrum-AppFrame--noSideNav {
+	grid-template-columns: var(--spectrum-app-frame-to-edge) 1fr var(--spectrum-app-frame-to-edge);
+}
+
+.spectrum-AppFrame-header {
+	grid-area: head;
+}
+
+.spectrum-AppFrame-side-nav {
+	grid-area: side;
+}
+
+/* Main scrollable content area */
+.spectrum-AppFrame-content {
+	grid-area: main;
+	block-size: 100%;
+	border-radius: var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius)) var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius)) 0 0;
+	overflow: auto;
+	position: relative;
+	container-type: size;
+	container-name: app-frame-content;
+}
+
+/**
+ * <main> is a separate nested element, in order to allow the option for a document level <footer> element or another aside.
+ * To-do: provide examples with <footer>. may want to use a class like .spectrum-AppFrame-section-wrapper instead. 
+ */
+.spectrum-AppFrame-content > main {
+	min-block-size: 100%;
+	display: grid;
+	grid-template-rows: max-content 1fr;
+}
+
+/* Sections within the content area */
+.spectrum-AppFrame-section {
+	background: var(--highcontrast-app-frame-content-background, var(--mod-app-frame-content-background, var(--spectrum-app-frame-content-background)));
+	border-radius: var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius));
+	padding: var(--mod-app-frame-section-padding, var(--spectrum-app-frame-section-padding));
+
+	+ .spectrum-AppFrame-section {
+		margin-block-start: var(--spectrum-app-frame-section-gap);
+	}
+}
+
+.spectrum-AppFrame-content .spectrum-AppFrame-section:last-of-type {
+	border-radius: var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius)) var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius)) 0 0;
+}
+
+/**
+ * Rounded at the bottom and bottom rounding always visible when there is scrollable content.
+ */
+.spectrum-AppFrame-content--rounded {
+	block-size: calc(100% - var(--spectrum-app-frame-to-edge, 0px));
+	border-radius: var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius));
+
+	.spectrum-AppFrame-section:last-of-type {
+		border-radius: var(--mod-app-frame-content-corner-radius, var(--spectrum-app-frame-content-corner-radius));
+	}
+}
+
+/* Section heading */
+.spectrum-AppFrame-section .spectrum-AppFrame-section-heading {
+	margin-block: var(--spectrum-app-frame-section-heading-margin-block);
+	max-inline-size: var(--mod-app-frame-max-readable-characters, var(--spectrum-app-frame-max-readable-characters));
+}
+
+/* Section inner area; area nested within a section that is spaced out and typically has a section heading within it. */
+.spectrum-AppFrame-section-inner:not(:last-child) {
+	margin-block-end: var(--mod-app-frame-section-inner-area-vertical-gap, var(--spectrum-app-frame-section-inner-area-vertical-gap));
+}
+
+/* To-do: not sure about the best selector to apply this limit to. */
+.spectrum-AppFrame-section-inner > .spectrum-Heading,
+.spectrum-AppFrame-section-inner > .spectrum-Body {
+	max-inline-size: var(--mod-app-frame-max-readable-characters, var(--spectrum-app-frame-max-readable-characters));
+}
+
+/* Featured or onboarding intro section with with branded background */
+.spectrum-AppFrame-content-intro {
+	background: var(--mod-app-frame-intro-background, var(--spectrum-app-frame-intro-background));
+}
+
+/* Inner grid that can be used for landing page sections. */
+.spectrum-AppFrame-section-grid {
+	display: grid;
+	padding: 0;
+	margin: 0;
+
+	/* To-do: not sure about the intended responsiveness, and this should be moddable. */
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: var(--mod-app-frame-section-grid-gap, var(--spectrum-app-frame-section-grid-gap));
+
+	&:is(ul) {
+		list-style-type: none;
+	}
+}
+
+/* To-do: not sure about the intended responsiveness, and would ideally use a calculatd min-width with tokens. */
+@container (min-width: 700px) {
+	.spectrum-AppFrame-section-grid > .spectrum-AppFrame-section-grid-item--wide {
+		grid-column: span 2;
+	}
+}
+
+/* To-do: probably want some borders present on some containers for high contrast mode only. */
+@media (forced-colors: active) {
+	.spectrum-AppFrame {
+		--highcontrast-app-frame-background: Canvas;
+		--highcontrast-app-frame-content-background: Canvas;
+	}
+}
diff --git a/components/appframe/package.json b/components/appframe/package.json
new file mode 100644
index 00000000000..ee2c353f857
--- /dev/null
+++ b/components/appframe/package.json
@@ -0,0 +1,51 @@
+{
+	"name": "@spectrum-css/appframe",
+	"version": "0.1.0",
+	"description": "The Spectrum CSS app frame component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/appframe"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"exports": {
+		".": "./dist/index.css",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
+	"main": "dist/index.css",
+	"peerDependencies": {
+		"@spectrum-css/tokens": ">=16.1.0-next.0",
+		"@spectrum-css/typography": ">=9.0.0-next.0"
+	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/tokens": {
+			"optional": true
+		},
+		"@spectrum-css/typography": {
+			"optional": true
+		}
+	},
+	"keywords": [
+		"design-system",
+		"spectrum",
+		"spectrum-css",
+		"adobe",
+		"adobe-spectrum",
+		"component",
+		"css"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/components/appframe/project.json b/components/appframe/project.json
new file mode 100644
index 00000000000..0078011df39
--- /dev/null
+++ b/components/appframe/project.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "appframe",
+	"tags": ["component"],
+	"targets": {
+		"build": {},
+		"clean": {},
+		"compare": {},
+		"format": {},
+		"lint": {},
+		"report": {},
+		"test": {
+			"defaultConfiguration": "scope"
+		},
+		"validate": {}
+	}
+}
diff --git a/components/appframe/stories/appframe.stories.js b/components/appframe/stories/appframe.stories.js
new file mode 100644
index 00000000000..b378edd3afa
--- /dev/null
+++ b/components/appframe/stories/appframe.stories.js
@@ -0,0 +1,63 @@
+
+import { Template } from "./template.js";
+
+/**
+ * The app frame component is a starting point for an app's overall layout. It contains the header, side navigation, and main content area.
+ *
+ * ⚠️ This is currently an early prototype based on a draft version of design specs.
+ */
+export default {
+	title: "App frame",
+	component: "AppFrame",
+	argTypes: {
+		hasSideNavigation: {
+			name: "Has side navigation",
+			type: { name: "boolean" },
+			defaultValue: true,
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+				defaultValue: { summary: "true" },
+			},
+			control: "boolean",
+		},
+		hasMinimizedSideNav: {
+			name: "Minimized side navigation",
+			description: "Displays a horizontally minimized version of the side nav menu items where only the icon is visible.",
+			table: {
+				type: { summary: "boolean" },
+				defaultValue: { summary: false },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "hasSideNavigation" },
+		},
+		contentLayout: {
+			name: "Content layout",
+			description: "Different layout options. The options available here are a work in progress.",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["default", "rounded"],
+			control: "select",
+		},
+		items: { table: { disable: true } },
+	},
+	args: {
+		rootClass: "spectrum-AppFrame",
+		hasSideNavigation: true,
+		hasMinimizedSideNav: false,
+		contentLayout: "default",
+	},
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+
+/**
+ * Default, with side navigation
+ */
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/components/appframe/stories/appframe.test.js b/components/appframe/stories/appframe.test.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/components/appframe/stories/template.js b/components/appframe/stories/template.js
new file mode 100644
index 00000000000..ac94426e102
--- /dev/null
+++ b/components/appframe/stories/template.js
@@ -0,0 +1,170 @@
+import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
+import { Template as AppFrameSideNav } from "@spectrum-css/appframesidenav/stories/template.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
+
+import "@spectrum-css/appframe/index.css";
+
+// Example only emphasized container.
+// To-do: use actual components to replace these blocks (card, illustrated message, etc).
+const emphasizedContainerStyles = {
+	background: "var(--spectrum-background-layer-1-color)",
+	boxShadow: "var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--spectrum-drop-shadow-emphasized-default-color)",
+	minHeight: "200px",
+	borderRadius: "var(--spectrum-corner-radius-extra-large-default)",
+};
+
+export const Template = ({
+	rootClass = "spectrum-AppFrame",
+	hasSideNavigation = true,
+	hasMinimizedSideNav = false,
+	contentLayout = "default",
+	id,
+	items = [],
+	customClasses = [],
+	customStyles = {},
+}) => {
+	const [, updateArgs] = useArgs();
+
+	const sideNavigationMarkup = AppFrameSideNav({
+		isMinimized: hasMinimizedSideNav,
+		items,
+		customClasses: ["spectrum-AppFrame-side-nav"],
+	});
+
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--noSideNav`]: hasSideNavigation === false,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			style=${ifDefined(styleMap(customStyles))}
+		>
+			${headerExampleMarkup(hasMinimizedSideNav, updateArgs)}
+			${when(hasSideNavigation, () => sideNavigationMarkup)}
+			<div
+				class=${classMap({
+					[`${rootClass}-content`]: true,
+					[`${rootClass}-content--${contentLayout}`]: typeof contentLayout !== "undefined" && contentLayout !== "default",
+				})}
+			>
+				<main>
+					<section class="spectrum-AppFrame-section spectrum-AppFrame-content-intro">
+						<div class="spectrum-Typography">
+							<h1 class="spectrum-Heading spectrum-Heading--sizeM spectrum-AppFrame-section-heading">Welcome to Example App, Frodo</h1>
+							<div class="spectrum-AppFrame-section-grid">
+								<div class="spectrum-AppFrame-section-grid-item--wide" style=${styleMap(emphasizedContainerStyles)}></div>
+								${Array.from({length: 3}, () =>
+									html`<div style=${styleMap(emphasizedContainerStyles)}></div>`
+								)}
+							</div>
+						</div>
+					</section>
+					<section class="spectrum-AppFrame-section">
+						<div class="spectrum-AppFrame-section-inner">
+							${Typography({
+								semantics: "heading",
+								size: "m",
+								content: ["Start something new"],
+								customClasses: ["spectrum-AppFrame-section-heading"],
+							})}
+							<div class="spectrum-AppFrame-section-grid">
+								<div class="spectrum-AppFrame-section-grid-item--wide" style=${styleMap(emphasizedContainerStyles)}></div>
+								${Array.from({length: 3}, () =>
+									html`<div style=${styleMap(emphasizedContainerStyles)}></div>`
+								)}
+							</div>
+						</div>
+						<div class="spectrum-AppFrame-section-inner">
+							${Typography({
+								semantics: "heading",
+								size: "m",
+								content: ["Recent files"],
+								customClasses: ["spectrum-AppFrame-section-heading"],
+							})}
+							<ul class="spectrum-AppFrame-section-grid">
+								${Array.from({length: 20}, () =>
+									html`<li style=${styleMap(emphasizedContainerStyles)}></li>`
+								)}
+							</ul>
+						</div>
+						<div class="spectrum-AppFrame-section-inner spectrum-Typography">
+							${Typography({
+								semantics: "heading",
+								size: "m",
+								content: ["Another example inner area within a section"],
+								customClasses: ["spectrum-AppFrame-section-heading"],
+							})}
+							${Typography({
+								semantics: "body",
+								size: "m",
+								content: ["Lorem ipsum odor amet, consectetuer adipiscing elit. Imperdiet suscipit convallis cubilia etiam taciti nascetur ad. Eros parturient molestie curabitur dui risus arcu. Luctus dictum in ultricies nisl dolor parturient mus. Lorem ipsum odor amet, consectetuer adipiscing elit."],
+							})}
+							${Typography({
+								semantics: "body",
+								size: "m",
+								content: ["Pretium adipiscing felis facilisi sem primis primis scelerisque placerat. Facilisi mus curabitur rutrum mus, velit quisque neque vitae tempor. Efficitur mauris pharetra lectus pulvinar pulvinar sociosqu feugiat sociosqu mi. Efficitur dis est mattis interdum fermentum potenti ligula efficitur. Montes per ligula tempus aliquet tortor nam magnis nibh. Mi venenatis risus magnis nec elit eget aenean purus."],
+							})}
+							${Typography({
+								semantics: "body",
+								size: "m",
+								content: ["Nec venenatis dapibus dictum laoreet litora, pulvinar pretium mi. Accumsan eget erat euismod; nullam egestas porttitor imperdiet odio. Rhoncus gravida metus platea maecenas eleifend. Maximus dictum quis orci vehicula hac euismod lorem arcu. Velit fames fermentum montes fusce consectetur finibus diam. Ex fames eros a habitant urna molestie. Sit congue porttitor proin facilisi consectetur litora facilisi. Aliquam maecenas feugiat mi integer erat. Molestie gravida augue dapibus aenean purus maximus facilisis venenatis metus."],
+							})}
+							${Typography({
+								semantics: "body",
+								size: "m",
+								content: ["Lorem ipsum odor amet, consectetuer adipiscing elit. Imperdiet suscipit convallis cubilia etiam taciti nascetur ad. Eros parturient molestie curabitur dui risus arcu. Luctus dictum in ultricies nisl dolor parturient mus. Lorem ipsum odor amet, consectetuer adipiscing elit."],
+							})}
+						</div>
+					</section>
+				</main>
+			</div>
+		</div>
+	`;
+};
+
+/**
+ * Example content within the header, for prototyping.
+ *
+ * To-do: this should go away when Header becomes its own full-fledged component.
+ */
+var headerExampleMarkup = (hasMinimizedSideNav, updateArgs) => html`
+	<header
+		class="spectrum-AppFrame-header"
+		style=${styleMap({
+			boxSizing: "border-box",
+			padding: "var(--spectrum-spacing-200)",
+			blockSize: "var(--spectrum-component-height-400)",
+			display: "flex",
+			justifyContent: "flex-start",
+			alignItems: "center",
+			gap: "var(--spectrum-spacing-200)",
+		})}
+	>
+		${ActionButton({
+			iconName: hasMinimizedSideNav ? "MenuHamburger" : "ChevronDoubleLeft",
+			isQuiet: true,
+			hideLabel: true,
+			onclick: () => {
+				// Toggle minimized or expanded side nav on click.
+				updateArgs?.({ hasMinimizedSideNav: !hasMinimizedSideNav });
+			},
+		})}
+		<svg width="32" height="28" viewBox="0 0 32 28" xmlns="http://www.w3.org/2000/svg">
+			<path d="M31.6166 17.056C32.1285 17.3754 32.1276 18.121 31.6149 18.4392L16.8589 27.5953C16.3328 27.9217 15.6672 27.9217 15.1411 27.5953L0.385079 18.4392C-0.127612 18.121 -0.128535 17.3754 0.383367 17.056L4.37454 14.5657L15.1458 21.1982C15.6696 21.5207 16.3304 21.5207 16.8542 21.1982L27.6255 14.5657L31.6166 17.056Z" fill="#B2D2FB"/>
+			<path d="M23.2149 8.06635L16.8601 12.0003C16.3349 12.3254 15.671 12.3255 15.1456 12.0006L8.78513 8.06635L5.50459 10.0851C4.98778 10.4031 4.98771 11.1543 5.50447 11.4725L15.1466 17.4083C15.6715 17.7314 16.3339 17.7306 16.858 17.4062L26.4532 11.4676C26.9669 11.1497 26.9679 10.4028 26.455 10.0835L23.2149 8.06635Z" fill="#7BA7FD"/>
+			<path d="M16.8566 0.406954C16.3319 0.0795215 15.6669 0.0775159 15.1402 0.401778L9.87172 3.64514C9.35572 3.96279 9.35485 4.71257 9.87011 5.03143L15.1038 8.27019C15.6298 8.59567 16.2947 8.59522 16.8202 8.26903L22.043 5.02723C22.5556 4.70906 22.5565 3.96348 22.0447 3.64411L16.8566 0.406954Z" fill="#3562FF"/>
+		</svg>
+		<span style=${styleMap({
+			fontSize: "var(--spectrum-font-size-200)",
+			fontWeight: "700",
+		})}>Example App</span>
+	</header>
+`;
diff --git a/components/appframesidenav/README.md b/components/appframesidenav/README.md
new file mode 100644
index 00000000000..de9c4ce0f35
--- /dev/null
+++ b/components/appframesidenav/README.md
@@ -0,0 +1,7 @@
+# @spectrum-css/appframesidenav
+
+> The Spectrum CSS app frame side nav component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/appframesidenav).
diff --git a/components/appframesidenav/dist/metadata.json b/components/appframesidenav/dist/metadata.json
new file mode 100644
index 00000000000..5ae9b578f02
--- /dev/null
+++ b/components/appframesidenav/dist/metadata.json
@@ -0,0 +1,98 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [
+    ".spectrum-AppFrameSideNav",
+    ".spectrum-AppFrameSideNav .spectrum-AppFrameSideNav-button",
+    ".spectrum-AppFrameSideNav .spectrum-AppFrameSideNav-list-item-link:hover",
+    ".spectrum-AppFrameSideNav--minimized .spectrum-AppFrameSideNav-list-item-label",
+    ".spectrum-AppFrameSideNav--minimized .spectrum-AppFrameSideNav-list-item[data-tier=\"0\"] .spectrum-AppFrameSideNav-list-item-link:after",
+    ".spectrum-AppFrameSideNav--minimized .spectrum-AppFrameSideNav-list-item[data-tier=\"1\"]",
+    ".spectrum-AppFrameSideNav-divider",
+    ".spectrum-AppFrameSideNav-divider + .spectrum-AppFrameSideNav-list",
+    ".spectrum-AppFrameSideNav-expand-button",
+    ".spectrum-AppFrameSideNav-list",
+    ".spectrum-AppFrameSideNav-list-item",
+    ".spectrum-AppFrameSideNav-list-item--endSectionStart",
+    ".spectrum-AppFrameSideNav-list-item-icon",
+    ".spectrum-AppFrameSideNav-list-item-label",
+    ".spectrum-AppFrameSideNav-list-item-link",
+    ".spectrum-AppFrameSideNav-list-item-link:active .spectrum-AppFrameSideNav-list-item-icon",
+    ".spectrum-AppFrameSideNav-list-item-link:before",
+    ".spectrum-AppFrameSideNav-list-item-link:focus-visible",
+    ".spectrum-AppFrameSideNav-list-item-link:hover:before",
+    ".spectrum-AppFrameSideNav-list-item.spectrum-AppFrameSideNav-list-item--current .spectrum-AppFrameSideNav-list-item-link",
+    ".spectrum-AppFrameSideNav-list-item.spectrum-AppFrameSideNav-list-item--current .spectrum-AppFrameSideNav-list-item-link:before",
+    ".spectrum-AppFrameSideNav-list-item[data-tier=\"0\"]",
+    ".spectrum-AppFrameSideNav-list-item[data-tier=\"0\"] .spectrum-AppFrameSideNav-list-item-disclosureIcon",
+    ".spectrum-AppFrameSideNav-list-item[data-tier=\"1\"]",
+    ".spectrum-AppFrameSideNav-list.spectrum-AppFrameSideNav-list",
+    ".spectrum-AppFrameSideNav.spectrum-AppFrameSideNav--minimized",
+    ".spectrum-AppFrameSideNav:lang(ja)",
+    ".spectrum-AppFrameSideNav:lang(ko)",
+    ".spectrum-AppFrameSideNav:lang(zh)"
+  ],
+  "modifiers": [],
+  "component": [],
+  "global": [
+    "--spectrum-app-side-nav-content-color",
+    "--spectrum-app-side-nav-divider-block-size",
+    "--spectrum-app-side-nav-divider-color",
+    "--spectrum-app-side-nav-expand-button-spacing-block-start",
+    "--spectrum-app-side-nav-expand-icon-color",
+    "--spectrum-app-side-nav-focus-indicator-color",
+    "--spectrum-app-side-nav-font-family",
+    "--spectrum-app-side-nav-font-size",
+    "--spectrum-app-side-nav-font-style",
+    "--spectrum-app-side-nav-font-weight",
+    "--spectrum-app-side-nav-icon-background-default",
+    "--spectrum-app-side-nav-icon-color",
+    "--spectrum-app-side-nav-icon-indicator-block-size",
+    "--spectrum-app-side-nav-icon-indicator-color",
+    "--spectrum-app-side-nav-icon-indicator-color-current",
+    "--spectrum-app-side-nav-icon-indicator-color-hover",
+    "--spectrum-app-side-nav-icon-indicator-inline-size",
+    "--spectrum-app-side-nav-item-gap",
+    "--spectrum-app-side-nav-label-padding-block",
+    "--spectrum-app-side-nav-label-padding-inline-end",
+    "--spectrum-app-side-nav-label-padding-inline-start",
+    "--spectrum-app-side-nav-line-height",
+    "--spectrum-app-side-nav-max-inline-size",
+    "--spectrum-app-side-nav-min-inline-size",
+    "--spectrum-app-side-nav-min-inline-size-expanded",
+    "--spectrum-app-side-nav-min-inline-size-minimized",
+    "--spectrum-app-side-nav-padding-block-end",
+    "--spectrum-app-side-nav-padding-block-start",
+    "--spectrum-app-side-nav-padding-inline",
+    "--spectrum-app-side-nav-top-button-to-items",
+    "--spectrum-border-width-200",
+    "--spectrum-cjk-line-height-100",
+    "--spectrum-component-height-100",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
+    "--spectrum-component-top-to-text-100",
+    "--spectrum-corner-radius-full",
+    "--spectrum-corner-radius-medium-default",
+    "--spectrum-default-font-style",
+    "--spectrum-focus-indicator-color",
+    "--spectrum-font-size-100",
+    "--spectrum-gray-300",
+    "--spectrum-gray-400",
+    "--spectrum-gray-600",
+    "--spectrum-line-height-100",
+    "--spectrum-medium-font-weight",
+    "--spectrum-neutral-content-color-default",
+    "--spectrum-neutral-subdued-content-color-default",
+    "--spectrum-sans-font-family-stack",
+    "--spectrum-spacing-100",
+    "--spectrum-spacing-200",
+    "--spectrum-spacing-300"
+  ],
+  "passthroughs": [
+    "--mod-actionbutton-background-color-down",
+    "--mod-actionbutton-background-color-focus",
+    "--mod-actionbutton-background-color-hover",
+    "--mod-actionbutton-content-color-default",
+    "--mod-tooltip-animation-distance"
+  ],
+  "high-contrast": []
+}
diff --git a/components/appframesidenav/index.css b/components/appframesidenav/index.css
new file mode 100644
index 00000000000..d9a1b0fcdb2
--- /dev/null
+++ b/components/appframesidenav/index.css
@@ -0,0 +1,230 @@
+/*!
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+.spectrum-AppFrameSideNav {
+	--spectrum-app-side-nav-min-inline-size: var(--spectrum-app-side-nav-min-inline-size-expanded);
+	--spectrum-app-side-nav-max-inline-size: 240px;
+	--spectrum-app-side-nav-padding-inline: var(--spectrum-spacing-200);
+	--spectrum-app-side-nav-padding-block-start: var(--spectrum-spacing-300);
+	--spectrum-app-side-nav-padding-block-end: var(--spectrum-spacing-200);
+	--spectrum-app-side-nav-item-gap: var(--spectrum-spacing-100);
+	--spectrum-app-side-nav-top-button-to-items: var(--spectrum-spacing-300);
+	--spectrum-app-side-nav-label-padding-block: var(--spectrum-component-top-to-text-100) var(--spectrum-spacing-100);
+	--spectrum-app-side-nav-label-padding-inline-start: 6px;
+	--spectrum-app-side-nav-label-padding-inline-end: var(--spectrum-spacing-100);
+	--spectrum-app-side-nav-expand-button-spacing-block-start: var(--spectrum-spacing-300);
+
+	--spectrum-app-side-nav-line-height: var(--spectrum-line-height-100);
+	--spectrum-app-side-nav-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-app-side-nav-font-weight: var(--spectrum-medium-font-weight);
+	--spectrum-app-side-nav-font-style: var(--spectrum-default-font-style);
+	--spectrum-app-side-nav-font-size: var(--spectrum-font-size-100);
+
+	--spectrum-app-side-nav-content-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-app-side-nav-icon-color: var(--spectrum-neutral-subdued-content-color-default);
+	--spectrum-app-side-nav-focus-indicator-color: var(--spectrum-focus-indicator-color);
+	--spectrum-app-side-nav-icon-background-default: transparent;
+
+	--spectrum-app-side-nav-icon-indicator-color: var(--spectrum-app-side-nav-icon-color);
+	--spectrum-app-side-nav-icon-indicator-color-current: var(--spectrum-app-side-nav-content-color);
+	--spectrum-app-side-nav-icon-indicator-color-hover: var(--spectrum-gray-400);
+	--spectrum-app-side-nav-icon-indicator-inline-size: 2px;
+	--spectrum-app-side-nav-icon-indicator-block-size: 18px;
+	--spectrum-app-side-nav-expand-icon-color: var(--spectrum-gray-600);
+
+	--spectrum-app-side-nav-divider-block-size: var(--spectrum-border-width-200);
+	--spectrum-app-side-nav-divider-color: var(--spectrum-gray-300);
+
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-app-side-nav-line-height: var(--spectrum-cjk-line-height-100);
+	}
+
+	&.spectrum-AppFrameSideNav--minimized {
+		--spectrum-app-side-nav-min-inline-size: var(--spectrum-app-side-nav-min-inline-size-minimized);
+	}
+
+	.spectrum-AppFrameSideNav-list-item-link {
+		&:hover {
+			--spectrum-app-side-nav-icon-indicator-color: var(--spectrum-app-side-nav-icon-indicator-color-hover);
+		}
+	}
+
+	/* passthroughs for expand button action button */
+	--mod-actionbutton-content-color-default: var(--spectrum-app-side-nav-expand-icon-color);
+	--mod-actionbutton-background-color-hover: transparent;
+	--mod-actionbutton-background-color-down: transparent;
+	--mod-actionbutton-background-color-focus: transparent;
+
+	/* passthroughs for tooltip */
+	--mod-tooltip-animation-distance: -4px; /* accounts for icon spacing */
+
+	/* end passthroughs */
+}
+
+.spectrum-AppFrameSideNav {
+	--_spectrum-app-side-nav-icon-background: var(--spectrum-app-side-nav-icon-background-default);
+	--_spectrum-app-side-nav-icon-color: var(--spectrum-app-side-nav-icon-color);
+
+	box-sizing: border-box;
+	margin: 0;
+	padding-block: var(--spectrum-app-side-nav-padding-block-start) var(--spectrum-app-side-nav-padding-block-end);
+	padding-inline: var(--spectrum-app-side-nav-padding-inline);
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+
+	min-inline-size: var(--spectrum-app-side-nav-min-inline-size);
+	max-inline-size: var(--spectrum-app-side-nav-max-inline-size);
+}
+
+.spectrum-AppFrameSideNav-divider {
+	block-size: var(--spectrum-app-side-nav-divider-block-size);
+	background: var(--spectrum-app-side-nav-divider-color);
+	inline-size: 100%;
+
+	& + .spectrum-AppFrameSideNav-list {
+		margin-block: calc(var(--spectrum-app-side-nav-top-button-to-items) - var(--spectrum-component-top-to-text-100));
+	}
+}
+
+/* Optional button at the top of the side nav */
+.spectrum-AppFrameSideNav .spectrum-AppFrameSideNav-button {
+	margin-block-end: var(--spectrum-app-side-nav-top-button-to-items);
+}
+
+/* Expand/collapse button at the bottom of the side nav */
+.spectrum-AppFrameSideNav-expand-button {
+	margin-block-start: var(--spectrum-app-side-nav-expand-button-spacing-block-start);
+	color: var(--spectrum-app-side-nav-expand-icon-color);
+}
+
+.spectrum-AppFrameSideNav-list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spectrum-app-side-nav-item-gap);
+	line-height: var(--spectrum-app-side-nav-line-height);
+
+	color: var(--spectrum-app-side-nav-content-color);
+	font-family: var(--spectrum-app-side-nav-font-family);
+	font-weight: var(--spectrum-app-side-nav-font-weight);
+	font-style: var(--spectrum-app-side-nav-font-style);
+	font-size: var(--spectrum-app-side-nav-font-size);
+
+	&.spectrum-AppFrameSideNav-list {
+		margin-block-end: var(--spectrum-app-side-nav-item-gap);
+	}
+}
+
+.spectrum-AppFrameSideNav-list-item {
+	display: block;
+
+	&[data-tier="0"] {
+		position: relative;
+
+		.spectrum-AppFrameSideNav-list-item-disclosureIcon {
+			transform: rotate(90deg);
+			padding-block-end: calc(var(--spectrum-app-side-nav-padding-inline) / 2);
+			padding-inline-start: var(--spectrum-app-side-nav-label-padding-inline-start);
+		}
+	}
+
+	&[data-tier="1"] {
+		margin-inline-start: var(--spectrum-app-side-nav-item-gap);
+	}
+}
+
+/* Class to apply to the first nav item that should be aligned at the bottom (end section). Should only be applied to one item. */
+.spectrum-AppFrameSideNav-list-item--endSectionStart {
+	margin-block-start: auto;
+}
+
+.spectrum-AppFrameSideNav-list-item-icon {
+	inline-size: var(--spectrum-component-height-100);
+	block-size: var(--spectrum-component-height-100);
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	background: var(--_spectrum-app-side-nav-icon-background);
+	color: var(--_spectrum-app-side-nav-icon-color);
+}
+
+.spectrum-AppFrameSideNav-list-item-link {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+
+	text-decoration: none;
+	outline: none;
+	color: var(--spectrum-app-side-nav-content-color);
+
+	position: relative;
+
+	&:focus-visible {
+		outline: 2px solid var(--spectrum-app-side-nav-focus-indicator-color);
+		border-radius: var(--spectrum-corner-radius-medium-default);
+		outline-offset: 2px;
+	}
+
+	/* Indicator line for hover and current item */
+		&::before {
+			position: absolute;
+			content: "";
+			inset-inline-start: calc(var(--spectrum-app-side-nav-icon-indicator-inline-size) * -1);
+			block-size: var(--spectrum-app-side-nav-icon-indicator-block-size);
+			inline-size: var(--spectrum-app-side-nav-icon-indicator-inline-size);
+			background: transparent;
+			border-radius: var(--spectrum-corner-radius-full);
+	}
+
+	&:hover {
+		&::before {
+			background: var(--spectrum-app-side-nav-icon-indicator-color);
+		}
+	}
+
+	&:active {
+		.spectrum-AppFrameSideNav-list-item-icon {
+			transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
+		}
+	}
+
+	.spectrum-AppFrameSideNav-list-item.spectrum-AppFrameSideNav-list-item--current & {
+		--_spectrum-app-side-nav-icon-color: var(--spectrum-app-side-nav-icon-indicator-color-current);
+
+		&::before {
+			background: var(--spectrum-app-side-nav-icon-indicator-color-current);
+		}
+	}
+}
+
+.spectrum-AppFrameSideNav-list-item-label {
+	padding-block: var(--spectrum-app-side-nav-label-padding-block);
+	padding-inline: var(--spectrum-app-side-nav-label-padding-inline-start) var(--spectrum-app-side-nav-label-padding-inline-end);
+}
+
+.spectrum-AppFrameSideNav--minimized {
+	.spectrum-AppFrameSideNav-list-item-label,
+	.spectrum-AppFrameSideNav-list-item[data-tier="0"] .spectrum-AppFrameSideNav-list-item-link::after,
+	.spectrum-AppFrameSideNav-list-item[data-tier="1"] {
+		display: none;
+	}
+}
diff --git a/components/appframesidenav/package.json b/components/appframesidenav/package.json
new file mode 100644
index 00000000000..2e614bdb853
--- /dev/null
+++ b/components/appframesidenav/package.json
@@ -0,0 +1,51 @@
+{
+	"name": "@spectrum-css/appframesidenav",
+	"version": "0.1.0",
+	"description": "The Spectrum CSS app frame side nav component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/appframesidenav",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/appframesidenav"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"exports": {
+		".": "./dist/index.css",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
+	"main": "dist/index.css",
+	"peerDependencies": {
+		"@spectrum-css/icon": ">=10.0.0-next.0",
+		"@spectrum-css/tokens": ">=16.1.0-next.0"
+	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/icon": {
+			"optional": true
+		},
+		"@spectrum-css/tokens": {
+			"optional": true
+		}
+	},
+	"keywords": [
+		"design-system",
+		"spectrum",
+		"spectrum-css",
+		"adobe",
+		"adobe-spectrum",
+		"component",
+		"css"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/components/appframesidenav/project.json b/components/appframesidenav/project.json
new file mode 100644
index 00000000000..e64d69a4431
--- /dev/null
+++ b/components/appframesidenav/project.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "appframesidenav",
+	"tags": ["component"],
+	"targets": {
+		"build": {},
+		"clean": {},
+		"compare": {},
+		"format": {},
+		"lint": {},
+		"report": {},
+		"test": {
+			"defaultConfiguration": "scope"
+		},
+		"validate": {}
+	}
+}
diff --git a/components/appframesidenav/stories/appframesidenav.stories.js b/components/appframesidenav/stories/appframesidenav.stories.js
new file mode 100644
index 00000000000..c1e7106ee84
--- /dev/null
+++ b/components/appframesidenav/stories/appframesidenav.stories.js
@@ -0,0 +1,136 @@
+import { Template, defaultSideNavItems } from "./template.js";
+
+/**
+ * The app frame side navigation has a series of navigation items with an icon and a text label and can be
+ * viewed expanded or minimized with icons only. It has an option for a button above the navigation items,
+ * and for some navigation item(s) to be displayed at the vertical end.
+ *
+ * ⚠️ This is currently an early prototype based on a draft version of design specs.
+ */
+export default {
+	title: "App frame side nav",
+	component: "AppFrameSideNav",
+	argTypes: {
+		isMinimized: {
+			name: "Minimized (icons only)",
+			description: "Displays a horizontally minimized version of the side nav menu items where only the icon is visible.",
+			table: {
+				type: { summary: "boolean" },
+				defaultValue: { summary: false },
+				category: "Component",
+			},
+			type: { required: true },
+			control: "boolean",
+		},
+		showTopButton: {
+			name: "Optional button above navigation items",
+			description: "Displays a button above the navigation items.",
+			table: {
+				type: { summary: "boolean" },
+				defaultValue: { summary: true },
+				category: "Component",
+			},
+			type: { required: true },
+			control: "boolean",
+		},
+		topButtonText: {
+			name: "Optional button label text",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+			},
+			control: "text",
+		},
+		showDividers: {
+			name: "Show dividers",
+			description: "Displays dividers between navigation sections.",
+			table: {
+				type: { summary: "boolean" },
+				defaultValue: { summary: false },
+				category: "Component",
+			},
+			type: { required: true },
+			control: "boolean",
+		},
+		items: {
+			name: "Navigation items",
+			description: "Array of objects with `label` and `workflowIconName`. Optionally, `isCurrent` marks the current page. `isEndSectionBoundary` marks the first nav item that should be aligned at the optional bottom \"end section\"; this should only be applied to one item.",
+			table: {
+				category: "Content",
+			},
+			type: { required: true },
+			control: "object",
+		},
+		customContent: { table: { disable: true } },
+	},
+	args: {
+		rootClass: "spectrum-AppFrameSideNav",
+		showTopButton: true,
+		topButtonText: "Create",
+		items: defaultSideNavItems,
+		isMinimized: false,
+		showDividers: false,
+	},
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+/**
+ * Some navigation items can be displayed at the vertical "end section" when the navigation is taller than the height of its content.
+ * For example, in the app frame the side nav may take up the full viewport height.
+ * The end section is designated by applying the class `spectrum-AppFrameSideNav-list-item--endSectionStart` to one of the navigation list items.
+ * All subsequent list items will appear in the end section.
+ *
+ * This behavior is demonstrated in the following example by setting a minimum height on the navigation.
+ */
+export const EndSection = Template.bind({});
+EndSection.args = {
+	customStyles: {
+		minBlockSize: "600px",
+	},
+	items: [
+		...defaultSideNavItems,
+		{
+			label: "Settings",
+			workflowIconName: "Settings",
+			isEndSectionStart: true,
+		},
+	]
+};
+
+/**
+ * The minimized version of the app frame side nav only displays the icons.
+ *
+ * Accessibility notes:
+ * - The text labels should still be present for screen readers.
+ * - Implementations should show the text label on hover in a popover [WIP; this needs more info].
+ */
+export const Minimized = Template.bind({});
+Minimized.args = {
+	isMinimized: true,
+};
+
+export const Dividers = Template.bind({});
+Dividers.args = {
+	showDividers: true,
+};
+Dividers.storyName = "With navigation dividers";
+
+export const CustomContent = Template.bind({});
+CustomContent.args = {
+	showDividers: true,
+	customContent: [
+		{
+			label: "All photos",
+			workflowIconName: "Image",
+			tier: 0,
+		},
+		{
+			label: "Publish",
+			workflowIconName: "Publish",
+			tier: 1,
+		},
+	],
+};
diff --git a/components/appframesidenav/stories/appframesidenav.test.js b/components/appframesidenav/stories/appframesidenav.test.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/components/appframesidenav/stories/template.js b/components/appframesidenav/stories/template.js
new file mode 100644
index 00000000000..bc76a3f53f0
--- /dev/null
+++ b/components/appframesidenav/stories/template.js
@@ -0,0 +1,193 @@
+import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
+import { Template as Button } from "@spectrum-css/button/stories/template.js";
+import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
+
+import "@spectrum-css/appframesidenav/index.css";
+
+export const Template = ({
+	rootClass = "spectrum-AppFrameSideNav",
+	showTopButton = true,
+	topButtonText = "Create",
+	topButtonWorkflowIconName = "Add",
+	items = [],
+	isMinimized = false,
+	id,
+	showDividers = false,
+	customContent = [],
+	customClasses = [],
+	customStyles = {},
+}) => {
+	const [, updateArgs] = useArgs();
+
+	const topButtonMarkup = Button({
+		variant: "accent",
+		label: topButtonText,
+		iconName: topButtonWorkflowIconName,
+		hideLabel: isMinimized,
+		customClasses: ["spectrum-AppFrameSideNav-button"],
+	});
+
+	return html`
+		<nav
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--minimized`]: isMinimized,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			style=${ifDefined(styleMap(customStyles))}
+		>
+			${when(showTopButton && topButtonText, () => topButtonMarkup)}
+			${when(showDividers, () => html`<div class="spectrum-AppFrameSideNav-divider"></div>`)}
+			<ul class="spectrum-AppFrameSideNav-list">
+				${(items.length > 0 ? items : defaultSideNavItems).map(navItem =>
+					html`<li
+						class=${classMap({
+							[`${rootClass}-list-item`]: true,
+							[`${rootClass}-list-item--current`]: navItem.isCurrent,
+							[`${rootClass}-list-item--endSectionStart`]: navItem.isEndSectionStart,
+							["is-expanded"]: navItem.isExpanded
+						})}
+						data-tier=${ifDefined(navItem.tier)}
+					>
+						<a
+							class="spectrum-AppFrameSideNav-list-item-link"
+							href="#"
+							@click=${demoCurrentItemOnClick}
+						>
+							<span class="spectrum-AppFrameSideNav-list-item-icon">
+								${Icon({
+									iconName: navItem.workflowIconName,
+									setName: "workflow",
+								})}
+							</span>
+							<span class="spectrum-AppFrameSideNav-list-item-label">
+								${navItem.label}
+								${when(navItem.tier === 0, () => html`
+									<span class="spectrum-AppFrameSideNav-list-item-disclosureIcon">
+										${Icon({
+											iconName: "ChevronRight100",
+											setName: "ui",
+											customClasses: ["spectrum-AppFrameSideNav-list-item-disclosureIcon"],
+										})}
+									</span>`
+								)}
+							</span>
+						</a>
+					</li>`
+				)}
+			</ul>
+
+			${when(customContent.length > 0, () => html`
+				<div class="spectrum-AppFrameSideNav-divider"></div>
+				<ul class="spectrum-AppFrameSideNav-list">
+				${customContent.map(navItem =>
+					html`<li
+						class=${classMap({
+							[`${rootClass}-list-item`]: true,
+							[`${rootClass}-list-item--current`]: navItem.isCurrent,
+							[`${rootClass}-list-item--endSectionStart`]: navItem.isEndSectionStart,
+							["is-expanded"]: navItem.isCurrent,
+						})}
+						data-tier=${ifDefined(navItem.tier)}
+					>
+						<a
+							class="spectrum-AppFrameSideNav-list-item-link"
+							href="#"
+							@click=${demoCurrentItemOnClick}
+						>
+							<span class="spectrum-AppFrameSideNav-list-item-icon">
+								${Icon({
+									iconName: navItem.workflowIconName,
+									setName: "workflow",
+								})}
+							</span>
+							<span class="spectrum-AppFrameSideNav-list-item-label">
+								${navItem.label}
+								${when(navItem.tier === 0, () => html`
+									<span class="spectrum-AppFrameSideNav-list-item-disclosureIcon">
+										${Icon({
+											iconName: "ChevronRight100",
+											setName: "ui",
+											customClasses: ["spectrum-AppFrameSideNav-list-item-disclosureIcon"],
+										})}
+									</span>`
+								)}
+							</span>
+						</a>
+					</li>`
+				)}
+			</ul>
+			`)}
+
+			${when(showDividers, () => html`<div class="spectrum-AppFrameSideNav-divider"></div>`)}
+			${ActionButton({
+				iconName: isMinimized ? "ChevronDoubleRight" : "ChevronDoubleLeft",
+				isQuiet: true,
+				hideLabel: true,
+				customClasses: [`${rootClass}-expand-button`],
+				onclick: () => {
+					// Toggle minimized or expanded side nav on click.
+					updateArgs?.({ isMinimized: !isMinimized });
+				},
+			})}
+		</nav>
+	`;
+};
+
+/**
+ * Add the "--current" nav item class after click on a nav item, and removes from all other nav items.
+ * Used only for Spectrum CSS Storybook demonstration purposes.
+ */
+const demoCurrentItemOnClick = (e) => {
+	e.preventDefault();
+	e?.target?.closest(".spectrum-AppFrameSideNav-list")?.querySelectorAll(".spectrum-AppFrameSideNav-list-item")?.forEach(item => {
+		item?.classList.remove("spectrum-AppFrameSideNav-list-item--current");
+	});
+	e?.target?.closest(".spectrum-AppFrameSideNav-list-item")?.classList.add("spectrum-AppFrameSideNav-list-item--current");
+};
+
+/**
+ * Fallback data for the side navigation items.
+ * Array of objects with `label` and `workflowIconName`.
+ * Optionally:
+ * - `isCurrent` marks the current page.
+ * - `isEndSectionBoundary` marks the first nav item that should be aligned at the bottom "end section". This should only be applied to one item.
+ */
+export const defaultSideNavItems = [
+	{
+		label: "Home",
+		isCurrent: true,
+		workflowIconName: "Home",
+	},
+	{
+		label: "Files",
+		workflowIconName: "Folder",
+	},
+	{
+		label: "Brands",
+		workflowIconName: "Brand",
+	},
+	{
+		label: "Discover",
+		workflowIconName: "Discover",
+	},
+	{
+		label: "Schedule",
+		workflowIconName: "Calendar",
+	},
+	{
+		label: "Learn",
+		workflowIconName: "Lightbulb",
+	},
+	{
+		label: "Plugins",
+		workflowIconName: "Plugin",
+	},
+];
diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css
index d1573c98a11..4f33846a574 100644
--- a/tokens/custom/large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -138,4 +138,10 @@
 	--spectrum-field-edge-to-icon-100: 9px;
 	--spectrum-field-edge-to-icon-200: 11px;
 	--spectrum-field-edge-to-icon-300: 14px;
+
+	/* To-do: For app frame demo purposes only;
+		would not convert to SWC. Would need a token.
+		This value is just a guesstimate. */
+		--spectrum-app-side-nav-min-inline-size-expanded: 160px;
+		--spectrum-app-side-nav-min-inline-size-minimized: 64px;
 }
diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css
index d9f08666d34..6181279b738 100644
--- a/tokens/custom/medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -136,4 +136,8 @@
 	--spectrum-field-edge-to-icon-100: 5px;
 	--spectrum-field-edge-to-icon-200: 6px;
 	--spectrum-field-edge-to-icon-300: 10px;
+
+	/* To-do: For app frame demo purposes only. This token is not in the design spec. */
+	--spectrum-app-side-nav-min-inline-size-expanded: 140px;
+	--spectrum-app-side-nav-min-inline-size-minimized: 56px;
 }
diff --git a/yarn.lock b/yarn.lock
index 94b89c2cf16..521c3bcde0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4176,6 +4176,34 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@spectrum-css/appframe@workspace:components/appframe":
+  version: 0.0.0-use.local
+  resolution: "@spectrum-css/appframe@workspace:components/appframe"
+  peerDependencies:
+    "@spectrum-css/tokens": ">=16.1.0-next.0"
+    "@spectrum-css/typography": ">=9.0.0-next.0"
+  peerDependenciesMeta:
+    "@spectrum-css/tokens":
+      optional: true
+    "@spectrum-css/typography":
+      optional: true
+  languageName: unknown
+  linkType: soft
+
+"@spectrum-css/appframesidenav@workspace:components/appframesidenav":
+  version: 0.0.0-use.local
+  resolution: "@spectrum-css/appframesidenav@workspace:components/appframesidenav"
+  peerDependencies:
+    "@spectrum-css/icon": ">=10.0.0-next.0"
+    "@spectrum-css/tokens": ">=16.1.0-next.0"
+  peerDependenciesMeta:
+    "@spectrum-css/icon":
+      optional: true
+    "@spectrum-css/tokens":
+      optional: true
+  languageName: unknown
+  linkType: soft
+
 "@spectrum-css/asset@npm:8.0.0-next.0, @spectrum-css/asset@workspace:components/asset":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/asset@workspace:components/asset"