diff --git a/apps/desktop/src/main/login-shell-path.test.ts b/apps/desktop/src/main/login-shell-path.test.ts
new file mode 100644
index 00000000..3490dfc3
--- /dev/null
+++ b/apps/desktop/src/main/login-shell-path.test.ts
@@ -0,0 +1,28 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { resolveCommandViaLoginShell } from './login-shell-path'
+
+const onPosix = process.platform !== 'win32'
+
+describe('resolveCommandViaLoginShell', () => {
+  // The core of issue #73: GUI apps inherit a minimal PATH, so a bare command
+  // name can't be resolved. A login shell sources the user's profile and
+  // returns an absolute path. `sh` is guaranteed present on POSIX systems.
+  it.skipIf(!onPosix)('resolves a ubiquitous command to an absolute path', async () => {
+    const resolved = await resolveCommandViaLoginShell('sh')
+    expect(resolved).toBeTruthy()
+    expect(path.isAbsolute(resolved as string)).toBe(true)
+    expect(path.basename(resolved as string)).toBe('sh')
+  })
+
+  it('returns null for a command that does not exist', async () => {
+    expect(await resolveCommandViaLoginShell('zen-not-a-real-binary-9f3a2b')).toBeNull()
+  })
+
+  it('rejects unsafe command names without spawning a shell', async () => {
+    expect(await resolveCommandViaLoginShell('rg; rm -rf /')).toBeNull()
+    expect(await resolveCommandViaLoginShell('$(touch /tmp/zen-pwned)')).toBeNull()
+    expect(await resolveCommandViaLoginShell('rg fzf')).toBeNull()
+    expect(await resolveCommandViaLoginShell('')).toBeNull()
+  })
+})
diff --git a/apps/desktop/src/main/login-shell-path.ts b/apps/desktop/src/main/login-shell-path.ts
new file mode 100644
index 00000000..ef06b6f9
--- /dev/null
+++ b/apps/desktop/src/main/login-shell-path.ts
@@ -0,0 +1,73 @@
+import { execFile } from 'node:child_process'
+import { promises as fsp, constants as fsConstants } from 'node:fs'
+import path from 'node:path'
+import { promisify } from 'node:util'
+
+const execFileAsync = promisify(execFile)
+
+// A login shell can be slow if the user's profile is heavy; cap it so a stuck
+// shell never blocks search. Resolution is memoized, so this runs rarely.
+const LOGIN_SHELL_TIMEOUT_MS = 5_000
+// Memoize resolved locations so we don't spawn a shell on every capability
+// check / search. Short enough to self-heal after a tool is installed mid-run.
+const RESOLUTION_TTL_MS = 60_000
+
+// Binary names are interpolated into a shell `command -v` invocation, so only
+// ever accept bare tokens — never anything that could break out of the word.
+const SAFE_COMMAND = /^[A-Za-z0-9._-]+$/
+
+const cache = new Map<string, { at: number; value: string | null }>()
+
+/**
+ * Resolve a command to an absolute path using the user's login shell.
+ *
+ * GUI apps launched from Finder/Dock on macOS (and similar elsewhere) inherit
+ * only a minimal PATH (e.g. `/usr/bin:/bin:/usr/sbin:/sbin`), so tools
+ * installed by Homebrew, cargo, npm, nix, etc. aren't resolvable by their bare
+ * name. Spawning a *login* shell (`$SHELL -lc 'command -v <cmd>'`) queries the
+ * PATH the user actually has configured — the same approach the CLI-install and
+ * Raycast integrations already use to locate their tools.
+ *
+ * Returns the absolute path, or `null` when the command can't be resolved —
+ * including on Windows, where GUI apps already inherit the full PATH and the
+ * POSIX login-shell trick doesn't apply (callers should fall back to the bare
+ * command name there).
+ */
+export async function resolveCommandViaLoginShell(command: string): Promise<string | null> {
+  if (!SAFE_COMMAND.test(command)) return null
+  if (process.platform === 'win32') return null
+
+  const cached = cache.get(command)
+  if (cached && Date.now() - cached.at < RESOLUTION_TTL_MS) return cached.value
+
+  const value = await queryLoginShell(command)
+  cache.set(command, { at: Date.now(), value })
+  return value
+}
+
+async function queryLoginShell(command: string): Promise<string | null> {
+  // Try the user's own shell first, then the standard POSIX shells. On
+  // macOS/Linux those still pick up the login PATH from the system/user
+  // profile even when the user's interactive shell is something exotic (fish,
+  // nu) whose `command -v` syntax differs from POSIX.
+  const shells = Array.from(
+    new Set([process.env.SHELL, '/bin/zsh', '/bin/bash', '/bin/sh'].filter(Boolean))
+  ) as string[]
+
+  for (const shellPath of shells) {
+    try {
+      await fsp.access(shellPath, fsConstants.X_OK)
+      const { stdout } = await execFileAsync(shellPath, ['-lc', `command -v ${command}`], {
+        encoding: 'utf8',
+        timeout: LOGIN_SHELL_TIMEOUT_MS,
+        maxBuffer: 1024 * 1024,
+        windowsHide: true
+      })
+      const resolved = String(stdout).trim().split(/\r?\n/)[0]?.trim()
+      if (resolved && path.isAbsolute(resolved)) return resolved
+    } catch {
+      /* shell missing here, or command not found in it — try the next one */
+    }
+  }
+  return null
+}
diff --git a/apps/desktop/src/main/vault.ts b/apps/desktop/src/main/vault.ts
index 5ad972a1..85fe7b78 100644
--- a/apps/desktop/src/main/vault.ts
+++ b/apps/desktop/src/main/vault.ts
@@ -5,6 +5,7 @@ import path from 'node:path'
 import { promisify } from 'node:util'
 import { app } from 'electron'
 import { recordMainPerf } from './perf'
+import { resolveCommandViaLoginShell } from './login-shell-path'
 import {
   DEFAULT_DAILY_NOTES_DIRECTORY,
   DEFAULT_WEEKLY_NOTES_DIRECTORY,
@@ -1300,7 +1301,16 @@ async function searchExecutable(
   paths: Required<VaultTextSearchToolPaths>
 ): Promise<string | null> {
   const configured = kind === 'ripgrep' ? paths.ripgrepPath : paths.fzfPath
-  if (!configured) return kind === 'ripgrep' ? 'rg' : 'fzf'
+  if (!configured) {
+    // Auto mode. GUI apps launched from Finder/Dock inherit only a minimal
+    // PATH (/usr/bin:/bin:/usr/sbin:/sbin), so the bare command name often
+    // isn't resolvable even when rg/fzf are installed in a non-standard place
+    // (Homebrew, cargo, nix, …). Resolve through the user's login shell so the
+    // absolute path flows into both detection and execution; fall back to the
+    // bare name so an already-correct PATH (and Windows) keeps working. (#73)
+    const command = kind === 'ripgrep' ? 'rg' : 'fzf'
+    return (await resolveCommandViaLoginShell(command)) ?? command
+  }
   if (!path.isAbsolute(configured)) return null
 
   const normalized = path.resolve(configured)
diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js
index c4774227..966e5100 100644
--- a/apps/desktop/tailwind.config.js
+++ b/apps/desktop/tailwind.config.js
@@ -25,7 +25,10 @@ module.exports = {
           DEFAULT: 'rgb(var(--z-accent) / <alpha-value>)',
           soft: 'rgb(var(--z-accent-soft) / <alpha-value>)',
           muted: 'rgb(var(--z-accent-muted) / <alpha-value>)'
-        }
+        },
+        danger: 'rgb(var(--z-red) / <alpha-value>)',
+        success: 'rgb(var(--z-green) / <alpha-value>)',
+        warning: 'rgb(var(--z-yellow) / <alpha-value>)'
       },
       fontFamily: {
         sans: [
@@ -43,6 +46,26 @@ module.exports = {
         panel:
           '0 1px 0 0 rgb(var(--z-shadow) / 0.04), 0 8px 28px -12px rgb(var(--z-shadow) / 0.18)',
         float: '0 20px 60px -20px rgb(var(--z-shadow) / 0.28)'
+      },
+      fontSize: {
+        '2xs': ['0.6875rem', { lineHeight: '1rem' }]
+      },
+      zIndex: {
+        dropdown: '40',
+        palette: '50',
+        modal: '70',
+        nested: '75',
+        popover: '80',
+        toast: '90'
+      },
+      maxWidth: {
+        'dialog-xs': '420px',
+        'dialog-sm': '440px',
+        'dialog-md': '560px',
+        'dialog-lg': '720px',
+        'dialog-xl': '900px',
+        'dialog-2xl': '1120px',
+        'dialog-3xl': '1360px'
       }
     }
   },
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 9538f269..8654e1ae 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -25,7 +25,10 @@ export default {
           DEFAULT: 'rgb(var(--z-accent) / <alpha-value>)',
           soft: 'rgb(var(--z-accent-soft) / <alpha-value>)',
           muted: 'rgb(var(--z-accent-muted) / <alpha-value>)'
-        }
+        },
+        danger: 'rgb(var(--z-red) / <alpha-value>)',
+        success: 'rgb(var(--z-green) / <alpha-value>)',
+        warning: 'rgb(var(--z-yellow) / <alpha-value>)'
       },
       fontFamily: {
         sans: [
@@ -43,6 +46,26 @@ export default {
         panel:
           '0 1px 0 0 rgb(var(--z-shadow) / 0.04), 0 8px 28px -12px rgb(var(--z-shadow) / 0.18)',
         float: '0 20px 60px -20px rgb(var(--z-shadow) / 0.28)'
+      },
+      fontSize: {
+        '2xs': ['0.6875rem', { lineHeight: '1rem' }]
+      },
+      zIndex: {
+        dropdown: '40',
+        palette: '50',
+        modal: '70',
+        nested: '75',
+        popover: '80',
+        toast: '90'
+      },
+      maxWidth: {
+        'dialog-xs': '420px',
+        'dialog-sm': '440px',
+        'dialog-md': '560px',
+        'dialog-lg': '720px',
+        'dialog-xl': '900px',
+        'dialog-2xl': '1120px',
+        'dialog-3xl': '1360px'
       }
     }
   },
diff --git a/packages/app-core/src/App.tsx b/packages/app-core/src/App.tsx
index 0f3115d2..edcc7976 100644
--- a/packages/app-core/src/App.tsx
+++ b/packages/app-core/src/App.tsx
@@ -209,7 +209,7 @@ function AppUpdateNotice({
       <span className="h-2 w-2 shrink-0 rounded-full bg-accent shadow-[0_0_0_4px_rgb(var(--z-accent)/0.12)]" />
       <span className="min-w-0 truncate font-medium">{label}</span>
       {updateState?.phase === 'downloading' && (
-        <span className="shrink-0 rounded-md bg-paper-200/80 px-1.5 py-0.5 text-[11px] font-medium text-ink-600">
+        <span className="shrink-0 rounded-md bg-paper-200/80 px-1.5 py-0.5 text-xs font-medium text-ink-600">
           {Math.round(updateState.progressPercent ?? 0)}%
         </span>
       )}
diff --git a/packages/app-core/src/components/ArchiveView.tsx b/packages/app-core/src/components/ArchiveView.tsx
index 8de71709..cd030d94 100644
--- a/packages/app-core/src/components/ArchiveView.tsx
+++ b/packages/app-core/src/components/ArchiveView.tsx
@@ -399,7 +399,7 @@ export function ArchiveView(): JSX.Element {
 
           <section
             ref={rootRef}
-            className="overflow-hidden rounded-[24px] border border-paper-300/70 bg-paper-50/34 shadow-[0_12px_42px_rgba(15,23,42,0.06)]"
+            className="overflow-hidden rounded-3xl border border-paper-300/70 bg-paper-50/34 shadow-[0_12px_42px_rgba(15,23,42,0.06)]"
           >
             {filtered.length === 0 ? (
               <div className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-center">
@@ -445,12 +445,12 @@ export function ArchiveView(): JSX.Element {
                     <div className="min-w-0 flex-1 pt-0.5">
                       <div className="flex flex-wrap items-center gap-x-2.5 gap-y-0.5">
                         <span className="truncate text-sm font-medium text-ink-900">{note.title}</span>
-                        <span className="text-[11px] uppercase tracking-[0.16em] text-ink-400">
+                        <span className="text-xs uppercase tracking-[0.16em] text-ink-500">
                           {formatDate(note.updatedAt)}
                         </span>
                       </div>
-                      <div className="mt-0.5 truncate text-[11px] text-ink-400">{note.path}</div>
-                      <div className="mt-1 line-clamp-1 text-[13px] leading-5 text-ink-600">
+                      <div className="mt-0.5 truncate text-xs text-ink-500">{note.path}</div>
+                      <div className="mt-1 line-clamp-1 text-sm leading-5 text-ink-600">
                         {note.excerpt || 'Empty note'}
                       </div>
                     </div>
@@ -461,7 +461,7 @@ export function ArchiveView(): JSX.Element {
                           e.stopPropagation()
                           void openNote(note.path)
                         }}
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-[11px] font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-xs font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
                       >
                         <ArrowUpRightIcon width={13} height={13} />
                         Open
@@ -472,7 +472,7 @@ export function ArchiveView(): JSX.Element {
                           e.stopPropagation()
                           void unarchiveNote(note)
                         }}
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-[11px] font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-xs font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
                       >
                         <ArrowUpRightIcon width={13} height={13} />
                         Unarchive
@@ -483,7 +483,7 @@ export function ArchiveView(): JSX.Element {
                           e.stopPropagation()
                           void moveNoteToTrash(note)
                         }}
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-red-500/10 px-2.5 py-1 text-[11px] font-medium text-[rgb(var(--z-red))] transition-colors hover:bg-red-500/16"
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-red-500/10 px-2.5 py-1 text-xs font-medium text-[rgb(var(--z-red))] transition-colors hover:bg-red-500/16"
                       >
                         <TrashIcon width={13} height={13} />
                         Trash
diff --git a/packages/app-core/src/components/BufferPalette.tsx b/packages/app-core/src/components/BufferPalette.tsx
index 7a1d161d..fb445f1d 100644
--- a/packages/app-core/src/components/BufferPalette.tsx
+++ b/packages/app-core/src/components/BufferPalette.tsx
@@ -26,6 +26,7 @@ import { isTrashTabPath } from '@shared/trash'
 import { isQuickNotesTabPath } from '@shared/quick-notes'
 import { resolveSystemFolderLabels, type SystemFolderLabels } from '../lib/system-folder-labels'
 import { focusEditorNormalMode } from '../lib/editor-focus'
+import { Modal } from './ui/Modal'
 
 interface BufferEntry {
   path: string
@@ -274,15 +275,8 @@ export function BufferPalette(): JSX.Element {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 pt-[15vh] backdrop-blur-sm"
-      onClick={close}
-    >
-      <div
-        className="w-[min(560px,90vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300/70"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="border-b border-paper-300/70 px-4 py-3">
+    <Modal size="md" layer="palette" onClose={close} closeOnEsc={false}>
+      <div className="border-b border-paper-300/70 px-4 py-3">
           <input
             ref={inputRef}
             value={query}
@@ -329,24 +323,24 @@ export function BufferPalette(): JSX.Element {
                   {entry.title}
                   {entry.dirty && (
                     <span
-                      className="ml-2 align-middle text-[11px] text-accent"
+                      className="ml-2 align-middle text-xs text-accent"
                       aria-label="Unsaved changes"
                     >
                       •
                     </span>
                   )}
                 </span>
-                <span className="shrink-0 truncate text-[11px] text-ink-400">
+                <span className="shrink-0 truncate text-xs text-ink-400">
                   {entry.virtual ? 'virtual' : entry.subtitle}
                 </span>
-                <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                   {entry.badge}
                 </span>
               </button>
             ))
           )}
         </div>
-        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-[11px] text-ink-500">
+        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
           <span>
             <kbd className="rounded bg-paper-200 px-1">↑↓</kbd>{' '}
             <kbd className="rounded bg-paper-200 px-1">Ctrl+N/P</kbd> move
@@ -358,7 +352,6 @@ export function BufferPalette(): JSX.Element {
             <kbd className="rounded bg-paper-200 px-1">esc</kbd> close
           </span>
         </div>
-      </div>
-    </div>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/CalendarPanel.tsx b/packages/app-core/src/components/CalendarPanel.tsx
index e5cf6a8a..157940e0 100644
--- a/packages/app-core/src/components/CalendarPanel.tsx
+++ b/packages/app-core/src/components/CalendarPanel.tsx
@@ -360,7 +360,7 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
       <PanelResizeHandle onStart={startResize} />
 
       <div className="border-b border-paper-300/60 px-4 py-4">
-        <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
+        <div className="text-xs font-medium uppercase tracking-[0.16em] text-ink-400">
           Calendar
         </div>
         <div className="mt-2 flex items-center justify-between">
@@ -393,7 +393,7 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
           <button
             type="button"
             onClick={() => setAnchor(new Date(today.getFullYear(), today.getMonth(), 1))}
-            className="mt-2 w-full rounded px-2 py-1 text-[11px] text-ink-500 transition-colors hover:bg-paper-200 hover:text-accent"
+            className="mt-2 w-full rounded px-2 py-1 text-xs text-ink-500 transition-colors hover:bg-paper-200 hover:text-accent"
           >
             Today
           </button>
@@ -402,7 +402,7 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
           <button
             type="button"
             onClick={() => setAnchor(new Date(refDate.getFullYear(), refDate.getMonth(), 1))}
-            className="mt-1 w-full rounded px-2 py-1 text-[11px] text-ink-500 transition-colors hover:bg-paper-200 hover:text-accent"
+            className="mt-1 w-full rounded px-2 py-1 text-xs text-ink-500 transition-colors hover:bg-paper-200 hover:text-accent"
           >
             Back to {monthLabel(refDate)}
           </button>
@@ -412,14 +412,14 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
       <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
         <div className={`grid ${gridCols} gap-y-1`}>
           {showWeekNumbers && (
-            <div className="flex items-center justify-center text-[9px] font-medium uppercase text-ink-400">
+            <div className="flex items-center justify-center text-2xs font-medium uppercase text-ink-400">
               W
             </div>
           )}
           {dayLabels.map((label, i) => (
             <div
               key={`${label}-${i}`}
-              className="text-center text-[9px] font-medium uppercase text-ink-400"
+              className="text-center text-2xs font-medium uppercase text-ink-400"
             >
               {label}
             </div>
@@ -443,7 +443,7 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
                 onMouseLeave={clearHover}
                 title={`Open ${weeklyNoteTitle(monday)}`}
                 className={[
-                  'relative flex flex-col items-center rounded py-1 text-[11px] leading-tight transition-colors',
+                  'relative flex flex-col items-center rounded py-1 text-xs leading-tight transition-colors',
                   isActiveWeek
                     ? 'bg-accent font-semibold text-white'
                     : 'text-ink-400 hover:bg-paper-200',
@@ -467,7 +467,7 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
             ) : (
               <div
                 key={`w${rowIdx}`}
-                className="flex items-center justify-center text-[9px] text-ink-400"
+                className="flex items-center justify-center text-2xs text-ink-400"
               >
                 {weekNum}
               </div>
@@ -494,7 +494,7 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
                   disabled={!dailyEnabled}
                   title={iso}
                   className={[
-                    'relative flex flex-col items-center rounded py-1 text-[11px] leading-tight transition-colors',
+                    'relative flex flex-col items-center rounded py-1 text-xs leading-tight transition-colors',
                     !dailyEnabled
                       ? inMonth
                         ? 'cursor-default text-ink-600'
@@ -539,11 +539,11 @@ export function CalendarPanel({ note }: { note: NoteContent }): JSX.Element {
         >
           <div className="truncate text-xs font-semibold text-ink-900">{hover.meta.title}</div>
           {hover.meta.excerpt ? (
-            <div className="mt-1 line-clamp-4 text-[11px] leading-5 text-ink-500">
+            <div className="mt-1 line-clamp-4 text-xs leading-5 text-ink-500">
               {hover.meta.excerpt}
             </div>
           ) : (
-            <div className="mt-1 text-[11px] italic text-ink-400">Empty note</div>
+            <div className="mt-1 text-xs italic text-ink-400">Empty note</div>
           )}
         </div>
       )}
diff --git a/packages/app-core/src/components/CollectionViewHeader.tsx b/packages/app-core/src/components/CollectionViewHeader.tsx
index 19ae77db..6e29a5bb 100644
--- a/packages/app-core/src/components/CollectionViewHeader.tsx
+++ b/packages/app-core/src/components/CollectionViewHeader.tsx
@@ -25,19 +25,19 @@ export function CollectionViewHeader({
   actions?: ReactNode
 }): JSX.Element {
   return (
-    <section className="overflow-hidden rounded-[22px] border border-paper-300/70 bg-paper-50/34 shadow-[0_10px_30px_rgba(15,23,42,0.05)]">
+    <section className="overflow-hidden rounded-3xl border border-paper-300/70 bg-paper-50/34 shadow-[0_10px_30px_rgba(15,23,42,0.05)]">
       <div className="flex flex-col gap-4 px-5 py-5 sm:px-6">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-center gap-2.5">
-              <div className="inline-flex items-center gap-2 rounded-full border border-paper-300/70 bg-paper-100/75 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.18em] text-ink-500">
+              <div className="inline-flex items-center gap-2 rounded-full border border-paper-300/70 bg-paper-100/75 px-2.5 py-1 text-2xs font-medium uppercase tracking-[0.18em] text-ink-500">
                 {badgeIcon}
                 {badge}
               </div>
               <h1 className="text-[1.65rem] font-semibold tracking-tight text-ink-900 sm:text-[1.85rem]">
                 {title}
               </h1>
-              <span className="inline-flex items-center rounded-full border border-paper-300/70 bg-paper-100/70 px-2.5 py-1 text-[11px] font-medium text-ink-500">
+              <span className="inline-flex items-center rounded-full border border-paper-300/70 bg-paper-100/70 px-2.5 py-1 text-xs font-medium text-ink-500">
                 {count} note{count === 1 ? '' : 's'}
               </span>
             </div>
diff --git a/packages/app-core/src/components/CommandPalette.tsx b/packages/app-core/src/components/CommandPalette.tsx
index fd076b11..d23bf427 100644
--- a/packages/app-core/src/components/CommandPalette.tsx
+++ b/packages/app-core/src/components/CommandPalette.tsx
@@ -19,6 +19,7 @@ import {
   type VaultSwitcherEntry
 } from '../lib/vault-switcher'
 import { focusEditorNormalMode } from '../lib/editor-focus'
+import { Modal } from './ui/Modal'
 
 type Mode = 'main' | 'theme' | 'vault'
 
@@ -263,16 +264,9 @@ export function CommandPalette(): JSX.Element {
         : 'Pick a vault'
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 pt-[12vh] backdrop-blur-sm"
-      onClick={() => closePalette()}
-    >
-      <div
-        className="w-[min(640px,92vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300/70"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {mode !== 'main' && (
-          <div className="flex items-center gap-2 border-b border-paper-300/70 bg-paper-200/40 px-4 py-2 text-[11px] text-ink-500">
+    <Modal size="md" layer="palette" onClose={() => closePalette()} closeOnEsc={false}>
+      {mode !== 'main' && (
+          <div className="flex items-center gap-2 border-b border-paper-300/70 bg-paper-200/40 px-4 py-2 text-xs text-ink-500">
             <button
               type="button"
               onClick={returnToMain}
@@ -343,12 +337,12 @@ export function CommandPalette(): JSX.Element {
             commandResults.map((cmd, i) => (
               <Fragment key={cmd.id}>
                 {recentCommands.length > 0 && i === 0 && (
-                  <div className="px-4 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-ink-400">
+                  <div className="px-4 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-ink-400">
                     Recent
                   </div>
                 )}
                 {recentCommands.length > 0 && i === recentCommands.length && (
-                  <div className="mt-1 border-t border-paper-300/60 px-4 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-ink-400">
+                  <div className="mt-1 border-t border-paper-300/60 px-4 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-ink-400">
                     All Commands
                   </div>
                 )}
@@ -361,14 +355,14 @@ export function CommandPalette(): JSX.Element {
                     i === active ? 'bg-paper-200' : 'hover:bg-paper-200/70'
                   ].join(' ')}
                 >
-                  <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                  <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                     {cmd.category}
                   </span>
                   <span className="min-w-0 flex-1 truncate text-sm text-ink-900">
                     {cmd.title}
                   </span>
                   {cmd.shortcut && (
-                    <span className="shrink-0 rounded bg-paper-200/80 px-1.5 py-0.5 text-[11px] text-ink-500">
+                    <span className="shrink-0 rounded bg-paper-200/80 px-1.5 py-0.5 text-xs text-ink-500">
                       {cmd.shortcut}
                     </span>
                   )}
@@ -391,19 +385,19 @@ export function CommandPalette(): JSX.Element {
                     i === active ? 'bg-paper-200' : 'hover:bg-paper-200/70'
                   ].join(' ')}
                 >
-                  <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                  <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                     {familyTitle}
                   </span>
                   <span className="min-w-0 flex-1 truncate text-sm text-ink-900">
                     {theme.label}
                   </span>
-                  <span className="shrink-0 text-[11px] text-ink-400">
+                  <span className="shrink-0 text-xs text-ink-400">
                     {theme.mode}
                   </span>
                   {isOriginal && (
                     <span
                       aria-label="Active before preview"
-                      className="shrink-0 text-[11px] text-accent"
+                      className="shrink-0 text-xs text-accent"
                     >
                       current
                     </span>
@@ -423,17 +417,17 @@ export function CommandPalette(): JSX.Element {
                   i === active ? 'bg-paper-200' : 'hover:bg-paper-200/70'
                 ].join(' ')}
               >
-                <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                   {entry.kind === 'local' ? 'Local' : 'Remote'}
                 </span>
                 <span className="min-w-0 flex-1 truncate text-sm text-ink-900">
                   {entry.name}
                 </span>
-                <span className="min-w-0 max-w-[45%] truncate text-[11px] text-ink-400">
+                <span className="min-w-0 max-w-[45%] truncate text-xs text-ink-400">
                   {entry.location}
                 </span>
                 {entry.current && (
-                  <span className="shrink-0 text-[11px] text-accent">
+                  <span className="shrink-0 text-xs text-accent">
                     current
                   </span>
                 )}
@@ -441,7 +435,7 @@ export function CommandPalette(): JSX.Element {
             ))
           )}
         </div>
-        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-[11px] text-ink-500">
+        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
           <span>
             <kbd className="rounded bg-paper-200 px-1">↑↓</kbd>{' '}
             <kbd className="rounded bg-paper-200 px-1">Ctrl+N/P</kbd> move
@@ -455,7 +449,6 @@ export function CommandPalette(): JSX.Element {
             {mode === 'main' ? 'close' : mode === 'theme' ? 'revert' : 'back'}
           </span>
         </div>
-      </div>
-    </div>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/CommentsPanel.tsx b/packages/app-core/src/components/CommentsPanel.tsx
index a8a63d0a..5675a1a8 100644
--- a/packages/app-core/src/components/CommentsPanel.tsx
+++ b/packages/app-core/src/components/CommentsPanel.tsx
@@ -193,7 +193,7 @@ export function CommentsPanel({
       <div className="border-b border-paper-300/60 px-5 py-4">
         <div className="flex items-center justify-between gap-3">
           <div>
-            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-ink-400">
+            <div className="text-xs font-semibold uppercase tracking-[0.18em] text-ink-400">
               Comments
             </div>
             <div className="mt-2 flex items-center gap-2 text-xs text-ink-500">
@@ -317,7 +317,7 @@ export function CommentsPanel({
               />
             ))}
             {resolved.length > 0 && unresolved.length > 0 && (
-              <div className="px-1 pt-1 text-[11px] font-medium uppercase tracking-[0.14em] text-ink-400">
+              <div className="px-1 pt-1 text-xs font-medium uppercase tracking-[0.14em] text-ink-400">
                 Resolved
               </div>
             )}
@@ -414,7 +414,7 @@ function CommentCard({
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-2">
             <span className="truncate text-sm font-semibold text-ink-900">You</span>
-            <span className="shrink-0 text-[11px] text-ink-400">
+            <span className="shrink-0 text-xs text-ink-400">
               {dateFormatter.format(new Date(comment.updatedAt))}
             </span>
           </div>
@@ -591,7 +591,7 @@ function IconTextButton({
         <kbd
           aria-hidden="true"
           className={[
-            'pointer-events-none absolute -bottom-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded border border-paper-300/80 bg-paper-50 px-1 font-mono text-[8px] leading-none text-ink-600 shadow-[0_4px_10px_-8px_rgb(var(--z-shadow)/0.9)] transition-opacity',
+            'pointer-events-none absolute -bottom-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded border border-paper-300/80 bg-paper-50 px-1 font-mono text-2xs leading-none text-ink-600 shadow-[0_4px_10px_-8px_rgb(var(--z-shadow)/0.9)] transition-opacity',
             showShortcut ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100'
           ].join(' ')}
         >
@@ -600,7 +600,7 @@ function IconTextButton({
       )}
       <span
         aria-hidden="true"
-        className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300/75 bg-paper-100 px-2 py-1 text-[11px] font-medium text-ink-800 opacity-0 shadow-float transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+        className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300/75 bg-paper-100 px-2 py-1 text-xs font-medium text-ink-800 opacity-0 shadow-float transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
       >
         {title}
       </span>
@@ -618,7 +618,7 @@ function CommentKeyHint({
   return (
     <span
       title={label}
-      className="shrink-0 rounded-md border border-paper-300/60 bg-paper-100/80 px-1.5 py-0.5 text-[10px] leading-none text-ink-500"
+      className="shrink-0 rounded-md border border-paper-300/60 bg-paper-100/80 px-1.5 py-0.5 text-2xs leading-none text-ink-500"
     >
       <kbd className="font-mono text-ink-700">{keyLabel}</kbd>
     </span>
@@ -635,7 +635,7 @@ function InlineShortcut({
   return (
     <kbd
       className={[
-        'rounded border px-1 font-mono text-[9px] leading-4',
+        'rounded border px-1 font-mono text-2xs leading-4',
         tone === 'light'
           ? 'border-white/30 bg-white/12 text-white/80'
           : 'border-paper-300/80 bg-paper-50 text-ink-500'
diff --git a/packages/app-core/src/components/ConfirmModal.tsx b/packages/app-core/src/components/ConfirmModal.tsx
index 80bb122a..20211b66 100644
--- a/packages/app-core/src/components/ConfirmModal.tsx
+++ b/packages/app-core/src/components/ConfirmModal.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
-import { createPortal } from 'react-dom'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 export interface ConfirmOptions {
   title: string
@@ -18,14 +19,9 @@ export function ConfirmModal({
   onConfirm: () => void
   onCancel: () => void
 }): JSX.Element {
+  // Modal owns Escape (→ cancel); we only add Enter (→ confirm) here.
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        e.stopPropagation()
-        onCancel()
-        return
-      }
       if (e.key === 'Enter') {
         e.preventDefault()
         e.stopPropagation()
@@ -34,50 +30,24 @@ export function ConfirmModal({
     }
     window.addEventListener('keydown', handler, true)
     return () => window.removeEventListener('keydown', handler, true)
-  }, [onCancel, onConfirm])
+  }, [onConfirm])
 
-  return createPortal(
-    <div
-      data-confirm-modal
-      data-prompt-modal
-      className="fixed inset-0 z-[70] flex items-start justify-center bg-black/45 pt-[18vh] backdrop-blur-sm"
-      onClick={onCancel}
+  return (
+    <Modal
+      size="sm"
+      layer="modal"
+      onClose={onCancel}
+      data={{ 'data-confirm-modal': '', 'data-prompt-modal': '' }}
     >
-      <div
-        className="w-[min(440px,92vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-5 pt-5">
-          <div className="text-sm font-semibold text-ink-900">{options.title}</div>
-          {options.description && (
-            <div className="mt-2 whitespace-pre-wrap text-sm leading-6 text-ink-500">
-              {options.description}
-            </div>
-          )}
-        </div>
-        <div className="mt-4 flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-sm text-ink-800 hover:bg-paper-200"
-          >
-            {options.cancelLabel ?? 'Cancel'}
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            className={[
-              'rounded-md px-3 py-1.5 text-sm font-medium',
-              options.danger
-                ? 'bg-red-600 text-white hover:bg-red-700'
-                : 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-            ].join(' ')}
-          >
-            {options.confirmLabel ?? 'Confirm'}
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
+      <Modal.Header title={options.title} description={options.description} />
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onCancel}>
+          {options.cancelLabel ?? 'Cancel'}
+        </Button>
+        <Button variant={options.danger ? 'danger' : 'primary'} onClick={onConfirm}>
+          {options.confirmLabel ?? 'Confirm'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/ConnectionsPanel.tsx b/packages/app-core/src/components/ConnectionsPanel.tsx
index e286157f..93e976db 100644
--- a/packages/app-core/src/components/ConnectionsPanel.tsx
+++ b/packages/app-core/src/components/ConnectionsPanel.tsx
@@ -234,7 +234,7 @@ export function ConnectionsPanel({ note }: { note: NoteContent }): JSX.Element {
       >
         <PanelResizeHandle onStart={startResize} />
         <div className="border-b border-paper-300/60 px-4 py-4">
-          <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
+          <div className="text-xs font-medium uppercase tracking-[0.16em] text-ink-400">
             Connections
           </div>
           <div className="mt-2 flex items-center gap-2 text-xs text-ink-500">
@@ -339,7 +339,7 @@ export function ConnectionsPanel({ note }: { note: NoteContent }): JSX.Element {
           </ConnectionSection>
         </div>
         {showKeyboardHints && (
-          <div className="border-t border-paper-300/60 px-3 py-2 text-[11px] text-ink-500">
+          <div className="border-t border-paper-300/60 px-3 py-2 text-xs text-ink-500">
             {isHoverPreviewFocused
               ? 'Esc returns to Connections. Esc again returns to the note.'
               : 'Use p to focus the hover preview without leaving the keyboard.'}
@@ -428,20 +428,20 @@ function ConnectionRow({
           <div className={['truncate text-sm font-medium', active ? 'text-white' : 'text-ink-900'].join(' ')}>
             {note.title}
           </div>
-          <div className={['mt-0.5 truncate text-[11px]', active ? 'text-white/75' : 'text-ink-500'].join(' ')}>
+          <div className={['mt-0.5 truncate text-xs', active ? 'text-white/75' : 'text-ink-500'].join(' ')}>
             {note.path}
           </div>
         </div>
         <span
           className={[
-            'rounded-full px-2 py-1 text-[10px] uppercase tracking-[0.14em]',
+            'rounded-full px-2 py-1 text-2xs uppercase tracking-[0.14em]',
             active ? 'bg-white/12 text-white/80' : 'bg-paper-200/80 text-ink-500'
           ].join(' ')}
         >
           hover
         </span>
       </div>
-      <div className={['mt-2 line-clamp-3 text-[12px] leading-5', active ? 'text-white/85' : 'text-ink-600'].join(' ')}>
+      <div className={['mt-2 line-clamp-3 text-xs leading-5', active ? 'text-white/85' : 'text-ink-600'].join(' ')}>
         {summary}
       </div>
       {active && (
@@ -486,20 +486,20 @@ function MissingConnectionRow({
           <div className={['truncate text-sm font-medium', active ? 'text-white' : 'text-ink-900'].join(' ')}>
             {target}
           </div>
-          <div className={['mt-0.5 truncate text-[11px]', active ? 'text-white/75' : 'text-ink-500'].join(' ')}>
+          <div className={['mt-0.5 truncate text-xs', active ? 'text-white/75' : 'text-ink-500'].join(' ')}>
             {suggestedPath}
           </div>
         </div>
         <span
           className={[
-            'rounded-full px-2 py-1 text-[10px] uppercase tracking-[0.14em]',
+            'rounded-full px-2 py-1 text-2xs uppercase tracking-[0.14em]',
             active ? 'bg-white/12 text-white/80' : 'bg-amber-500/12 text-amber-200'
           ].join(' ')}
         >
           create
         </span>
       </div>
-      <div className={['mt-2 line-clamp-2 text-[12px] leading-5', active ? 'text-white/85' : 'text-ink-600'].join(' ')}>
+      <div className={['mt-2 line-clamp-2 text-xs leading-5', active ? 'text-white/85' : 'text-ink-600'].join(' ')}>
         No note resolves this wikilink yet. Click to create it.
       </div>
       {active && (
@@ -539,13 +539,13 @@ function ConnectionKeyHint({
   return (
     <span
       className={[
-        'pointer-events-none shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] leading-none',
+        'pointer-events-none shrink-0 rounded-md border px-1.5 py-0.5 text-2xs leading-none',
         active
           ? 'border-white/25 bg-white/12 text-white/80'
           : 'border-paper-300/70 bg-paper-100/75 text-ink-500'
       ].join(' ')}
     >
-      <span className="font-mono text-[10px]">{keyLabel}</span>
+      <span className="font-mono text-2xs">{keyLabel}</span>
       <span className="ml-1">{label}</span>
     </span>
   )
diff --git a/packages/app-core/src/components/ContextMenu.tsx b/packages/app-core/src/components/ContextMenu.tsx
index 58a6e86d..d01e94b7 100644
--- a/packages/app-core/src/components/ContextMenu.tsx
+++ b/packages/app-core/src/components/ContextMenu.tsx
@@ -188,7 +188,7 @@ export function ContextMenu({ x, y, items, onClose }: Props): JSX.Element {
       onContextMenu={(e) => e.preventDefault()}
     >
       {query && (
-        <div className="mb-1 flex items-center gap-1 rounded-md bg-paper-200/80 px-2 py-1 font-mono text-[11px] text-ink-700">
+        <div className="mb-1 flex items-center gap-1 rounded-md bg-paper-200/80 px-2 py-1 font-mono text-xs text-ink-700">
           <span className="text-ink-400">filter</span>
           <span className="flex-1 truncate text-ink-900">{query}</span>
           <span className="text-ink-400">{visible.length}</span>
@@ -239,7 +239,7 @@ export function ContextMenu({ x, y, items, onClose }: Props): JSX.Element {
               {item.hint && (
                 <span
                   className={[
-                    'shrink-0 text-[11px]',
+                    'shrink-0 text-xs',
                     active && !item.danger ? 'text-ink-600' : 'text-ink-400'
                   ].join(' ')}
                 >
diff --git a/packages/app-core/src/components/EditorPane.tsx b/packages/app-core/src/components/EditorPane.tsx
index fe0a23ac..38d43047 100644
--- a/packages/app-core/src/components/EditorPane.tsx
+++ b/packages/app-core/src/components/EditorPane.tsx
@@ -3289,7 +3289,7 @@ function EmptyPaneState({
             >
               <PanelLeftIcon width={16} height={16} />
               <span>Show sidebar</span>
-              <span className="rounded-md border border-paper-300/80 bg-paper-50/80 px-1.5 py-0.5 font-mono text-[11px] text-ink-500">
+              <span className="rounded-md border border-paper-300/80 bg-paper-50/80 px-1.5 py-0.5 font-mono text-xs text-ink-500">
                 ⌘1
               </span>
             </button>
@@ -3325,7 +3325,7 @@ function IconBtn({
       ].join(' ')}
     >
       <span className="pointer-events-none">{children}</span>
-      <span className="pointer-events-none absolute left-1/2 top-full z-30 mt-1.5 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300 bg-paper-50 px-2 py-1 text-[11px] font-medium text-ink-800 shadow-panel group-hover:block group-focus-visible:block">
+      <span className="pointer-events-none absolute left-1/2 top-full z-30 mt-1.5 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300 bg-paper-50 px-2 py-1 text-xs font-medium text-ink-800 shadow-panel group-hover:block group-focus-visible:block">
         {title}
       </span>
     </button>
diff --git a/packages/app-core/src/components/EmptyVault.tsx b/packages/app-core/src/components/EmptyVault.tsx
index 0c8e4ce2..5b656465 100644
--- a/packages/app-core/src/components/EmptyVault.tsx
+++ b/packages/app-core/src/components/EmptyVault.tsx
@@ -1,4 +1,5 @@
 import { useStore } from '../store'
+import { Button } from './ui/Button'
 import appIcon from '../assets/zennotes-app-icon.png'
 
 export function EmptyVault(): JSX.Element {
@@ -17,7 +18,7 @@ export function EmptyVault(): JSX.Element {
         <img
           src={appIcon}
           alt="ZenNotes app icon"
-          className="h-[72px] w-[72px] rounded-[18px] shadow-panel"
+          className="h-[72px] w-[72px] rounded-2xl shadow-panel"
         />
         <div>
           <h1 className="font-serif text-2xl font-semibold text-ink-900">Welcome to ZenNotes</h1>
@@ -42,19 +43,23 @@ export function EmptyVault(): JSX.Element {
           )}
         </div>
         <div className="flex flex-wrap items-center justify-center gap-3">
-          <button
+          <Button
+            variant="primary"
+            size="md"
             onClick={() => void openVaultPicker()}
-            className="rounded-lg bg-ink-900 px-4 py-2 text-sm font-medium text-paper-50 shadow-panel hover:bg-ink-800"
+            className="shadow-panel"
           >
             {isServerVaultSetup ? 'Connect to server vault' : 'Choose vault folder'}
-          </button>
+          </Button>
           {canConnectRemote && (
-            <button
+            <Button
+              variant="secondary"
+              size="md"
               onClick={() => void connectRemoteWorkspace()}
-              className="rounded-lg border border-paper-300 bg-paper-100 px-4 py-2 text-sm font-medium text-ink-900 shadow-panel hover:bg-paper-200"
+              className="shadow-panel"
             >
               Connect to ZenNotes Server
-            </button>
+            </Button>
           )}
         </div>
         {workspaceSetupError && (
diff --git a/packages/app-core/src/components/ExternalFileApp.tsx b/packages/app-core/src/components/ExternalFileApp.tsx
index 56cf68ef..23dc7545 100644
--- a/packages/app-core/src/components/ExternalFileApp.tsx
+++ b/packages/app-core/src/components/ExternalFileApp.tsx
@@ -241,7 +241,7 @@ export function ExternalFileApp(): JSX.Element {
               className="h-1.5 w-1.5 shrink-0 rounded-full bg-accent/80"
             />
           )}
-          <span className="truncate text-[11px] text-ink-400">Not in a vault</span>
+          <span className="truncate text-xs text-ink-400">Not in a vault</span>
         </div>
         <div
           className="flex shrink-0 items-center gap-1"
@@ -252,12 +252,12 @@ export function ExternalFileApp(): JSX.Element {
             onClick={moveToVault}
             disabled={moving}
             title="Move this file into your vault"
-            className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-ink-600 hover:bg-paper-200 hover:text-ink-900 disabled:opacity-50"
+            className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-ink-600 hover:bg-paper-200 hover:text-ink-900 disabled:opacity-50"
           >
             <InboxIcon width={13} height={13} />
             {moving ? 'Moving…' : 'Move to Vault'}
           </button>
-          <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-[11px]">
+          <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-xs">
             {(['edit', 'preview'] as const).map((m) => (
               <button
                 key={m}
@@ -285,7 +285,7 @@ export function ExternalFileApp(): JSX.Element {
       </header>
 
       {moveError && (
-        <div className="shrink-0 border-b border-paper-300/70 bg-rose-500/10 px-4 py-1.5 text-[12px] text-rose-600">
+        <div className="shrink-0 border-b border-paper-300/70 bg-rose-500/10 px-4 py-1.5 text-xs text-rose-600">
           {moveError}
         </div>
       )}
diff --git a/packages/app-core/src/components/FloatingNoteApp.tsx b/packages/app-core/src/components/FloatingNoteApp.tsx
index dc40dae7..befb8c63 100644
--- a/packages/app-core/src/components/FloatingNoteApp.tsx
+++ b/packages/app-core/src/components/FloatingNoteApp.tsx
@@ -437,7 +437,7 @@ export function FloatingNoteApp({ notePath }: { notePath: string }): JSX.Element
           className="flex shrink-0 items-center gap-1"
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
-          <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-[11px]">
+          <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-xs">
             {(['edit', 'preview'] as const).map((m) => (
               <button
                 key={m}
diff --git a/packages/app-core/src/components/FolderIconPickerModal.tsx b/packages/app-core/src/components/FolderIconPickerModal.tsx
index 48cdd58e..4786f90f 100644
--- a/packages/app-core/src/components/FolderIconPickerModal.tsx
+++ b/packages/app-core/src/components/FolderIconPickerModal.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react'
-import { createPortal } from 'react-dom'
 import type { FolderIconId } from '@shared/ipc'
 import { FOLDER_ICON_OPTIONS } from './FolderIcons'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 export function FolderIconPickerModal({
   targetLabel,
@@ -14,64 +14,43 @@ export function FolderIconPickerModal({
   onSelect: (iconId: FolderIconId) => void
   onCancel: () => void
 }): JSX.Element {
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        onCancel()
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [onCancel])
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-[70] flex items-start justify-center bg-black/45 pt-[14vh] backdrop-blur-sm"
-      onClick={onCancel}
-    >
-      <div
-        className="w-[min(560px,92vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="px-5 pt-5">
-          <div className="text-sm font-semibold text-ink-900">Choose icon</div>
-          <div className="mt-1 text-xs text-ink-500">
-            Select a sidebar icon for <span className="font-medium text-ink-700">{targetLabel}</span>.
-          </div>
-        </div>
-        <div className="grid grid-cols-2 gap-2 px-5 py-4 sm:grid-cols-3">
-          {FOLDER_ICON_OPTIONS.map((option) => {
-            const active = option.id === currentIconId
-            return (
-              <button
-                key={option.id}
-                type="button"
-                onClick={() => onSelect(option.id)}
-                className={[
-                  'flex items-center gap-3 rounded-xl border px-3 py-2 text-left transition-colors',
-                  active
-                    ? 'border-accent bg-accent/10 text-accent'
-                    : 'border-paper-300 bg-paper-50 text-ink-800 hover:border-paper-400 hover:bg-paper-200/70'
-                ].join(' ')}
-              >
-                <span className={active ? 'text-accent' : 'text-ink-500'}>{option.icon}</span>
-                <span className="truncate text-sm font-medium">{option.label}</span>
-              </button>
-            )
-          })}
-        </div>
-        <div className="flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-sm text-ink-800 hover:bg-paper-200"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
+  return (
+    <Modal size="md" layer="modal" onClose={onCancel}>
+      <Modal.Header
+        title="Choose icon"
+        description={
+          <>
+            Select a sidebar icon for{' '}
+            <span className="font-medium text-ink-700">{targetLabel}</span>.
+          </>
+        }
+      />
+      <Modal.Body className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+        {FOLDER_ICON_OPTIONS.map((option) => {
+          const active = option.id === currentIconId
+          return (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => onSelect(option.id)}
+              className={[
+                'flex items-center gap-3 rounded-xl border px-3 py-2 text-left transition-colors',
+                active
+                  ? 'border-accent bg-accent/10 text-accent'
+                  : 'border-paper-300 bg-paper-50 text-ink-800 hover:border-paper-400 hover:bg-paper-200/70'
+              ].join(' ')}
+            >
+              <span className={active ? 'text-accent' : 'text-ink-500'}>{option.icon}</span>
+              <span className="truncate text-sm font-medium">{option.label}</span>
+            </button>
+          )
+        })}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/HelpView.tsx b/packages/app-core/src/components/HelpView.tsx
index 06b34406..95a36b42 100644
--- a/packages/app-core/src/components/HelpView.tsx
+++ b/packages/app-core/src/components/HelpView.tsx
@@ -343,13 +343,13 @@ export function HelpView(): JSX.Element {
       >
         <section
           id="help-overview"
-          className="overflow-hidden rounded-[24px] border border-paper-300/70 bg-paper-50/45 shadow-[0_12px_40px_rgba(15,23,42,0.05)]"
+          className="overflow-hidden rounded-3xl border border-paper-300/70 bg-paper-50/45 shadow-[0_12px_40px_rgba(15,23,42,0.05)]"
         >
           <div className="bg-[radial-gradient(circle_at_top_left,rgba(214,140,82,0.14),transparent_38%),linear-gradient(180deg,rgba(255,255,255,0.2),rgba(255,255,255,0.02))] px-5 py-5 sm:px-6 sm:py-5">
             <div className="flex flex-col gap-4">
               <div className="flex flex-wrap items-start justify-between gap-3">
                 <div className="max-w-3xl">
-                  <div className="inline-flex items-center gap-2 rounded-full border border-paper-300/70 bg-paper-100/80 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.24em] text-ink-500">
+                  <div className="inline-flex items-center gap-2 rounded-full border border-paper-300/70 bg-paper-100/80 px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-ink-500">
                     <DocumentIcon width={14} height={14} />
                     ZenNotes Manual
                   </div>
@@ -449,7 +449,7 @@ export function HelpView(): JSX.Element {
         </section>
 
         {!hasMatches && (
-          <section className="rounded-[28px] border border-paper-300/70 bg-paper-50/45 px-6 py-8 text-center shadow-[0_18px_48px_rgba(15,23,42,0.05)]">
+          <section className="rounded-3xl border border-paper-300/70 bg-paper-50/45 px-6 py-8 text-center shadow-[0_18px_48px_rgba(15,23,42,0.05)]">
             <h2 className="font-serif text-2xl text-ink-900">No help topics matched.</h2>
             <p className="mt-2 text-sm text-ink-500">
               Clear the filter to see the full manual again.
@@ -511,7 +511,7 @@ export function HelpView(): JSX.Element {
                   {shortcutSections.map((section) => (
                     <div
                       key={section.id}
-                      className="rounded-[24px] border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]"
+                      className="rounded-3xl border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]"
                     >
                       <h3 className="text-sm font-semibold text-ink-900">{section.title}</h3>
                       <p className="mt-1 text-xs leading-6 text-ink-500">{section.description}</p>
@@ -538,7 +538,7 @@ export function HelpView(): JSX.Element {
                 subtitle="Short aliases, curated commands, and keyboard-first editor behavior."
               >
                 <div className="grid gap-4">
-                  <div className="rounded-[24px] border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]">
+                  <div className="rounded-3xl border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]">
                     <div className="flex items-center gap-2 text-sm font-semibold text-ink-900">
                       <DocumentIcon width={15} height={15} className="text-accent" />
                       Curated ex commands
@@ -597,7 +597,7 @@ export function HelpView(): JSX.Element {
                         {group.commands.map((command) => (
                           <div
                             key={command.id}
-                            className="rounded-[22px] border border-paper-300/70 bg-paper-50/55 px-4 py-3 shadow-[0_12px_28px_rgba(15,23,42,0.03)]"
+                            className="rounded-3xl border border-paper-300/70 bg-paper-50/55 px-4 py-3 shadow-[0_12px_28px_rgba(15,23,42,0.03)]"
                           >
                             <div className="flex flex-wrap items-start justify-between gap-2">
                               <div className="min-w-0">
@@ -608,7 +608,7 @@ export function HelpView(): JSX.Element {
                                   {command.when && <Badge label="Contextual" />}
                                 </div>
                               </div>
-                              <span className="rounded-full bg-paper-100/85 px-2 py-1 text-[10px] font-medium uppercase tracking-[0.18em] text-ink-500">
+                              <span className="rounded-full bg-paper-100/85 px-2 py-1 text-2xs font-medium uppercase tracking-[0.18em] text-ink-500">
                                 {command.id}
                               </span>
                             </div>
@@ -650,7 +650,7 @@ export function HelpView(): JSX.Element {
                   {settingsSections.map((section) => (
                     <div
                       key={section.title}
-                      className="rounded-[24px] border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]"
+                      className="rounded-3xl border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]"
                     >
                       <h3 className="text-sm font-semibold text-ink-900">{section.title}</h3>
                       <div className="mt-4 space-y-3">
@@ -709,7 +709,7 @@ function renderRichText(text: string): React.ReactNode {
         return (
           <code
             key={i}
-            className="my-2.5 block overflow-x-auto whitespace-pre-wrap break-words rounded-xl border border-paper-300/70 bg-paper-100/80 px-3.5 py-2.5 font-mono text-[12.5px] leading-6 text-ink-800"
+            className="my-2.5 block overflow-x-auto whitespace-pre-wrap break-words rounded-xl border border-paper-300/70 bg-paper-100/80 px-3.5 py-2.5 font-mono text-xs leading-6 text-ink-800"
           >
             {code}
           </code>
@@ -730,9 +730,9 @@ function renderRichText(text: string): React.ReactNode {
 
 function InfoCard({ title, body }: { title: string; body: string }): JSX.Element {
   return (
-    <div className="rounded-[24px] border border-paper-300/70 bg-paper-50/55 p-6 shadow-[0_16px_36px_rgba(15,23,42,0.04)]">
-      <h3 className="text-[15px] font-semibold text-ink-900">{title}</h3>
-      <div className="mt-2.5 text-[15px] leading-7 text-ink-600">{renderRichText(body)}</div>
+    <div className="rounded-3xl border border-paper-300/70 bg-paper-50/55 p-6 shadow-[0_16px_36px_rgba(15,23,42,0.04)]">
+      <h3 className="text-base font-semibold text-ink-900">{title}</h3>
+      <div className="mt-2.5 text-base leading-7 text-ink-600">{renderRichText(body)}</div>
     </div>
   )
 }
@@ -767,7 +767,7 @@ function Keycap({
   return (
     <span
       className={[
-        'inline-flex items-center rounded-lg border px-2 py-1 font-mono text-[11px]',
+        'inline-flex items-center rounded-lg border px-2 py-1 font-mono text-xs',
         subtle
           ? 'border-paper-300/80 bg-paper-50/80 text-ink-500'
           : 'border-paper-300 bg-paper-100 text-ink-800'
@@ -780,7 +780,7 @@ function Keycap({
 
 function Badge({ label }: { label: string }): JSX.Element {
   return (
-    <span className="rounded-full border border-paper-300/80 bg-paper-50/80 px-2 py-1 text-[10px] font-medium uppercase tracking-[0.16em] text-ink-500">
+    <span className="rounded-full border border-paper-300/80 bg-paper-50/80 px-2 py-1 text-2xs font-medium uppercase tracking-[0.16em] text-ink-500">
       {label}
     </span>
   )
@@ -817,12 +817,12 @@ function CalloutCard({
   body: string
 }): JSX.Element {
   return (
-    <div className="rounded-[24px] border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]">
+    <div className="rounded-3xl border border-paper-300/70 bg-paper-50/55 p-5 shadow-[0_16px_36px_rgba(15,23,42,0.04)]">
       <div className="flex items-center gap-2 text-sm font-semibold text-ink-900">
         {icon}
         {title}
       </div>
-      <div className="mt-2 text-[15px] leading-7 text-ink-600">{renderRichText(body)}</div>
+      <div className="mt-2 text-base leading-7 text-ink-600">{renderRichText(body)}</div>
     </div>
   )
 }
diff --git a/packages/app-core/src/components/NoteHoverPreview.tsx b/packages/app-core/src/components/NoteHoverPreview.tsx
index 7f23bf77..cdacfbd6 100644
--- a/packages/app-core/src/components/NoteHoverPreview.tsx
+++ b/packages/app-core/src/components/NoteHoverPreview.tsx
@@ -156,15 +156,15 @@ export function NoteHoverPreview({
       <div className="border-b border-paper-300/60 px-4 py-3">
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
-            <div className="text-[11px] font-medium uppercase tracking-[0.14em] text-ink-400">
+            <div className="text-xs font-medium uppercase tracking-[0.14em] text-ink-400">
               Hover Preview
             </div>
             <div className="mt-1 truncate text-sm font-semibold text-ink-900">{note.title}</div>
-            <div className="mt-0.5 truncate text-[11px] text-ink-500">{note.path}</div>
+            <div className="mt-0.5 truncate text-xs text-ink-500">{note.path}</div>
           </div>
           {interactive && (
-            <span className="shrink-0 rounded-md border border-paper-300/70 bg-paper-50/70 px-1.5 py-0.5 text-[10px] leading-none text-ink-500">
-              <span className="font-mono text-[10px]">esc</span>
+            <span className="shrink-0 rounded-md border border-paper-300/70 bg-paper-50/70 px-1.5 py-0.5 text-2xs leading-none text-ink-500">
+              <span className="font-mono text-2xs">esc</span>
               <span className="ml-1">back</span>
             </span>
           )}
diff --git a/packages/app-core/src/components/NoteList.tsx b/packages/app-core/src/components/NoteList.tsx
index d644f393..09820815 100644
--- a/packages/app-core/src/components/NoteList.tsx
+++ b/packages/app-core/src/components/NoteList.tsx
@@ -10,6 +10,7 @@ import {
 } from './icons'
 import { ContextMenu, type ContextMenuItem } from './ContextMenu'
 import { ResizeHandle } from './ResizeHandle'
+import { Button, IconButton } from './ui/Button'
 import { confirmMoveToTrash } from '../lib/confirm-trash'
 import { buildMoveNotePrompt, parseMoveNoteTarget } from '../lib/move-note'
 import { extractTags } from '../lib/tags'
@@ -723,7 +724,7 @@ export function NoteList(): JSX.Element {
       <header className="glass-header flex h-12 shrink-0 items-center justify-between px-4">
         <div className="flex items-baseline gap-2">
           <h2 className="text-sm font-semibold text-ink-900">{heading}</h2>
-          <span className="text-xs text-ink-400">
+          <span className="text-xs text-ink-500">
             {view.kind === 'assets' ? assetFiles.length : orderedFolderEntries.length}
           </span>
         </div>
@@ -746,29 +747,22 @@ export function NoteList(): JSX.Element {
               ))}
             </div>
           ) : view.kind === 'folder' && view.folder === 'trash' && filtered.length > 0 && (
-            <button
-              onClick={() => void emptyTrash()}
-              className="rounded-md px-2 py-1 text-xs text-ink-500 hover:bg-paper-200 hover:text-ink-800"
-            >
+            <Button variant="ghost" size="sm" onClick={() => void emptyTrash()}>
               Empty
-            </button>
+            </Button>
           )}
           {view.kind !== 'assets' && (
-            <button
-              className="flex h-6 w-6 items-center justify-center rounded-md text-ink-500 hover:bg-paper-200 hover:text-ink-800"
+            <IconButton
+              size="sm"
               title="New note"
               onClick={() => void createAndOpen(newTarget.folder, newTarget.subpath)}
             >
               <PlusIcon />
-            </button>
+            </IconButton>
           )}
-          <button
-            className="flex h-6 w-6 items-center justify-center rounded-md text-ink-500 hover:bg-paper-200 hover:text-ink-800"
-            title="Hide note list"
-            onClick={toggleNoteList}
-          >
+          <IconButton size="sm" title="Hide note list" onClick={toggleNoteList}>
             <ColumnsIcon />
-          </button>
+          </IconButton>
         </div>
       </header>
 
@@ -780,7 +774,7 @@ export function NoteList(): JSX.Element {
       >
         {view.kind === 'assets' ? (
           assetFiles.length === 0 ? (
-            <div className="px-4 py-10 text-center text-sm text-ink-400">
+            <div className="px-4 py-10 text-center text-sm text-ink-500">
               No files yet. Files anywhere inside the vault show up here.
             </div>
           ) : assetLayout === 'grid' ? (
@@ -834,7 +828,7 @@ export function NoteList(): JSX.Element {
             </div>
           )
         ) : orderedFolderEntries.length === 0 ? (
-          <div className="px-4 py-10 text-center text-sm text-ink-400">
+          <div className="px-4 py-10 text-center text-sm text-ink-500">
             {view.kind === 'folder' && view.folder === 'trash'
               ? `${folderLabels.trash} is empty.`
               : 'No files here yet.'}
@@ -966,7 +960,7 @@ function NoteRow({
     >
       <div className="flex items-center justify-between gap-2">
         <span className="truncate text-sm font-medium text-ink-900">{note.title}</span>
-        <span className="shrink-0 text-[11px] text-ink-400">{formatDate(note.updatedAt)}</span>
+        <span className="shrink-0 text-xs text-ink-500">{formatDate(note.updatedAt)}</span>
       </div>
       <span className="line-clamp-2 text-xs text-ink-500">
         {note.excerpt || 'Empty note'}
@@ -1021,7 +1015,7 @@ function FolderAssetRow({
             loading="lazy"
           />
         ) : (
-          <span className="text-[10px] uppercase tracking-[0.16em] text-ink-500">
+          <span className="text-2xs uppercase tracking-[0.16em] text-ink-500">
             {asset.kind}
           </span>
         )}
@@ -1030,7 +1024,7 @@ function FolderAssetRow({
         <div className="truncate text-sm font-medium text-ink-900">{asset.name}</div>
         <div className="truncate text-xs text-ink-500">{asset.path}</div>
       </div>
-      <div className="shrink-0 text-[10px] uppercase tracking-wide text-ink-400">
+      <div className="form-label shrink-0">
         {extension || formatBytes(asset.size)}
       </div>
     </button>
@@ -1073,14 +1067,14 @@ function AssetCard({
             loading="lazy"
           />
         ) : (
-          <div className="px-4 text-xs uppercase tracking-[0.18em] text-ink-400">
+          <div className="px-4 text-xs uppercase tracking-[0.18em] text-ink-500">
             {asset.kind}
           </div>
         )}
       </div>
       <div className="border-t border-paper-300/70 px-3 py-2">
         <div className="truncate text-sm font-medium text-ink-900">{asset.name}</div>
-        <div className="mt-0.5 flex items-center justify-between gap-2 text-[11px] text-ink-500">
+        <div className="mt-0.5 flex items-center justify-between gap-2 text-xs text-ink-500">
           <span className="truncate">{asset.path}</span>
           <span className="shrink-0">{formatBytes(asset.size)}</span>
         </div>
@@ -1120,14 +1114,14 @@ function AssetRow({
             loading="lazy"
           />
         ) : (
-          <span className="text-[10px] uppercase tracking-[0.16em] text-ink-500">{asset.kind}</span>
+          <span className="text-2xs uppercase tracking-[0.16em] text-ink-500">{asset.kind}</span>
         )}
       </div>
       <div className="min-w-0 flex-1">
         <div className="truncate text-sm font-medium text-ink-900">{asset.name}</div>
         <div className="truncate text-xs text-ink-500">{asset.path}</div>
       </div>
-      <div className="shrink-0 text-[11px] text-ink-400">
+      <div className="shrink-0 text-xs text-ink-500">
         {formatBytes(asset.size)}
       </div>
     </button>
diff --git a/packages/app-core/src/components/OnboardingWizard.tsx b/packages/app-core/src/components/OnboardingWizard.tsx
index a6a8a249..3e887d55 100644
--- a/packages/app-core/src/components/OnboardingWizard.tsx
+++ b/packages/app-core/src/components/OnboardingWizard.tsx
@@ -7,6 +7,7 @@ import {
   type VaultSettings
 } from '@shared/ipc'
 import { normalizeDailyNotesDirectory } from '../lib/vault-layout'
+import { Button } from './ui/Button'
 import appIcon from '../assets/zennotes-app-icon.png'
 
 type StepId = 'welcome' | 'vim' | 'theme' | 'vault' | 'layout' | 'done'
@@ -274,13 +275,9 @@ export function OnboardingWizard(): JSX.Element {
         </div>
 
         <div className="flex items-center justify-end text-xs text-ink-500">
-          <button
-            type="button"
-            onClick={skip}
-            className="rounded-md px-2 py-1 text-ink-500 transition-colors hover:text-ink-800"
-          >
+          <Button variant="ghost" size="sm" onClick={skip}>
             Skip setup
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -346,7 +343,7 @@ function StepRail({
             />
             <span
               className={[
-                'text-[10px] font-medium uppercase tracking-[0.12em] transition-colors',
+                'text-2xs font-medium uppercase tracking-[0.12em] transition-colors',
                 active
                   ? 'text-ink-900'
                   : reachable
@@ -374,9 +371,7 @@ function StepHeading({
 }): JSX.Element {
   return (
     <div className="mb-6">
-      <div className="text-[11px] font-medium uppercase tracking-[0.22em] text-ink-500">
-        {eyebrow}
-      </div>
+      <div className="form-label">{eyebrow}</div>
       <h2 className="mt-2 font-serif text-2xl font-semibold text-ink-900">{title}</h2>
       {subtitle && <p className="mt-3 max-w-prose text-sm leading-6 text-ink-600">{subtitle}</p>}
     </div>
@@ -403,29 +398,21 @@ function StepFooter({
       {hideBack ? (
         <span />
       ) : (
-        <button
-          type="button"
-          onClick={onBack}
-          className="rounded-lg px-3 py-2 text-sm text-ink-600 transition-colors hover:bg-paper-200/60 hover:text-ink-900"
-        >
+        <Button variant="ghost" size="sm" onClick={onBack}>
           ← Back
-        </button>
+        </Button>
       )}
       <div className="flex items-center gap-3">
         {hint && <span className="text-xs text-ink-500">{hint}</span>}
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="md"
           onClick={onPrimary}
           disabled={primaryDisabled}
-          className={[
-            'rounded-lg px-4 py-2 text-sm font-medium shadow-panel transition-colors',
-            primaryDisabled
-              ? 'cursor-not-allowed bg-paper-300 text-ink-500'
-              : 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-          ].join(' ')}
+          className="shadow-panel"
         >
           {primaryLabel}
-        </button>
+        </Button>
       </div>
     </div>
   )
@@ -438,7 +425,7 @@ function WelcomeStep({ onNext }: { onNext: () => void }): JSX.Element {
         <img
           src={appIcon}
           alt="ZenNotes app icon"
-          className="h-[72px] w-[72px] rounded-[18px] shadow-panel"
+          className="h-[72px] w-[72px] rounded-2xl shadow-panel"
         />
         <div className="mt-5">
           <h1 className="font-serif text-3xl font-semibold text-ink-900">Welcome to ZenNotes</h1>
@@ -466,9 +453,7 @@ function WelcomeStep({ onNext }: { onNext: () => void }): JSX.Element {
 function Tile({ label, value }: { label: string; value: string }): JSX.Element {
   return (
     <div className="rounded-xl border border-paper-300/60 bg-paper-100/60 px-4 py-3 text-left">
-      <div className="text-[10px] font-medium uppercase tracking-[0.18em] text-ink-500">
-        {label}
-      </div>
+      <div className="form-label">{label}</div>
       <div className="mt-1 text-sm font-medium text-ink-900">{value}</div>
     </div>
   )
@@ -599,9 +584,7 @@ function ThemeStep({
         subtitle="Each family has light + dark variants. Auto follows your system."
       />
       <div className="mb-5">
-        <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
-          Mode
-        </div>
+        <div className="form-label mb-2">Mode</div>
         <div className="inline-flex rounded-xl border border-paper-300/60 bg-paper-100/60 p-1">
           {(['light', 'dark', 'auto'] as ThemeMode[]).map((mode) => (
             <button
@@ -621,9 +604,7 @@ function ThemeStep({
         </div>
       </div>
 
-      <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
-        Family
-      </div>
+      <div className="form-label mb-2">Family</div>
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
         {FAMILY_DESCRIPTORS.map((d) => (
           <ThemeFamilyTile
@@ -638,9 +619,7 @@ function ThemeStep({
 
       {variants.length > 1 && (
         <div className="mt-5">
-          <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
-            Variant
-          </div>
+          <div className="form-label mb-2">Variant</div>
           <div className="flex flex-wrap gap-2">
             {variants.map((variant) => {
               const selected = variant.id === themeId
@@ -700,7 +679,7 @@ function ThemeFamilyTile({
         className="flex h-12 w-full items-center justify-between overflow-hidden rounded-lg px-2"
         style={{ background: swatch.bg }}
       >
-        <span className="text-[11px] font-medium" style={{ color: swatch.fg }}>
+        <span className="text-xs font-medium" style={{ color: swatch.fg }}>
           Aa
         </span>
         <span className="h-3 w-3 rounded-full" style={{ background: swatch.accent }} />
@@ -742,21 +721,23 @@ function VaultStep({
       />
 
       <div className="flex flex-col items-start gap-3 sm:flex-row sm:items-center">
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="md"
           onClick={() => void openVaultPicker()}
-          className="rounded-lg bg-ink-900 px-4 py-2 text-sm font-medium text-paper-50 shadow-panel transition-colors hover:bg-ink-800"
+          className="shadow-panel"
         >
           {isServerVaultSetup ? 'Connect to server vault' : 'Choose vault folder'}
-        </button>
+        </Button>
         {canConnectRemote && (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="md"
             onClick={() => void connectRemoteWorkspace()}
-            className="rounded-lg border border-paper-300/70 bg-paper-100/80 px-4 py-2 text-sm font-medium text-ink-900 shadow-panel transition-colors hover:bg-paper-200"
+            className="shadow-panel"
           >
             Connect to ZenNotes Server
-          </button>
+          </Button>
         )}
       </div>
 
@@ -846,9 +827,7 @@ function LayoutStep({
 
       <div className="space-y-6">
         <div>
-          <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
-            Primary notes location
-          </div>
+          <div className="form-label mb-2">Primary notes location</div>
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
             <ChoiceCard
               selected={primaryLocation === 'inbox'}
@@ -867,9 +846,7 @@ function LayoutStep({
 
         <div>
           <div className="mb-2 flex items-center justify-between">
-            <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
-              Daily notes
-            </div>
+            <div className="form-label">Daily notes</div>
             <button
               type="button"
               role="switch"
@@ -962,30 +939,23 @@ function DoneStep({
       </div>
 
       <div className="mt-8 flex items-center justify-between gap-4">
-        <button
-          type="button"
-          onClick={onBack}
-          className="rounded-lg px-3 py-2 text-sm text-ink-600 transition-colors hover:bg-paper-200/60 hover:text-ink-900"
-        >
+        <Button variant="ghost" size="sm" onClick={onBack}>
           ← Back
-        </button>
+        </Button>
         <div className="flex items-center gap-3">
           {hasVault && (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="md"
               onClick={onOpenHelp}
-              className="rounded-lg border border-paper-300/70 bg-paper-100/80 px-4 py-2 text-sm font-medium text-ink-900 shadow-panel transition-colors hover:bg-paper-200"
+              className="shadow-panel"
             >
               Open the help guide
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
-            onClick={onFinish}
-            className="rounded-lg bg-ink-900 px-4 py-2 text-sm font-medium text-paper-50 shadow-panel transition-colors hover:bg-ink-800"
-          >
+          <Button variant="primary" size="md" onClick={onFinish} className="shadow-panel">
             {hasVault ? 'Start writing' : 'Finish'}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/packages/app-core/src/components/OutlinePalette.tsx b/packages/app-core/src/components/OutlinePalette.tsx
index 2858c1f6..edb86f66 100644
--- a/packages/app-core/src/components/OutlinePalette.tsx
+++ b/packages/app-core/src/components/OutlinePalette.tsx
@@ -18,6 +18,7 @@ import { isTasksTabPath } from '@shared/tasks'
 import { isTrashTabPath } from '@shared/trash'
 import { isQuickNotesTabPath } from '@shared/quick-notes'
 import { focusEditorNormalMode } from '../lib/editor-focus'
+import { Modal } from './ui/Modal'
 
 function isVirtualPath(path: string | null): boolean {
   if (!path) return true
@@ -78,15 +79,8 @@ export function OutlinePalette(): JSX.Element {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 pt-[15vh] backdrop-blur-sm"
-      onClick={close}
-    >
-      <div
-        className="w-[min(560px,90vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300/70"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="border-b border-paper-300/70 px-4 py-3">
+    <Modal size="md" layer="palette" onClose={close} closeOnEsc={false}>
+      <div className="border-b border-paper-300/70 px-4 py-3">
           <input
             ref={inputRef}
             value={query}
@@ -134,16 +128,16 @@ export function OutlinePalette(): JSX.Element {
                 ].join(' ')}
                 style={{ paddingLeft: `${16 + (item.level - 1) * 14}px` }}
               >
-                <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                   H{item.level}
                 </span>
                 <span className="min-w-0 flex-1 truncate text-sm text-ink-900">{item.text}</span>
-                <span className="shrink-0 text-[11px] text-ink-400">L{item.line}</span>
+                <span className="shrink-0 text-xs text-ink-400">L{item.line}</span>
               </button>
             ))
           )}
         </div>
-        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-[11px] text-ink-500">
+        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
           <span>
             <kbd className="rounded bg-paper-200 px-1">↑↓</kbd>{' '}
             <kbd className="rounded bg-paper-200 px-1">Ctrl+N/P</kbd> move
@@ -155,7 +149,6 @@ export function OutlinePalette(): JSX.Element {
             <kbd className="rounded bg-paper-200 px-1">esc</kbd> close
           </span>
         </div>
-      </div>
-    </div>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/OutlinePanel.tsx b/packages/app-core/src/components/OutlinePanel.tsx
index 877e5b7c..4a9dee74 100644
--- a/packages/app-core/src/components/OutlinePanel.tsx
+++ b/packages/app-core/src/components/OutlinePanel.tsx
@@ -60,7 +60,7 @@ export function OutlinePanel({ note, activeLine, onJump }: Props): JSX.Element {
     >
       <PanelResizeHandle onStart={startResize} />
       <div className="border-b border-paper-300/60 px-4 py-4">
-        <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
+        <div className="text-xs font-medium uppercase tracking-[0.16em] text-ink-400">
           Outline
         </div>
         <div className="mt-2 text-xs text-ink-500">
@@ -106,7 +106,7 @@ export function OutlinePanel({ note, activeLine, onJump }: Props): JSX.Element {
                   >
                     <span
                       className={[
-                        'shrink-0 text-[10px] uppercase tracking-wide',
+                        'shrink-0 text-2xs uppercase tracking-wide',
                         isActive ? 'text-accent/75' : 'text-ink-400'
                       ].join(' ')}
                     >
diff --git a/packages/app-core/src/components/PinnedReferencePane.tsx b/packages/app-core/src/components/PinnedReferencePane.tsx
index 3e1358e3..366bb71b 100644
--- a/packages/app-core/src/components/PinnedReferencePane.tsx
+++ b/packages/app-core/src/components/PinnedReferencePane.tsx
@@ -409,7 +409,7 @@ export function PinnedReferencePane(): JSX.Element | null {
             </button>
             <div className="flex shrink-0 items-center gap-1">
               {!isAsset && (
-                <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-[11px]">
+                <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-xs">
                   {(['edit', 'preview'] as const).map((m) => (
                     <button
                       key={m}
diff --git a/packages/app-core/src/components/Preview.tsx b/packages/app-core/src/components/Preview.tsx
index 061ea162..393ff413 100644
--- a/packages/app-core/src/components/Preview.tsx
+++ b/packages/app-core/src/components/Preview.tsx
@@ -968,7 +968,7 @@ function ExpandedDiagramModal({
   return createPortal(
     <div
       className={[
-        "fixed inset-0 z-[80] flex bg-black/60 backdrop-blur-sm",
+        "fixed inset-0 z-popover flex bg-black/60 backdrop-blur-sm",
         fullScreen
           ? "items-start justify-center p-0"
           : "items-center justify-center p-4 md:p-6",
diff --git a/packages/app-core/src/components/PromptModal.tsx b/packages/app-core/src/components/PromptModal.tsx
index 627fd72f..2ce6312a 100644
--- a/packages/app-core/src/components/PromptModal.tsx
+++ b/packages/app-core/src/components/PromptModal.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 export interface PromptSuggestion {
   value: string
@@ -129,125 +130,102 @@ export function PromptModal({
     })
   }
 
-  return createPortal(
-    <div
-      data-prompt-modal
-      className="fixed inset-0 z-[70] flex items-start justify-center bg-black/45 pt-[18vh] backdrop-blur-sm"
-      onClick={onCancel}
+  return (
+    <Modal
+      size="xs"
+      layer="modal"
+      onClose={onCancel}
+      closeOnEsc={false}
+      data={{ 'data-prompt-modal': '' }}
     >
-      <div
-        className="w-[min(420px,92vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-5 pt-5">
-          <div className="text-sm font-semibold text-ink-900">{options.title}</div>
-          {options.description && (
-            <div className="mt-1 text-xs text-ink-500">{options.description}</div>
-          )}
-        </div>
-        <div className="px-5 pt-3">
-          <input
-            ref={inputRef}
-            value={value}
-            placeholder={options.placeholder}
-            onChange={(e) => {
-              setValue(e.target.value)
-              setError(null)
-              setActiveSuggestion(-1)
-              setDismissed(false)
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Tab' && filteredSuggestions.length > 0) {
-                e.preventDefault()
-                moveSuggestion(e.shiftKey ? -1 : 1)
-              } else if (e.key === 'ArrowDown' && filteredSuggestions.length > 0) {
-                e.preventDefault()
-                moveSuggestion(1)
-              } else if (e.key === 'ArrowUp' && filteredSuggestions.length > 0) {
-                e.preventDefault()
-                moveSuggestion(-1)
-              } else if (e.key === 'Enter') {
-                e.preventDefault()
-                const suggestion =
-                  showSuggestions && activeSuggestion >= 0
-                    ? filteredSuggestions[activeSuggestion]
-                    : null
-                if (suggestion) chooseSuggestion(suggestion)
-                else submit()
-              } else if (e.key === 'Escape') {
-                e.preventDefault()
-                if (showSuggestions && !dismissed) {
-                  setDismissed(true)
-                  setActiveSuggestion(-1)
-                } else {
-                  onCancel()
-                }
+      <Modal.Header title={options.title} description={options.description} />
+      <div className="px-5 pt-3">
+        <input
+          ref={inputRef}
+          value={value}
+          placeholder={options.placeholder}
+          onChange={(e) => {
+            setValue(e.target.value)
+            setError(null)
+            setActiveSuggestion(-1)
+            setDismissed(false)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Tab' && filteredSuggestions.length > 0) {
+              e.preventDefault()
+              moveSuggestion(e.shiftKey ? -1 : 1)
+            } else if (e.key === 'ArrowDown' && filteredSuggestions.length > 0) {
+              e.preventDefault()
+              moveSuggestion(1)
+            } else if (e.key === 'ArrowUp' && filteredSuggestions.length > 0) {
+              e.preventDefault()
+              moveSuggestion(-1)
+            } else if (e.key === 'Enter') {
+              e.preventDefault()
+              const suggestion =
+                showSuggestions && activeSuggestion >= 0
+                  ? filteredSuggestions[activeSuggestion]
+                  : null
+              if (suggestion) chooseSuggestion(suggestion)
+              else submit()
+            } else if (e.key === 'Escape') {
+              e.preventDefault()
+              if (showSuggestions && !dismissed) {
+                setDismissed(true)
+                setActiveSuggestion(-1)
+              } else {
+                onCancel()
               }
-            }}
-            className="w-full rounded-md border border-paper-300 bg-paper-50 px-2.5 py-1.5 text-sm text-ink-900 outline-none focus:border-accent"
-          />
-          {options.suggestionsHint && (
-            <div className="mt-2 text-[11px] text-ink-400">{options.suggestionsHint}</div>
-          )}
-          {showSuggestions && (
-            <div
-              ref={suggestionsRef}
-              className="mt-2 overflow-hidden rounded-lg border border-paper-300/70 bg-paper-50/95 shadow-[0_10px_30px_rgba(15,23,42,0.08)]"
-            >
-              <div className="border-b border-paper-300/50 px-3 py-2 text-[10px] font-medium uppercase tracking-[0.16em] text-ink-400">
-                Suggestions
-              </div>
-              <div className="max-h-48 overflow-y-auto py-1">
-                {filteredSuggestions.map((suggestion, index) => {
-                  const active = index === activeSuggestion
-                  return (
-                    <button
-                      key={suggestion.value}
-                      type="button"
-                      data-prompt-suggestion-idx={index}
-                      onMouseEnter={() => setActiveSuggestion(index)}
-                      onClick={() => chooseSuggestion(suggestion)}
-                      className={[
-                        'flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors',
-                        active ? 'bg-paper-200' : 'hover:bg-paper-200/70'
-                      ].join(' ')}
-                    >
-                      <span className="min-w-0 flex-1 truncate text-sm text-ink-900">
-                        {suggestion.label ?? suggestion.value}
-                      </span>
-                      {suggestion.detail && (
-                        <span className="shrink-0 text-[11px] text-ink-400">{suggestion.detail}</span>
-                      )}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-          {error && (
-            <div className="mt-2 text-xs" style={{ color: 'rgb(var(--z-red))' }}>
-              {error}
-            </div>
-          )}
-        </div>
-        <div className="mt-4 flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-sm text-ink-800 hover:bg-paper-200"
+            }
+          }}
+          className="w-full rounded-md border border-paper-300 bg-paper-50 px-2.5 py-1.5 text-sm text-ink-900 outline-none focus:border-accent"
+        />
+        {options.suggestionsHint && (
+          <div className="mt-2 text-xs text-ink-400">{options.suggestionsHint}</div>
+        )}
+        {showSuggestions && (
+          <div
+            ref={suggestionsRef}
+            className="mt-2 overflow-hidden rounded-lg border border-paper-300/70 bg-paper-50/95 shadow-[0_10px_30px_rgba(15,23,42,0.08)]"
           >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={() => submit()}
-            className="rounded-md bg-ink-900 px-3 py-1.5 text-sm font-medium text-paper-50 hover:bg-ink-800"
-          >
-            {options.okLabel ?? 'OK'}
-          </button>
-        </div>
+            <div className="form-label border-b border-paper-300/50 px-3 py-2">Suggestions</div>
+            <div className="max-h-48 overflow-y-auto py-1">
+              {filteredSuggestions.map((suggestion, index) => {
+                const active = index === activeSuggestion
+                return (
+                  <button
+                    key={suggestion.value}
+                    type="button"
+                    data-prompt-suggestion-idx={index}
+                    onMouseEnter={() => setActiveSuggestion(index)}
+                    onClick={() => chooseSuggestion(suggestion)}
+                    className={[
+                      'flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors',
+                      active ? 'bg-paper-200' : 'hover:bg-paper-200/70'
+                    ].join(' ')}
+                  >
+                    <span className="min-w-0 flex-1 truncate text-sm text-ink-900">
+                      {suggestion.label ?? suggestion.value}
+                    </span>
+                    {suggestion.detail && (
+                      <span className="shrink-0 text-xs text-ink-500">{suggestion.detail}</span>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+        {error && <div className="mt-2 text-xs text-danger">{error}</div>}
       </div>
-    </div>,
-    document.body
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={() => submit()}>
+          {options.okLabel ?? 'OK'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/QuickCaptureApp.tsx b/packages/app-core/src/components/QuickCaptureApp.tsx
index f434c28e..12a890d1 100644
--- a/packages/app-core/src/components/QuickCaptureApp.tsx
+++ b/packages/app-core/src/components/QuickCaptureApp.tsx
@@ -569,7 +569,7 @@ export function QuickCaptureApp(): JSX.Element {
         </span>
         {mode.kind === 'existing' && (
           <span
-            className="shrink-0 rounded-md bg-paper-200/80 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-ink-500"
+            className="shrink-0 rounded-md bg-paper-200/80 px-1.5 py-0.5 text-2xs uppercase tracking-wide text-ink-500"
             title={mode.note.path}
           >
             {mode.note.folder}
@@ -626,7 +626,7 @@ export function QuickCaptureApp(): JSX.Element {
         )}
       </div>
 
-      <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-paper-300/70 px-4 py-1.5 text-[11px] text-ink-500">
+      <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-paper-300/70 px-4 py-1.5 text-xs text-ink-500">
         <span className="truncate">
           {error ? (
             <span className="text-red-500">{error}</span>
@@ -746,11 +746,11 @@ function NotePickerOverlay({ notes, onPick, onCancel }: NotePickerOverlayProps):
                   isActive ? 'bg-paper-200 text-ink-900' : 'text-ink-700 hover:bg-paper-200/60'
                 ].join(' ')}
               >
-                <span className="shrink-0 text-[10px] uppercase tracking-wide text-ink-400">
+                <span className="shrink-0 text-2xs uppercase tracking-wide text-ink-400">
                   {note.folder}
                 </span>
                 <span className="truncate">{note.title}</span>
-                <span className="ml-auto truncate text-[10px] text-ink-400">{note.path}</span>
+                <span className="ml-auto truncate text-2xs text-ink-400">{note.path}</span>
               </button>
             )
           })
@@ -868,7 +868,7 @@ function CommandOverlay({ modKey, mode, onAction, onCancel }: CommandOverlayProp
                 ].join(' ')}
               >
                 <span className="truncate">{cmd.label}</span>
-                <kbd className="ml-auto rounded bg-paper-200 px-1.5 py-0.5 text-[10px] text-ink-500">
+                <kbd className="ml-auto rounded bg-paper-200 px-1.5 py-0.5 text-2xs text-ink-500">
                   {cmd.hint}
                 </kbd>
               </button>
diff --git a/packages/app-core/src/components/QuickNotesView.tsx b/packages/app-core/src/components/QuickNotesView.tsx
index 7c19a0cf..1b67ec79 100644
--- a/packages/app-core/src/components/QuickNotesView.tsx
+++ b/packages/app-core/src/components/QuickNotesView.tsx
@@ -209,7 +209,7 @@ export function QuickNotesView(): JSX.Element {
 
         <section
           ref={rootRef}
-          className="overflow-hidden rounded-[24px] border border-paper-300/70 bg-paper-50/34 shadow-[0_12px_42px_rgba(15,23,42,0.06)]"
+          className="overflow-hidden rounded-3xl border border-paper-300/70 bg-paper-50/34 shadow-[0_12px_42px_rgba(15,23,42,0.06)]"
         >
           {filtered.length === 0 ? (
             <div className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-center">
@@ -250,12 +250,12 @@ export function QuickNotesView(): JSX.Element {
                     <div className="min-w-0 flex-1 pt-0.5">
                       <div className="flex flex-wrap items-center gap-x-2.5 gap-y-0.5">
                         <span className="truncate text-sm font-medium text-ink-900">{note.title}</span>
-                        <span className="text-[11px] uppercase tracking-[0.16em] text-ink-400">
+                        <span className="text-xs uppercase tracking-[0.16em] text-ink-500">
                           {formatDate(note.updatedAt)}
                         </span>
                       </div>
-                      <div className="mt-0.5 truncate text-[11px] text-ink-400">{note.path}</div>
-                      <div className="mt-1 line-clamp-1 text-[13px] leading-5 text-ink-600">
+                      <div className="mt-0.5 truncate text-xs text-ink-500">{note.path}</div>
+                      <div className="mt-1 line-clamp-1 text-sm leading-5 text-ink-600">
                         {note.excerpt || 'Empty note'}
                       </div>
                     </div>
@@ -266,7 +266,7 @@ export function QuickNotesView(): JSX.Element {
                           e.stopPropagation()
                           void openNote(note.path)
                         }}
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-[11px] font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-xs font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
                       >
                         <ArrowUpRightIcon width={13} height={13} />
                         Open
diff --git a/packages/app-core/src/components/RemoteWorkspaceProfileModal.tsx b/packages/app-core/src/components/RemoteWorkspaceProfileModal.tsx
index d69f1903..3a7bc9cf 100644
--- a/packages/app-core/src/components/RemoteWorkspaceProfileModal.tsx
+++ b/packages/app-core/src/components/RemoteWorkspaceProfileModal.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { createPortal } from 'react-dom'
 import type { RemoteWorkspaceProfileInput } from '@shared/ipc'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 export interface RemoteWorkspaceProfileModalOptions {
   title: string
@@ -74,14 +75,9 @@ export function RemoteWorkspaceProfileModal({
     }
   }, [authToken, clearAuthToken, name, normalizedBaseUrl, onSubmit, options.initialValue?.id, submitting, vaultPath])
 
+  // Esc handled by Modal; we keep Enter (→ submit) here. closeOnEsc stays true.
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        e.stopPropagation()
-        onCancel()
-        return
-      }
       if (e.key === 'Enter') {
         e.preventDefault()
         e.stopPropagation()
@@ -90,126 +86,96 @@ export function RemoteWorkspaceProfileModal({
     }
     window.addEventListener('keydown', handler, true)
     return () => window.removeEventListener('keydown', handler, true)
-  }, [onCancel, submit])
+  }, [submit])
 
-  return createPortal(
-    <div
-      className="fixed inset-0 z-[74] flex items-start justify-center bg-black/45 pt-[14vh] backdrop-blur-sm"
-      onClick={onCancel}
-    >
-      <div
-        className="w-[min(520px,94vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-5 pt-5">
-          <div className="text-sm font-semibold text-ink-900">{options.title}</div>
-          {options.description && (
-            <div className="mt-1 text-xs leading-5 text-ink-500">{options.description}</div>
-          )}
-        </div>
-        <div className="space-y-4 px-5 py-4">
-          <label className="block">
-            <div className="mb-1 text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
-              Label
-            </div>
-            <input
-              value={name}
-              onChange={(e) => {
-                setName(e.target.value)
-                setError(null)
-              }}
-              placeholder="Optional. Example: Home Server"
-              className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
-            />
-            <div className="mt-1 text-[11px] leading-5 text-ink-400">
-              Leave this blank if you want ZenNotes to name the remote from the server or vault.
-            </div>
-          </label>
-          <label className="block">
-            <div className="mb-1 text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
-              Server URL
+  return (
+    // Opened from within the workspace switcher (atop other chrome) → nested layer.
+    <Modal size="md" layer="nested" onClose={onCancel}>
+      <Modal.Header title={options.title} description={options.description} />
+      <div className="space-y-4 px-5 py-4">
+        <label className="block">
+          <div className="form-label mb-1">Label</div>
+          <input
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value)
+              setError(null)
+            }}
+            placeholder="Optional. Example: Home Server"
+            className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
+          />
+          <div className="form-hint mt-1 leading-5">
+            Leave this blank if you want ZenNotes to name the remote from the server or vault.
+          </div>
+        </label>
+        <label className="block">
+          <div className="form-label mb-1">Server URL</div>
+          <input
+            value={baseUrl}
+            onChange={(e) => {
+              setBaseUrl(e.target.value)
+              setError(null)
+            }}
+            placeholder="http://localhost:7878"
+            className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
+          />
+        </label>
+        <label className="block">
+          <div className="form-label mb-1">Auth token</div>
+          <input
+            value={authToken}
+            onChange={(e) => {
+              setAuthToken(e.target.value)
+              setError(null)
+            }}
+            placeholder="Optional"
+            className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
+          />
+          {options.hasStoredCredential && !authToken.trim() && (
+            <div className="form-hint mt-1 leading-5">
+              A token is already stored securely for this remote. Leave this blank to keep it, or enter a new one to replace it.
             </div>
-            <input
-              value={baseUrl}
-              onChange={(e) => {
-                setBaseUrl(e.target.value)
-                setError(null)
-              }}
-              placeholder="http://localhost:7878"
-              className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
-            />
-          </label>
-          <label className="block">
-            <div className="mb-1 text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
-              Auth token
-            </div>
-            <input
-              value={authToken}
-              onChange={(e) => {
-                setAuthToken(e.target.value)
-                setError(null)
-              }}
-              placeholder="Optional"
-              className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
-            />
-            {options.hasStoredCredential && !authToken.trim() && (
-              <div className="mt-1 text-[11px] leading-5 text-ink-400">
-                A token is already stored securely for this remote. Leave this blank to keep it, or enter a new one to replace it.
-              </div>
-            )}
-            {options.hasStoredCredential && (
-              <label className="mt-2 flex items-center gap-2 text-[11px] text-ink-500">
-                <input
-                  type="checkbox"
-                  checked={clearAuthToken}
-                  onChange={(e) => {
-                    setClearAuthToken(e.target.checked)
-                    setError(null)
-                  }}
-                  className="h-3.5 w-3.5 rounded border-paper-300 bg-paper-50 text-accent focus:ring-accent"
-                />
-                Clear the stored token for this remote
-              </label>
-            )}
-          </label>
-          <label className="block">
-            <div className="mb-1 text-[11px] font-medium uppercase tracking-[0.16em] text-ink-400">
-              Vault folder
-            </div>
-            <input
-              value={vaultPath}
-              onChange={(e) => {
-                setVaultPath(e.target.value)
-                setError(null)
-              }}
-              placeholder="Optional. If blank, ZenNotes will ask when you connect."
-              className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
-            />
-            <div className="mt-1 text-[11px] leading-5 text-ink-400">
-              Leave this blank if you want to choose the vault folder when you connect.
-            </div>
-          </label>
-          {error && <div className="text-xs text-red-700">{error}</div>}
-        </div>
-        <div className="flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-sm text-ink-800 hover:bg-paper-200"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            disabled={submitting}
-            onClick={() => void submit()}
-            className="rounded-md bg-ink-900 px-3 py-1.5 text-sm font-medium text-paper-50 hover:bg-ink-800 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {options.submitLabel ?? 'Save'}
-          </button>
-        </div>
+          )}
+          {options.hasStoredCredential && (
+            <label className="mt-2 flex items-center gap-2 text-xs text-ink-500">
+              <input
+                type="checkbox"
+                checked={clearAuthToken}
+                onChange={(e) => {
+                  setClearAuthToken(e.target.checked)
+                  setError(null)
+                }}
+                className="h-3.5 w-3.5 rounded border-paper-300 bg-paper-50 text-accent focus:ring-accent"
+              />
+              Clear the stored token for this remote
+            </label>
+          )}
+        </label>
+        <label className="block">
+          <div className="form-label mb-1">Vault folder</div>
+          <input
+            value={vaultPath}
+            onChange={(e) => {
+              setVaultPath(e.target.value)
+              setError(null)
+            }}
+            placeholder="Optional. If blank, ZenNotes will ask when you connect."
+            className="w-full rounded-md border border-paper-300 bg-paper-50 px-3 py-2 text-sm text-ink-900 outline-none focus:border-accent"
+          />
+          <div className="form-hint mt-1 leading-5">
+            Leave this blank if you want to choose the vault folder when you connect.
+          </div>
+        </label>
+        {error && <div className="text-xs text-danger">{error}</div>}
       </div>
-    </div>,
-    document.body
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="primary" disabled={submitting} onClick={() => void submit()}>
+          {options.submitLabel ?? 'Save'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/SearchPalette.tsx b/packages/app-core/src/components/SearchPalette.tsx
index 52177505..cbf3a8b4 100644
--- a/packages/app-core/src/components/SearchPalette.tsx
+++ b/packages/app-core/src/components/SearchPalette.tsx
@@ -8,6 +8,7 @@ import {
   searchNoteIndex
 } from '../lib/note-search'
 import { focusEditorNormalMode } from '../lib/editor-focus'
+import { Modal } from './ui/Modal'
 
 export function SearchPalette(): JSX.Element {
   const notes = useStore((s) => s.notes)
@@ -53,15 +54,8 @@ export function SearchPalette(): JSX.Element {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 pt-[15vh] backdrop-blur-sm"
-      onClick={close}
-    >
-      <div
-        className="w-[min(560px,90vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300/70"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="border-b border-paper-300/70 px-4 py-3">
+    <Modal size="md" layer="palette" onClose={close} closeOnEsc={false}>
+      <div className="border-b border-paper-300/70 px-4 py-3">
           <input
             ref={inputRef}
             value={query}
@@ -91,12 +85,12 @@ export function SearchPalette(): JSX.Element {
               {tagTokens.map((t) => (
                 <span
                   key={t}
-                  className="rounded-full bg-accent/15 px-2 py-0.5 text-[11px] text-accent"
+                  className="rounded-full bg-accent/15 px-2 py-0.5 text-xs font-medium text-accent ring-1 ring-accent/30"
                 >
                   #{t}
                 </span>
               ))}
-              <span className="text-[11px] text-ink-500">
+              <span className="text-xs text-ink-500">
                 notes must carry {tagTokens.length === 1 ? 'this tag' : 'all of these tags'}
               </span>
             </div>
@@ -120,14 +114,14 @@ export function SearchPalette(): JSX.Element {
                 <span className="min-w-0 flex-1 truncate text-sm font-medium text-ink-900">
                   {n.title}
                 </span>
-                <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                   {n.folder}
                 </span>
               </button>
             ))
           )}
         </div>
-        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-[11px] text-ink-500">
+        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
           <span>
             <kbd className="rounded bg-paper-200 px-1">↑↓</kbd>{' '}
             <kbd className="rounded bg-paper-200 px-1">Ctrl+N/P</kbd> move
@@ -139,7 +133,6 @@ export function SearchPalette(): JSX.Element {
             <kbd className="rounded bg-paper-200 px-1">esc</kbd> close
           </span>
         </div>
-      </div>
-    </div>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/ServerDirectoryPickerModal.tsx b/packages/app-core/src/components/ServerDirectoryPickerModal.tsx
index 50d94ff1..a5192b44 100644
--- a/packages/app-core/src/components/ServerDirectoryPickerModal.tsx
+++ b/packages/app-core/src/components/ServerDirectoryPickerModal.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
 import type { DirectoryBrowseEntry, DirectoryBrowseShortcut } from '@shared/ipc'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 export interface ServerDirectoryPickerOptions {
   title: string
@@ -108,194 +109,160 @@ export function ServerDirectoryPickerModal({
     }
   }
 
-  return createPortal(
-    <div
-      data-server-directory-picker
-      className="fixed inset-0 z-[72] flex items-start justify-center bg-black/45 pt-[14vh] backdrop-blur-sm"
-      onClick={onCancel}
+  return (
+    <Modal
+      size="lg"
+      layer="nested"
+      onClose={onCancel}
+      data={{ 'data-server-directory-picker': '' }}
     >
-      <div
-        className="w-[min(720px,94vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-5 pt-5">
-          <div className="text-sm font-semibold text-ink-900">{options.title}</div>
-          {options.description && (
-            <div className="mt-1 text-xs text-ink-500">{options.description}</div>
-          )}
-        </div>
-
-        <div className="px-5 pt-4">
-          {shortcuts.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {shortcuts.map((shortcut) => (
-                <button
-                  key={`${shortcut.label}:${shortcut.path}`}
-                  type="button"
-                  onClick={() => void loadDirectory(shortcut.path)}
-                  className={[
-                    'rounded-full border px-3 py-1 text-xs transition-colors',
-                    shortcut.path === currentPath
-                      ? 'border-accent bg-paper-200 text-ink-900'
-                      : 'border-paper-300 bg-paper-50 text-ink-700 hover:bg-paper-200'
-                  ].join(' ')}
-                >
-                  {shortcut.label}
-                </button>
-              ))}
-            </div>
-          )}
+      <Modal.Header title={options.title} description={options.description} />
 
-          <div className="mt-3 overflow-hidden rounded-lg border border-paper-300/70 bg-paper-50/95">
-            <div className="border-b border-paper-300/60 px-3 py-2 text-[11px] uppercase tracking-[0.16em] text-ink-400">
-              Location
-            </div>
-            <div className="px-3 py-3">
-              {pathCrumbs.length > 0 ? (
-                <div className="flex flex-wrap items-center gap-1">
-                  {pathCrumbs.map((crumb, index) => (
-                    <div key={crumb.path} className="flex items-center gap-1">
-                      <button
-                        type="button"
-                        onClick={() => void loadDirectory(crumb.path)}
-                        className={[
-                          'rounded px-2 py-1 text-sm transition-colors',
-                          index === pathCrumbs.length - 1
-                            ? 'bg-paper-200 text-ink-900'
-                            : 'text-ink-700 hover:bg-paper-200'
-                        ].join(' ')}
-                      >
-                        {crumb.label}
-                      </button>
-                      {index < pathCrumbs.length - 1 && (
-                        <span className="text-xs text-ink-400">/</span>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="text-sm text-ink-400">{loading ? 'Loading folders…' : 'No folder selected yet.'}</div>
-              )}
-            </div>
+      <div className="px-5 pt-4">
+        {shortcuts.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {shortcuts.map((shortcut) => (
+              <button
+                key={`${shortcut.label}:${shortcut.path}`}
+                type="button"
+                onClick={() => void loadDirectory(shortcut.path)}
+                className={[
+                  'rounded-full border px-3 py-1 text-xs transition-colors',
+                  shortcut.path === currentPath
+                    ? 'border-accent bg-paper-200 text-ink-900'
+                    : 'border-paper-300 bg-paper-50 text-ink-700 hover:bg-paper-200'
+                ].join(' ')}
+              >
+                {shortcut.label}
+              </button>
+            ))}
           </div>
+        )}
 
-          <div className="mt-3 overflow-hidden rounded-lg border border-paper-300/70 bg-paper-50/95 shadow-[0_10px_30px_rgba(15,23,42,0.08)]">
-            <div className="flex items-center justify-between gap-3 border-b border-paper-300/60 px-3 py-2">
-              <div className="text-[11px] uppercase tracking-[0.16em] text-ink-400">Folders</div>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => setShowAdvancedPath((prev) => !prev)}
-                  className="rounded-md border border-paper-300 bg-paper-100 px-2.5 py-1 text-[11px] text-ink-700 hover:bg-paper-200"
-                >
-                  {showAdvancedPath ? 'Hide Manual Path' : 'Enter Path Manually'}
-                </button>
-              </div>
-            </div>
-            {showAdvancedPath && (
-              <div className="border-b border-paper-300/60 px-3 py-3">
-                <div className="flex items-center gap-2">
-                  <input
-                    ref={inputRef}
-                    value={draftPath}
-                    placeholder="/srv/notes or /home/you/ObsidianVault"
-                    onChange={(e) => {
-                      setDraftPath(e.target.value)
-                      setError(null)
-                      setSubmitError(null)
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        e.preventDefault()
-                        void loadDirectory(draftPath.trim())
-                      } else if (e.key === 'Escape') {
-                        e.preventDefault()
-                        onCancel()
-                      }
-                    }}
-                    className="min-w-0 flex-1 rounded-md border border-paper-300 bg-paper-50 px-2.5 py-1.5 text-sm text-ink-900 outline-none focus:border-accent"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => void loadDirectory(draftPath.trim())}
-                    disabled={loading}
-                    className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-xs text-ink-800 enabled:hover:bg-paper-200 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                    Go
-                  </button>
-                </div>
-                <div className="mt-2 text-[11px] text-ink-400">
-                  Optional: paste an absolute server path if you already know it.
-                </div>
-              </div>
-            )}
-            <div className="max-h-[44vh] overflow-y-auto py-1">
-              {loading ? (
-                <div className="px-3 py-8 text-center text-sm text-ink-400">Loading folders…</div>
-              ) : entries.length === 0 && !parentPath ? (
-                <div className="px-3 py-8 text-center text-sm text-ink-400">This folder has no subfolders. You can still choose it.</div>
-              ) : (
-                <>
-                  {parentPath && (
-                    <button
-                      type="button"
-                      onClick={() => void loadDirectory(parentPath)}
-                      className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors hover:bg-paper-200/70"
-                    >
-                      <span className="min-w-0 truncate text-sm text-ink-900">..</span>
-                      <span className="shrink-0 text-[11px] text-ink-400">Up one level</span>
-                    </button>
-                  )}
-                  {entries.map((entry) => (
+        <div className="mt-3 overflow-hidden rounded-lg border border-paper-300/70 bg-paper-50/95">
+          <div className="form-label border-b border-paper-300/60 px-3 py-2">Location</div>
+          <div className="px-3 py-3">
+            {pathCrumbs.length > 0 ? (
+              <div className="flex flex-wrap items-center gap-1">
+                {pathCrumbs.map((crumb, index) => (
+                  <div key={crumb.path} className="flex items-center gap-1">
                     <button
-                      key={entry.path}
                       type="button"
-                      onClick={() => void loadDirectory(entry.path)}
-                      className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors hover:bg-paper-200/70"
+                      onClick={() => void loadDirectory(crumb.path)}
+                      className={[
+                        'rounded px-2 py-1 text-sm transition-colors',
+                        index === pathCrumbs.length - 1
+                          ? 'bg-paper-200 text-ink-900'
+                          : 'text-ink-700 hover:bg-paper-200'
+                      ].join(' ')}
                     >
-                      <span className="min-w-0 truncate text-sm text-ink-900">{entry.name}</span>
-                      <span className="shrink-0 text-[11px] text-ink-400">Open</span>
+                      {crumb.label}
                     </button>
-                  ))}
-                </>
-              )}
-            </div>
+                    {index < pathCrumbs.length - 1 && (
+                      <span className="text-xs text-ink-500">/</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-sm text-ink-500">{loading ? 'Loading folders…' : 'No folder selected yet.'}</div>
+            )}
           </div>
+        </div>
 
-          {error && (
-            <div className="mt-3 text-xs" style={{ color: 'rgb(var(--z-red))' }}>
-              {error}
+        <div className="mt-3 overflow-hidden rounded-lg border border-paper-300/70 bg-paper-50/95 shadow-[0_10px_30px_rgba(15,23,42,0.08)]">
+          <div className="flex items-center justify-between gap-3 border-b border-paper-300/60 px-3 py-2">
+            <div className="form-label">Folders</div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setShowAdvancedPath((prev) => !prev)}
+                className="rounded-md border border-paper-300 bg-paper-100 px-2.5 py-1 text-xs text-ink-700 hover:bg-paper-200"
+              >
+                {showAdvancedPath ? 'Hide Manual Path' : 'Enter Path Manually'}
+              </button>
             </div>
-          )}
-          {!error && submitError && (
-            <div className="mt-3 text-xs" style={{ color: 'rgb(var(--z-red))' }}>
-              {submitError}
+          </div>
+          {showAdvancedPath && (
+            <div className="border-b border-paper-300/60 px-3 py-3">
+              <div className="flex items-center gap-2">
+                <input
+                  ref={inputRef}
+                  value={draftPath}
+                  placeholder="/srv/notes or /home/you/ObsidianVault"
+                  onChange={(e) => {
+                    setDraftPath(e.target.value)
+                    setError(null)
+                    setSubmitError(null)
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault()
+                      void loadDirectory(draftPath.trim())
+                    } else if (e.key === 'Escape') {
+                      e.preventDefault()
+                      onCancel()
+                    }
+                  }}
+                  className="min-w-0 flex-1 rounded-md border border-paper-300 bg-paper-50 px-2.5 py-1.5 text-sm text-ink-900 outline-none focus:border-accent"
+                />
+                <Button variant="secondary" onClick={() => void loadDirectory(draftPath.trim())} disabled={loading}>
+                  Go
+                </Button>
+              </div>
+              <div className="form-hint mt-2">
+                Optional: paste an absolute server path if you already know it.
+              </div>
             </div>
           )}
-          <div className="mt-3 text-xs text-ink-400">
-            Chosen folder: <span className="text-ink-700">{submitPath || 'None'}</span>
+          <div className="max-h-[44vh] overflow-y-auto py-1">
+            {loading ? (
+              <div className="px-3 py-8 text-center text-sm text-ink-500">Loading folders…</div>
+            ) : entries.length === 0 && !parentPath ? (
+              <div className="px-3 py-8 text-center text-sm text-ink-500">This folder has no subfolders. You can still choose it.</div>
+            ) : (
+              <>
+                {parentPath && (
+                  <button
+                    type="button"
+                    onClick={() => void loadDirectory(parentPath)}
+                    className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors hover:bg-paper-200/70"
+                  >
+                    <span className="min-w-0 truncate text-sm text-ink-900">..</span>
+                    <span className="shrink-0 text-xs text-ink-500">Up one level</span>
+                  </button>
+                )}
+                {entries.map((entry) => (
+                  <button
+                    key={entry.path}
+                    type="button"
+                    onClick={() => void loadDirectory(entry.path)}
+                    className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors hover:bg-paper-200/70"
+                  >
+                    <span className="min-w-0 truncate text-sm text-ink-900">{entry.name}</span>
+                    <span className="shrink-0 text-xs text-ink-500">Open</span>
+                  </button>
+                ))}
+              </>
+            )}
           </div>
         </div>
 
-        <div className="mt-4 flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-sm text-ink-800 hover:bg-paper-200"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={() => void submit()}
-            disabled={!canSubmit}
-            className="rounded-md bg-ink-900 px-3 py-1.5 text-sm font-medium text-paper-50 enabled:hover:bg-ink-800 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {submitting ? 'Working…' : options.confirmLabel ?? 'Select folder'}
-          </button>
+        {error && <div className="mt-3 text-xs text-danger">{error}</div>}
+        {!error && submitError && <div className="mt-3 text-xs text-danger">{submitError}</div>}
+        <div className="mt-3 text-xs text-ink-500">
+          Chosen folder: <span className="text-ink-700">{submitPath || 'None'}</span>
         </div>
       </div>
-    </div>,
-    document.body
+
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={() => void submit()} disabled={!canSubmit}>
+          {submitting ? 'Working…' : options.confirmLabel ?? 'Select folder'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/SettingsModal.tsx b/packages/app-core/src/components/SettingsModal.tsx
index c418f93a..9a69cbca 100644
--- a/packages/app-core/src/components/SettingsModal.tsx
+++ b/packages/app-core/src/components/SettingsModal.tsx
@@ -50,6 +50,7 @@ import { getZenBridge } from '@zennotes/bridge-contract/bridge'
 import companyLogo from '../assets/lumary-labs-logo.svg'
 import { confirmApp } from '../lib/confirm-requests'
 import { RemoteWorkspaceProfileModal } from './RemoteWorkspaceProfileModal'
+import { Button } from './ui/Button'
 
 type SettingsCategoryId =
   | 'appearance'
@@ -738,7 +739,7 @@ export function SettingsModal(): JSX.Element {
           >
             <div className="flex flex-col gap-5 px-5 py-5">
               <div {...settingsSearchTargetProps('theme-family')}>
-                <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
+                <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-ink-500">
                   Family
                 </div>
                 <div className="grid grid-cols-2 gap-2 xl:grid-cols-3">
@@ -760,7 +761,7 @@ export function SettingsModal(): JSX.Element {
               </div>
 
               <div {...settingsSearchTargetProps('theme-mode')}>
-                <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
+                <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-ink-500">
                   Mode
                 </div>
                 <div className="inline-flex rounded-xl border border-paper-300/70 bg-paper-100/75 p-1">
@@ -783,7 +784,7 @@ export function SettingsModal(): JSX.Element {
 
               {visibleVariants.length > 1 && (
                 <div {...settingsSearchTargetProps('theme-variant')}>
-                  <div className="mb-2 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
+                  <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-ink-500">
                     {themeFamily === 'gruvbox'
                       ? 'Contrast'
                       : themeFamily === 'catppuccin'
@@ -1461,7 +1462,7 @@ export function SettingsModal(): JSX.Element {
                   {vault?.root ?? 'No vault selected'}
                 </div>
                 {workspaceMode === 'remote' && remoteWorkspaceInfo?.baseUrl && (
-                  <div className="mt-1 truncate text-[11px] text-ink-400">
+                  <div className="mt-1 truncate text-xs text-ink-400">
                     Connected to {remoteWorkspaceInfo.baseUrl}
                   </div>
                 )}
@@ -1541,13 +1542,13 @@ export function SettingsModal(): JSX.Element {
                                 {profile.name}
                               </div>
                               {isCurrent && (
-                                <span className="rounded-full border border-emerald-400/25 bg-emerald-500/10 px-2 py-0.5 text-[11px] text-emerald-700">
+                                <span className="rounded-full border border-emerald-400/25 bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-700">
                                   Connected
                                 </span>
                               )}
                             </div>
                             <div className="mt-1 truncate text-xs text-ink-500">{profile.baseUrl}</div>
-                            <div className="mt-1 truncate text-[11px] text-ink-400">
+                            <div className="mt-1 truncate text-xs text-ink-400">
                               {profile.vaultPath ? profile.vaultPath : 'Vault picked when connecting'}
                             </div>
                           </div>
@@ -1875,13 +1876,14 @@ export function SettingsModal(): JSX.Element {
                     Stored as a markdown file in `.zennotes/templates`.
                   </div>
                 </div>
-                <button
-                  type="button"
+                <Button
+                  variant="primary"
+                  size="sm"
                   onClick={() => setTemplateEditor({})}
-                  className="shrink-0 rounded-xl bg-ink-900 px-3.5 py-2 text-xs font-medium text-paper-50 hover:bg-ink-800"
+                  className="shrink-0"
                 >
                   New template
-                </button>
+                </Button>
               </div>
             ) : (
               <InlineNote>
@@ -1902,12 +1904,12 @@ export function SettingsModal(): JSX.Element {
                 </div>
                 <div className="flex shrink-0 items-center gap-2">
                   {template.builtin && (
-                    <span className="rounded-md bg-paper-200 px-2 py-1 text-[11px] uppercase tracking-wide text-ink-400">
+                    <span className="rounded-md bg-paper-200 px-2 py-1 text-xs uppercase tracking-wide text-ink-400">
                       Built-in
                     </span>
                   )}
                   {!template.builtin && template.builtinId && (
-                    <span className="rounded-md bg-paper-200 px-2 py-1 text-[11px] uppercase tracking-wide text-ink-400">
+                    <span className="rounded-md bg-paper-200 px-2 py-1 text-xs uppercase tracking-wide text-ink-400">
                       Customized
                     </span>
                   )}
@@ -2065,13 +2067,13 @@ export function SettingsModal(): JSX.Element {
               >
                 <div className="flex flex-wrap items-start justify-between gap-3">
                   <div className="min-w-0">
-                    <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-ink-500">
+                    <div className="text-xs font-medium uppercase tracking-[0.16em] text-ink-500">
                       Updates
                     </div>
                     <div className="mt-1 flex flex-wrap items-center gap-2">
                       <span
                         className={[
-                          'rounded-full border px-2.5 py-1 text-[11px] font-medium',
+                          'rounded-full border px-2.5 py-1 text-xs font-medium',
                           updatePhaseBadgeClass(appUpdateState?.phase ?? 'idle')
                         ].join(' ')}
                       >
@@ -2181,7 +2183,7 @@ export function SettingsModal(): JSX.Element {
                 className="mt-4 flex flex-col items-center gap-1.5 border-t border-paper-300/55 pt-4 text-center"
                 {...settingsSearchTargetProps('lumary-labs')}
               >
-                <span className="text-[11px] font-medium uppercase tracking-[0.16em] text-ink-500">
+                <span className="text-xs font-medium uppercase tracking-[0.16em] text-ink-500">
                   Built by
                 </span>
                 <a
@@ -2227,17 +2229,17 @@ export function SettingsModal(): JSX.Element {
   return (
     <>
       <div
-        className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 px-4 pt-[7vh] backdrop-blur-md"
+        className="fixed inset-0 z-modal flex items-start justify-center bg-black/45 px-4 pt-[7vh] backdrop-blur-md"
         onClick={() => setSettingsOpen(false)}
       >
         <div
           ref={ref}
-          className="grid h-[min(92vh,980px)] w-[min(1120px,96vw)] grid-cols-[252px_minmax(0,1fr)] overflow-hidden rounded-[26px] border border-paper-300/70 bg-paper-100 shadow-float"
+          className="grid h-[min(92vh,980px)] w-[min(1120px,96vw)] grid-cols-[252px_minmax(0,1fr)] overflow-hidden rounded-3xl border border-paper-300/70 bg-paper-100 shadow-float"
           onClick={(e) => e.stopPropagation()}
         >
         <aside className="flex min-h-0 flex-col border-r border-paper-300/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01))]">
           <div className="border-b border-paper-300/55 px-4 py-4">
-            <div className="text-[11px] font-medium uppercase tracking-[0.22em] text-ink-500">
+            <div className="text-xs font-medium uppercase tracking-[0.22em] text-ink-500">
               Settings
             </div>
             <div className="mt-3">
@@ -2293,12 +2295,12 @@ export function SettingsModal(): JSX.Element {
                     <div className="flex min-w-0 items-center justify-between gap-2">
                       <div className="truncate text-sm font-medium">{result.title}</div>
                       {result.type === 'setting' && (
-                        <span className="shrink-0 rounded-full border border-paper-300/60 bg-paper-100/70 px-2 py-0.5 text-[10px] font-medium text-ink-500">
+                        <span className="shrink-0 rounded-full border border-paper-300/60 bg-paper-100/70 px-2 py-0.5 text-2xs font-medium text-ink-500">
                           {result.category.title}
                         </span>
                       )}
                     </div>
-                    <div className="mt-1 line-clamp-2 text-[11px] leading-5 text-ink-500">
+                    <div className="mt-1 line-clamp-2 text-xs leading-5 text-ink-500">
                       {result.description}
                     </div>
                   </button>
@@ -2312,7 +2314,7 @@ export function SettingsModal(): JSX.Element {
             </nav>
           </div>
 
-          <div className="border-t border-paper-300/55 px-4 py-3 text-[11px] leading-5 text-ink-500">
+          <div className="border-t border-paper-300/55 px-4 py-3 text-xs leading-5 text-ink-500">
             Settings save automatically on this device.
           </div>
         </aside>
@@ -2320,10 +2322,10 @@ export function SettingsModal(): JSX.Element {
         <div className="flex min-h-0 flex-col">
           <div className="flex items-start justify-between gap-4 border-b border-paper-300/60 px-7 py-5">
             <div>
-              <div className="text-[11px] font-medium uppercase tracking-[0.22em] text-ink-500">
+              <div className="text-xs font-medium uppercase tracking-[0.22em] text-ink-500">
                 {visibleCategory ? visibleCategory.title : 'Settings'}
               </div>
-              <h2 className="mt-1 font-serif text-[28px] font-semibold leading-tight text-ink-900">
+              <h2 className="mt-1 font-serif text-3xl font-semibold leading-tight text-ink-900">
                 {visibleCategory?.title ?? 'Settings'}
               </h2>
               <p className="mt-2 max-w-2xl text-sm leading-6 text-ink-500">
@@ -2331,19 +2333,21 @@ export function SettingsModal(): JSX.Element {
                   'Search the navigation on the left to jump to a settings section.'}
               </p>
             </div>
-            <button
+            <Button
+              variant="secondary"
+              size="md"
               onClick={() => setSettingsOpen(false)}
-              className="shrink-0 rounded-xl border border-paper-300/70 bg-paper-50/80 px-4 py-2 text-sm font-medium text-ink-900 transition-colors hover:bg-paper-200"
+              className="shrink-0"
             >
               Done
-            </button>
+            </Button>
           </div>
 
           <div className="min-h-0 flex-1 overflow-y-auto px-7 py-6">
             {visibleCategory ? (
               visibleCategory.content
             ) : (
-              <div className="flex h-full min-h-[280px] items-center justify-center rounded-[24px] border border-dashed border-paper-300/70 bg-paper-50/35 px-6 text-center text-sm leading-6 text-ink-500">
+              <div className="flex h-full min-h-[280px] items-center justify-center rounded-3xl border border-dashed border-paper-300/70 bg-paper-50/35 px-6 text-center text-sm leading-6 text-ink-500">
                 Try a broader search term, or clear the search field to browse every settings section.
               </div>
             )}
@@ -2420,7 +2424,7 @@ function KeymapSettings({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex min-h-0 flex-1 flex-col rounded-[22px] border border-paper-300/60 bg-paper-50/45 shadow-[0_14px_36px_rgba(15,23,42,0.04)]">
+      <div className="flex min-h-0 flex-1 flex-col rounded-3xl border border-paper-300/60 bg-paper-50/45 shadow-[0_14px_36px_rgba(15,23,42,0.04)]">
         <div className="sticky top-0 z-10 rounded-t-[22px] border-b border-paper-300/55 bg-paper-50/95 px-5 py-4 backdrop-blur">
           <div className="flex flex-wrap items-center justify-between gap-3">
           <div className="min-w-0">
@@ -2457,7 +2461,7 @@ function KeymapSettings({
         <div className="min-h-0 flex-1 overflow-y-auto divide-y divide-paper-300/45">
           {groups.map((group) => (
             <div key={group.group}>
-              <div className="px-5 pt-4 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
+              <div className="px-5 pt-4 text-xs font-medium uppercase tracking-[0.18em] text-ink-500">
                 {group.label}
               </div>
               <div className="pb-4">
@@ -2478,12 +2482,12 @@ function KeymapSettings({
                             {definition.title}
                           </span>
                           {inactive && (
-                            <span className="rounded-full border border-paper-300/70 bg-paper-100/85 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ink-500">
+                            <span className="rounded-full border border-paper-300/70 bg-paper-100/85 px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em] text-ink-500">
                               {definition.vimOnly ? 'Vim only' : 'Non-Vim only'}
                             </span>
                           )}
                           {custom && (
-                            <span className="rounded-full border border-accent/25 bg-accent/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-accent">
+                            <span className="rounded-full border border-accent/25 bg-accent/10 px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em] text-accent">
                               Custom
                             </span>
                           )}
@@ -2610,7 +2614,7 @@ function KeymapRecorderModal({
     : 'Press a key…'
 
   return createPortal(
-    <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/35 px-4 backdrop-blur-sm">
+    <div className="fixed inset-0 z-toast flex items-center justify-center bg-black/35 px-4 backdrop-blur-sm">
       <div className="w-[min(440px,92vw)] overflow-hidden rounded-2xl border border-paper-300/70 bg-paper-100 shadow-float">
         <div className="border-b border-paper-300/60 px-5 py-4">
           <div className="text-base font-semibold text-ink-900">{definition.title}</div>
@@ -2618,7 +2622,7 @@ function KeymapRecorderModal({
         </div>
         <div className="px-5 py-4">
           <div className="rounded-xl border border-paper-300/70 bg-paper-50/80 px-4 py-4">
-            <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-ink-500">
+            <div className="text-xs font-medium uppercase tracking-[0.16em] text-ink-500">
               Recording
             </div>
             <div className="mt-2 text-2xl font-semibold text-ink-900">{display}</div>
@@ -2651,19 +2655,14 @@ function KeymapRecorderModal({
             >
               Cancel
             </button>
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               disabled={!binding}
               onClick={() => onSave(binding)}
-              className={[
-                'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
-                binding
-                  ? 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-                  : 'cursor-not-allowed bg-paper-300 text-ink-500'
-              ].join(' ')}
             >
               Save
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -2686,14 +2685,14 @@ function Section({
   return (
     <section className="space-y-3" {...settingsSearchTargetProps(settingId)}>
       <div>
-        <div className="text-[11px] font-medium uppercase tracking-[0.2em] text-ink-500">
+        <div className="text-xs font-medium uppercase tracking-[0.2em] text-ink-500">
           {title}
         </div>
         {description && (
           <p className="mt-1 max-w-2xl text-sm leading-6 text-ink-500">{description}</p>
         )}
       </div>
-      <div className="overflow-hidden rounded-[22px] border border-paper-300/60 bg-paper-50/45 shadow-[0_14px_36px_rgba(15,23,42,0.04)]">
+      <div className="overflow-hidden rounded-3xl border border-paper-300/60 bg-paper-50/45 shadow-[0_14px_36px_rgba(15,23,42,0.04)]">
         <div className="divide-y divide-paper-300/45">{children}</div>
       </div>
     </section>
@@ -3127,7 +3126,7 @@ function FontRow({
         createPortal(
           <div
             id="zen-font-portal"
-            className="fixed z-[80] flex max-h-[320px] flex-col overflow-hidden rounded-xl border border-paper-300 bg-paper-100 shadow-float"
+            className="fixed z-popover flex max-h-[320px] flex-col overflow-hidden rounded-xl border border-paper-300 bg-paper-100 shadow-float"
             style={{ left: rect.left, top: rect.top, width: rect.width }}
           >
             <div className="border-b border-paper-300/60 p-2">
@@ -3494,7 +3493,7 @@ function CliSettings(): JSX.Element {
                 <span className="text-sm font-medium text-ink-900">zen</span>
                 <span
                   className={[
-                    'rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em]',
+                    'rounded-full border px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em]',
                     statusChipClass(chip.tone)
                   ].join(' ')}
                 >
@@ -3514,7 +3513,7 @@ function CliSettings(): JSX.Element {
                 <div className="mt-1.5 text-xs leading-5 text-amber-500">{status.reason}</div>
               )}
               {!installed && status.pathHint && (
-                <div className="mt-2 rounded-lg border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-[11px] leading-5 text-ink-700">
+                <div className="mt-2 rounded-lg border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs leading-5 text-ink-700">
                   <div className="font-medium text-amber-600">
                     {status.defaultTarget.replace(/\/[^/]+$/, '')} is not on your PATH.
                   </div>
@@ -3522,13 +3521,13 @@ function CliSettings(): JSX.Element {
                     After install, run this once so your shell can find <code className="font-mono">zen</code>:
                   </div>
                   <div className="mt-1.5 flex items-center gap-2">
-                    <code className="min-w-0 flex-1 break-all rounded-md bg-paper-100/80 px-2 py-1 font-mono text-[11px] text-ink-900">
+                    <code className="min-w-0 flex-1 break-all rounded-md bg-paper-100/80 px-2 py-1 font-mono text-xs text-ink-900">
                       {status.pathHint}
                     </code>
                     <button
                       type="button"
                       onClick={() => copyToClipboard(status.pathHint ?? '')}
-                      className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-1 text-[11px] font-medium text-ink-700 hover:bg-paper-200"
+                      className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-1 text-xs font-medium text-ink-700 hover:bg-paper-200"
                     >
                       Copy
                     </button>
@@ -3552,33 +3551,28 @@ function CliSettings(): JSX.Element {
                   {busy ? 'Working…' : 'Uninstall'}
                 </button>
               ) : (
-                <button
-                  type="button"
+                <Button
+                  variant="primary"
+                  size="sm"
                   onClick={() => void onInstall()}
                   disabled={busy || isUnavailable}
-                  className={[
-                    'rounded-xl px-3.5 py-1.5 text-xs font-medium transition-colors',
-                    busy || isUnavailable
-                      ? 'cursor-not-allowed bg-paper-300 text-ink-500'
-                      : 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-                  ].join(' ')}
                 >
                   {busy ? 'Installing…' : 'Install'}
-                </button>
+                </Button>
               )}
             </div>
           </div>
-          <div className="flex items-center gap-2 border-t border-paper-300/45 pt-2 text-[11px] text-ink-500">
-            <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-ink-400">
+          <div className="flex items-center gap-2 border-t border-paper-300/45 pt-2 text-xs text-ink-500">
+            <span className="text-2xs font-medium uppercase tracking-[0.14em] text-ink-400">
               Path
             </span>
-            <code className="min-w-0 flex-1 break-all rounded-md bg-paper-100/80 px-2 py-1 font-mono text-[11px] text-ink-800">
+            <code className="min-w-0 flex-1 break-all rounded-md bg-paper-100/80 px-2 py-1 font-mono text-xs text-ink-800">
               {status.installedAt ?? status.defaultTarget}
             </code>
             <button
               type="button"
               onClick={() => copyToClipboard(status.installedAt ?? status.defaultTarget)}
-              className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-1 text-[11px] font-medium text-ink-700 hover:bg-paper-200"
+              className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-1 text-xs font-medium text-ink-700 hover:bg-paper-200"
             >
               Copy
             </button>
@@ -3596,7 +3590,7 @@ function CliSettings(): JSX.Element {
         description="A handful of the most useful commands. Quote paths with spaces, or pass them with `--path`. Run `zen --help` for the full list."
         settingId="cli-quick-reference"
       >
-        <div className="space-y-2 px-5 py-4 font-mono text-[12px] leading-6 text-ink-800">
+        <div className="space-y-2 px-5 py-4 font-mono text-xs leading-6 text-ink-800">
           <div>zen list --tag idea</div>
           <div>zen read "inbox/Project.md"</div>
           <div>zen read --path "hellointerview/system design.md"</div>
@@ -3695,7 +3689,7 @@ function RaycastExtensionSettings({
               <span className="text-sm font-medium text-ink-900">ZenNotes for Raycast</span>
               <span
                 className={[
-                  'rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em]',
+                  'rounded-full border px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em]',
                   statusChipClass(chip.tone)
                 ].join(' ')}
               >
@@ -3703,7 +3697,7 @@ function RaycastExtensionSettings({
               </span>
             </div>
             <div className="mt-1 text-xs leading-5 text-ink-500">{detail}</div>
-            <div className="mt-1 text-[11px] leading-5 text-ink-400">{toolchainDetail}</div>
+            <div className="mt-1 text-xs leading-5 text-ink-400">{toolchainDetail}</div>
             {!cliInstalled && (
               <div className="mt-1.5 text-xs leading-5 text-amber-500">
                 Install the <code className="font-mono">zen</code> CLI above first. The Raycast
@@ -3714,32 +3708,28 @@ function RaycastExtensionSettings({
               <div className="mt-1.5 text-xs leading-5 text-amber-500">{status.reason}</div>
             )}
           </div>
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => void onInstall()}
             disabled={installDisabled}
-            className={[
-              'shrink-0 rounded-xl px-3.5 py-1.5 text-xs font-medium transition-colors',
-              installDisabled
-                ? 'cursor-not-allowed bg-paper-300 text-ink-500'
-                : 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-            ].join(' ')}
+            className="shrink-0"
           >
             {installLabel}
-          </button>
+          </Button>
         </div>
 
-        <div className="flex items-center gap-2 border-t border-paper-300/45 pt-2 text-[11px] text-ink-500">
-          <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-ink-400">
+        <div className="flex items-center gap-2 border-t border-paper-300/45 pt-2 text-xs text-ink-500">
+          <span className="text-2xs font-medium uppercase tracking-[0.14em] text-ink-400">
             Local copy
           </span>
-          <code className="min-w-0 flex-1 break-all rounded-md bg-paper-100/80 px-2 py-1 font-mono text-[11px] text-ink-800">
+          <code className="min-w-0 flex-1 break-all rounded-md bg-paper-100/80 px-2 py-1 font-mono text-xs text-ink-800">
             {status.extensionPath}
           </code>
           <button
             type="button"
             onClick={() => copyToClipboard(status.extensionPath)}
-            className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-1 text-[11px] font-medium text-ink-700 hover:bg-paper-200"
+            className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-1 text-xs font-medium text-ink-700 hover:bg-paper-200"
           >
             Copy
           </button>
@@ -3871,7 +3861,7 @@ function McpSettings(): JSX.Element {
             <div className="flex items-center gap-2">
               <span
                 className={[
-                  'rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em]',
+                  'rounded-full border px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em]',
                   serverStatusClass
                 ].join(' ')}
               >
@@ -3895,7 +3885,7 @@ function McpSettings(): JSX.Element {
           </div>
           {showCommand && (
             <div className="mt-3 flex items-start gap-2">
-              <code className="min-w-0 flex-1 break-all rounded-lg border border-paper-300/70 bg-paper-50/80 px-3 py-2 font-mono text-[11px] leading-5 text-ink-900">
+              <code className="min-w-0 flex-1 break-all rounded-lg border border-paper-300/70 bg-paper-50/80 px-3 py-2 font-mono text-xs leading-5 text-ink-900">
                 {commandPreview}
               </code>
               <button
@@ -4010,14 +4000,14 @@ function McpInstructionsEditor(): JSX.Element {
     >
       <div className="space-y-3 px-5 py-5">
         <div className="flex flex-wrap items-center justify-between gap-2">
-          <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-ink-500">
+          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-ink-500">
             <span>Prompt</span>
             {payload?.isCustom ? (
-              <span className="rounded-full border border-accent/25 bg-accent/10 px-2 py-0.5 text-[10px] font-medium tracking-[0.14em] text-accent">
+              <span className="rounded-full border border-accent/25 bg-accent/10 px-2 py-0.5 text-2xs font-medium tracking-[0.14em] text-accent">
                 Custom
               </span>
             ) : (
-              <span className="rounded-full border border-paper-300/70 bg-paper-100/85 px-2 py-0.5 text-[10px] font-medium tracking-[0.14em] text-ink-500">
+              <span className="rounded-full border border-paper-300/70 bg-paper-100/85 px-2 py-0.5 text-2xs font-medium tracking-[0.14em] text-ink-500">
                 Default
               </span>
             )}
@@ -4049,32 +4039,27 @@ function McpInstructionsEditor(): JSX.Element {
             >
               Revert
             </button>
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               onClick={() => void save()}
               disabled={!dirty || saving}
-              className={[
-                'rounded-lg px-3.5 py-1.5 text-xs font-medium transition-colors',
-                dirty && !saving
-                  ? 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-                  : 'cursor-not-allowed bg-paper-300 text-ink-500'
-              ].join(' ')}
             >
               {saving ? 'Saving…' : 'Save'}
-            </button>
+            </Button>
           </div>
         </div>
         <textarea
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
           spellCheck={false}
-          className="h-[360px] w-full resize-y rounded-xl border border-paper-300/70 bg-paper-50/80 px-3.5 py-3 font-mono text-[12px] leading-5 text-ink-900 outline-none placeholder:text-ink-400 focus:border-accent/45"
+          className="h-[360px] w-full resize-y rounded-xl border border-paper-300/70 bg-paper-50/80 px-3.5 py-3 font-mono text-xs leading-5 text-ink-900 outline-none placeholder:text-ink-400 focus:border-accent/45"
           placeholder="Loading…"
         />
-        <div className="flex flex-wrap items-center justify-between gap-2 text-[11px] text-ink-500">
+        <div className="flex flex-wrap items-center justify-between gap-2 text-xs text-ink-500">
           <span>
             Saved at:{' '}
-            <code className="font-mono text-[11px] text-ink-600">
+            <code className="font-mono text-xs text-ink-600">
               {payload?.filePath ?? '—'}
             </code>
           </span>
@@ -4131,7 +4116,7 @@ function McpClientRow({
             <span className="text-sm font-medium text-ink-900">{title}</span>
             <span
               className={[
-                'rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em]',
+                'rounded-full border px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em]',
                 statusChipClass(chip.tone)
               ].join(' ')}
             >
@@ -4174,28 +4159,23 @@ function McpClientRow({
               </button>
             </>
           ) : (
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               onClick={onInstall}
               disabled={busy || entryMissing}
-              className={[
-                'rounded-xl px-3.5 py-1.5 text-xs font-medium transition-colors',
-                busy || entryMissing
-                  ? 'cursor-not-allowed bg-paper-300 text-ink-500'
-                  : 'bg-ink-900 text-paper-50 hover:bg-ink-800'
-              ].join(' ')}
             >
               {busy ? 'Installing…' : 'Install'}
-            </button>
+            </Button>
           )}
         </div>
       </div>
-      <div className="flex items-center gap-2 border-t border-paper-300/45 pt-2 text-[11px] text-ink-500">
-        <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-ink-400">
+      <div className="flex items-center gap-2 border-t border-paper-300/45 pt-2 text-xs text-ink-500">
+        <span className="text-2xs font-medium uppercase tracking-[0.14em] text-ink-400">
           Config
         </span>
         <code
-          className="min-w-0 flex-1 truncate font-mono text-[11px] text-ink-600"
+          className="min-w-0 flex-1 truncate font-mono text-xs text-ink-600"
           title={status.configPath}
         >
           {status.configPath}
@@ -4203,7 +4183,7 @@ function McpClientRow({
         <button
           type="button"
           onClick={onCopyConfigPath}
-          className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 text-[10px] font-medium text-ink-700 transition-colors hover:bg-paper-200"
+          className="shrink-0 rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 text-2xs font-medium text-ink-700 transition-colors hover:bg-paper-200"
         >
           Copy
         </button>
diff --git a/packages/app-core/src/components/Sidebar.tsx b/packages/app-core/src/components/Sidebar.tsx
index 70fe6c11..4b5bb597 100644
--- a/packages/app-core/src/components/Sidebar.tsx
+++ b/packages/app-core/src/components/Sidebar.tsx
@@ -169,7 +169,7 @@ function SidebarSectionHeading({
   return (
     <div
       className={[
-        "rounded-lg px-2 pb-2 pt-4 text-[11px] font-medium uppercase tracking-wide transition-colors",
+        "rounded-lg px-2 pb-2 pt-4 text-xs font-medium uppercase tracking-wide transition-colors",
         dragHover ? "bg-accent/10 text-accent" : "text-ink-500",
       ].join(" ")}
       onDragOver={
@@ -2502,7 +2502,7 @@ export function Sidebar(): JSX.Element {
                 {vault?.name ?? "ZenNotes"}
               </div>
               {workspaceMode === "remote" && (
-                <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-ink-500">
+                <div className="mt-0.5 flex items-center gap-1.5 text-xs text-ink-500">
                   <span className="inline-flex items-center gap-1 rounded-full border border-paper-300/70 bg-paper-100/80 px-1.5 py-0.5 font-medium text-ink-700">
                     <ArrowUpRightIcon className="h-3 w-3" />
                     Remote
@@ -2521,7 +2521,7 @@ export function Sidebar(): JSX.Element {
                 {vault?.name ?? "ZenNotes"}
               </div>
               {workspaceMode === "remote" && (
-                <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-ink-500">
+                <div className="mt-0.5 flex items-center gap-1.5 text-xs text-ink-500">
                   <span className="inline-flex items-center gap-1 rounded-full border border-paper-300/70 bg-paper-100/80 px-1.5 py-0.5 font-medium text-ink-700">
                     <ArrowUpRightIcon className="h-3 w-3" />
                     Remote
@@ -2554,7 +2554,7 @@ export function Sidebar(): JSX.Element {
         >
           <SearchIcon />
           <span className="flex-1 truncate">Search</span>
-          <kbd className="rounded bg-paper-200 px-1 py-0.5 text-[10px] text-ink-500">
+          <kbd className="rounded bg-paper-200 px-1 py-0.5 text-2xs text-ink-500">
             ⌘P
           </kbd>
         </button>
@@ -2857,7 +2857,7 @@ export function Sidebar(): JSX.Element {
                 onClick={() => setTagsCollapsed(!tagsCollapsed)}
                 title={tagsCollapsed ? "Show tags" : "Hide tags"}
                 aria-expanded={!tagsCollapsed}
-                className="flex w-full items-center gap-1 rounded px-2 pb-2 text-[11px] font-medium uppercase tracking-wide text-ink-500 transition-colors hover:text-ink-800"
+                className="flex w-full items-center gap-1 rounded px-2 pb-2 text-xs font-medium uppercase tracking-wide text-ink-500 transition-colors hover:text-ink-800"
               >
                 {showSidebarChevrons && (
                   <span
@@ -2873,7 +2873,7 @@ export function Sidebar(): JSX.Element {
                   </span>
                 )}
                 <span>Tags</span>
-                <span className="ml-1 text-ink-400 normal-case tracking-normal">
+                <span className="ml-1 text-ink-500 normal-case tracking-normal">
                   {tags.length}
                 </span>
               </button>
@@ -2916,7 +2916,7 @@ export function Sidebar(): JSX.Element {
                         #{tag}
                         <span
                           className={[
-                            "ml-1 text-[10px]",
+                            "ml-1 text-2xs",
                             active && !isSidebarFocused
                               ? "text-white/80"
                               : "text-ink-500",
@@ -3998,7 +3998,7 @@ const NoteLeaf = memo(function NoteLeaf({
                 : "text-white/70"
               : selected
                 ? "text-accent/75"
-                : "text-ink-400",
+                : "text-ink-500",
           ].join(" ")}
         >
           <svg
@@ -4028,7 +4028,7 @@ const NoteLeaf = memo(function NoteLeaf({
                 : "text-white/70"
               : selected
                 ? "text-accent/75"
-              : "text-ink-400",
+              : "text-ink-500",
           ].join(" ")}
         >
           <svg
@@ -4144,8 +4144,8 @@ function AssetLeaf({
       {extension && (
         <span
           className={[
-            "shrink-0 pr-2 text-[10px] uppercase tracking-wide",
-            sidebarFocused && vimHighlight ? "text-ink-700" : "text-ink-400",
+            "shrink-0 pr-2 text-2xs uppercase tracking-wide",
+            sidebarFocused && vimHighlight ? "text-ink-700" : "text-ink-500",
           ].join(" ")}
         >
           {extension}
@@ -4307,7 +4307,7 @@ function TreeRow({
           title="Symlinked into this vault"
           className={[
             "shrink-0",
-            strongActive ? "text-white/70" : selected ? "text-accent/75" : "text-ink-400",
+            strongActive ? "text-white/70" : selected ? "text-accent/75" : "text-ink-500",
           ].join(" ")}
         >
           <svg
@@ -4337,7 +4337,7 @@ function TreeRow({
         <span
           className={[
             "shrink-0 pr-2 text-xs",
-            strongActive ? "text-white/80" : selected ? "text-accent/75" : "text-ink-400",
+            strongActive ? "text-white/80" : selected ? "text-accent/75" : "text-ink-500",
           ].join(" ")}
         >
           {count}
@@ -4470,7 +4470,7 @@ function ArchiveSidebarRow({
         <span
           className={[
             "shrink-0 pr-2 text-xs",
-            strongActive ? "text-white/80" : "text-ink-400",
+            strongActive ? "text-white/80" : "text-ink-500",
           ].join(" ")}
         >
           {count}
@@ -4548,7 +4548,7 @@ function TrashSidebarRow({
         <span
           className={[
             "shrink-0 pr-2 text-xs",
-            strongActive ? "text-white/80" : "text-ink-400",
+            strongActive ? "text-white/80" : "text-ink-500",
           ].join(" ")}
         >
           {count}
@@ -4624,7 +4624,7 @@ function SidebarRow({
         <span
           className={[
             "text-xs",
-            strongActive ? "text-white/80" : "text-ink-400",
+            strongActive ? "text-white/80" : "text-ink-500",
           ].join(" ")}
         >
           {count}
@@ -4672,7 +4672,7 @@ function SidebarFooterAction({
       title={resolvedTitle}
       aria-label={resolvedTitle}
       className={[
-        "inline-flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-[11px] font-medium leading-none transition-colors whitespace-nowrap",
+        "inline-flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium leading-none transition-colors whitespace-nowrap",
         active
           ? vimHighlight
             ? "vim-cursor-on-active bg-accent text-white"
@@ -4699,7 +4699,7 @@ function SidebarFooterAction({
       {typeof count === "number" && (
         <span
           className={[
-            "rounded-full px-1.5 py-0.5 text-[10px]",
+            "rounded-full px-1.5 py-0.5 text-2xs",
             strongActive
               ? "bg-white/12 text-white/80"
               : "bg-paper-200/80 text-ink-500",
@@ -4711,7 +4711,7 @@ function SidebarFooterAction({
       {badgeLabel && (
         <span
           className={[
-            "rounded-full px-1.5 py-0.5 text-[10px] font-semibold",
+            "rounded-full px-1.5 py-0.5 text-2xs font-semibold",
             strongActive
               ? "bg-white/16 text-white"
               : "bg-accent/12 text-accent",
@@ -4749,7 +4749,7 @@ function IconBtn({
       ].join(" ")}
     >
       <span className="pointer-events-none">{children}</span>
-      <span className="pointer-events-none absolute left-1/2 top-full z-20 mt-1 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300 bg-paper-50 px-2 py-1 text-[11px] font-medium text-ink-800 shadow-panel group-hover:block group-focus-visible:block">
+      <span className="pointer-events-none absolute left-1/2 top-full z-20 mt-1 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-paper-300 bg-paper-50 px-2 py-1 text-xs font-medium text-ink-800 shadow-panel group-hover:block group-focus-visible:block">
         {title}
       </span>
     </button>
@@ -4961,13 +4961,13 @@ function RowKeyHint({
   return (
     <span
       className={[
-        "pointer-events-none shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] leading-none",
+        "pointer-events-none shrink-0 rounded-md border px-1.5 py-0.5 text-2xs leading-none",
         active
           ? "border-white/25 bg-white/12 text-white/80"
           : "border-paper-300/70 bg-paper-100/75 text-ink-500",
       ].join(" ")}
     >
-      <span className="font-mono text-[10px]">{keyLabel}</span>
+      <span className="font-mono text-2xs">{keyLabel}</span>
       {!compact && label ? <span className="ml-1">{label}</span> : null}
     </span>
   );
diff --git a/packages/app-core/src/components/StatusBar.tsx b/packages/app-core/src/components/StatusBar.tsx
index 99149024..b888ef22 100644
--- a/packages/app-core/src/components/StatusBar.tsx
+++ b/packages/app-core/src/components/StatusBar.tsx
@@ -30,7 +30,7 @@ export function StatusBar({ note }: { note: NoteContent }): JSX.Element {
 
   return (
     <div
-      className="flex h-8 shrink-0 items-center justify-end gap-5 px-6 text-[11px] text-ink-500"
+      className="flex h-8 shrink-0 items-center justify-end gap-5 px-6 text-xs text-ink-500"
       style={{ borderTop: '1px solid var(--glass-stroke)' }}
     >
       <Stat>
diff --git a/packages/app-core/src/components/TagView.tsx b/packages/app-core/src/components/TagView.tsx
index 49652ed2..e908e8d8 100644
--- a/packages/app-core/src/components/TagView.tsx
+++ b/packages/app-core/src/components/TagView.tsx
@@ -281,7 +281,7 @@ export function TagView(): JSX.Element {
       <div className="flex items-center gap-2 border-b border-current/10 px-4 py-3">
         <TagIcon width={18} height={18} />
         <h1 className="text-sm font-semibold">Tags</h1>
-        <span className="ml-2 rounded bg-current/10 px-1.5 py-0.5 text-[11px] text-current/60">
+        <span className="ml-2 rounded bg-current/10 px-1.5 py-0.5 text-xs text-current/60">
           {matching.length} {matching.length === 1 ? 'note' : 'notes'}
         </span>
         <div className="ml-auto flex items-center gap-2">
@@ -316,11 +316,11 @@ export function TagView(): JSX.Element {
           result set. Click any chip to toggle; shows un-selected tags in
           a quieter style so the user can pick more without leaving. */}
       <div className="flex flex-wrap items-center gap-1.5 border-b border-current/10 px-4 py-2">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-current/40">
+        <span className="text-2xs font-semibold uppercase tracking-wider text-current/40">
           Selected
         </span>
         {selectedTags.length === 0 ? (
-          <span className="text-[11px] text-current/50">
+          <span className="text-xs text-current/50">
             Click a tag below to start narrowing.
           </span>
         ) : (
@@ -329,7 +329,7 @@ export function TagView(): JSX.Element {
               key={`sel-${t}`}
               type="button"
               onClick={() => toggleTagSelection(t)}
-              className="flex items-center gap-1 rounded-full bg-accent/20 px-2 py-0.5 text-[11px] text-accent hover:bg-accent/30"
+              className="flex items-center gap-1 rounded-full bg-accent/20 px-2 py-0.5 text-xs font-medium text-accent ring-1 ring-accent/30 hover:bg-accent/30"
               title="Remove from selection"
             >
               <span>#{t}</span>
@@ -339,7 +339,7 @@ export function TagView(): JSX.Element {
         )}
         {allTags.length > selectedTags.length && (
           <>
-            <span className="ml-2 text-[10px] font-semibold uppercase tracking-wider text-current/40">
+            <span className="ml-2 text-2xs font-semibold uppercase tracking-wider text-current/40">
               Add
             </span>
             {allTags
@@ -349,7 +349,7 @@ export function TagView(): JSX.Element {
                   key={`pick-${t}`}
                   type="button"
                   onClick={() => toggleTagSelection(t)}
-                  className="rounded-full bg-current/5 px-2 py-0.5 text-[11px] text-current/70 hover:bg-current/15 hover:text-current/90"
+                  className="rounded-full bg-current/5 px-2 py-0.5 text-xs text-current/70 hover:bg-current/15 hover:text-current/90"
                 >
                   #{t}
                   <span className="ml-1 text-current/40">{count}</span>
@@ -400,16 +400,16 @@ export function TagView(): JSX.Element {
                   <div className="truncate text-sm text-current/90">
                     {note.title || '(untitled)'}
                   </div>
-                  <div className="mt-0.5 truncate text-[11px] text-current/50">
+                  <div className="mt-0.5 truncate text-xs text-current/50">
                     {folderLabel(note) || note.folder}
                   </div>
                   {note.excerpt && (
-                    <div className="mt-0.5 truncate text-[11px] text-current/40">
+                    <div className="mt-0.5 truncate text-xs text-current/40">
                       {note.excerpt}
                     </div>
                   )}
                 </div>
-                <span className="shrink-0 text-[11px] text-current/40">
+                <span className="shrink-0 text-xs text-current/40">
                   {formatDate(note.updatedAt)}
                 </span>
               </button>
@@ -452,7 +452,7 @@ export function TagView(): JSX.Element {
           />
         </form>
       ) : (
-        <div className="border-t border-current/10 px-4 py-1.5 text-[11px] text-current/40">
+        <div className="border-t border-current/10 px-4 py-1.5 text-xs text-current/40">
           j/k move · Enter/o open · click chips to toggle · / filter · : command · Esc close
         </div>
       )}
diff --git a/packages/app-core/src/components/TasksCalendar.tsx b/packages/app-core/src/components/TasksCalendar.tsx
index 3eb66ac3..2fc06fc5 100644
--- a/packages/app-core/src/components/TasksCalendar.tsx
+++ b/packages/app-core/src/components/TasksCalendar.tsx
@@ -260,12 +260,12 @@ export function TasksCalendar({ tasks, today, onOpenTask, onToggleTask }: Props)
         <div className="text-sm font-semibold text-current/85">
           {formatMonthLabel(monthAnchor)}
         </div>
-        <div className="text-[11px] text-current/40">
+        <div className="text-xs text-current/40">
           h/j/k/l move · [ ] month · gt today · Enter open
         </div>
       </div>
 
-      <div className="grid shrink-0 grid-cols-7 px-3 pt-2 text-[10px] uppercase tracking-wide text-current/40">
+      <div className="grid shrink-0 grid-cols-7 px-3 pt-2 text-2xs uppercase tracking-wide text-current/40">
         {WEEKDAY_LABELS.map((d) => (
           <div key={d} className="px-1 py-1 text-center">
             {d}
@@ -304,7 +304,7 @@ export function TasksCalendar({ tasks, today, onOpenTask, onToggleTask }: Props)
                   {cell.getDate()}
                 </span>
                 {cellTasks.length > 0 && (
-                  <span className="rounded bg-paper-300/60 px-1 text-[9px] text-current/60">
+                  <span className="rounded bg-paper-300/60 px-1 text-2xs text-current/60">
                     {cellTasks.length}
                   </span>
                 )}
@@ -329,7 +329,7 @@ export function TasksCalendar({ tasks, today, onOpenTask, onToggleTask }: Props)
                     />
                   ))}
                   {cellTasks.length > 6 && (
-                    <span className="text-[9px] text-current/50">+{cellTasks.length - 6}</span>
+                    <span className="text-2xs text-current/50">+{cellTasks.length - 6}</span>
                   )}
                 </div>
               )}
@@ -349,7 +349,7 @@ export function TasksCalendar({ tasks, today, onOpenTask, onToggleTask }: Props)
                   day: 'numeric'
                 })}
           </h2>
-          <span className="text-[11px] text-current/40">
+          <span className="text-xs text-current/40">
             {selectedTasks.length} task{selectedTasks.length === 1 ? '' : 's'}
           </span>
         </div>
@@ -458,11 +458,11 @@ function CalendarTaskRow({ task, isOverdue, buttonRef, onToggle, onOpen }: RowPr
           '(empty task)'
         )}
       </span>
-      <span className="shrink-0 truncate text-[11px] text-current/45">{task.noteTitle}</span>
+      <span className="shrink-0 truncate text-xs text-current/45">{task.noteTitle}</span>
       {task.priority && (
         <span
           className={[
-            'shrink-0 text-[11px] font-medium',
+            'shrink-0 text-xs font-medium',
             task.priority === 'high'
               ? 'text-rose-400'
               : task.priority === 'med'
diff --git a/packages/app-core/src/components/TasksKanban.tsx b/packages/app-core/src/components/TasksKanban.tsx
index 9c0a9676..5cdc1750 100644
--- a/packages/app-core/src/components/TasksKanban.tsx
+++ b/packages/app-core/src/components/TasksKanban.tsx
@@ -854,7 +854,7 @@ export function TasksKanban({ tasks, today, onOpenTask, onToggleTask }: Props):
             <option value="folder">Folder</option>
           </select>
         </div>
-        <div className="text-[11px] text-current/40">
+        <div className="text-xs text-current/40">
           {dndEnabled
             ? 'Drag cards to move · h/l column · j/k card · Space toggle · Enter open'
             : 'h/l column · j/k card · Space toggle · Enter open'}
@@ -918,10 +918,10 @@ export function TasksKanban({ tasks, today, onOpenTask, onToggleTask }: Props):
                     </button>
                   )}
                 </div>
-                <div className="flex items-center gap-1.5 text-[11px] text-current/50">
+                <div className="flex items-center gap-1.5 text-xs text-current/50">
                   <span>{column.tasks.length}</span>
                   {column.badge?.kind === 'overdue' && column.badge.value > 0 && (
-                    <span className="rounded bg-rose-500/15 px-1.5 py-0.5 text-[10px] font-medium text-rose-300">
+                    <span className="rounded bg-rose-500/15 px-1.5 py-0.5 text-2xs font-medium text-rose-300">
                       {column.badge.value} overdue
                     </span>
                   )}
@@ -933,7 +933,7 @@ export function TasksKanban({ tasks, today, onOpenTask, onToggleTask }: Props):
                 className="min-h-0 flex-1 overflow-y-auto p-2"
               >
                 {column.tasks.length === 0 ? (
-                  <div className="rounded-md border border-dashed border-paper-300/60 px-2 py-3 text-center text-[11px] text-current/40">
+                  <div className="rounded-md border border-dashed border-paper-300/60 px-2 py-3 text-center text-xs text-current/40">
                     nothing here
                   </div>
                 ) : (
@@ -970,7 +970,7 @@ export function TasksKanban({ tasks, today, onOpenTask, onToggleTask }: Props):
         })}
       </div>
       {!dndEnabled && (
-        <div className="shrink-0 border-t border-paper-300/45 px-3 py-1.5 text-[11px] text-current/40">
+        <div className="shrink-0 border-t border-paper-300/45 px-3 py-1.5 text-xs text-current/40">
           Folder grouping is read-only — move a task across folders by moving its source note in
           the sidebar.
         </div>
@@ -1145,7 +1145,7 @@ function TaskCard({
           <ArrowUpRightIcon width={12} height={12} />
         </button>
       </div>
-      <div className="mt-1 flex items-center gap-2 pl-6 text-[11px] text-current/50">
+      <div className="mt-1 flex items-center gap-2 pl-6 text-xs text-current/50">
         <span className="truncate">{task.noteTitle}</span>
         {task.priority && (
           <span
diff --git a/packages/app-core/src/components/TasksRow.tsx b/packages/app-core/src/components/TasksRow.tsx
index b5762cb4..c19e7e3a 100644
--- a/packages/app-core/src/components/TasksRow.tsx
+++ b/packages/app-core/src/components/TasksRow.tsx
@@ -97,7 +97,7 @@ export function TasksRow({
         >
           {task.content ? <InlineMarkdown text={task.content} /> : '(empty task)'}
         </div>
-        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-current/50">
+        <div className="mt-0.5 flex items-center gap-2 text-xs text-current/50">
           <span className="truncate">{task.noteTitle}</span>
           {task.waiting && (
             <span className="rounded bg-current/10 px-1.5 py-0.5 text-purple-300">
@@ -127,7 +127,7 @@ export function TasksRow({
         {isCursor && (
           // Inline key hints — only on the cursor row so the strip stays
           // quiet and acts as an in-line cheat sheet for the user.
-          <div className="flex items-center gap-1 text-[10px] text-current/60">
+          <div className="flex items-center gap-1 text-2xs text-current/60">
             <KeyHint keyLabel="Space" label={task.checked ? 'uncheck' : 'check'} />
             <KeyHint keyLabel="⏎" label="open" />
           </div>
@@ -159,7 +159,7 @@ export function TasksRow({
 function KeyHint({ keyLabel, label }: { keyLabel: string; label: string }): JSX.Element {
   return (
     <span className="pointer-events-none flex items-center gap-1 rounded-md border border-current/20 bg-current/5 px-1.5 py-0.5 leading-none">
-      <span className="font-mono text-[10px] text-current/90">{keyLabel}</span>
+      <span className="font-mono text-2xs text-current/90">{keyLabel}</span>
       <span className="text-current/60">{label}</span>
     </span>
   )
diff --git a/packages/app-core/src/components/TasksView.tsx b/packages/app-core/src/components/TasksView.tsx
index 9b2d91f1..bb607e08 100644
--- a/packages/app-core/src/components/TasksView.tsx
+++ b/packages/app-core/src/components/TasksView.tsx
@@ -329,10 +329,10 @@ export function TasksView(): JSX.Element {
       <div className="flex items-center gap-2 border-b border-paper-300/45 px-4 py-3">
         <CheckSquareIcon width={18} height={18} />
         <h1 className="text-sm font-semibold">Tasks</h1>
-        <span className="ml-2 rounded bg-paper-300/60 px-1.5 py-0.5 text-[11px] text-current/60">
+        <span className="ml-2 rounded bg-paper-300/60 px-1.5 py-0.5 text-xs text-current/60">
           {tasks.length} total
         </span>
-        {loading && <span className="text-[11px] text-current/50">scanning…</span>}
+        {loading && <span className="text-xs text-current/50">scanning…</span>}
 
         <div className="ml-2 flex items-center gap-0.5 rounded-md bg-paper-200/60 p-0.5">
           {VIEW_BUTTONS.map(({ id, label, shortcut, Icon }) => {
@@ -344,7 +344,7 @@ export function TasksView(): JSX.Element {
                 onClick={() => setViewMode(id)}
                 title={`${label} (${shortcut})`}
                 className={[
-                  'flex items-center gap-1 rounded px-2 py-1 text-[11px] transition-colors',
+                  'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
                   isActive
                     ? 'bg-paper-50 text-current/90 shadow-sm'
                     : 'text-current/55 hover:bg-paper-200/60 hover:text-current/85'
@@ -419,7 +419,7 @@ export function TasksView(): JSX.Element {
                     <span>{GROUP_LABELS[key]}</span>
                     <span className="text-current/40">{row.count ?? 0}</span>
                     {key === 'today' && row.overdueCount ? (
-                      <span className="ml-1 rounded bg-rose-500/15 px-1.5 py-0.5 text-[10px] font-medium text-rose-300">
+                      <span className="ml-1 rounded bg-rose-500/15 px-1.5 py-0.5 text-2xs font-medium text-rose-300">
                         {row.overdueCount} overdue
                       </span>
                     ) : null}
@@ -499,7 +499,7 @@ export function TasksView(): JSX.Element {
           />
         </form>
       ) : (
-        <div className="border-t border-paper-300/45 px-4 py-1.5 text-[11px] text-current/40">
+        <div className="border-t border-paper-300/45 px-4 py-1.5 text-xs text-current/40">
           {viewMode === 'list'
             ? 'j/k move · Enter/o open · Space/x toggle · / filter · 1/2/3 view · : command · Esc close'
             : viewMode === 'calendar'
diff --git a/packages/app-core/src/components/TemplateEditorModal.tsx b/packages/app-core/src/components/TemplateEditorModal.tsx
index 200bbd08..b68c87f5 100644
--- a/packages/app-core/src/components/TemplateEditorModal.tsx
+++ b/packages/app-core/src/components/TemplateEditorModal.tsx
@@ -6,7 +6,6 @@
  * normal-mode key — so in-progress work is never lost; use Cancel or Save.
  */
 import { useCallback, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
 import { Compartment, EditorState, type Transaction } from '@codemirror/state'
 import { EditorView, drawSelection, highlightActiveLine, keymap, tooltips } from '@codemirror/view'
 import { vim } from '@replit/codemirror-vim'
@@ -23,6 +22,8 @@ import { resolveCodeLanguage } from '../lib/cm-code-languages'
 import { markdownListIndentPlugin } from '../lib/cm-markdown-list-indent'
 import { templateVariableSource, TEMPLATE_VARIABLES } from '../lib/cm-template-variables'
 import { templateSlashCommandSource, slashCommandRender } from '../lib/cm-slash-commands'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 const SKELETON = `---
 name: New Template
@@ -172,66 +173,56 @@ export function TemplateEditorModal({
     }
   }
 
-  return createPortal(
-    <div
-      data-template-editor
-      className="fixed inset-0 z-[80] flex items-start justify-center bg-black/45 pt-[10vh] backdrop-blur-sm"
-      // Don't close on backdrop click — avoids losing in-progress work. Use
-      // Cancel or Save.
-      onClick={(e) => e.stopPropagation()}
+  return (
+    // Esc is the Vim normal-mode key, and backdrop clicks must not discard
+    // in-progress work — so this modal closes only via Cancel/Save.
+    <Modal
+      size="xl"
+      layer="popover"
+      align="center"
+      onClose={onClose}
+      closeOnEsc={false}
+      closeOnBackdrop={false}
+      className="flex flex-col"
+      data={{ 'data-template-editor': '' }}
     >
-      <div
-        className="flex w-[min(900px,94vw)] flex-col overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between border-b border-paper-300/70 px-5 py-3">
-          <div className="text-sm font-semibold text-ink-900">
-            {sourcePath ? 'Edit template' : 'New template'}
-          </div>
-          <div className="text-xs text-ink-500">
-            {vimMode ? 'Vim · ' : ''}YAML frontmatter + markdown body
-          </div>
+      <div className="flex items-center justify-between border-b border-paper-300/70 px-5 py-3">
+        <div className="text-sm font-semibold text-ink-900">
+          {sourcePath ? 'Edit template' : 'New template'}
         </div>
-        <div className="grid max-h-[60vh] grid-cols-2">
-          <div ref={setEditorContainer} className="h-[60vh] overflow-hidden border-r border-paper-300/50 bg-paper-50" />
-          <div className="h-[60vh] overflow-auto whitespace-pre-wrap p-4 font-mono text-[13px] leading-relaxed text-ink-700">
-            {preview || <span className="text-ink-400">Preview…</span>}
-          </div>
+        <div className="text-xs text-ink-500">
+          {vimMode ? 'Vim · ' : ''}YAML frontmatter + markdown body
         </div>
-        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t border-paper-300/50 bg-paper-50 px-5 py-2.5">
-          <span className="text-[11px] font-medium uppercase tracking-wide text-ink-400">
-            Variables
-          </span>
-          {TEMPLATE_VARIABLES.map((variable) => (
-            <button
-              key={variable.name}
-              type="button"
-              title={variable.detail}
-              onClick={() => insertVariable(variable.insert)}
-              className="rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 font-mono text-[11px] text-ink-700 hover:bg-paper-200 hover:text-ink-900"
-            >
-              {variable.insert}
-            </button>
-          ))}
-          <span className="text-[11px] text-ink-400">— or type {'{{'} to autocomplete</span>
+      </div>
+      <div className="grid max-h-[60vh] grid-cols-2">
+        <div ref={setEditorContainer} className="h-[60vh] overflow-hidden border-r border-paper-300/50 bg-paper-50" />
+        <div className="h-[60vh] overflow-auto whitespace-pre-wrap p-4 font-mono text-sm leading-relaxed text-ink-700">
+          {preview || <span className="text-ink-500">Preview…</span>}
         </div>
-        <div className="flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3">
-          <button
-            onClick={onClose}
-            className="rounded-md border border-paper-300 bg-paper-100 px-3 py-1.5 text-sm text-ink-800 hover:bg-paper-200"
-          >
-            Cancel
-          </button>
+      </div>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t border-paper-300/50 bg-paper-50 px-5 py-2.5">
+        <span className="form-label">Variables</span>
+        {TEMPLATE_VARIABLES.map((variable) => (
           <button
-            onClick={() => void save()}
-            disabled={saving}
-            className="rounded-md bg-ink-900 px-3 py-1.5 text-sm font-medium text-paper-50 hover:bg-ink-800 disabled:opacity-50"
+            key={variable.name}
+            type="button"
+            title={variable.detail}
+            onClick={() => insertVariable(variable.insert)}
+            className="rounded-md border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 font-mono text-xs text-ink-700 hover:bg-paper-200 hover:text-ink-900"
           >
-            Save
+            {variable.insert}
           </button>
-        </div>
+        ))}
+        <span className="text-xs text-ink-500">— or type {'{{'} to autocomplete</span>
       </div>
-    </div>,
-    document.body
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={() => void save()} disabled={saving}>
+          Save
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/TemplatePalette.tsx b/packages/app-core/src/components/TemplatePalette.tsx
index 6a6cf874..941a67e3 100644
--- a/packages/app-core/src/components/TemplatePalette.tsx
+++ b/packages/app-core/src/components/TemplatePalette.tsx
@@ -14,6 +14,7 @@ import { focusEditorNormalMode } from '../lib/editor-focus'
 import { BUILTIN_TEMPLATES } from '@shared/builtin-templates'
 import { mergeTemplates } from '@shared/template-files'
 import type { NoteTemplate } from '@bridge-contract/templates'
+import { Modal } from './ui/Modal'
 
 export function TemplatePalette(): JSX.Element {
   const setOpen = useStore((s) => s.setTemplatePaletteOpen)
@@ -71,15 +72,8 @@ export function TemplatePalette(): JSX.Element {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 pt-[15vh] backdrop-blur-sm"
-      onClick={close}
-    >
-      <div
-        className="w-[min(560px,90vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300/70"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="border-b border-paper-300/70 px-4 py-3">
+    <Modal size="md" layer="palette" onClose={close} closeOnEsc={false}>
+      <div className="border-b border-paper-300/70 px-4 py-3">
           <input
             ref={inputRef}
             value={query}
@@ -123,17 +117,17 @@ export function TemplatePalette(): JSX.Element {
                 <span className="flex min-w-0 flex-1 flex-col">
                   <span className="truncate text-sm font-medium text-ink-900">{template.name}</span>
                   {template.description && (
-                    <span className="truncate text-[11px] text-ink-400">{template.description}</span>
+                    <span className="truncate text-xs text-ink-400">{template.description}</span>
                   )}
                 </span>
-                <span className="shrink-0 text-[11px] uppercase tracking-wide text-ink-400">
+                <span className="shrink-0 text-xs uppercase tracking-wide text-ink-400">
                   {template.category}
                 </span>
               </button>
             ))
           )}
         </div>
-        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-[11px] text-ink-500">
+        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
           <span>
             <kbd className="rounded bg-paper-200 px-1">↑↓</kbd>{' '}
             <kbd className="rounded bg-paper-200 px-1">Ctrl+N/P</kbd> move
@@ -145,7 +139,6 @@ export function TemplatePalette(): JSX.Element {
             <kbd className="rounded bg-paper-200 px-1">esc</kbd> close
           </span>
         </div>
-      </div>
-    </div>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/TitleBar.tsx b/packages/app-core/src/components/TitleBar.tsx
index f9c39f61..0c21c153 100644
--- a/packages/app-core/src/components/TitleBar.tsx
+++ b/packages/app-core/src/components/TitleBar.tsx
@@ -42,7 +42,7 @@ export function TitleBar(): JSX.Element {
       <div className="flex flex-1 items-center justify-center gap-2 text-center tracking-wide">
         <span className="truncate">{title}</span>
         {workspaceMode === 'remote' && (
-          <span className="rounded-full border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ink-700">
+          <span className="rounded-full border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 text-2xs font-medium uppercase tracking-[0.14em] text-ink-700">
             Remote
           </span>
         )}
diff --git a/packages/app-core/src/components/TrashView.tsx b/packages/app-core/src/components/TrashView.tsx
index 281283d3..b831182f 100644
--- a/packages/app-core/src/components/TrashView.tsx
+++ b/packages/app-core/src/components/TrashView.tsx
@@ -256,7 +256,7 @@ export function TrashView(): JSX.Element {
 
         <section
           ref={rootRef}
-          className="overflow-hidden rounded-[24px] border border-paper-300/70 bg-paper-50/34 shadow-[0_12px_42px_rgba(15,23,42,0.06)]"
+          className="overflow-hidden rounded-3xl border border-paper-300/70 bg-paper-50/34 shadow-[0_12px_42px_rgba(15,23,42,0.06)]"
         >
           {filtered.length === 0 ? (
             <div className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-center">
@@ -297,12 +297,12 @@ export function TrashView(): JSX.Element {
                     <div className="min-w-0 flex-1 pt-0.5">
                       <div className="flex flex-wrap items-center gap-x-2.5 gap-y-0.5">
                         <span className="truncate text-sm font-medium text-ink-900">{note.title}</span>
-                        <span className="text-[11px] uppercase tracking-[0.16em] text-ink-400">
+                        <span className="text-xs uppercase tracking-[0.16em] text-ink-500">
                           {formatDate(note.updatedAt)}
                         </span>
                       </div>
-                      <div className="mt-0.5 truncate text-[11px] text-ink-400">{note.path}</div>
-                      <div className="mt-1 line-clamp-1 text-[13px] leading-5 text-ink-600">
+                      <div className="mt-0.5 truncate text-xs text-ink-500">{note.path}</div>
+                      <div className="mt-1 line-clamp-1 text-sm leading-5 text-ink-600">
                         {note.excerpt || 'Empty note'}
                       </div>
                     </div>
@@ -313,7 +313,7 @@ export function TrashView(): JSX.Element {
                           e.stopPropagation()
                           void restoreNote(note)
                         }}
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-[11px] font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-paper-100/85 px-2.5 py-1 text-xs font-medium text-ink-700 transition-colors hover:bg-paper-200 hover:text-ink-900"
                       >
                         <ArrowUpRightIcon width={13} height={13} />
                         Restore
@@ -324,7 +324,7 @@ export function TrashView(): JSX.Element {
                           e.stopPropagation()
                           void deleteNoteForever(note)
                         }}
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-red-500/10 px-2.5 py-1 text-[11px] font-medium text-[rgb(var(--z-red))] transition-colors hover:bg-red-500/16"
+                        className="inline-flex items-center gap-1.5 rounded-lg bg-red-500/10 px-2.5 py-1 text-xs font-medium text-[rgb(var(--z-red))] transition-colors hover:bg-red-500/16"
                       >
                         <TrashIcon width={13} height={13} />
                         Delete
diff --git a/packages/app-core/src/components/VaultBadge.tsx b/packages/app-core/src/components/VaultBadge.tsx
index 6e25a2dd..19faa288 100644
--- a/packages/app-core/src/components/VaultBadge.tsx
+++ b/packages/app-core/src/components/VaultBadge.tsx
@@ -36,7 +36,7 @@ export function VaultBadge({
 
   return (
     <div
-      className="relative flex shrink-0 items-center justify-center overflow-hidden rounded-[8px] font-semibold text-white shadow-[0_1px_0_rgba(255,255,255,0.25)_inset,0_6px_14px_-6px_rgba(0,0,0,0.35)]"
+      className="relative flex shrink-0 items-center justify-center overflow-hidden rounded-lg font-semibold text-white shadow-[0_1px_0_rgba(255,255,255,0.25)_inset,0_6px_14px_-6px_rgba(0,0,0,0.35)]"
       style={{
         width: size,
         height: size,
diff --git a/packages/app-core/src/components/VaultTextSearchPalette.tsx b/packages/app-core/src/components/VaultTextSearchPalette.tsx
index a7c0e640..09531bc3 100644
--- a/packages/app-core/src/components/VaultTextSearchPalette.tsx
+++ b/packages/app-core/src/components/VaultTextSearchPalette.tsx
@@ -9,6 +9,7 @@ import { resolveSystemFolderLabels } from '../lib/system-folder-labels'
 import { isPaletteNextKey, isPalettePreviousKey } from '../lib/palette-nav'
 import { recordRendererPerf } from '../lib/perf'
 import { focusEditorNormalMode } from '../lib/editor-focus'
+import { Modal } from './ui/Modal'
 
 type ResolvedVaultTextSearchBackend = 'builtin' | 'ripgrep' | 'fzf'
 
@@ -372,15 +373,8 @@ export function VaultTextSearchPalette(): JSX.Element {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/45 pt-[12vh] backdrop-blur-sm"
-      onClick={close}
-    >
-      <div
-        className="w-[min(760px,92vw)] overflow-hidden rounded-xl bg-paper-100 shadow-float ring-1 ring-paper-300/70"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="border-b border-paper-300/70 px-4 py-3">
+    <Modal size="lg" layer="palette" onClose={close} closeOnEsc={false}>
+      <div className="border-b border-paper-300/70 px-4 py-3">
           <input
             ref={inputRef}
             value={query}
@@ -413,9 +407,9 @@ export function VaultTextSearchPalette(): JSX.Element {
             }}
             className="w-full bg-transparent text-base text-ink-900 outline-none placeholder:text-ink-400"
           />
-          <div className="mt-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.24em] text-ink-400">
+          <div className="mt-2 flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-ink-400">
             <span>Vault text search</span>
-            <span className="rounded-full border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 text-[10px] tracking-[0.16em] text-ink-500">
+            <span className="rounded-full border border-paper-300/70 bg-paper-100/80 px-2 py-0.5 text-2xs tracking-[0.16em] text-ink-500">
               {resolvedBackendLabel}
             </span>
           </div>
@@ -450,26 +444,26 @@ export function VaultTextSearchPalette(): JSX.Element {
                     <span className="truncate text-sm font-medium text-ink-900">
                       {renderHighlightedText(match.title, query)}
                     </span>
-                    <span className="shrink-0 text-[10px] uppercase tracking-[0.18em] text-ink-400">
+                    <span className="shrink-0 text-2xs uppercase tracking-[0.18em] text-ink-400">
                       {match.folder}
                     </span>
-                    <span className="shrink-0 text-[11px] text-ink-500">L{match.lineNumber}</span>
+                    <span className="shrink-0 text-xs text-ink-500">L{match.lineNumber}</span>
                   </div>
-                  <div className="truncate text-[11px] text-ink-500">
+                  <div className="truncate text-xs text-ink-500">
                     {renderHighlightedText(match.path, query)}
                   </div>
                   <div className="truncate text-sm text-ink-700">
                     {renderHighlightedText(match.lineText, query)}
                   </div>
                 </div>
-                <span className="shrink-0 rounded-full bg-paper-200 px-2 py-1 text-[11px] text-ink-600">
+                <span className="shrink-0 rounded-full bg-paper-200 px-2 py-1 text-xs text-ink-600">
                   Open
                 </span>
               </button>
             ))
           )}
         </div>
-        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-[11px] text-ink-500">
+        <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
           <span>
             <kbd className="rounded bg-paper-200 px-1">↑↓</kbd>{' '}
             <kbd className="rounded bg-paper-200 px-1">Ctrl+N/P</kbd> move
@@ -481,7 +475,6 @@ export function VaultTextSearchPalette(): JSX.Element {
             <kbd className="rounded bg-paper-200 px-1">esc</kbd> close
           </span>
         </div>
-      </div>
-    </div>
+    </Modal>
   )
 }
diff --git a/packages/app-core/src/components/WhichKeyOverlay.tsx b/packages/app-core/src/components/WhichKeyOverlay.tsx
index 3d81fcfb..97c2baed 100644
--- a/packages/app-core/src/components/WhichKeyOverlay.tsx
+++ b/packages/app-core/src/components/WhichKeyOverlay.tsx
@@ -26,12 +26,12 @@ export function WhichKeyOverlay({
       <div className="w-[min(640px,calc(100vw-2rem))] overflow-hidden rounded-xl border border-paper-300/70 bg-paper-100 shadow-float backdrop-blur-md">
         <div className="flex items-center justify-between gap-3 border-b border-paper-300/60 px-3.5 py-2.5">
           <div className="flex min-w-0 items-center gap-2.5">
-            <span className="rounded-md border border-accent/35 bg-paper-200 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-accent">
+            <span className="rounded-md border border-accent/35 bg-paper-200 px-2 py-1 text-2xs font-semibold uppercase tracking-[0.18em] text-accent">
               {prefix}
             </span>
             <div className="min-w-0">
               <div className="text-sm font-semibold text-ink-900">{title}</div>
-              <div className="text-[11px] text-ink-500">{detail}</div>
+              <div className="text-xs text-ink-500">{detail}</div>
             </div>
           </div>
         </div>
@@ -54,14 +54,14 @@ export function WhichKeyOverlay({
                   .map((token, tokenIndex) => (
                     <span
                       key={`${prefix}-${item.keyLabel}-${tokenIndex}`}
-                      className="rounded-md border border-paper-300 bg-paper-200/85 px-2 py-0.5 text-center text-[10px] font-semibold uppercase tracking-wide text-ink-700"
+                      className="rounded-md border border-paper-300 bg-paper-200/85 px-2 py-0.5 text-center text-2xs font-semibold uppercase tracking-wide text-ink-700"
                     >
                       {token}
                     </span>
                   ))}
               </div>
               <div className="min-w-0">
-                <div className="text-[15px] font-medium leading-5 text-ink-900">{item.label}</div>
+                <div className="text-base font-medium leading-5 text-ink-900">{item.label}</div>
                 <div className="mt-0.5 text-xs leading-[1.35rem] text-ink-500">{item.detail}</div>
               </div>
             </div>
diff --git a/packages/app-core/src/components/ui/Button.tsx b/packages/app-core/src/components/ui/Button.tsx
new file mode 100644
index 00000000..ff976939
--- /dev/null
+++ b/packages/app-core/src/components/ui/Button.tsx
@@ -0,0 +1,94 @@
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
+
+/**
+ * Shared button primitive. One source of truth for every clickable action
+ * in the app — variants encode hierarchy (primary is the single emphasized
+ * action; secondary/ghost recede), sizes encode density. Colors resolve to
+ * theme tokens, so all 29 themes are honored automatically.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
+export type ButtonSize = 'sm' | 'md'
+
+const BASE =
+  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 ' +
+  'disabled:cursor-not-allowed disabled:opacity-50'
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: 'bg-ink-900 text-paper-50 hover:bg-ink-800',
+  secondary: 'border border-paper-300 bg-paper-100 text-ink-800 hover:bg-paper-200',
+  ghost: 'text-ink-600 hover:bg-paper-200 hover:text-ink-900',
+  danger: 'bg-danger text-white hover:bg-danger/90'
+}
+
+const SIZES: Record<ButtonSize, string> = {
+  sm: 'rounded-md px-3 py-1.5 text-sm',
+  md: 'rounded-lg px-4 py-2 text-sm'
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant = 'secondary', size = 'sm', className = '', type = 'button', children, ...rest },
+  ref
+): JSX.Element {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={[BASE, VARIANTS[variant], SIZES[size], className].filter(Boolean).join(' ')}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+})
+
+/**
+ * Square icon-only button. Standardizes the icon hit-area (previously a mix
+ * of h-5/h-6/h-[34px] across the app). The glyph inside controls its own size.
+ */
+export type IconButtonSize = 'sm' | 'md'
+
+const ICON_SIZES: Record<IconButtonSize, string> = {
+  sm: 'h-7 w-7',
+  md: 'h-8 w-8'
+}
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'ghost' | 'secondary'
+  size?: IconButtonSize
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { variant = 'ghost', size = 'md', className = '', type = 'button', children, ...rest },
+  ref
+): JSX.Element {
+  const look =
+    variant === 'secondary'
+      ? 'border border-paper-300 bg-paper-100 text-ink-700 hover:bg-paper-200 hover:text-ink-900'
+      : 'text-ink-500 hover:bg-paper-200 hover:text-ink-900'
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={[
+        'inline-flex shrink-0 items-center justify-center rounded-md transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        ICON_SIZES[size],
+        look,
+        className
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+})
diff --git a/packages/app-core/src/components/ui/Modal.tsx b/packages/app-core/src/components/ui/Modal.tsx
new file mode 100644
index 00000000..e97597aa
--- /dev/null
+++ b/packages/app-core/src/components/ui/Modal.tsx
@@ -0,0 +1,164 @@
+import { useEffect } from 'react'
+import type { ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+/**
+ * Shared modal/overlay shell. Consolidates the backdrop, panel, portal, and
+ * Escape handling that every dialog and palette previously hand-rolled with
+ * slightly different padding, radius, footer background, and (worst of all)
+ * undocumented z-indexes. Content composes the optional Header/Body/Footer
+ * subcomponents, or — for input-first palettes — renders custom children
+ * inside the shared shell.
+ */
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+export type ModalLayer = 'palette' | 'modal' | 'nested' | 'popover'
+
+// vw caps keep the panel on-screen on small windows; the px ceiling comes
+// from the `dialog-*` maxWidth tokens in tailwind.config.js.
+const SIZE_CLASS: Record<ModalSize, string> = {
+  xs: 'w-[92vw] max-w-dialog-xs',
+  sm: 'w-[92vw] max-w-dialog-sm',
+  md: 'w-[92vw] max-w-dialog-md',
+  lg: 'w-[94vw] max-w-dialog-lg',
+  xl: 'w-[94vw] max-w-dialog-xl',
+  '2xl': 'w-[96vw] max-w-dialog-2xl',
+  '3xl': 'w-[96vw] max-w-dialog-3xl'
+}
+
+const LAYER_CLASS: Record<ModalLayer, string> = {
+  palette: 'z-palette',
+  modal: 'z-modal',
+  nested: 'z-nested',
+  popover: 'z-popover'
+}
+
+export interface ModalProps {
+  /** Width step; maps to the `dialog-*` maxWidth tokens. */
+  size?: ModalSize
+  /** Stacking layer; maps to the documented z-index scale. */
+  layer?: ModalLayer
+  /** 'top' anchors near the top (dropdown feel); 'center' for tall dialogs. */
+  align?: 'top' | 'center'
+  onClose: () => void
+  /** Close when the backdrop is clicked. Default true. */
+  closeOnBackdrop?: boolean
+  /**
+   * Close on Escape via a global capture listener. Default true. Set false
+   * for content that owns nuanced Escape behavior (e.g. palettes that first
+   * dismiss their suggestion list).
+   */
+  closeOnEsc?: boolean
+  /** Extra classes on the panel (e.g. fixed height + inner flex for Settings). */
+  className?: string
+  /** id of the element labelling the dialog, for aria-labelledby. */
+  labelledBy?: string
+  /** data-* hooks set on the backdrop, preserved for existing selectors. */
+  data?: Record<string, string>
+  children: ReactNode
+}
+
+function ModalRoot({
+  size = 'md',
+  layer = 'modal',
+  align = 'top',
+  onClose,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  className = '',
+  labelledBy,
+  data,
+  children
+}: ModalProps): JSX.Element {
+  useEffect(() => {
+    if (!closeOnEsc) return
+    const handler = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', handler, true)
+    return () => window.removeEventListener('keydown', handler, true)
+  }, [closeOnEsc, onClose])
+
+  const backdropAlign = align === 'center' ? 'items-center' : 'items-start pt-[14vh]'
+
+  return createPortal(
+    <div
+      {...data}
+      className={`fixed inset-0 ${LAYER_CLASS[layer]} flex justify-center ${backdropAlign} bg-black/45 backdrop-blur-sm`}
+      onClick={closeOnBackdrop ? onClose : undefined}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        className={`overflow-hidden rounded-2xl bg-paper-100 shadow-float ring-1 ring-paper-300 ${SIZE_CLASS[size]} ${className}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+function ModalHeader({
+  title,
+  description,
+  titleId,
+  children
+}: {
+  title?: ReactNode
+  description?: ReactNode
+  titleId?: string
+  children?: ReactNode
+}): JSX.Element {
+  return (
+    <div className="px-5 pt-5">
+      {title !== undefined && (
+        <div id={titleId} className="text-sm font-semibold text-ink-900">
+          {title}
+        </div>
+      )}
+      {description !== undefined && description !== null && (
+        <div className="mt-2 whitespace-pre-wrap text-sm leading-6 text-ink-500">{description}</div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+function ModalBody({
+  className = '',
+  children
+}: {
+  className?: string
+  children: ReactNode
+}): JSX.Element {
+  return <div className={`px-5 py-4 ${className}`.trim()}>{children}</div>
+}
+
+function ModalFooter({
+  className = '',
+  children
+}: {
+  className?: string
+  children: ReactNode
+}): JSX.Element {
+  return (
+    <div
+      className={`mt-4 flex justify-end gap-2 border-t border-paper-300/50 bg-paper-50 px-5 py-3 ${className}`.trim()}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const Modal = Object.assign(ModalRoot, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter
+})
diff --git a/packages/app-core/src/components/ui/index.ts b/packages/app-core/src/components/ui/index.ts
new file mode 100644
index 00000000..3c854484
--- /dev/null
+++ b/packages/app-core/src/components/ui/index.ts
@@ -0,0 +1,4 @@
+export { Button, IconButton } from './Button'
+export type { ButtonProps, ButtonVariant, ButtonSize, IconButtonProps, IconButtonSize } from './Button'
+export { Modal } from './Modal'
+export type { ModalProps, ModalSize, ModalLayer } from './Modal'
diff --git a/packages/app-core/src/styles/index.css b/packages/app-core/src/styles/index.css
index fc355dd9..54e9a382 100644
--- a/packages/app-core/src/styles/index.css
+++ b/packages/app-core/src/styles/index.css
@@ -6,6 +6,23 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ===========================================================================
+ * Shared component utilities
+ * --------------------------------------------------------------------------
+ * Single source of truth for small, repeated UI treatments. Form/eyebrow
+ * labels previously shipped in three slightly different variants; these two
+ * classes unify them (de-emphasized, uppercase, ink-500 — not ink-400).
+ * =======================================================================*/
+@layer components {
+  .form-label {
+    @apply text-2xs font-medium uppercase tracking-wide text-ink-500;
+  }
+
+  .form-hint {
+    @apply text-xs text-ink-400;
+  }
+}
+
 .task-kanban-column.is-drop-target {
   border-color: rgb(var(--z-accent) / 0.62);
   box-shadow: 0 0 0 1px rgb(var(--z-accent) / 0.28);
diff --git a/packaging/aur/.SRCINFO b/packaging/aur/.SRCINFO
index 74464d19..81555e02 100644
--- a/packaging/aur/.SRCINFO
+++ b/packaging/aur/.SRCINFO
@@ -1,7 +1,7 @@
 pkgbase = zennotes-bin
 	pkgdesc = Keyboard-first, local-first Markdown notes with vim motions and live preview
 	pkgver = 2.1.0
-	pkgrel = 1
+	pkgrel = 2
 	url = https://github.com/ZenNotes/zennotes
 	arch = x86_64
 	license = MIT
diff --git a/packaging/aur/PKGBUILD b/packaging/aur/PKGBUILD
index 38909809..38e69ae1 100644
--- a/packaging/aur/PKGBUILD
+++ b/packaging/aur/PKGBUILD
@@ -17,7 +17,7 @@
 pkgname=zennotes-bin
 _appname=ZenNotes
 pkgver=2.1.0
-pkgrel=1
+pkgrel=2
 pkgdesc="Keyboard-first, local-first Markdown notes with vim motions and live preview"
 arch=('x86_64')
 url="https://github.com/ZenNotes/zennotes"
@@ -42,7 +42,17 @@ package() {
   install -dm755 "${pkgdir}/opt/${pkgname}"
   cp -a squashfs-root/. "${pkgdir}/opt/${pkgname}/"
 
-  # The Chromium sandbox helper must be setuid-root to work without --no-sandbox.
+  # `cp -a` re-applies the extracted squashfs root's mode (often 0700) onto
+  # /opt/zennotes-bin, leaving the tree untraversable for non-root users — so
+  # launching the desktop entry or `zennotes` fails with "command not found"
+  # or "not executable" (issues #70, #74). Force every directory and
+  # already-executable file world-traversable and everything world-readable.
+  # (chmod -R skips symlinks during recursion, so AppRun's real target is
+  # fixed via the regular file it points to.)
+  chmod -R a+rX "${pkgdir}/opt/${pkgname}"
+
+  # The Chromium sandbox helper must be setuid-root to work without
+  # --no-sandbox. Keep this AFTER the chmod -R above so the setuid bit stands.
   if [ -f "${pkgdir}/opt/${pkgname}/chrome-sandbox" ]; then
     chmod 4755 "${pkgdir}/opt/${pkgname}/chrome-sandbox"
   fi
diff --git a/tailwind.config.js b/tailwind.config.js
index b0e8e6a1..460d34a0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,7 +32,13 @@ export default {
           DEFAULT: 'rgb(var(--z-accent) / <alpha-value>)',
           soft: 'rgb(var(--z-accent-soft) / <alpha-value>)',
           muted: 'rgb(var(--z-accent-muted) / <alpha-value>)'
-        }
+        },
+        // Themed semantic colors — follow the active theme via the same
+        // CSS custom properties, so danger/success/warning are no longer
+        // hardcoded to Tailwind's static red/green/yellow.
+        danger: 'rgb(var(--z-red) / <alpha-value>)',
+        success: 'rgb(var(--z-green) / <alpha-value>)',
+        warning: 'rgb(var(--z-yellow) / <alpha-value>)'
       },
       fontFamily: {
         sans: [
@@ -60,6 +66,31 @@ export default {
         panel:
           '0 1px 0 0 rgb(var(--z-shadow) / 0.04), 0 8px 28px -12px rgb(var(--z-shadow) / 0.18)',
         float: '0 20px 60px -20px rgb(var(--z-shadow) / 0.28)'
+      },
+      // Type scale. Tailwind's built-in steps (xs=12, sm=14, base=16, lg=18,
+      // xl=20, 2xl=24, 3xl=30) are kept; we add an 11px floor for genuinely
+      // secondary micro-text (uppercase labels, key hints, dense grids).
+      fontSize: {
+        '2xs': ['0.6875rem', { lineHeight: '1rem' }]
+      },
+      // Documented elevation scale — replaces ad-hoc z-[50/70/72/74].
+      zIndex: {
+        dropdown: '40',
+        palette: '50',
+        modal: '70',
+        nested: '75',
+        popover: '80',
+        toast: '90'
+      },
+      // Dialog width scale — Modal maps its `size` prop onto these.
+      maxWidth: {
+        'dialog-xs': '420px',
+        'dialog-sm': '440px',
+        'dialog-md': '560px',
+        'dialog-lg': '720px',
+        'dialog-xl': '900px',
+        'dialog-2xl': '1120px',
+        'dialog-3xl': '1360px'
       }
     }
   },