diff --git a/preview/main.tsx b/preview/main.tsx
index d92b33c..e730551 100644
--- a/preview/main.tsx
+++ b/preview/main.tsx
@@ -8,6 +8,7 @@ import {
   ConfirmDialog,
   Dialog,
   EmptyState,
+  ErrorState,
   FormPanelSkeleton,
   GridListbox,
   Icon,
@@ -15,6 +16,7 @@ import {
   ListSkeleton,
   Menu,
   OutageGate,
+  PageHeader,
   Pagination,
   Popover,
   Sidebar,
@@ -242,14 +244,13 @@ function Preview() {
           </button>
         </div>
         {dialog === 'plain' && (
-          <Dialog eyebrow="preview" onClose={() => setDialog(null)} title="A plain dialog">
+          <Dialog onClose={() => setDialog(null)} title="A plain dialog">
             <p className="mt-4 text-muted">On a phone this opens as a bottom sheet.</p>
           </Dialog>
         )}
         {dialog === 'confirm' && (
           <ConfirmDialog
             confirmLabel="Delete"
-            eyebrow="preview"
             onClose={() => setDialog(null)}
             onConfirm={() => Promise.reject(new Error('This preview cannot delete anything.'))}
             title="Delete this note?"
@@ -293,7 +294,7 @@ function Preview() {
                   { active: false, badge: 4, href: '#workspace', icon: 'bell', label: 'Inbox' },
                 ],
               },
-              { label: 'spaces', items: [{ active: false, href: '#workspace', label: 'Friends trip' }] },
+              { label: 'Spaces', items: [{ active: false, href: '#workspace', label: 'Friends trip' }] },
             ]}
           />
         </div>
@@ -329,7 +330,23 @@ function Preview() {
         </div>
       </Section>
 
-      <Section title="Empty and loading">
+      <Section title="Page header">
+        <PageHeader
+          actions={
+            <button className="secondary-button px-3 py-2 text-sm" type="button">
+              <Icon name="plus" size={16} />
+              New
+            </button>
+          }
+          eyebrow="Shared space · owner"
+          title="Home"
+        />
+      </Section>
+
+      <Section title="Empty, error and loading">
+        <ErrorState onRetry={() => {}} title="This didn’t load">
+          The server answered with an error.
+        </ErrorState>
         <EmptyState title="Nothing here yet">
           <p className="mt-2 mb-0 text-muted">Empty states sit in a dashed box.</p>
         </EmptyState>
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index b806c0b..cc43926 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import { createContext, useContext, useState, type CSSProperties, type ReactNode } from 'react';
 import { useLink } from '../UiProvider.js';
 import { Icon, type IconName } from './Icon.js';
 import { Skeleton } from './Skeleton.js';
@@ -14,6 +14,30 @@ export interface ShellTab extends ShellNavItem {
   loading?: boolean;
 }
 
+const collapseKey = 'graphite-sidebar-collapsed';
+
+const ShellContext = createContext({ collapsed: false });
+
+export function useShell() {
+  return useContext(ShellContext);
+}
+
+function storedCollapsed() {
+  try {
+    return localStorage.getItem(collapseKey) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function storeCollapsed(collapsed: boolean) {
+  try {
+    localStorage.setItem(collapseKey, collapsed ? '1' : '0');
+  } catch {
+    return;
+  }
+}
+
 export function AppShell({
   actions,
   alert,
@@ -34,71 +58,94 @@ export function AppShell({
   tabs: ShellTab[];
 }) {
   const Link = useLink();
+  const [collapsed, setCollapsed] = useState(storedCollapsed);
+  const toggle = () => {
+    setCollapsed(!collapsed);
+    storeCollapsed(!collapsed);
+  };
+
   return (
-    <div className="flex min-h-screen flex-col pb-[calc(var(--tab-bar-height)+env(safe-area-inset-bottom))] md:pb-0">
-      <a className="skip-link" href="#content">
-        skip to content
-      </a>
-      <header className="sticky top-0 z-20 border-b border-line-soft bg-paper/90 backdrop-blur-md">
-        <div className="shell flex h-16 items-center gap-6">
-          <Link
-            className="flex shrink-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-ink no-underline"
-            href={brand.href}
-          >
-            {brand.mark}
-            {brand.name}
-          </Link>
-          <nav aria-label="Primary" className="mono-sm hidden items-center gap-6 md:flex">
-            {nav.map((item) => (
-              <Link
-                aria-current={item.active ? 'page' : undefined}
-                className={`nav-link whitespace-nowrap no-underline ${item.active ? 'text-ink' : 'text-muted hover:text-ink'}`}
-                href={item.href}
-                key={item.href}
+    <ShellContext.Provider value={{ collapsed: Boolean(sidebar) && collapsed }}>
+      <div className="flex min-h-screen flex-col pb-[calc(var(--tab-bar-height)+env(safe-area-inset-bottom))] md:pb-0">
+        <a className="skip-link" href="#content">
+          skip to content
+        </a>
+        <header className="sticky top-0 z-20 border-b border-line-soft bg-paper/90 backdrop-blur-md">
+          <div className={sidebar ? 'shell-bar flex h-16 items-center gap-2' : 'shell flex h-16 items-center gap-6'}>
+            {sidebar && (
+              <button
+                aria-controls="app-sidebar"
+                aria-expanded={!collapsed}
+                aria-label={collapsed ? 'Expand the sidebar' : 'Collapse the sidebar'}
+                className="sidebar-toggle hidden md:inline-flex"
+                onClick={toggle}
+                title={collapsed ? 'Expand the sidebar' : 'Collapse the sidebar'}
+                type="button"
               >
-                {item.label}
-              </Link>
-            ))}
-          </nav>
-          <div className="ml-auto flex items-center gap-2">{actions}</div>
-        </div>
-        {alert}
-      </header>
-      {sidebar ? (
-        <div className="flex flex-1">
-          <aside className="sidebar-panel hidden md:block">{sidebar}</aside>
-          <div className="min-w-0 flex-1">
-            <main className="shell py-8 sm:py-14" id="content">
-              {children}
-            </main>
-          </div>
-        </div>
-      ) : (
-        <main className="shell flex-1 py-8 sm:py-14" id="content">
-          {children}
-        </main>
-      )}
-      {footer}
-      <nav aria-label="Main" className="tab-bar md:hidden" style={{ '--tab-count': tabs.length } as CSSProperties}>
-        {tabs.map((tab) =>
-          tab.loading ? (
-            <span aria-hidden="true" className="tab-bar-item" key={tab.label}>
-              <Skeleton className="h-[22px] w-[22px] rounded-full" />
-              <Skeleton className="h-2.5 w-10" />
-            </span>
-          ) : (
+                <Icon name="panel" size={18} />
+              </button>
+            )}
             <Link
-              aria-current={tab.active ? 'page' : undefined}
-              className="tab-bar-item"
-              href={tab.href}
-              key={tab.label}
+              className="flex shrink-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-ink no-underline"
+              href={brand.href}
             >
-              <Icon name={tab.icon} size={22} />
-              <span>{tab.label}</span>
+              {brand.mark}
+              {brand.name}
             </Link>
-          ),
+            <nav aria-label="Primary" className="mono-sm hidden items-center gap-6 md:flex">
+              {nav.map((item) => (
+                <Link
+                  aria-current={item.active ? 'page' : undefined}
+                  className={`nav-link whitespace-nowrap no-underline ${item.active ? 'text-ink' : 'text-muted hover:text-ink'}`}
+                  href={item.href}
+                  key={item.href}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+            <div className="ml-auto flex items-center gap-2">{actions}</div>
+          </div>
+          {alert}
+        </header>
+        {sidebar ? (
+          <div className="flex flex-1">
+            <aside className="sidebar-panel hidden md:block" data-collapsed={collapsed} id="app-sidebar">
+              {sidebar}
+            </aside>
+            <div className="min-w-0 flex-1">
+              <main className="shell py-8 sm:py-14" id="content">
+                {children}
+              </main>
+            </div>
+          </div>
+        ) : (
+          <main className="shell flex-1 py-8 sm:py-14" id="content">
+            {children}
+          </main>
         )}
-      </nav>
-    </div>
+        {footer}
+        <nav aria-label="Main" className="tab-bar md:hidden" style={{ '--tab-count': tabs.length } as CSSProperties}>
+          {tabs.map((tab) =>
+            tab.loading ? (
+              <span aria-hidden="true" className="tab-bar-item" key={tab.label}>
+                <Skeleton className="h-[22px] w-[22px] rounded-full" />
+                <Skeleton className="h-2.5 w-10" />
+              </span>
+            ) : (
+              <Link
+                aria-current={tab.active ? 'page' : undefined}
+                className="tab-bar-item"
+                href={tab.href}
+                key={tab.label}
+              >
+                <Icon name={tab.icon} size={22} />
+                <span>{tab.label}</span>
+              </Link>
+            ),
+          )}
+        </nav>
+      </div>
+    </ShellContext.Provider>
   );
 }
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index 310b295..b7cf99c 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -18,7 +18,7 @@ export function ConfirmDialog({
   children: ReactNode;
   confirmLabel: string;
   errorFallback?: string;
-  eyebrow: string;
+  eyebrow?: string;
   onClose: () => void;
   onConfirm: () => Promise<void>;
   title: string;
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 7db2fc7..9c5688c 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useId, useRef, type ReactNode } from 'react';
+import { Icon } from './Icon.js';
 
 export function Dialog({
   children,
@@ -7,7 +8,7 @@ export function Dialog({
   title,
 }: {
   children: ReactNode;
-  eyebrow: string;
+  eyebrow?: string;
   onClose: () => void;
   title: string;
 }) {
@@ -36,13 +37,13 @@ export function Dialog({
       <div className="p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:p-6">
         <div className="flex items-start justify-between gap-4">
           <div className="min-w-0">
-            <p className="eyebrow">{eyebrow}</p>
-            <h2 className="mt-2 mb-0 text-2xl font-medium" id={titleId}>
+            {eyebrow && <p className="eyebrow mb-2">{eyebrow}</p>}
+            <h2 className="m-0 text-xl font-medium" id={titleId}>
               {title}
             </h2>
           </div>
-          <button aria-label="Close" className="text-button text-xl" onClick={onClose} type="button">
-            ×
+          <button aria-label="Close" className="icon-button -mt-1.5 -mr-2 shrink-0" onClick={onClose} type="button">
+            <Icon name="x" size={18} />
           </button>
         </div>
         {children}
diff --git a/src/components/ErrorState.tsx b/src/components/ErrorState.tsx
new file mode 100644
index 0000000..923c2ef
--- /dev/null
+++ b/src/components/ErrorState.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { Icon } from './Icon.js';
+
+export function ErrorState({
+  action,
+  children,
+  onRetry,
+  title,
+}: {
+  action?: ReactNode;
+  children?: ReactNode;
+  onRetry?: () => void;
+  title: string;
+}) {
+  return (
+    <div className="error-state" role="alert">
+      <span className="error-state-icon">
+        <Icon name="alert" size={22} />
+      </span>
+      <h2 className="m-0 text-lg font-medium">{title}</h2>
+      {children && <div className="max-w-md text-sm text-muted">{children}</div>}
+      {(onRetry || action) && (
+        <div className="mt-2 flex flex-wrap justify-center gap-2">
+          {onRetry && (
+            <button className="secondary-button px-3 py-2 text-sm" onClick={onRetry} type="button">
+              <Icon name="refresh" size={16} />
+              Try again
+            </button>
+          )}
+          {action}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
index fc9b9c5..6dfc012 100644
--- a/src/components/Field.tsx
+++ b/src/components/Field.tsx
@@ -13,7 +13,9 @@ function FieldMessage({ error, hint, id }: { error?: string; hint?: ReactNode; i
     <span className="field-hint" id={`${id}-hint`}>
       {hint}
     </span>
-  ) : null;
+  ) : (
+    <span aria-hidden="true" className="field-slot" />
+  );
 }
 
 export function TextField({
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 14e7b19..01dce9a 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,13 +1,32 @@
 const paths = {
+  alert: 'M12 4 21 20H3zM12 10v4M12 17.5h.01',
   bell: 'M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0',
+  calendar: 'M8 3v4M16 3v4M4 10h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z',
+  check: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM8.5 12.5l2.5 2.5 4.5-5',
   compass: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM15.5 8.5l-2 5-5 2 2-5z',
   filter: 'M4 6h16M7 12h10M10 18h4',
+  folder: 'M3 7a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z',
   gamepad:
     'M6 11h4M8 9v4M15 12h.01M18 10h.01M17.3 5H6.7a4 4 0 0 0-3.96 3.43l-.73 5.12A2.8 2.8 0 0 0 4.8 16.8c.9 0 1.7-.5 2.1-1.3L8 14h8l1.1 1.5c.4.8 1.2 1.3 2.1 1.3a2.8 2.8 0 0 0 2.79-3.25l-.73-5.12A4 4 0 0 0 17.3 5z',
   home: 'M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z',
+  key: 'M14.5 12.5a4.5 4.5 0 1 0-4-4L3 16v4h4v-2h2v-2h2l1.5-1.5M16 8h.01',
   library: 'M5 4h3v16H5zM10 4h3v16h-3zM15.2 4.6l2.9-.8 3.5 15.6-2.9.8z',
+  lock: 'M6 11h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zM8 11V8a4 4 0 0 1 8 0v3',
+  mail: 'M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM3.5 7l8.5 6 8.5-6',
+  monitor: 'M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM8 21h8M12 17v4',
+  panel: 'M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM9 4v16',
+  pencil: 'M4 20h4L19 9l-4-4L4 16zM14 6l4 4',
+  plus: 'M12 5v14M5 12h14',
+  refresh: 'M20 11a8 8 0 0 0-14.5-4.5L4 8M4 4v4h4M4 13a8 8 0 0 0 14.5 4.5L20 16M20 20v-4h-4',
+  repeat: 'M17 3l3 3-3 3M4 11V9a3 3 0 0 1 3-3h13M7 21l-3-3 3-3M20 13v2a3 3 0 0 1-3 3H4',
   search: 'M21 21l-4.35-4.35M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z',
+  settings:
+    'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
+  shield: 'M12 3 5 6v5c0 4.4 3 8.3 7 10 4-1.7 7-5.6 7-10V6zM9 12l2 2 4-4',
+  sparkles: 'M10 3l1.6 4.4L16 9l-4.4 1.6L10 15l-1.6-4.4L4 9l4.4-1.6zM18 14l.9 2.1L21 17l-2.1.9L18 20l-.9-2.1L15 17l2.1-.9z',
+  trash: 'M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3',
   user: 'M20 21a8 8 0 0 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10z',
+  x: 'M6 6l12 12M18 6 6 18',
 };
 
 export type IconName = keyof typeof paths;
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
new file mode 100644
index 0000000..a715238
--- /dev/null
+++ b/src/components/PageHeader.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+export function PageHeader({
+  actions,
+  children,
+  eyebrow,
+  title,
+}: {
+  actions?: ReactNode;
+  children?: ReactNode;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+}) {
+  return (
+    <header className="page-header">
+      <div className="min-w-0">
+        {eyebrow && <p className="page-header-eyebrow">{eyebrow}</p>}
+        <h1 className="page-heading">
+          {title}
+        </h1>
+        {children && <div className="page-header-description">{children}</div>}
+      </div>
+      {actions && <div className="page-header-actions">{actions}</div>}
+    </header>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 7636a9a..95007e0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,12 +1,14 @@
 import type { ReactNode } from 'react';
 import { useLink } from '../UiProvider.js';
+import { useShell } from './AppShell.js';
 import { Icon, type IconName } from './Icon.js';
+import { Skeleton } from './Skeleton.js';
 
 export interface SidebarItem {
   active: boolean;
   badge?: number;
   href: string;
-  icon?: IconName;
+  icon?: IconName | ReactNode;
   label: string;
 }
 
@@ -15,35 +17,61 @@ export interface SidebarSection {
   label?: string;
 }
 
+function ItemIcon({ icon, label }: { icon: SidebarItem['icon']; label: string }) {
+  if (typeof icon === 'string') return <Icon name={icon as IconName} size={18} />;
+  return icon ?? <span className="sidebar-initial">{label.charAt(0).toUpperCase()}</span>;
+}
+
 export function Sidebar({
   footer,
   label,
+  loading = false,
   sections,
 }: {
   footer?: ReactNode;
   label: string;
+  loading?: boolean;
   sections: SidebarSection[];
 }) {
   const Link = useLink();
+  const { collapsed } = useShell();
   return (
-    <nav aria-label={label} className="sidebar">
-      {sections.map((section, index) => (
-        <div className="grid gap-0.5" key={section.label ?? index}>
-          {section.label && <p className="eyebrow m-0 px-3 pb-1.5">{section.label}</p>}
-          {section.items.map((item) => (
-            <Link
-              aria-current={item.active ? 'page' : undefined}
-              className="sidebar-item"
-              href={item.href}
-              key={item.href}
-            >
-              {item.icon && <Icon name={item.icon} size={18} />}
-              <span className="min-w-0 flex-1 truncate">{item.label}</span>
-              {item.badge ? <span className="mono-sm text-faint">{item.badge > 99 ? '99+' : item.badge}</span> : null}
-            </Link>
+    <nav aria-busy={loading || undefined} aria-label={label} className="sidebar" data-collapsed={collapsed}>
+      {loading
+        ? Array.from({ length: 3 }, (_, section) => (
+            <div aria-hidden="true" className="grid gap-0.5" key={section}>
+              {Array.from({ length: section === 1 ? 3 : 4 }, (_, row) => (
+                <span className="sidebar-item" key={row}>
+                  <Skeleton className="h-[18px] w-[18px] shrink-0 rounded-md" />
+                  {!collapsed && <Skeleton className="h-3 w-24" />}
+                </span>
+              ))}
+            </div>
+          ))
+        : sections.map((section, index) => (
+            <div className="sidebar-section" key={section.label ?? index}>
+              {section.label && <p className="sidebar-section-label">{section.label}</p>}
+              {section.items.map((item) => (
+                <Link
+                  aria-current={item.active ? 'page' : undefined}
+                  aria-label={collapsed ? (item.badge ? `${item.label}, ${item.badge}` : item.label) : undefined}
+                  className="sidebar-item"
+                  href={item.href}
+                  key={item.href}
+                  title={collapsed ? item.label : undefined}
+                >
+                  <span className="sidebar-icon">
+                    <ItemIcon icon={item.icon} label={item.label} />
+                    {collapsed && item.badge ? <span aria-hidden="true" className="sidebar-dot" /> : null}
+                  </span>
+                  {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+                  {!collapsed && item.badge ? (
+                    <span className="mono-sm text-faint">{item.badge > 99 ? '99+' : item.badge}</span>
+                  ) : null}
+                </Link>
+              ))}
+            </div>
           ))}
-        </div>
-      ))}
       {footer && <div className="mt-auto">{footer}</div>}
     </nav>
   );
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index 0f48ad5..12367b7 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { useDelayed } from '../lib/useDelayed.js';
 
 export function Skeleton({ className = '' }: { className?: string }) {
   return <span aria-hidden="true" className={`skeleton ${className}`} />;
@@ -13,13 +14,16 @@ export function Placeholder({
   className?: string;
   label: string;
 }) {
+  const shown = useDelayed(placeholderDelayMs);
   return (
-    <div aria-busy="true" aria-label={label} className={className} role="status">
+    <div aria-busy="true" aria-label={label} className={`${className} ${shown ? 'placeholder-in' : 'invisible'}`} role="status">
       {children}
     </div>
   );
 }
 
+export const placeholderDelayMs = 200;
+
 export const actionSkeletonClass = 'h-[2.375rem] rounded-lg';
 
 export function ListSkeleton({
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index c6c73e0..31ad223 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -14,6 +14,7 @@ interface Snack {
   message: string;
   detail?: string;
   action?: { label: string; href: string };
+  tone?: 'error';
 }
 
 type ShowSnack = (snack: Omit<Snack, 'id'>) => void;
@@ -40,7 +41,8 @@ function SnackbarItem({ onDismiss, snack }: { onDismiss: (id: number) => void; s
 
   return (
     <div
-      className={`snackbar ${leaving ? 'snackbar-leaving' : ''}`}
+      className={`snackbar ${snack.tone === 'error' ? 'snackbar-error' : ''} ${leaving ? 'snackbar-leaving' : ''}`}
+      role={snack.tone === 'error' ? 'alert' : undefined}
       onAnimationEnd={(event) => {
         if (leaving && event.target === event.currentTarget) onDismiss(snack.id);
       }}
@@ -50,7 +52,7 @@ function SnackbarItem({ onDismiss, snack }: { onDismiss: (id: number) => void; s
       onMouseLeave={() => setPaused(false)}
     >
       <div className="min-w-0 flex-1">
-        <p className="m-0 truncate text-sm text-ink">{snack.message}</p>
+        <p className="m-0 text-sm text-ink">{snack.message}</p>
         {snack.detail && <p className="mono-sm m-0 mt-0.5 truncate text-faint">{snack.detail}</p>}
       </div>
       {snack.action && (
diff --git a/src/index.ts b/src/index.ts
index 26f88bc..df9dc49 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-export { AppShell, type ShellNavItem, type ShellTab } from './components/AppShell.js';
+export { AppShell, useShell, type ShellNavItem, type ShellTab } from './components/AppShell.js';
 export { Avatar } from './components/Avatar.js';
 export { CodeInput } from './components/CodeInput.js';
 export {
@@ -10,11 +10,13 @@ export {
 export { ConfirmDialog } from './components/ConfirmDialog.js';
 export { Dialog } from './components/Dialog.js';
 export { EmptyState } from './components/EmptyState.js';
+export { ErrorState } from './components/ErrorState.js';
 export { TextAreaField, TextField } from './components/Field.js';
 export { GridListbox, type GridGroup } from './components/GridListbox.js';
 export { Icon, type IconName } from './components/Icon.js';
 export { Menu, type MenuItem } from './components/Menu.js';
 export { OutageGate } from './components/OutageGate.js';
+export { PageHeader } from './components/PageHeader.js';
 export { Pagination } from './components/Pagination.js';
 export { Popover } from './components/Popover.js';
 export { Sidebar, type SidebarItem, type SidebarSection } from './components/Sidebar.js';
@@ -26,6 +28,7 @@ export {
   ListSkeleton,
   PageSkeleton,
   Placeholder,
+  placeholderDelayMs,
   Skeleton,
   TabsSkeleton,
 } from './components/Skeleton.js';
@@ -36,5 +39,6 @@ export { TagChip, tagColors, type TagColor } from './components/TagChip.js';
 export { Toggle } from './components/Toggle.js';
 export { errorMessage, isAbortError } from './lib/errors.js';
 export { timeAgo } from './lib/timeAgo.js';
+export { useDelayed } from './lib/useDelayed.js';
 export { useDismiss } from './lib/useDismiss.js';
 export { UiProvider, useLink, type UiLinkProps } from './UiProvider.js';
diff --git a/src/lib/useDelayed.ts b/src/lib/useDelayed.ts
new file mode 100644
index 0000000..1caaa7a
--- /dev/null
+++ b/src/lib/useDelayed.ts
@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export function useDelayed(delayMs: number) {
+  const [elapsed, setElapsed] = useState(delayMs <= 0);
+  useEffect(() => {
+    if (delayMs <= 0) return;
+    const timer = window.setTimeout(() => setElapsed(true), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [delayMs]);
+  return elapsed;
+}
diff --git a/src/theme.css b/src/theme.css
index 04f7230..f8d3815 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -32,6 +32,14 @@
   letter-spacing: -0.036em;
 }
 
+@utility page-heading {
+  margin: 0;
+  font-size: clamp(1.75rem, 4vw, 2.25rem);
+  font-weight: 640;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
 @utility mono-sm {
   font-family: var(--font-mono);
   font-size: 0.82rem;
@@ -192,6 +200,8 @@ body {
 
   .primary-button,
   .secondary-button {
+    display: inline-flex;
+    gap: 0.5rem;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-field);
@@ -276,11 +286,95 @@ body {
   }
 
   .field-error,
-  .field-hint {
+  .field-hint,
+  .field-slot {
+    min-height: 1.12rem;
+    margin-top: -0.2rem;
     font-size: 0.8rem;
     line-height: 1.4;
   }
 
+  .choice-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-field);
+    padding: 0.7rem 0.85rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: border-color 140ms ease;
+  }
+
+  .choice-card:hover {
+    border-color: var(--color-muted);
+  }
+
+  .choice-card:has(input:checked) {
+    border-color: var(--color-ink);
+  }
+
+  .choice-card input {
+    margin-top: 0.2rem;
+  }
+
+  .panel-rows {
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-panel);
+  }
+
+  .panel-rows > * + * {
+    border-top: 1px solid var(--color-line-soft);
+  }
+
+  .page-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem 1.5rem;
+  }
+
+  .page-header-eyebrow {
+    margin: 0 0 0.35rem;
+    color: var(--color-faint);
+    font-size: 0.85rem;
+  }
+
+  .page-header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .page-header-description {
+    margin: 0.75rem 0 0;
+    max-width: 42rem;
+    color: var(--color-muted);
+  }
+
+  .error-state {
+    display: grid;
+    justify-items: center;
+    gap: 0.5rem;
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-panel);
+    padding: 2rem 1.5rem;
+    text-align: center;
+  }
+
+  .error-state-icon {
+    display: inline-flex;
+    width: 2.75rem;
+    height: 2.75rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid color-mix(in srgb, var(--color-danger) 45%, var(--color-line));
+    border-radius: 999px;
+    color: var(--color-danger);
+  }
+
   .field-error {
     color: var(--color-danger);
   }
@@ -633,6 +727,10 @@ body {
     pointer-events: auto;
   }
 
+  .snackbar-error {
+    border-left: 3px solid var(--color-danger);
+  }
+
   @media (max-width: 47.99rem) {
     .snackbar-region {
       right: 0.75rem;
@@ -909,14 +1007,39 @@ body {
     letter-spacing: 0.4em;
   }
 
+  .shell-bar {
+    padding-inline: 0.75rem 1rem;
+  }
+
+  .sidebar-toggle {
+    align-items: center;
+    border-radius: var(--radius-field);
+    padding: 0.5rem 0.75rem;
+    color: var(--color-muted);
+    transition:
+      background-color 140ms ease,
+      color 140ms ease;
+  }
+
+  .sidebar-toggle:hover {
+    background: var(--color-line-soft);
+    color: var(--color-ink);
+  }
+
   .sidebar-panel {
     position: sticky;
     top: var(--header-height);
     width: 15rem;
     height: calc(100dvh - var(--header-height));
     flex: none;
+    overflow-x: hidden;
     overflow-y: auto;
     border-right: 1px solid var(--color-line-soft);
+    transition: width 200ms var(--ease-settle);
+  }
+
+  .sidebar-panel[data-collapsed='true'] {
+    width: 4.25rem;
   }
 
   .sidebar {
@@ -927,6 +1050,27 @@ body {
     padding: 1.25rem 0.75rem;
   }
 
+  .sidebar-section {
+    display: grid;
+    gap: 0.125rem;
+  }
+
+  .sidebar-section-label {
+    margin: 0;
+    padding: 0 0.75rem 0.375rem;
+    color: var(--color-faint);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  .sidebar[data-collapsed='true'] .sidebar-section-label {
+    height: 0;
+    overflow: hidden;
+    margin: 0 0.5rem 0.375rem;
+    padding: 0;
+    border-top: 1px solid var(--color-line-soft);
+  }
+
   .sidebar-item {
     display: flex;
     align-items: center;
@@ -936,11 +1080,63 @@ body {
     color: var(--color-muted);
     font-size: 0.9rem;
     text-decoration: none;
+    white-space: nowrap;
     transition:
       background-color 140ms ease,
       color 140ms ease;
   }
 
+  .sidebar[data-collapsed='true'] .sidebar-item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .sidebar-icon {
+    position: relative;
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sidebar-initial {
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-line);
+    border-radius: 0.3rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+  }
+
+  .tag-mark {
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.3rem;
+    background: color-mix(in srgb, var(--tag-color) 22%, transparent);
+    color: var(--tag-color);
+    font-size: 0.65rem;
+    font-weight: 700;
+  }
+
+  .sidebar-dot {
+    position: absolute;
+    top: -0.15rem;
+    right: -0.2rem;
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 999px;
+    background: var(--color-ink);
+    box-shadow: 0 0 0 2px var(--color-paper);
+  }
+
   .sidebar-item:hover {
     background: var(--color-line-soft);
     color: var(--color-ink);
@@ -1033,6 +1229,10 @@ body {
     animation: fade-in 220ms ease-out backwards;
   }
 
+  .placeholder-in {
+    animation: fade-in 180ms ease-out backwards;
+  }
+
   .skeleton {
     background: linear-gradient(
       90deg,
diff --git a/test/shell.spec.tsx b/test/shell.spec.tsx
new file mode 100644
index 0000000..149ec94
--- /dev/null
+++ b/test/shell.spec.tsx
@@ -0,0 +1,131 @@
+import { act } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AppShell, ErrorState, ListSkeleton, PageHeader, Sidebar, SnackbarProvider, useSnackbar } from '../src/index.ts';
+import { click, render } from './render.tsx';
+
+function shell(loading = false) {
+  return (
+    <AppShell
+      brand={{ href: '/', mark: null, name: 'Strata' }}
+      nav={[]}
+      sidebar={
+        <Sidebar
+          label="Areas"
+          loading={loading}
+          sections={[
+            {
+              items: [
+                { active: true, href: '/', icon: 'home', label: 'Home' },
+                { active: false, badge: 3, href: '/inbox', icon: 'bell', label: 'Inbox' },
+              ],
+            },
+            { label: 'Spaces', items: [{ active: false, href: '/spaces/club', label: 'Club' }] },
+          ]}
+        />
+      }
+      tabs={[{ active: true, href: '/', icon: 'home', label: 'Home' }]}
+    >
+      <p>Page</p>
+    </AppShell>
+  );
+}
+
+describe('Collapsible sidebar', () => {
+  afterEach(() => localStorage.clear());
+
+  it('collapses to icons from the header, keeps names for assistive tech, and remembers the choice', async () => {
+    const { container } = await render(shell());
+    const toggle = container.querySelector<HTMLButtonElement>('header button[aria-controls="app-sidebar"]')!;
+    const nav = () => container.querySelector('nav[aria-label="Areas"]')!;
+
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(nav().textContent).toContain('Inbox3');
+    expect(nav().querySelector('.sidebar-initial')?.textContent).toBe('C');
+
+    await click(toggle);
+
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(toggle.getAttribute('aria-label')).toBe('Expand the sidebar');
+    expect(container.querySelector('aside')?.getAttribute('data-collapsed')).toBe('true');
+    const inbox = nav().querySelector('a[href="/inbox"]')!;
+    expect(inbox.textContent).toBe('');
+    expect(inbox.getAttribute('aria-label')).toBe('Inbox, 3');
+    expect(inbox.getAttribute('title')).toBe('Inbox');
+    expect(inbox.querySelector('.sidebar-dot')).not.toBeNull();
+    expect(localStorage.getItem('graphite-sidebar-collapsed')).toBe('1');
+  });
+
+  it('starts collapsed when that was the last choice', async () => {
+    localStorage.setItem('graphite-sidebar-collapsed', '1');
+    const { container } = await render(shell());
+    expect(container.querySelector('aside')?.getAttribute('data-collapsed')).toBe('true');
+  });
+
+  it('holds the sidebar shape while it loads', async () => {
+    const { container } = await render(shell(true));
+    const nav = container.querySelector('nav[aria-label="Areas"]')!;
+    expect(nav.getAttribute('aria-busy')).toBe('true');
+    expect(nav.querySelectorAll('.skeleton').length).toBeGreaterThan(0);
+    expect(nav.querySelector('a')).toBeNull();
+  });
+});
+
+describe('Placeholders', () => {
+  it('stay invisible for quick loads and fade in after the delay', async () => {
+    vi.useFakeTimers();
+    try {
+      const { container } = await render(<ListSkeleton label="Loading tasks" rows={2} />);
+      const placeholder = container.querySelector('[role="status"]')!;
+      expect(placeholder.getAttribute('aria-busy')).toBe('true');
+      expect(placeholder.classList.contains('invisible')).toBe(true);
+
+      await act(async () => vi.advanceTimersByTime(200));
+      expect(placeholder.classList.contains('invisible')).toBe(false);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});
+
+describe('PageHeader and ErrorState', () => {
+  it('lays out the title with its actions', async () => {
+    const { container } = await render(<PageHeader actions={<button type="button">New</button>} title="Tasks" />);
+    expect(container.querySelector('h1')?.textContent).toBe('Tasks');
+    expect(container.querySelector('h1')?.className).toBe('page-heading');
+    expect(container.querySelector('.page-header-actions button')?.textContent).toBe('New');
+  });
+
+  it('offers a retry', async () => {
+    const onRetry = vi.fn();
+    const { container } = await render(
+      <ErrorState onRetry={onRetry} title="Could not load your tasks">
+        Check your connection.
+      </ErrorState>,
+    );
+    expect(container.querySelector('[role="alert"] h2')?.textContent).toBe('Could not load your tasks');
+    await click(container.querySelector('button')!);
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+});
+
+describe('Error snacks', () => {
+  it('are marked as alerts', async () => {
+    function Show() {
+      const show = useSnackbar();
+      return (
+        <button onClick={() => show({ message: 'Could not save', tone: 'error' })} type="button">
+          show
+        </button>
+      );
+    }
+    const { container } = await render(
+      <SnackbarProvider>
+        <Show />
+      </SnackbarProvider>,
+    );
+    await click(container.querySelector('button')!);
+    const snack = container.querySelector('.snackbar')!;
+    expect(snack.classList.contains('snackbar-error')).toBe(true);
+    expect(snack.getAttribute('role')).toBe('alert');
+  });
+});