diff --git a/desktop/src/components/auth/AuthPanel.tsx b/desktop/src/components/auth/AuthPanel.tsx
index c5a5bf9d..45efabc2 100644
--- a/desktop/src/components/auth/AuthPanel.tsx
+++ b/desktop/src/components/auth/AuthPanel.tsx
@@ -35,6 +35,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { StatusDot } from "@/components/ui/status-dot";
 import {
   Select,
   SelectContent,
@@ -78,7 +79,7 @@ const KNOWN_PROVIDER_ORDER = [
 const SUBAGENT_MODEL_FOLLOW_COMPOSER = "__subagent_follow_composer__";
 type KnownProviderId = (typeof KNOWN_PROVIDER_ORDER)[number];
 const AUTH_PANEL_SELECT_TRIGGER_CLASS_NAME =
-  "auth-settings-control theme-control-surface relative isolate h-9 w-full overflow-hidden rounded-[10px] border border-border bg-muted px-2.5 text-sm text-foreground shadow-none transition-colors hover:border-border focus-visible:border-border focus-visible:ring-0 focus-visible:ring-transparent aria-invalid:border-border aria-invalid:ring-0";
+  "auth-settings-control theme-control-surface relative isolate h-9 w-full overflow-hidden rounded-lg border border-border bg-muted px-2.5 text-sm text-foreground shadow-none transition-colors hover:border-border focus-visible:border-border focus-visible:ring-0 focus-visible:ring-transparent aria-invalid:border-border aria-invalid:ring-0";
 const LEGACY_DIRECT_PROVIDER_MODEL_ALIASES: Record<
   string,
   Record<string, string>
@@ -2044,7 +2045,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
   ];
 
   const setupLoadingPanel = (
-    <div className="theme-subtle-surface flex flex-col items-center gap-3 rounded-[20px] border border-border px-5 py-8 text-center">
+    <div className="theme-subtle-surface flex flex-col items-center gap-3 rounded-2xl border border-border px-5 py-8 text-center">
       <div className="flex size-11 items-center justify-center rounded-full border border-primary bg-primary/10 text-primary">
         <Loader2 size={18} className="animate-spin" />
       </div>
@@ -4227,8 +4228,14 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
                 variant="outline"
                 className="border-border bg-background/60 text-[11px] text-muted-foreground"
               >
-                <span
-                  className={`inline-block size-1.5 rounded-full ${runtimeBindingReady ? "bg-success" : isSignedIn ? "bg-warning" : "bg-muted-foreground"}`}
+                <StatusDot
+                  variant={
+                    runtimeBindingReady
+                      ? "success"
+                      : isSignedIn
+                        ? "warning"
+                        : "muted"
+                  }
                 />
                 <span>
                   {runtimeBindingReady
@@ -4298,14 +4305,14 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
 
   if (showsSetupLoadingState) {
     return (
-      <section className="theme-shell w-full max-w-none overflow-hidden rounded-[24px] border border-border text-sm text-foreground shadow-card">
+      <section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground shadow-card">
         <div className="px-4 py-5">{setupLoadingPanel}</div>
       </section>
     );
   }
 
   return (
-    <section className="theme-shell w-full max-w-none overflow-hidden rounded-[24px] border border-border text-sm text-foreground shadow-card">
+    <section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground shadow-card">
       {showAccountSection && (
         <>
           <div className="border-b border-panel-border/40 px-4 py-4">
@@ -4340,7 +4347,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
               {infoRows.map((row) => (
                 <div
                   key={row.label}
-                  className="theme-subtle-surface flex items-center justify-between gap-3 rounded-[16px] border border-panel-border/35 px-4 py-3"
+                  className="theme-subtle-surface flex items-center justify-between gap-3 rounded-2xl border border-panel-border/35 px-4 py-3"
                 >
                   <div className="text-sm text-foreground">{row.label}</div>
                   <div className="max-w-[58%] truncate text-right text-sm text-muted-foreground">
@@ -4381,7 +4388,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
 
             {(authMessage || authError) && (
               <div
-                className={`mt-3 rounded-[16px] border px-4 py-3 text-sm ${
+                className={`mt-3 rounded-2xl border px-4 py-3 text-sm ${
                   authError
                     ? "border-destructive/35 bg-destructive/8 text-destructive"
                     : "border-success/30 bg-success/10 text-success"
@@ -4399,7 +4406,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
           {runtimeProviderSettings}
           {(authMessage || authError) && (
             <div
-              className={`mt-3 rounded-[16px] border px-4 py-3 text-sm ${
+              className={`mt-3 rounded-2xl border px-4 py-3 text-sm ${
                 authError
                   ? "border-destructive/35 bg-destructive/8 text-destructive"
                   : "border-success/30 bg-success/10 text-success"
diff --git a/desktop/src/components/dashboard/BoardView.tsx b/desktop/src/components/dashboard/BoardView.tsx
index e5be8772..07b03182 100644
--- a/desktop/src/components/dashboard/BoardView.tsx
+++ b/desktop/src/components/dashboard/BoardView.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { BoardViewSpec, ColorToken } from "@/lib/dashboardSchema";
 
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { colorClasses, formatSmartDate, hashToColor, looksLikeDateColumn } from "./format";
 import { RowDetailDialog } from "./RowDetailDialog";
 import { isStatusColumn, StatusBadge } from "./StatusBadge";
@@ -135,7 +135,7 @@ export function BoardView({
     return (
       <div className="pt-2">
         <div className="mb-2">{picker}</div>
-        <EmptyState icon={Columns3} message={emptyState ?? "Nothing here yet."} />
+        <EmptyState icon={Columns3} title={emptyState ?? "Nothing here yet."} />
       </div>
     );
   }
diff --git a/desktop/src/components/dashboard/ChartPanel.tsx b/desktop/src/components/dashboard/ChartPanel.tsx
index 5932d5e3..a9ad07fd 100644
--- a/desktop/src/components/dashboard/ChartPanel.tsx
+++ b/desktop/src/components/dashboard/ChartPanel.tsx
@@ -32,7 +32,7 @@ import type {
 } from "@/lib/dashboardSchema";
 
 import type { DataViewState } from "./DataViewPanel";
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { ErrorMessage } from "./ErrorMessage";
 import { formatValue } from "./format";
 
@@ -84,7 +84,7 @@ function useSeriesPalette(): string[] {
 export function ChartPanel({ panel, state }: ChartPanelProps) {
   return (
     <section className="overflow-hidden rounded-xl bg-card shadow-md smooth-corners">
-      <header className="border-b border-border/70 bg-fg-2 px-4 py-3">
+      <header className="border-b border-border bg-fg-2 px-4 py-3">
         <h3 className="truncate text-sm font-semibold tracking-tight text-foreground">
           {panel.title}
         </h3>
@@ -102,7 +102,7 @@ export function ChartPanel({ panel, state }: ChartPanelProps) {
         ) : state.rows.length === 0 ? (
           <EmptyState
             icon={CHART_ICON[panel.chart.kind] ?? BarChart3}
-            message={panel.empty_state ?? "Nothing here yet."}
+            title={panel.empty_state ?? "Nothing here yet."}
             minHeight={260}
           />
         ) : (
diff --git a/desktop/src/components/dashboard/DashboardRenderer.tsx b/desktop/src/components/dashboard/DashboardRenderer.tsx
index d049ad79..a8fdd335 100644
--- a/desktop/src/components/dashboard/DashboardRenderer.tsx
+++ b/desktop/src/components/dashboard/DashboardRenderer.tsx
@@ -457,7 +457,7 @@ function PanelDispatch({
     return <ChartPanel panel={panel} state={state.state} />;
   }
   return (
-    <div className="rounded-md border border-dashed border-border/70 bg-muted/30 px-4 py-3 text-xs text-muted-foreground">
+    <div className="rounded-md border border-dashed border-border bg-muted/30 px-4 py-3 text-xs text-muted-foreground">
       Unsupported panel state.
     </div>
   );
diff --git a/desktop/src/components/dashboard/DataViewPanel.tsx b/desktop/src/components/dashboard/DataViewPanel.tsx
index 3a893eaf..37aebffa 100644
--- a/desktop/src/components/dashboard/DataViewPanel.tsx
+++ b/desktop/src/components/dashboard/DataViewPanel.tsx
@@ -61,7 +61,7 @@ export function DataViewPanel({
 
   return (
     <section className="group overflow-hidden rounded-xl bg-card shadow-md smooth-corners">
-      <header className="border-b border-border/70 bg-fg-2 px-4 py-3">
+      <header className="border-b border-border bg-fg-2 px-4 py-3">
         <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2">
             <h3 className="truncate text-sm font-semibold tracking-tight text-foreground">
@@ -155,7 +155,7 @@ function ViewBody({
   // gallery / calendar / timeline — declared in v2 spec, renderer ships
   // in PR2. Show a clean placeholder rather than crashing.
   return (
-    <div className="my-6 rounded-md border border-dashed border-border/70 bg-fg-2 px-4 py-6 text-center text-xs text-muted-foreground">
+    <div className="my-6 rounded-md border border-dashed border-border bg-fg-2 px-4 py-6 text-center text-xs text-muted-foreground">
       The <span className="font-medium text-foreground">{view.type}</span> view
       ships in the next dashboard release. Showing an alternate view above
       should keep this panel useful in the meantime.
diff --git a/desktop/src/components/dashboard/EmptyState.tsx b/desktop/src/components/dashboard/EmptyState.tsx
deleted file mode 100644
index 8cf06fc4..00000000
--- a/desktop/src/components/dashboard/EmptyState.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-
-interface EmptyStateProps {
-  icon: LucideIcon;
-  message: string;
-  /** Optional sub-line. Renders below the message in lighter weight. */
-  hint?: string;
-  /** Forces a min-height so chart panels don't collapse when empty.
-   *  When omitted, the empty state sits at its natural py-10 height. */
-  minHeight?: number;
-}
-
-export function EmptyState({ icon: Icon, message, hint, minHeight }: EmptyStateProps) {
-  return (
-    <div
-      className="flex flex-col items-center justify-center gap-2 py-10 text-muted-foreground"
-      style={minHeight ? { minHeight } : undefined}
-    >
-      <Icon size={22} strokeWidth={1.5} className="opacity-45" />
-      <p className="text-xs">{message}</p>
-      {hint ? <p className="text-[11px] opacity-70">{hint}</p> : null}
-    </div>
-  );
-}
diff --git a/desktop/src/components/dashboard/ListView.tsx b/desktop/src/components/dashboard/ListView.tsx
index 255e153e..cc4b3db7 100644
--- a/desktop/src/components/dashboard/ListView.tsx
+++ b/desktop/src/components/dashboard/ListView.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 
 import type { ListViewSpec } from "@/lib/dashboardSchema";
 
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { formatSmartDate, looksLikeDateColumn } from "./format";
 import { RowDetailDialog } from "./RowDetailDialog";
 
@@ -39,7 +39,7 @@ export function ListView({ view, columns, rows, emptyState }: ListViewProps) {
     );
   }
   if (rows.length === 0) {
-    return <EmptyState icon={Rows3} message={emptyState ?? "Nothing here yet."} />;
+    return <EmptyState icon={Rows3} title={emptyState ?? "Nothing here yet."} />;
   }
 
   const display = rows.slice(0, shownLimit);
diff --git a/desktop/src/components/dashboard/RowDetailDialog.tsx b/desktop/src/components/dashboard/RowDetailDialog.tsx
index d5e6a062..45613a75 100644
--- a/desktop/src/components/dashboard/RowDetailDialog.tsx
+++ b/desktop/src/components/dashboard/RowDetailDialog.tsx
@@ -48,7 +48,7 @@ export function RowDetailDialog({
             "outline-none",
           )}
         >
-          <header className="flex items-start gap-3 border-b border-border/70 px-5 py-4">
+          <header className="flex items-start gap-3 border-b border-border px-5 py-4">
             <div className="min-w-0 flex-1">
               <DialogPrimitive.Title className="truncate text-sm font-semibold text-foreground">
                 {title || "Details"}
@@ -124,7 +124,7 @@ function DetailValue({
       <img
         src={value}
         alt=""
-        className="size-16 rounded-md border border-border/60 object-cover"
+        className="size-16 rounded-md border border-border object-cover"
       />
     );
   }
diff --git a/desktop/src/components/dashboard/TableView.tsx b/desktop/src/components/dashboard/TableView.tsx
index 04cd5401..9f38810a 100644
--- a/desktop/src/components/dashboard/TableView.tsx
+++ b/desktop/src/components/dashboard/TableView.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { ColorToken, TableColumnSpec, TableViewSpec } from "@/lib/dashboardSchema";
 
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { RowDetailDialog } from "./RowDetailDialog";
 import { isStatusColumn, StatusBadge } from "./StatusBadge";
 import {
@@ -172,10 +172,10 @@ export function TableView({
   }, [updateEdgeFade, totalWidth]);
 
   if (visible.length === 0) {
-    return <EmptyState icon={Table2} message="No columns to display." />;
+    return <EmptyState icon={Table2} title="No columns to display." />;
   }
   if (rows.length === 0) {
-    return <EmptyState icon={Table2} message={emptyState ?? "Nothing here yet."} />;
+    return <EmptyState icon={Table2} title={emptyState ?? "Nothing here yet."} />;
   }
 
   return (
@@ -210,7 +210,7 @@ export function TableView({
                 return (
                   <th
                     key={c.name}
-                    className={`group/th relative border-b border-border/70 px-3 py-2.5 text-xs font-medium uppercase tracking-wide text-muted-foreground first:pl-1 last:pr-1 ${alignClass(c.align)}`}
+                    className={`group/th relative border-b border-border px-3 py-2.5 text-xs font-medium uppercase tracking-wide text-muted-foreground first:pl-1 last:pr-1 ${alignClass(c.align)}`}
                   >
                     <button
                       type="button"
@@ -265,7 +265,7 @@ export function TableView({
                   }
                   setSelectedRow(rowObj);
                 }}
-                className="cursor-pointer border-b border-border/40 transition-colors hover:bg-fg-4 last:border-b-0"
+                className="cursor-pointer border-b border-border transition-colors hover:bg-fg-4 last:border-b-0"
               >
                 {visible.map((c) => (
                   <Cell key={c.name} column={c} value={row[c.index]} row={rowObj} />
@@ -458,7 +458,7 @@ function Cell({
         <img
           src={value}
           alt=""
-          className="h-8 w-8 shrink-0 rounded-md border border-border/60 object-cover"
+          className="h-8 w-8 shrink-0 rounded-md border border-border object-cover"
         />
       </td>
     );
diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
index 2ed52c9d..9832141f 100644
--- a/desktop/src/components/layout/AppShell.tsx
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -1224,7 +1224,7 @@ function WorkspaceBootstrapPane({
         <div className="relative flex h-16 w-16 items-center justify-center">
           <div
             aria-hidden="true"
-            className="absolute inset-0 rounded-[22px] blur-2xl"
+            className="absolute inset-0 rounded-2xl blur-2xl"
             style={{
               background:
                 "radial-gradient(circle, color-mix(in srgb, var(--primary) 55%, transparent), transparent 70%)",
diff --git a/desktop/src/components/layout/NotificationToastStack.tsx b/desktop/src/components/layout/NotificationToastStack.tsx
index ad8690d5..b3b86a9d 100644
--- a/desktop/src/components/layout/NotificationToastStack.tsx
+++ b/desktop/src/components/layout/NotificationToastStack.tsx
@@ -140,7 +140,7 @@ export function NotificationToastStack({
               <div
                 key={notification.id}
                 className={cn(
-                  "overflow-hidden rounded-[24px] border border-border bg-popover/95 ring-1 ring-border backdrop-blur-xl animate-in fade-in-0 slide-in-from-top-2 transition-[margin,transform,opacity,max-height] duration-200 ease-out",
+                  "overflow-hidden rounded-3xl border border-border bg-popover/95 ring-1 ring-border backdrop-blur-xl animate-in fade-in-0 slide-in-from-top-2 transition-[margin,transform,opacity,max-height] duration-200 ease-out",
                   isCollapsedBackgroundToast
                     ? "pointer-events-none shadow-lg"
                     : "shadow-2xl",
diff --git a/desktop/src/components/layout/OperationsDrawer.tsx b/desktop/src/components/layout/OperationsDrawer.tsx
index 6d3fd80c..e7a4e014 100644
--- a/desktop/src/components/layout/OperationsDrawer.tsx
+++ b/desktop/src/components/layout/OperationsDrawer.tsx
@@ -15,6 +15,7 @@ import {
 import { useDesktopAuthSession } from "@/lib/auth/authClient";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { StatusDot } from "@/components/ui/status-dot";
 import { ProactiveLifecyclePanel } from "@/components/layout/ProactiveStatusCard";
 import {
   Tooltip,
@@ -633,7 +634,12 @@ function DrawerTabButton({
       <span className="relative">
         {icon}
         {showIndicator ? (
-          <span className="absolute -right-0.5 -top-0.5 size-2.5 rounded-full border-2 border-card bg-destructive" />
+          <StatusDot
+            variant="destructive"
+            size="lg"
+            withRing
+            className="absolute -right-0.5 -top-0.5"
+          />
         ) : null}
       </span>
       <span>{label}</span>
@@ -744,7 +750,7 @@ function InboxPanel({
 
         <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
           {proposalStatusMessage ? (
-            <div className="mb-3 rounded-[18px] border border-border bg-muted px-3 py-2 text-xs leading-relaxed text-muted-foreground">
+            <div className="mb-3 rounded-2xl border border-border bg-muted px-3 py-2 text-xs leading-relaxed text-muted-foreground">
               {proposalStatusMessage}
             </div>
           ) : null}
@@ -996,7 +1002,7 @@ function ProposalDetailsDialog({
         role="dialog"
         aria-modal="true"
         aria-label="Proposal details"
-        className="pointer-events-auto relative z-10 flex max-h-[min(760px,calc(100vh-36px))] w-[min(720px,calc(100vw-32px))] min-w-0 flex-col overflow-hidden rounded-[28px] border border-border bg-background shadow-2xl"
+        className="pointer-events-auto relative z-10 flex max-h-[min(760px,calc(100vh-36px))] w-[min(720px,calc(100vw-32px))] min-w-0 flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-2xl"
       >
         <header className="flex items-start justify-between gap-4 border-b border-border px-6 py-5">
           <div className="min-w-0">
@@ -1088,7 +1094,7 @@ function SignedOutInboxNotice({
   isAuthPending: boolean;
 }) {
   return (
-    <div className="rounded-[18px] border border-warning/20 bg-warning/10 px-3 py-2.5">
+    <div className="rounded-2xl border border-warning/20 bg-warning/10 px-3 py-2.5">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <div className="text-xs font-semibold text-foreground">
diff --git a/desktop/src/components/layout/RuntimeStatusIndicator.tsx b/desktop/src/components/layout/RuntimeStatusIndicator.tsx
index 3e546972..a3386b62 100644
--- a/desktop/src/components/layout/RuntimeStatusIndicator.tsx
+++ b/desktop/src/components/layout/RuntimeStatusIndicator.tsx
@@ -7,13 +7,16 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { StatusDot } from "@/components/ui/status-dot";
 
 interface RuntimeStatusIndicatorProps {
   status: RuntimeStatusPayload | null;
 }
 
 interface StatusVisual {
-  dotClass: string;
+  /** StatusDot variant + pulse — driven by runtime state. */
+  dotVariant: "success" | "destructive" | "warning" | "muted";
+  dotPulse: boolean;
   label: string;
   /** One-line plain-English description shown in the popover body. */
   description: string;
@@ -25,28 +28,32 @@ function runtimeStatusVisual(status: RuntimeStatus | undefined): StatusVisual {
   switch (status) {
     case "running":
       return {
-        dotClass: "bg-success",
+        dotVariant: "success",
+        dotPulse: false,
         label: "Runtime running",
         description: "Everything's running smoothly.",
         recoverable: false,
       };
     case "starting":
       return {
-        dotClass: "animate-pulse bg-warning",
+        dotVariant: "warning",
+        dotPulse: true,
         label: "Runtime starting",
         description: "Just a moment — the local runtime is coming online.",
         recoverable: false,
       };
     case "error":
       return {
-        dotClass: "bg-destructive",
+        dotVariant: "destructive",
+        dotPulse: false,
         label: "Runtime error",
         description: "Holaboss couldn't reach the local runtime.",
         recoverable: true,
       };
     case "missing":
       return {
-        dotClass: "bg-destructive",
+        dotVariant: "destructive",
+        dotPulse: false,
         label: "Runtime missing",
         description:
           "Some files Holaboss needs aren't in place. Try restarting; reinstall if it keeps failing.",
@@ -54,21 +61,24 @@ function runtimeStatusVisual(status: RuntimeStatus | undefined): StatusVisual {
       };
     case "stopped":
       return {
-        dotClass: "bg-muted-foreground",
+        dotVariant: "muted",
+        dotPulse: false,
         label: "Runtime stopped",
         description: "The local runtime isn't running right now.",
         recoverable: true,
       };
     case "disabled":
       return {
-        dotClass: "bg-muted-foreground",
+        dotVariant: "muted",
+        dotPulse: false,
         label: "Runtime disabled",
         description: "Local runtime is turned off in your settings.",
         recoverable: false,
       };
     default:
       return {
-        dotClass: "bg-muted-foreground",
+        dotVariant: "muted",
+        dotPulse: false,
         label: "Runtime unknown",
         description: "Runtime state isn't reporting yet.",
         recoverable: false,
@@ -119,15 +129,16 @@ export function RuntimeStatusIndicator({
         render={
           <Button
             aria-label={visual.label}
-            className="relative inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-border/55 bg-foreground/6 px-2 text-xs tracking-tight transition"
+            className="relative inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-border bg-fg-6 px-2 text-xs tracking-tight transition"
             size="icon-sm"
             type="button"
             variant="outline"
           >
             <Server className="size-3.5" strokeWidth={1.8} />
-            <span
-              aria-hidden="true"
-              className={`absolute -right-0.5 -top-0.5 size-1.5 rounded-full ring-2 ring-background ${visual.dotClass}`}
+            <StatusDot
+              variant={visual.dotVariant}
+              pulse={visual.dotPulse}
+              className="absolute -right-0.5 -top-0.5 ring-2 ring-background"
             />
           </Button>
         }
@@ -140,9 +151,10 @@ export function RuntimeStatusIndicator({
       >
         <div className="space-y-2 px-3.5 pt-3.5 pb-3">
           <div className="flex items-center gap-2">
-            <span
-              aria-hidden="true"
-              className={`size-2 shrink-0 rounded-full ${visual.dotClass}`}
+            <StatusDot
+              variant={visual.dotVariant}
+              pulse={visual.dotPulse}
+              size="md"
             />
             <span className="text-sm font-medium text-foreground">
               {visual.label}
@@ -174,7 +186,7 @@ export function RuntimeStatusIndicator({
 
         {detail || techRows.length > 0 ? (
           <details
-            className="group border-t border-border/40 px-3.5 py-2.5"
+            className="group border-t border-border px-3.5 py-2.5"
             open={detailsDefaultOpen}
           >
             <summary className="flex cursor-pointer list-none items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground [&::-webkit-details-marker]:hidden">
diff --git a/desktop/src/components/layout/SettingsDialog.tsx b/desktop/src/components/layout/SettingsDialog.tsx
index 0ffd7ee8..5895d055 100644
--- a/desktop/src/components/layout/SettingsDialog.tsx
+++ b/desktop/src/components/layout/SettingsDialog.tsx
@@ -694,7 +694,7 @@ export function SettingsDialog({
                             <span className="flex items-center gap-2">
                               <span
                                 aria-hidden="true"
-                                className="size-3 shrink-0 rounded-[4px] border border-border"
+                                className="size-3 shrink-0 rounded-sm border border-border"
                                 style={{ background: swatch }}
                               />
                               {THEME_VARIANT_LABELS[variant]}
diff --git a/desktop/src/components/layout/WorkbenchPanel.tsx b/desktop/src/components/layout/WorkbenchPanel.tsx
index 82d7953a..98f10f8c 100644
--- a/desktop/src/components/layout/WorkbenchPanel.tsx
+++ b/desktop/src/components/layout/WorkbenchPanel.tsx
@@ -12,7 +12,7 @@ export function WorkbenchPanel({ onClose, children }: WorkbenchPanelProps) {
   return (
     <section className="theme-shell soft-vignette neon-border relative flex h-[360px] min-h-0 min-w-0 flex-col overflow-hidden rounded-xl shadow-subtle-sm">
       <header className="theme-header-surface flex shrink-0 items-center justify-between gap-3 border-b border-primary px-4 py-3">
-        <div className="inline-flex h-10 items-center gap-2 rounded-[16px] border border-primary bg-primary/10 px-3 text-[12px] text-primary">
+        <div className="inline-flex h-10 items-center gap-2 rounded-2xl border border-primary bg-primary/10 px-3 text-[12px] text-primary">
           <Globe size={14} />
           <span>Browser</span>
         </div>
@@ -21,7 +21,7 @@ export function WorkbenchPanel({ onClose, children }: WorkbenchPanelProps) {
           type="button"
           aria-label="Close workbench"
           onClick={onClose}
-          className="grid h-9 w-9 place-items-center rounded-[9999px] border border-border text-muted-foreground transition hover:border-primary hover:text-primary"
+          className="grid h-9 w-9 place-items-center rounded-full border border-border text-muted-foreground transition hover:border-primary hover:text-primary"
         >
           <X size={15} />
         </button>
diff --git a/desktop/src/components/layout/WorkspaceAppsDialog.tsx b/desktop/src/components/layout/WorkspaceAppsDialog.tsx
index bcbadae0..e73f1881 100644
--- a/desktop/src/components/layout/WorkspaceAppsDialog.tsx
+++ b/desktop/src/components/layout/WorkspaceAppsDialog.tsx
@@ -48,7 +48,7 @@ export function WorkspaceAppsDialog({
         role="dialog"
         aria-modal="true"
         aria-label="Add apps"
-        className="pointer-events-auto relative z-10 flex h-[min(820px,calc(100vh-36px))] w-[min(1120px,calc(100vw-32px))] min-w-0 flex-col overflow-hidden rounded-[28px] border border-border bg-background shadow-subtle-sm"
+        className="pointer-events-auto relative z-10 flex h-[min(820px,calc(100vh-36px))] w-[min(1120px,calc(100vw-32px))] min-w-0 flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-subtle-sm"
       >
         <header className="flex items-center justify-between gap-4 border-b border-border px-6 py-5">
           <div className="inline-flex min-w-0 items-center gap-2 text-[17px] font-semibold text-foreground">
diff --git a/desktop/src/components/marketplace/AppCatalogCard.tsx b/desktop/src/components/marketplace/AppCatalogCard.tsx
index 3e46e582..bfc143da 100644
--- a/desktop/src/components/marketplace/AppCatalogCard.tsx
+++ b/desktop/src/components/marketplace/AppCatalogCard.tsx
@@ -138,7 +138,7 @@ export function AppCatalogCard({
             }}
           >
             <SelectTrigger
-              className="mr-auto h-7 min-w-[140px] gap-1.5 border-border/55 bg-transparent px-2 text-xs [&>svg]:size-3 [&>svg]:shrink-0"
+              className="mr-auto h-7 min-w-[140px] gap-1.5 border-border bg-transparent px-2 text-xs [&>svg]:size-3 [&>svg]:shrink-0"
               size="sm"
               aria-label="Choose account"
               title={activeLabel}
diff --git a/desktop/src/components/marketplace/AppIcon.tsx b/desktop/src/components/marketplace/AppIcon.tsx
index 157463fe..474e8520 100644
--- a/desktop/src/components/marketplace/AppIcon.tsx
+++ b/desktop/src/components/marketplace/AppIcon.tsx
@@ -61,13 +61,13 @@ export function AppIcon({
       ? "grid size-9 shrink-0 place-items-center overflow-hidden rounded-lg bg-muted/40"
       : size === "toolbar"
         ? "grid size-7 shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-muted"
-        : "grid size-4 shrink-0 place-items-center overflow-hidden rounded-[4px]";
+        : "grid size-4 shrink-0 place-items-center overflow-hidden rounded-sm";
   const letterClass =
     size === "card"
       ? "grid size-9 shrink-0 place-items-center rounded-lg bg-muted/40 text-sm font-semibold uppercase text-muted-foreground"
       : size === "toolbar"
         ? "grid size-7 shrink-0 place-items-center rounded-md border border-border bg-muted text-[10px] font-semibold uppercase text-muted-foreground"
-        : "grid size-4 shrink-0 place-items-center rounded-[4px] bg-muted text-[9px] font-semibold uppercase text-muted-foreground";
+        : "grid size-4 shrink-0 place-items-center rounded-sm bg-muted text-[9px] font-semibold uppercase text-muted-foreground";
   const imgClass =
     size === "card"
       ? "size-6 object-contain"
diff --git a/desktop/src/components/marketplace/AppsGallery.tsx b/desktop/src/components/marketplace/AppsGallery.tsx
index c5523530..d0234274 100644
--- a/desktop/src/components/marketplace/AppsGallery.tsx
+++ b/desktop/src/components/marketplace/AppsGallery.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { ExternalLink, FileUp, LoaderCircle, Search } from "lucide-react";
+import { AppWindow, ExternalLink, FileUp, LoaderCircle, Search } from "lucide-react";
 import {
   getProviderForCatalogEntry,
   resolveAppDisplay,
@@ -12,6 +12,7 @@ import {
   CardFooter,
   CardHeader,
 } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -312,7 +313,7 @@ export function AppsGallery() {
             role="dialog"
             aria-modal="true"
             aria-label="Connect account"
-            className="relative z-10 w-[min(440px,calc(100vw-32px))] rounded-2xl border border-border/55 bg-background p-5 shadow-2xl"
+            className="relative z-10 w-[min(440px,calc(100vw-32px))] rounded-2xl border border-border bg-background p-5 shadow-2xl"
           >
             <p className="text-base font-semibold text-foreground">
               Connect{" "}
@@ -365,25 +366,33 @@ export function AppsGallery() {
           ))}
         </div>
       ) : appCatalog.length === 0 ? (
-        <div className="mt-8 text-center text-xs text-muted-foreground">
-          No apps available.
-        </div>
+        <EmptyState
+          icon={AppWindow}
+          size="md"
+          title="No apps available."
+          className="mt-8"
+        />
       ) : filteredCatalog.length === 0 ? (
-        <div className="mt-8 flex flex-col items-center gap-2 text-center text-xs text-muted-foreground">
-          <span>No apps match the current filter.</span>
-          {(query.trim() || categoryFilter !== "all") && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                setQuery("");
-                setCategoryFilter("all");
-              }}
-            >
-              Clear filter
-            </Button>
-          )}
-        </div>
+        <EmptyState
+          icon={Search}
+          size="md"
+          title="No apps match the current filter."
+          className="mt-8"
+          action={
+            (query.trim() || categoryFilter !== "all") && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setQuery("");
+                  setCategoryFilter("all");
+                }}
+              >
+                Clear filter
+              </Button>
+            )
+          }
+        />
       ) : (
         <div className="mt-4 grid grid-cols-1 gap-2 pb-6 md:grid-cols-2 xl:grid-cols-3">
           {filteredCatalog.map((entry) => {
diff --git a/desktop/src/components/marketplace/MarketplaceGallery.tsx b/desktop/src/components/marketplace/MarketplaceGallery.tsx
index ddc3529f..4a7f72d6 100644
--- a/desktop/src/components/marketplace/MarketplaceGallery.tsx
+++ b/desktop/src/components/marketplace/MarketplaceGallery.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
-import { Search } from "lucide-react";
+import { LayoutGrid, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
 import { KitCard } from "./KitCard";
 import { FALLBACK_TEMPLATES } from "./fallbackTemplates";
 
@@ -111,11 +112,16 @@ export function MarketplaceGallery({
             ) : null}
           </div>
         ) : visibleTemplates.length === 0 ? (
-          <div className="mt-8 text-center text-xs text-muted-foreground">
-            {query.trim()
-              ? "No templates match your search."
-              : "No templates available yet."}
-          </div>
+          <EmptyState
+            icon={query.trim() ? Search : LayoutGrid}
+            size="md"
+            title={
+              query.trim()
+                ? "No templates match your search."
+                : "No templates available yet."
+            }
+            className="mt-8"
+          />
         ) : (
           <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
             {visibleTemplates.map((t: TemplateMetadataPayload) => (
diff --git a/desktop/src/components/onboarding/ConnectIntegrationsStep.tsx b/desktop/src/components/onboarding/ConnectIntegrationsStep.tsx
index 92b00e66..27a052b6 100644
--- a/desktop/src/components/onboarding/ConnectIntegrationsStep.tsx
+++ b/desktop/src/components/onboarding/ConnectIntegrationsStep.tsx
@@ -1,6 +1,7 @@
 import { Loader2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { StatusDot } from "@/components/ui/status-dot";
 import { providerDisplayName, providerIcon } from "./constants";
 import { WorkspaceWizardLayout } from "./WorkspaceWizardLayout";
 
@@ -107,7 +108,7 @@ function ProviderRow({
       {connected ? (
         <div className="flex shrink-0 items-center gap-2">
           <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-            <span className="size-1.5 rounded-full bg-success" />
+            <StatusDot variant="success" />
             Connected
           </span>
           <Button
diff --git a/desktop/src/components/onboarding/CreatingView.tsx b/desktop/src/components/onboarding/CreatingView.tsx
index 9ed9562e..cc1575ab 100644
--- a/desktop/src/components/onboarding/CreatingView.tsx
+++ b/desktop/src/components/onboarding/CreatingView.tsx
@@ -1,5 +1,6 @@
 import { Check, Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { StatusDot } from "@/components/ui/status-dot";
 import { cn } from "@/lib/utils";
 
 interface CreatingViewProps {
@@ -148,7 +149,7 @@ export function CreatingView({
                     ) : isActive ? (
                       <Loader2 className="size-3.5 animate-spin" />
                     ) : (
-                      <span className="size-1.5 rounded-full bg-fg-24" />
+                      <StatusDot variant="neutral" />
                     )}
                   </div>
                   <div className="min-w-0 flex-1">
diff --git a/desktop/src/components/onboarding/IntegrationsList.tsx b/desktop/src/components/onboarding/IntegrationsList.tsx
index cbc630c2..33670e2d 100644
--- a/desktop/src/components/onboarding/IntegrationsList.tsx
+++ b/desktop/src/components/onboarding/IntegrationsList.tsx
@@ -1,6 +1,7 @@
 import { Loader2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { StatusDot } from "@/components/ui/status-dot";
 import { providerDisplayName, providerIcon } from "./constants";
 
 interface IntegrationsListProps {
@@ -105,7 +106,7 @@ function IntegrationRow({
       {connected ? (
         <div className="flex shrink-0 items-center gap-2">
           <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-            <span className="size-1.5 rounded-full bg-success" />
+            <StatusDot variant="success" />
             Connected
           </span>
           <Button
diff --git a/desktop/src/components/panes/AppSurfacePane.tsx b/desktop/src/components/panes/AppSurfacePane.tsx
index 08e941f9..eb477b75 100644
--- a/desktop/src/components/panes/AppSurfacePane.tsx
+++ b/desktop/src/components/panes/AppSurfacePane.tsx
@@ -16,6 +16,7 @@ import {
   Trash2,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { StatusDot } from "@/components/ui/status-dot";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -405,7 +406,7 @@ export function AppSurfacePane({
                 className="inline-flex shrink-0 items-center gap-1.5 text-xs font-medium text-success"
                 title="Running"
               >
-                <span className="size-1.5 rounded-full bg-success" />
+                <StatusDot variant="success" />
                 {!isNarrowPane ? "Running" : null}
               </span>
             ) : surfaceState === "initializing" ? (
@@ -421,7 +422,7 @@ export function AppSurfacePane({
                 className="inline-flex shrink-0 items-center gap-1.5 text-xs font-medium text-destructive"
                 title="Error"
               >
-                <span className="size-1.5 rounded-full bg-destructive" />
+                <StatusDot variant="destructive" />
                 {!isNarrowPane ? "Error" : null}
               </span>
             )}
diff --git a/desktop/src/components/panes/AutomationsPane.tsx b/desktop/src/components/panes/AutomationsPane.tsx
index 311782e6..3a49cf27 100644
--- a/desktop/src/components/panes/AutomationsPane.tsx
+++ b/desktop/src/components/panes/AutomationsPane.tsx
@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -418,7 +419,8 @@ export function AutomationsPane({
       <div className="min-h-0 flex-1 overflow-y-auto">
         {!activeWorkspaceId ? (
           <EmptyState
-            icon={<Clock3 className="size-5 text-muted-foreground" />}
+            icon={Clock3}
+            size="md"
             title="No workspace selected"
             description={emptyWorkspaceMessage}
           />
@@ -530,7 +532,8 @@ export function AutomationsPane({
           )
         ) : completedRuns.length === 0 ? (
           <EmptyState
-            icon={<Clock3 className="size-5 text-muted-foreground" />}
+            icon={Clock3}
+            size="md"
             title="No runs yet"
             description="Once a scheduled task fires, its history will show up here."
           />
@@ -590,55 +593,34 @@ export function AutomationsPane({
   );
 }
 
-function EmptyState({
-  icon,
-  title,
-  description,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-}) {
-  return (
-    <div className="flex h-full flex-col items-center justify-center px-6 py-10 text-center">
-      <div className="grid size-10 place-items-center rounded-xl bg-muted">
-        {icon}
-      </div>
-      <div className="mt-3 text-sm font-medium text-foreground">{title}</div>
-      <p className="mt-1 max-w-xs text-xs leading-5 text-muted-foreground">
-        {description}
-      </p>
-    </div>
-  );
-}
-
 function EmptyScheduled({ onCreate }: { onCreate: () => void }) {
   return (
-    <div className="flex h-full flex-col items-center justify-center px-6 py-10 text-center">
-      <div className="grid size-10 place-items-center rounded-xl bg-muted text-muted-foreground">
-        <Clock3 className="size-5" />
-      </div>
-      <div className="mt-3 text-sm font-medium text-foreground">
-        No schedules yet
-      </div>
-      <p className="mt-1 max-w-[260px] text-xs leading-5 text-muted-foreground">
-        Ask the agent to set one up — try{" "}
-        <span className="text-foreground/80">
-          &ldquo;post a LinkedIn update every Monday at 9am&rdquo;
-        </span>
-        .
-      </p>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={onCreate}
-        className="mt-4 gap-1.5"
-      >
-        <Sparkles className="size-3.5" />
-        Ask the agent
-      </Button>
-    </div>
+    <EmptyState
+      icon={Clock3}
+      size="md"
+      title="No schedules yet"
+      description={
+        <>
+          Ask the agent to set one up — try{" "}
+          <span className="text-foreground/80">
+            &ldquo;post a LinkedIn update every Monday at 9am&rdquo;
+          </span>
+          .
+        </>
+      }
+      action={
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onCreate}
+          className="gap-1.5"
+        >
+          <Sparkles className="size-3.5" />
+          Ask the agent
+        </Button>
+      }
+    />
   );
 }
 
diff --git a/desktop/src/components/panes/BackgroundTasksPane.tsx b/desktop/src/components/panes/BackgroundTasksPane.tsx
index cc60801b..69acb308 100644
--- a/desktop/src/components/panes/BackgroundTasksPane.tsx
+++ b/desktop/src/components/panes/BackgroundTasksPane.tsx
@@ -430,8 +430,8 @@ export function BackgroundTasksPane({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="shrink-0 border-b border-border/60 px-4 py-3 sm:px-5">
-        <div className="rounded-xl border border-border/60 bg-muted/35 px-3 py-2 text-xs text-muted-foreground">
+      <div className="shrink-0 border-b border-border px-4 py-3 sm:px-5">
+        <div className="rounded-xl border border-border bg-muted/35 px-3 py-2 text-xs text-muted-foreground">
           Read-only view for workspace background work. Use the main session to
           cancel, retry, or answer blockers.
         </div>
@@ -445,7 +445,7 @@ export function BackgroundTasksPane({
 
       <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">
         {tasks.length === 0 ? (
-          <div className="flex h-full items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/20 px-6 text-center text-sm text-muted-foreground">
+          <div className="flex h-full items-center justify-center rounded-2xl border border-dashed border-border bg-muted/20 px-6 text-center text-sm text-muted-foreground">
             No background tasks yet.
           </div>
         ) : (
@@ -473,7 +473,7 @@ export function BackgroundTasksPane({
               return (
                 <div
                   key={task.subagent_id}
-                  className="flex items-center gap-2 rounded-2xl border border-border/70 bg-card/95 px-4 py-3 shadow-subtle-xs"
+                  className="flex items-center gap-2 rounded-2xl border border-border bg-card/95 px-4 py-3 shadow-subtle-xs"
                 >
                   {canOpenTaskSession ? (
                     <button
diff --git a/desktop/src/components/panes/BrowserPane.tsx b/desktop/src/components/panes/BrowserPane.tsx
index 25572cb2..71fd12ec 100644
--- a/desktop/src/components/panes/BrowserPane.tsx
+++ b/desktop/src/components/panes/BrowserPane.tsx
@@ -1072,7 +1072,7 @@ export function BrowserPane({
 
             {!activeTab.initialized ? (
               <div className="absolute inset-0 grid place-items-center bg-card p-6 text-center">
-                <div className="pointer-events-none w-full max-w-[320px] rounded-[24px] border border-border bg-card px-5 py-5 shadow-subtle-sm backdrop-blur">
+                <div className="pointer-events-none w-full max-w-[320px] rounded-3xl border border-border bg-card px-5 py-5 shadow-subtle-sm backdrop-blur">
                   <div className="mt-4 text-base font-medium text-foreground">
                     Starting{" "}
                     {visibleBrowserSpace === "agent" ? "agent" : "user"} browser
diff --git a/desktop/src/components/panes/BrowserProfileImportButton.tsx b/desktop/src/components/panes/BrowserProfileImportButton.tsx
index cae8f8bc..cb31771b 100644
--- a/desktop/src/components/panes/BrowserProfileImportButton.tsx
+++ b/desktop/src/components/panes/BrowserProfileImportButton.tsx
@@ -373,7 +373,7 @@ export function BrowserProfileImportButton({
       <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
         <DialogPrimitive.Portal>
           <DialogPrimitive.Backdrop className="fixed inset-0 z-[120] bg-scrim backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 duration-200" />
-          <DialogPrimitive.Popup className="fixed top-1/2 left-1/2 z-[121] flex max-h-[min(780px,calc(100vh-32px))] w-[min(720px,calc(100vw-32px))] min-w-0 -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[28px] border border-border bg-background shadow-subtle-sm outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-[0.97] data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-[0.98] duration-200 ease-out">
+          <DialogPrimitive.Popup className="fixed top-1/2 left-1/2 z-[121] flex max-h-[min(780px,calc(100vh-32px))] w-[min(720px,calc(100vw-32px))] min-w-0 -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-subtle-sm outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-[0.97] data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-[0.98] duration-200 ease-out">
             <header className="flex items-start justify-between gap-4 border-b border-border px-6 py-5">
               <div className="min-w-0">
                 <DialogPrimitive.Title className="text-[20px] font-semibold text-foreground">
@@ -615,7 +615,7 @@ export function BrowserProfileImportButton({
                       ? "border-destructive/25 bg-destructive/5 text-destructive"
                       : statusTone === "success"
                         ? "border-emerald-500/20 bg-emerald-500/8 text-emerald-700 dark:text-emerald-300"
-                        : "border-border/60 bg-muted/30 text-foreground",
+                        : "border-border bg-muted/30 text-foreground",
                   )}
                 >
                   <p>{statusMessage}</p>
diff --git a/desktop/src/components/panes/ChatPane.tsx b/desktop/src/components/panes/ChatPane.tsx
index 32b180c3..fb864b7e 100644
--- a/desktop/src/components/panes/ChatPane.tsx
+++ b/desktop/src/components/panes/ChatPane.tsx
@@ -67,6 +67,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { StatusDot } from "@/components/ui/status-dot";
 import { PaneCard } from "@/components/ui/PaneCard";
 import { BackgroundTasksPane } from "@/components/panes/BackgroundTasksPane";
 import {
@@ -8247,7 +8248,11 @@ function ChatHeader({
             >
               <Inbox className="size-4" />
               {inboxUnreadCount > 0 ? (
-                <span className="absolute right-1.5 top-1.5 size-2 rounded-full border border-card bg-destructive" />
+                <StatusDot
+                  variant="destructive"
+                  size="md"
+                  className="absolute right-1.5 top-1.5 border border-card"
+                />
               ) : null}
             </TooltipTrigger>
             <TooltipContent side="bottom" className="py-1">
@@ -8476,7 +8481,7 @@ function UserTurnComponent({
                 onClick={() => {
                   void handleCopy();
                 }}
-                className="size-6 rounded-lg text-muted-foreground hover:bg-foreground/6 hover:text-foreground"
+                className="size-6 rounded-lg text-muted-foreground hover:bg-fg-6 hover:text-foreground"
               >
                 {copyFeedbackVisible ? (
                   <Check className="size-3.5" strokeWidth={1.9} />
@@ -8620,7 +8625,7 @@ function QueuedSessionInputRail({
                               onClick={() => {
                                 void saveEditingItem(item);
                               }}
-                              className="size-7 rounded-full text-muted-foreground hover:bg-foreground/6 hover:text-foreground"
+                              className="size-7 rounded-full text-muted-foreground hover:bg-fg-6 hover:text-foreground"
                               aria-label="Save queued message edit"
                             >
                               {isSaving ? (
@@ -8635,7 +8640,7 @@ function QueuedSessionInputRail({
                               size="icon-xs"
                               disabled={isSaving}
                               onClick={cancelEditing}
-                              className="size-7 rounded-full text-muted-foreground hover:bg-foreground/6 hover:text-foreground"
+                              className="size-7 rounded-full text-muted-foreground hover:bg-fg-6 hover:text-foreground"
                               aria-label="Cancel queued message edit"
                             >
                               <X className="size-3.5" />
@@ -8663,7 +8668,7 @@ function QueuedSessionInputRail({
                                 setEditingDraft(previewText);
                                 setEditingError("");
                               }}
-                              className="size-7 rounded-full text-muted-foreground hover:bg-foreground/6 hover:text-foreground"
+                              className="size-7 rounded-full text-muted-foreground hover:bg-fg-6 hover:text-foreground"
                               aria-label="Edit queued message"
                             >
                               <PencilLine className="size-3.5" />
@@ -8753,7 +8758,7 @@ function AssistantTurnActionsMenu({
         render={
           <Button
             aria-label="Turn actions"
-            className="size-6 rounded-lg text-muted-foreground hover:bg-foreground/6 hover:text-foreground"
+            className="size-6 rounded-lg text-muted-foreground hover:bg-fg-6 hover:text-foreground"
             size="icon-xs"
             type="button"
             variant="ghost"
@@ -9705,7 +9710,7 @@ export function ArtifactBrowserModal({
       : "absolute inset-0 z-30 flex items-center justify-center bg-black/40 px-6 py-8 backdrop-blur-[2px]";
   const panelClassName =
     layout === "card"
-      ? "flex h-full w-full min-h-0 flex-col overflow-hidden rounded-[22px] border border-border bg-background shadow-xl"
+      ? "flex h-full w-full min-h-0 flex-col overflow-hidden rounded-2xl border border-border bg-background shadow-xl"
       : "flex max-h-full w-full max-w-lg flex-col overflow-hidden rounded-xl border border-border bg-background shadow-xl";
 
   return (
diff --git a/desktop/src/components/panes/InternalSurfacePane.tsx b/desktop/src/components/panes/InternalSurfacePane.tsx
index 447921a2..3c73b706 100644
--- a/desktop/src/components/panes/InternalSurfacePane.tsx
+++ b/desktop/src/components/panes/InternalSurfacePane.tsx
@@ -519,7 +519,7 @@ export function InternalSurfacePane({
               title="Output preview"
               sandbox=""
               srcDoc={htmlContent}
-              className="min-h-[60vh] w-full rounded-[18px] border border-border bg-white"
+              className="min-h-[60vh] w-full rounded-2xl border border-border bg-white"
             />
           </div>
         );
@@ -916,7 +916,7 @@ function EmptyState({
 }) {
   return (
     <div
-      className={`flex h-full items-center justify-center rounded-[20px] border px-6 py-8 text-center ${
+      className={`flex h-full items-center justify-center rounded-2xl border px-6 py-8 text-center ${
         tone === "error"
           ? "border-warning/24 bg-warning/8"
           : "border-border bg-black/10"
diff --git a/desktop/src/components/panes/SpaceApplicationsExplorerPane.tsx b/desktop/src/components/panes/SpaceApplicationsExplorerPane.tsx
index 00a9075c..032c4e04 100644
--- a/desktop/src/components/panes/SpaceApplicationsExplorerPane.tsx
+++ b/desktop/src/components/panes/SpaceApplicationsExplorerPane.tsx
@@ -1,6 +1,8 @@
 import { AppWindow, Plus } from "lucide-react";
 import { AppIcon } from "@/components/marketplace/AppIcon";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { StatusDot } from "@/components/ui/status-dot";
 import type { WorkspaceInstalledAppDefinition } from "@/lib/workspaceApps";
 import { resolveAppDisplay, useWorkspaceDesktop } from "@/lib/workspaceDesktop";
 
@@ -23,11 +25,8 @@ function appStatusTone(app: WorkspaceInstalledAppDefinition): AppStatusTone {
   return "loading";
 }
 
-function statusPipClass(tone: AppStatusTone): string {
-  if (tone === "error") {
-    return "bg-destructive";
-  }
-  return "bg-info animate-pulse";
+function statusPipVariant(tone: AppStatusTone): "destructive" | "info" {
+  return tone === "error" ? "destructive" : "info";
 }
 
 function statusPipLabel(tone: AppStatusTone): string {
@@ -110,10 +109,10 @@ export function SpaceApplicationsExplorerPane({
                     {label}
                   </span>
                   {showStatus ? (
-                    <span
-                      aria-hidden="true"
+                    <StatusDot
+                      variant={statusPipVariant(tone)}
+                      pulse={tone !== "error"}
                       title={statusPipLabel(tone)}
-                      className={`size-1.5 shrink-0 rounded-full ${statusPipClass(tone)}`}
                     />
                   ) : null}
                 </Button>
@@ -123,14 +122,12 @@ export function SpaceApplicationsExplorerPane({
         </div>
 
         {isEmpty ? (
-          <div className="mt-6 flex flex-col items-center justify-center gap-2.5 px-4 py-8 text-center">
-            <div className="grid size-8 place-items-center rounded-[10px] bg-muted text-muted-foreground">
-              <AppWindow className="size-3.5" />
-            </div>
-            <div className="text-xs leading-5 text-muted-foreground">
-              No apps installed yet.
-            </div>
-          </div>
+          <EmptyState
+            icon={AppWindow}
+            size="md"
+            title="No apps installed yet."
+            className="mt-6"
+          />
         ) : null}
       </div>
     </div>
diff --git a/desktop/src/components/panes/SpaceBrowserDisplayPane.tsx b/desktop/src/components/panes/SpaceBrowserDisplayPane.tsx
index 8cc9396e..e228c341 100644
--- a/desktop/src/components/panes/SpaceBrowserDisplayPane.tsx
+++ b/desktop/src/components/panes/SpaceBrowserDisplayPane.tsx
@@ -26,6 +26,7 @@ import {
 import { useBrowserGlowPreview } from "@/components/panes/useBrowserGlowPreview";
 import { useWorkspaceBrowser } from "@/components/panes/useWorkspaceBrowser";
 import { Button } from "@/components/ui/button";
+import { StatusDot } from "@/components/ui/status-dot";
 
 const HOME_URL = "https://www.google.com";
 const EXPLICIT_SCHEME_PATTERN = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
@@ -499,7 +500,7 @@ export function SpaceBrowserDisplayPane({
           {!activeTab.initialized ? (
             <div className="absolute inset-0 grid place-items-center bg-card p-6 text-center">
               <div className="flex flex-col items-center gap-3">
-                <div className="grid size-11 place-items-center rounded-[12px] bg-muted text-muted-foreground">
+                <div className="grid size-11 place-items-center rounded-xl bg-muted text-muted-foreground">
                   <Loader2 size={18} className="animate-spin" />
                 </div>
                 <div className="text-sm font-medium text-foreground">
@@ -516,7 +517,7 @@ export function SpaceBrowserDisplayPane({
 
           {activeTab.error ? (
             <div className="absolute inset-x-4 bottom-4 flex items-start gap-2 rounded-lg border-l-2 border-warning bg-card px-3 py-2 text-xs leading-5 text-foreground shadow-sm">
-              <span className="mt-0.5 size-1.5 shrink-0 rounded-full bg-warning" />
+              <StatusDot variant="warning" className="mt-0.5" />
               <span className="min-w-0 flex-1">{activeTab.error}</span>
             </div>
           ) : null}
diff --git a/desktop/src/components/panes/SpaceBrowserExplorerPane.tsx b/desktop/src/components/panes/SpaceBrowserExplorerPane.tsx
index 1b6d0d02..86940016 100644
--- a/desktop/src/components/panes/SpaceBrowserExplorerPane.tsx
+++ b/desktop/src/components/panes/SpaceBrowserExplorerPane.tsx
@@ -15,6 +15,8 @@ import {
   X,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { StatusDot } from "@/components/ui/status-dot";
 import {
   Select,
   SelectContent,
@@ -84,22 +86,21 @@ function Favicon({ url, fallback, className }: FaviconProps) {
   );
 }
 
-function sessionDotClass(tone: SessionStatusTone, flashing = false): string {
-  const base = (() => {
-    switch (tone) {
-      case "active":
-        return "bg-success";
-      case "waiting":
-        return "bg-warning";
-      case "paused":
-        return "bg-info";
-      case "error":
-        return "bg-destructive";
-      default:
-        return "bg-muted-foreground";
-    }
-  })();
-  return flashing ? `${base} animate-pulse` : base;
+function sessionDotVariant(
+  tone: SessionStatusTone,
+): "success" | "warning" | "info" | "destructive" | "muted" {
+  switch (tone) {
+    case "active":
+      return "success";
+    case "waiting":
+      return "warning";
+    case "paused":
+      return "info";
+    case "error":
+      return "destructive";
+    default:
+      return "muted";
+  }
 }
 
 function toneFromRuntimeStatus(
@@ -322,12 +323,11 @@ export function SpaceBrowserExplorerPane({
               className="flex items-center gap-2 px-2.5 py-1 text-xs leading-none"
               title={sessionBrowserStatus?.label ?? "Agent session"}
             >
-              <span
-                aria-hidden="true"
-                className={`size-1.5 shrink-0 rounded-full ${sessionDotClass(
+              <StatusDot
+                variant={sessionDotVariant(
                   (sessionBrowserStatus?.tone as SessionStatusTone) ?? "idle",
-                  sessionBrowserStatus?.flashing ?? false,
-                )}`}
+                )}
+                pulse={sessionBrowserStatus?.flashing ?? false}
               />
               <span className="min-w-0 flex-1 truncate text-foreground">
                 {currentSessionLabel}
@@ -343,13 +343,12 @@ export function SpaceBrowserExplorerPane({
                 title={sessionBrowserStatus?.label ?? "Agent session"}
               >
                 <SelectValue>
-                  <span
-                    aria-hidden="true"
-                    className={`size-1.5 shrink-0 rounded-full ${sessionDotClass(
+                  <StatusDot
+                    variant={sessionDotVariant(
                       (sessionBrowserStatus?.tone as SessionStatusTone) ??
                         "idle",
-                      sessionBrowserStatus?.flashing ?? false,
-                    )}`}
+                    )}
+                    pulse={sessionBrowserStatus?.flashing ?? false}
                   />
                   <span className="min-w-0 flex-1 truncate leading-none text-foreground">
                     {currentSessionLabel}
@@ -373,12 +372,10 @@ export function SpaceBrowserExplorerPane({
                       value={session.session_id}
                       className="items-start gap-2 rounded-md px-2.5 py-1.5 text-xs"
                     >
-                      <span
-                        aria-hidden="true"
-                        className={`mt-1 size-1.5 shrink-0 rounded-full ${sessionDotClass(
-                          tone,
-                          flashing,
-                        )}`}
+                      <StatusDot
+                        variant={sessionDotVariant(tone)}
+                        pulse={flashing}
+                        className="mt-1"
                       />
                       <span
                         className="min-w-0 flex-1 whitespace-normal leading-snug text-foreground line-clamp-2"
@@ -493,14 +490,11 @@ export function SpaceBrowserExplorerPane({
               );
             })
           ) : (
-            <div className="flex flex-col items-center justify-center gap-2 px-4 py-8 text-center">
-              <div className="grid size-8 place-items-center rounded-[10px] bg-muted text-muted-foreground">
-                <Globe className="size-3.5" />
-              </div>
-              <div className="text-xs leading-5 text-muted-foreground">
-                No open tabs in the {browserSpace} browser.
-              </div>
-            </div>
+            <EmptyState
+              icon={Globe}
+              size="md"
+              title={`No open tabs in the ${browserSpace} browser.`}
+            />
           )}
         </div>
       </div>
@@ -545,9 +539,10 @@ export function SpaceBrowserExplorerPane({
                 {count}
               </span>
               {showPending ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute right-1 top-1 size-1.5 animate-pulse rounded-full bg-primary"
+                <StatusDot
+                  variant="primary"
+                  pulse
+                  className="absolute right-1 top-1"
                 />
               ) : null}
             </button>
diff --git a/desktop/src/components/panes/SubagentSessionsPane.tsx b/desktop/src/components/panes/SubagentSessionsPane.tsx
index fee119d4..0a25e06e 100644
--- a/desktop/src/components/panes/SubagentSessionsPane.tsx
+++ b/desktop/src/components/panes/SubagentSessionsPane.tsx
@@ -288,7 +288,7 @@ export function SubagentSessionsPane({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="shrink-0 border-b border-border/60 px-4 py-3 sm:px-5">
+      <div className="shrink-0 border-b border-border px-4 py-3 sm:px-5">
         <div className="flex flex-wrap items-center gap-2">
           {(
             [
@@ -317,7 +317,7 @@ export function SubagentSessionsPane({
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">
         {filteredSessions.length === 0 ? (
-          <div className="flex h-full items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/20 px-6 text-center text-sm text-muted-foreground">
+          <div className="flex h-full items-center justify-center rounded-2xl border border-dashed border-border bg-muted/20 px-6 text-center text-sm text-muted-foreground">
             No matching sessions yet.
           </div>
         ) : (
@@ -332,7 +332,7 @@ export function SubagentSessionsPane({
                 key={session.session_id}
                 type="button"
                 onClick={() => onOpenSession?.(session)}
-                className="flex w-full min-w-0 items-start gap-2 rounded-2xl border border-border/70 bg-card/95 px-4 py-3 text-left shadow-subtle-xs transition hover:border-primary/40 hover:text-primary"
+                className="flex w-full min-w-0 items-start gap-2 rounded-2xl border border-border bg-card/95 px-4 py-3 text-left shadow-subtle-xs transition hover:border-primary/40 hover:text-primary"
               >
                 <span className="mt-0.5 grid size-4 shrink-0 place-items-center text-muted-foreground">
                   {inspectableRunSessionCategory(session) === "task_proposal" ? (
diff --git a/desktop/src/components/publish/LivePreviewPanel.tsx b/desktop/src/components/publish/LivePreviewPanel.tsx
index 2753e820..517a8b30 100644
--- a/desktop/src/components/publish/LivePreviewPanel.tsx
+++ b/desktop/src/components/publish/LivePreviewPanel.tsx
@@ -9,6 +9,7 @@ import {
 } from "lucide-react";
 import { AppIcon } from "@/components/marketplace/AppIcon";
 import { Badge } from "@/components/ui/badge";
+import { EmptyState } from "@/components/ui/empty-state";
 import { SimpleMarkdown } from "@/components/marketplace/SimpleMarkdown";
 import { cn } from "@/lib/utils";
 import { resolveAppDisplay, useWorkspaceDesktop } from "@/lib/workspaceDesktop";
@@ -301,7 +302,7 @@ function BundleIllustration({
     <div className="w-full min-w-md">
       <div className="overflow-hidden rounded-xl bg-background shadow-subtle-sm ring-1 ring-border/35">
         {/* Title strip */}
-        <div className="flex items-center justify-between border-b border-border/35 px-4 py-2.5">
+        <div className="flex items-center justify-between border-b border-border px-4 py-2.5">
           <div className="flex items-center gap-2">
             <Package className="size-3.5 text-muted-foreground" />
             <p className="text-xs font-medium">Archive contents</p>
@@ -357,7 +358,7 @@ function BundleIllustration({
         {/* Files (top-level non-app entries). Hidden when the only files are
             inside apps/, otherwise shows up to 5 entries with a + N more chip. */}
         {visibleEntries.length > 0 && (
-          <div className="border-t border-border/35 px-2 py-1.5">
+          <div className="border-t border-border px-2 py-1.5">
             <p className="px-2 pt-1 pb-1.5 text-xs font-medium text-muted-foreground">
               Files
             </p>
@@ -394,7 +395,7 @@ function BundleIllustration({
         )}
 
         {/* Privacy line + file count footer */}
-        <div className="flex items-center justify-between border-t border-border/35 px-4 py-2.5">
+        <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
           <div className="flex items-center gap-1.5">
             <ShieldCheck className="size-3.5 text-success" />
             <p className="text-xs text-muted-foreground">
@@ -479,7 +480,7 @@ function DocsMockup({ data }: { data: LivePreviewData }) {
     <div className="w-[560px] max-w-full">
       <div className="overflow-hidden rounded-2xl bg-background shadow-subtle-sm ring-1 ring-border/35">
         {/* Tab strip */}
-        <div className="flex items-center border-b border-border/35 px-3">
+        <div className="flex items-center border-b border-border px-3">
           <DocsTab active={tab === "readme"} hasContent={hasReadme} onClick={() => setTab("readme")}>
             <FileText className="size-3.5" />
             README
@@ -502,9 +503,10 @@ function DocsMockup({ data }: { data: LivePreviewData }) {
                 <SimpleMarkdown>{cleanReadme}</SimpleMarkdown>
               </div>
             ) : (
-              <DocsEmptyState
-                hint="Renders on the marketplace listing page."
+              <EmptyState
+                size="md"
                 title="No README yet"
+                description="Renders on the marketplace listing page."
               />
             )}
           </div>
@@ -524,20 +526,21 @@ function DocsMockup({ data }: { data: LivePreviewData }) {
                   </div>
                 </div>
                 {/* Collapsed full-script preview, monospace-but-readable */}
-                <details className="group rounded-lg border border-border/40">
+                <details className="group rounded-lg border border-border">
                   <summary className="flex cursor-pointer items-center justify-between px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-fg-2 [&::-webkit-details-marker]:hidden">
                     <span>View full script</span>
                     <span className="font-mono group-open:rotate-90 transition-transform">›</span>
                   </summary>
-                  <div className="border-t border-border/40 px-3 py-2.5 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground">
+                  <div className="border-t border-border px-3 py-2.5 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground">
                     {cleanOnboarding}
                   </div>
                 </details>
               </div>
             ) : (
-              <DocsEmptyState
-                hint="Runs in chat the first time someone opens this template."
+              <EmptyState
+                size="md"
                 title="No first-run script yet"
+                description="Runs in chat the first time someone opens this template."
               />
             )}
           </div>
@@ -584,11 +587,3 @@ function DocsTab({
   );
 }
 
-function DocsEmptyState({ title, hint }: { title: string; hint: string }) {
-  return (
-    <div className="flex flex-col items-center justify-center px-2 py-8 text-center">
-      <p className="text-sm font-medium">{title}</p>
-      <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
-    </div>
-  );
-}
diff --git a/desktop/src/components/publish/PublishScreen.tsx b/desktop/src/components/publish/PublishScreen.tsx
index ee688d6f..1f2ae8de 100644
--- a/desktop/src/components/publish/PublishScreen.tsx
+++ b/desktop/src/components/publish/PublishScreen.tsx
@@ -20,6 +20,7 @@ import { AppIcon } from "@/components/marketplace/AppIcon";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { StatusDot } from "@/components/ui/status-dot";
 import {
   Select,
   SelectContent,
@@ -468,7 +469,7 @@ export function PublishScreen({
           <span>{selectedWorkspace?.name ?? "Workspace"}</span>
           {savedAt !== null && (
             <span className="ml-1 inline-flex items-center gap-1 rounded-md bg-fg-4 px-1.5 py-0.5 text-xs">
-              <span className="size-1.5 rounded-full bg-success" />
+              <StatusDot variant="success" />
               Saved {formatRelative(Date.now() - savedAt)}
             </span>
           )}
diff --git a/desktop/src/components/ui/UpdateReminder.tsx b/desktop/src/components/ui/UpdateReminder.tsx
index 963e60e6..6724de5c 100644
--- a/desktop/src/components/ui/UpdateReminder.tsx
+++ b/desktop/src/components/ui/UpdateReminder.tsx
@@ -83,7 +83,7 @@ export function UpdateReminder({
   const shouldShowBackgroundAction = !status.downloaded && !hasError;
 
   return (
-    <div className="pointer-events-auto overflow-hidden rounded-[24px] border border-border bg-popover/95 shadow-2xl ring-1 ring-border backdrop-blur-xl animate-in fade-in-0 slide-in-from-top-2">
+    <div className="pointer-events-auto overflow-hidden rounded-3xl border border-border bg-popover/95 shadow-2xl ring-1 ring-border backdrop-blur-xl animate-in fade-in-0 slide-in-from-top-2">
       <div className="flex items-start gap-3 px-3.5 py-3">
         <div
           className={cn(
diff --git a/desktop/src/components/ui/dropdown-menu.tsx b/desktop/src/components/ui/dropdown-menu.tsx
index fdf196ab..d95042a4 100644
--- a/desktop/src/components/ui/dropdown-menu.tsx
+++ b/desktop/src/components/ui/dropdown-menu.tsx
@@ -40,7 +40,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "dark z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:not-data-[variant=destructive]:focus:bg-foreground/10 **:data-[slot$=-item]:not-data-[variant=destructive]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10!",
+            "dark z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:not-data-[variant=destructive]:focus:bg-foreground/10 **:data-[slot$=-item]:not-data-[variant=destructive]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-fg-5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10!",
             className,
           )}
           {...props}
@@ -137,7 +137,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "dark w-auto min-w-[96px] rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-border duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:not-data-[variant=destructive]:focus:bg-foreground/10 **:data-[slot$=-item]:not-data-[variant=destructive]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10!",
+        "dark w-auto min-w-[96px] rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-border duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:not-data-[variant=destructive]:focus:bg-foreground/10 **:data-[slot$=-item]:not-data-[variant=destructive]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-fg-5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10!",
         className,
       )}
       align={align}
diff --git a/desktop/src/components/ui/empty-state.tsx b/desktop/src/components/ui/empty-state.tsx
new file mode 100644
index 00000000..1b06c5e2
--- /dev/null
+++ b/desktop/src/components/ui/empty-state.tsx
@@ -0,0 +1,80 @@
+import type { LucideIcon } from "lucide-react"
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * EmptyState — centered icon + title + optional description + optional
+ * action. Replaces the multiple hand-rolled placeholder variants
+ * scattered across panes (sidebar empties, dashboard "no rows",
+ * automations "no schedules", etc.).
+ *
+ * Two visual presentations driven by `size`:
+ *
+ *  - `sm` (compact, default in dashboard panels) — small unframed icon
+ *    at low opacity, `text-xs` copy. Good when the empty state shares
+ *    a tight pane with chrome; was the original dashboard EmptyState.
+ *
+ *  - `md` (roomier, default for sidebar / list empties) — icon wrapped
+ *    in a chip background, `text-sm` title + `text-xs` description.
+ *    More presence for full-pane empties.
+ *
+ * Pass `action` to surface a CTA below the description.
+ *
+ * `minHeight` forces a min-height (used by chart panels so the panel
+ * doesn't collapse when there's no data).
+ */
+export interface EmptyStateProps {
+  icon?: LucideIcon
+  title: string
+  description?: ReactNode
+  action?: ReactNode
+  size?: "sm" | "md"
+  /** Force min-height (px). Useful for chart cells that shouldn't collapse. */
+  minHeight?: number
+  /** Extra classes on the outer wrapper. */
+  className?: string
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  size = "sm",
+  minHeight,
+  className,
+}: EmptyStateProps) {
+  const isMd = size === "md"
+  const wrapperClass = cn(
+    "flex flex-col items-center justify-center text-center",
+    isMd ? "gap-2.5 px-4 py-8" : "gap-2 py-10 text-muted-foreground",
+    className,
+  )
+  const titleClass = isMd
+    ? "text-sm font-medium text-foreground"
+    : "text-xs"
+  const descriptionClass = isMd
+    ? "max-w-xs text-xs leading-5 text-muted-foreground"
+    : "text-[11px] opacity-70"
+
+  return (
+    <div
+      className={wrapperClass}
+      style={minHeight ? { minHeight } : undefined}
+    >
+      {Icon ? (
+        isMd ? (
+          <div className="grid size-10 place-items-center rounded-xl bg-muted text-muted-foreground">
+            <Icon className="size-4" strokeWidth={1.6} />
+          </div>
+        ) : (
+          <Icon size={22} strokeWidth={1.5} className="opacity-45" />
+        )
+      ) : null}
+      <p className={titleClass}>{title}</p>
+      {description ? <p className={descriptionClass}>{description}</p> : null}
+      {action ? <div className={isMd ? "mt-2" : "mt-1.5"}>{action}</div> : null}
+    </div>
+  )
+}
diff --git a/desktop/src/components/ui/select.tsx b/desktop/src/components/ui/select.tsx
index 5c71ccc6..7b244086 100644
--- a/desktop/src/components/ui/select.tsx
+++ b/desktop/src/components/ui/select.tsx
@@ -82,7 +82,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-                                            "dark isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg text-popover-foreground shadow-md ring-1 ring-border duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",
+                                            "dark isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg text-popover-foreground shadow-md ring-1 ring-border duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-fg-5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",
                                             className
                                           )}
           {...props}
diff --git a/desktop/src/components/ui/status-dot.tsx b/desktop/src/components/ui/status-dot.tsx
new file mode 100644
index 00000000..17276b81
--- /dev/null
+++ b/desktop/src/components/ui/status-dot.tsx
@@ -0,0 +1,85 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * StatusDot — small colored dot signalling a state (running, error,
+ * working, idle, etc.). Replaces ~18 hand-rolled
+ * `<span className="size-X rounded-full bg-X" />` instances across the
+ * shell so a single change here propagates everywhere.
+ *
+ * Default size = `sm` (6px) which matches the dominant existing usage
+ * (status pip alongside text). Use `md` (8px) for slightly more
+ * presence (sidebar entry status), `lg` (10px) for stand-alone
+ * notification-style indicators.
+ *
+ * `withRing` adds a card-colored ring — used for badge dots that sit on
+ * top of an icon and need to read against the underlying surface.
+ */
+const statusDotVariants = cva("inline-block shrink-0 rounded-full", {
+  variants: {
+    variant: {
+      success: "bg-success",
+      destructive: "bg-destructive",
+      warning: "bg-warning",
+      info: "bg-info",
+      primary: "bg-primary",
+      muted: "bg-muted-foreground",
+      neutral: "bg-fg-24",
+    },
+    size: {
+      sm: "size-1.5",
+      md: "size-2",
+      lg: "size-2.5",
+    },
+    withRing: {
+      true: "border-2 border-card",
+      false: "",
+    },
+    pulse: {
+      true: "animate-pulse",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "info",
+    size: "sm",
+    withRing: false,
+    pulse: false,
+  },
+})
+
+export type StatusDotProps = useRender.ComponentProps<"span"> &
+  VariantProps<typeof statusDotVariants>
+
+export function StatusDot({
+  className,
+  variant,
+  size,
+  withRing,
+  pulse,
+  render,
+  ...props
+}: StatusDotProps) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(
+          statusDotVariants({ variant, size, withRing, pulse }),
+          className,
+        ),
+        "aria-hidden": true,
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "status-dot",
+      variant,
+      size,
+    },
+  })
+}