diff --git a/packages/app/public/android-chrome-192x192.png b/packages/app/public/android-chrome-192x192.png
new file mode 100644
index 0000000000000..a5db6b9c58f67
Binary files /dev/null and b/packages/app/public/android-chrome-192x192.png differ
diff --git a/packages/app/public/android-chrome-512x512.png b/packages/app/public/android-chrome-512x512.png
new file mode 100644
index 0000000000000..844c128d278d7
Binary files /dev/null and b/packages/app/public/android-chrome-512x512.png differ
diff --git a/packages/app/public/apple-touch-icon.png b/packages/app/public/apple-touch-icon.png
new file mode 100644
index 0000000000000..4d18026b82e6a
Binary files /dev/null and b/packages/app/public/apple-touch-icon.png differ
diff --git a/packages/app/public/brand/favicons/android-chrome-192x192.png b/packages/app/public/brand/favicons/android-chrome-192x192.png
index b5f72dae4d0ae..a5db6b9c58f67 100644
Binary files a/packages/app/public/brand/favicons/android-chrome-192x192.png and b/packages/app/public/brand/favicons/android-chrome-192x192.png differ
diff --git a/packages/app/public/brand/favicons/android-chrome-512x512.png b/packages/app/public/brand/favicons/android-chrome-512x512.png
index 2ef4a319fd4e3..844c128d278d7 100644
Binary files a/packages/app/public/brand/favicons/android-chrome-512x512.png and b/packages/app/public/brand/favicons/android-chrome-512x512.png differ
diff --git a/packages/app/public/brand/favicons/app-icon-192.png b/packages/app/public/brand/favicons/app-icon-192.png
new file mode 100644
index 0000000000000..a5db6b9c58f67
Binary files /dev/null and b/packages/app/public/brand/favicons/app-icon-192.png differ
diff --git a/packages/app/public/brand/favicons/app-icon-512.png b/packages/app/public/brand/favicons/app-icon-512.png
new file mode 100644
index 0000000000000..844c128d278d7
Binary files /dev/null and b/packages/app/public/brand/favicons/app-icon-512.png differ
diff --git a/packages/app/public/brand/favicons/apple-touch-icon.png b/packages/app/public/brand/favicons/apple-touch-icon.png
index 62f919c8fec08..4d18026b82e6a 100644
Binary files a/packages/app/public/brand/favicons/apple-touch-icon.png and b/packages/app/public/brand/favicons/apple-touch-icon.png differ
diff --git a/packages/app/public/site.webmanifest b/packages/app/public/site.webmanifest
index c9ef00c6a2133..a30d152d6df29 100644
--- a/packages/app/public/site.webmanifest
+++ b/packages/app/public/site.webmanifest
@@ -18,14 +18,16 @@
       "type": "image/x-icon"
     },
     {
-      "src": "/brand/favicons/android-chrome-192x192.png",
+      "src": "/brand/favicons/app-icon-192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
-      "src": "/brand/favicons/android-chrome-512x512.png",
+      "src": "/brand/favicons/app-icon-512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
index f8f3ec4995bf0..e27e14ba179e8 100644
--- a/packages/app/src/main.tsx
+++ b/packages/app/src/main.tsx
@@ -1,27 +1,9 @@
-/**
- * Renderer boot entry and composition root for the cross-platform Eliza app
- * shell (web browser, Electrobun desktop, and Capacitor iOS/Android). Runs
- * before React mounts: starts cold-start telemetry, registers host-external
- * view importers, and resolves cloud-only branding from the injected API base
- * / desktop runtime mode.
- *
- * `main()` drives the boot pipeline — embed-iframe session handshake, app-window
- * and model-tester route shortcuts, managed cloud launch connection, the
- * headless iOS full-Bun backend smoke gate, popout and detached/overlay window
- * shells, then the per-platform bridge stack (storage + Capacitor bridges, iOS
- * local-agent fetch/native-request bridges, Android native agent fetch bridge,
- * screen-capture / OCR / voice harnesses) — before mounting the React tree
- * (`@elizaos/ui` App, optionally wrapped by the web-only CloudRouterShell) and
- * running `initializePlatform()` concurrently after paint.
- *
- * Also owns deep-link handling (custom `<scheme>://` + `eliza.app` universal
- * links → hash routes, navigate-view events, or first-run remote connect), the
- * trusted-apiBase / native-WebSocket URL policy (tightened for iOS store + cloud
- * builds; a bearer token is never accepted from an OS deep link), the mobile
- * device bridge + agent tunnel + background runner, and the desktop tray /
- * global-shortcut / chat-overlay wiring. Modules not needed for first paint are
- * deferred onto the idle path. Exports the resolved platform flags.
- */
+// FIRST side-effect: repair the same-origin WebSocket base for the plain-web
+// served bundle before the `client` singleton can dial its socket. The dev
+// server injects a desktop-loopback `__ELIZA_WS_BASE__` (ws://127.0.0.1:31337)
+// that client-base reads first; on a reverse-proxied web page the socket must
+// be same-origin (wss://<host>/ws). No-op on desktop / native. See module.
+import "./web-ws-base-fix";
 import { ErrorBoundary } from "@elizaos/ui/components/ui/error-boundary";
 import "@elizaos/ui/styles";
 // Native-only (ios/android/desktop): register the Eliza Cloud Applications
@@ -174,7 +156,6 @@ import {
   type IosRuntimeConfig,
   resolveIosRuntimeConfig,
 } from "./ios-runtime";
-import { startKeyboardDictationSession } from "./keyboard-dictation";
 import {
   createMobileLifecycle,
   type MobileLifecycle,
@@ -1790,12 +1771,6 @@ function handleDeepLink(url: string): void {
       // is consumed by installAecLoopHarness's hashchange watcher.
       setHashRoute("aec-loop", parsed.searchParams);
       break;
-    case "keyboard-dictation":
-      // iOS keyboard app-handoff dictation (#12185): extensions have no mic,
-      // so the ElizaKeyboard extension opens the app; record + transcribe
-      // here, publish the transcript to the App Group, keyboard inserts it.
-      startKeyboardDictationSession(parsed.searchParams);
-      break;
     case "connect": {
       const gatewayUrl = parsed.searchParams.get("url");
       if (gatewayUrl) {
diff --git a/packages/app/src/web-ws-base-fix.ts b/packages/app/src/web-ws-base-fix.ts
new file mode 100644
index 0000000000000..56bbddd80d808
--- /dev/null
+++ b/packages/app/src/web-ws-base-fix.ts
@@ -0,0 +1,174 @@
+/**
+ * Same-origin API + WebSocket base repair for the PLAIN-WEB served bundle.
+ *
+ * Context: when the app is served by the Vite dev server as a plain browser page
+ * (NOT the electrobun desktop shell, NOT a Capacitor native webview), the dev
+ * `appDevWsBasePlugin` injects `window.__ELIZA_WS_BASE__ = "ws://127.0.0.1:<apiPort>"`
+ * into the served HTML (apiPort defaults to 31337, the desktop loopback API).
+ *
+ * `client-base.ts` `getInjectedWsBase()` reads that global FIRST — before it
+ * would otherwise derive the socket host from `window.location`. So even with an
+ * empty (same-origin) REST base, the realtime socket dials the dead desktop
+ * loopback `ws://127.0.0.1:31337/ws`, which is refused, and live chat never
+ * connects.
+ *
+ * When the page is actually served over http/https from a real remote host that
+ * a reverse proxy (nginx) fronts — proxying `/ws` and `/api` to the backend with
+ * auth injected — the correct socket target is same-origin
+ * `wss://<location.host>/ws` and REST is same-origin `/api`.
+ *
+ * Two things must be corrected for the plain-web path, both UPSTREAM of the
+ * DO-NOT-EDIT client-base.ts:
+ *
+ *   1. WS base: rewrite the injected desktop-loopback `__ELIZA_WS_BASE__` to
+ *      same-origin `wss://<host>` so `getInjectedWsBase()` resolves the correct
+ *      socket host.
+ *
+ *   2. REST base: set `__ELIZA_API_BASE__` to same-origin `https://<host>` so
+ *      `this.baseUrl` is NON-EMPTY. This is required because client-base's
+ *      `connectWs()` has a guard that BAILS when `baseUrl` is empty AND the page
+ *      host has no port and isn't loopback (a Capacitor synthetic-host
+ *      protection). A plain remote https host like `sol-overhaul.shad0w.xyz`
+ *      (portless, non-loopback) trips that guard, so an empty REST base leaves
+ *      the socket un-opened even with a correct WS base. A same-origin absolute
+ *      REST base is equivalent to relative `/api` (nginx proxies it with the
+ *      injected auth header) and makes the guard pass so the socket opens.
+ *
+ * Scope: this only mutates `getElizaApiBase()`'s globals (`__ELIZA_API_BASE__` /
+ * `__ELIZAOS_API_BASE__`), which the REST client reads. It deliberately does NOT
+ * touch `__ELIZA_APP_API_BASE__` / the branded `__<PREFIX>_API_BASE__` that
+ * `getInjectedAppApiBase()` reads for cloud-only branding — so app branding is
+ * unaffected.
+ *
+ * Desktop (electrobun) and native (Capacitor) contexts are left untouched — they
+ * legitimately need the injected / native base.
+ *
+ * This module MUST be imported as the first side-effect in `main.tsx`, before
+ * the `client` singleton's `connectWs()` can run.
+ */
+import { Capacitor } from "@capacitor/core";
+import { isElectrobunRuntime } from "@elizaos/ui/bridge";
+
+const LOOPBACK_HOSTNAMES = new Set([
+  "localhost",
+  "127.0.0.1",
+  "::1",
+  "[::1]",
+  "0.0.0.0",
+]);
+
+function isLoopbackHostname(hostname: string): boolean {
+  return LOOPBACK_HOSTNAMES.has(hostname.toLowerCase());
+}
+
+function setInjectedGlobal(key: string, value: string): void {
+  try {
+    const w = window as unknown as Record<string, unknown>;
+    w[key] = value;
+  } catch {
+    // best-effort — never block boot
+  }
+}
+
+/**
+ * Same-origin realtime socket base for the current page:
+ * `wss://<host>` on https, `ws://<host>` on http. client-base appends `/ws`
+ * and the clientId/token query itself, so only the origin (protocol + host)
+ * needs to be correct here.
+ */
+function sameOriginWsBase(): string {
+  const loc = window.location;
+  const proto = loc.protocol === "https:" ? "wss:" : "ws:";
+  return `${proto}//${loc.host}`;
+}
+
+/** Same-origin REST API base for the current page: `https://<host>`. */
+function sameOriginRestBase(): string {
+  const loc = window.location;
+  return `${loc.protocol}//${loc.host}`;
+}
+
+/**
+ * Returns true only for the plain-web served context that should use a
+ * same-origin API/socket (not desktop, not native, page on a real http/https
+ * non-loopback host).
+ */
+function isPlainWebSameOriginContext(): boolean {
+  if (typeof window === "undefined") return false;
+  // Desktop shell needs the injected loopback API base.
+  if (isElectrobunRuntime()) return false;
+  // Capacitor iOS/Android use their own native/injected bases.
+  try {
+    if (Capacitor.isNativePlatform()) return false;
+  } catch {
+    // If Capacitor isn't resolvable treat as web; fall through.
+  }
+  const loc = window.location;
+  if (loc.protocol !== "http:" && loc.protocol !== "https:") return false;
+  // Loopback page host = an actual local dev-in-browser session pointed at the
+  // real loopback API; leave the injection alone there.
+  if (isLoopbackHostname(loc.hostname)) return false;
+  return true;
+}
+
+function injectedWsBaseIsForeignLoopback(value: unknown): boolean {
+  if (typeof value !== "string" || !value.trim()) return false;
+  try {
+    const parsed = new URL(value);
+    if (parsed.protocol !== "ws:" && parsed.protocol !== "http:") {
+      // A wss:/https: injection already implies a real proxied host; don't
+      // second-guess it.
+      return false;
+    }
+    // ws:/http: injection is the desktop-loopback default; on a plain-web
+    // remote page it is always wrong.
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Repoint the dev-injected desktop-loopback API + WS bases at the current
+ * (reverse-proxied) origin on the plain-web path so REST hits same-origin
+ * `/api` and the realtime socket dials `wss://<host>/ws`. No-op on desktop /
+ * native / loopback-dev contexts.
+ */
+export function repairWebSameOriginWsBase(): void {
+  if (!isPlainWebSameOriginContext()) return;
+  const w = window as unknown as {
+    __ELIZA_WS_BASE__?: unknown;
+    __ELIZAOS_WS_BASE__?: unknown;
+  };
+  const anyForeign =
+    injectedWsBaseIsForeignLoopback(w.__ELIZA_WS_BASE__) ||
+    injectedWsBaseIsForeignLoopback(w.__ELIZAOS_WS_BASE__);
+  if (!anyForeign) return;
+
+  // 1) WS base → same-origin wss://<host>.
+  const wsTarget = sameOriginWsBase();
+  setInjectedGlobal("__ELIZA_WS_BASE__", wsTarget);
+  setInjectedGlobal("__ELIZAOS_WS_BASE__", wsTarget);
+  try {
+    const wRecord = window as unknown as Record<string, unknown>;
+    for (const key of Object.keys(wRecord)) {
+      if (
+        /^__[A-Z0-9]+_WS_BASE__$/.test(key) &&
+        injectedWsBaseIsForeignLoopback(wRecord[key])
+      ) {
+        setInjectedGlobal(key, wsTarget);
+      }
+    }
+  } catch {
+    // best-effort
+  }
+
+  // 2) REST base → same-origin https://<host>, so the client's baseUrl is
+  //    non-empty and connectWs()'s empty-baseUrl guard does not bail. Only the
+  //    getElizaApiBase() globals — NOT the app-branding globals.
+  const restTarget = sameOriginRestBase();
+  setInjectedGlobal("__ELIZA_API_BASE__", restTarget);
+  setInjectedGlobal("__ELIZAOS_API_BASE__", restTarget);
+}
+
+repairWebSameOriginWsBase();
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index bd933584d0299..db1677cac777f 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -2428,6 +2428,23 @@ export function App() {
               "max(calc(var(--safe-area-top, 0px) - 1.25rem), 1.25rem)",
           }}
         >
+          {/* BOTTOM-BAR / SAFE-AREA FLOOR (do not remove): a viewport-filling
+              dark background-token floor mounted on EVERY route, behind the
+              shader (z-0) and every other layer. html/body/#root paint the
+              orange launch guard (--launch-bg #ef5a1f) as a FOUC color, and on
+              shared-background routes (home/chat) the AppBackground shader was
+              the ONLY thing hiding it. On iOS the composer overlay is anchored
+              by the visualViewport-derived `bottom`, so in the home-indicator
+              safe-area the shader coverage can fall short and the orange host
+              color bled through as a band under the composer. This floor makes
+              the bottom inset (and every unpainted zone) the dark BACKGROUND
+              token — never accent — regardless of route or shader state. The
+              shader/wallpaper renders on top of it unchanged on shared routes. */}
+          <div
+            aria-hidden="true"
+            data-testid="app-safe-area-floor"
+            className="pointer-events-none fixed inset-0 z-[-1] bg-bg"
+          />
           {/* The unified app background, mounted once here so it persists
               seamlessly across shared-background routes. It keeps the
               background event channel mounted for the whole session, but only
diff --git a/packages/ui/src/backgrounds/AppBackground.test.tsx b/packages/ui/src/backgrounds/AppBackground.test.tsx
index 0bd32be1d20b7..02b5c0ceb50e7 100644
--- a/packages/ui/src/backgrounds/AppBackground.test.tsx
+++ b/packages/ui/src/backgrounds/AppBackground.test.tsx
@@ -50,6 +50,22 @@ describe("AppBackground", () => {
     ).toBeNull();
   });
 
+  it("always paints the legibility scrim inside the image wallpaper", () => {
+    seed({ mode: "image", color: "#000000", imageUrl: "/api/media/wallpaper.png" });
+    const { container } = render(<AppBackground />);
+    const scrim = container.querySelector<HTMLElement>(
+      '[data-testid="app-background-image-scrim"]',
+    );
+    expect(scrim).not.toBeNull();
+    // The scrim lives INSIDE the image layer (one background layer invariant)
+    // and darkens via the theme --bg token so content stays legible over any
+    // wallpaper in both themes.
+    expect(
+      scrim?.closest('[data-testid="app-background-image"]'),
+    ).not.toBeNull();
+    expect(scrim?.className).toContain("bg-bg/50");
+  });
+
   it("renders the programmable shader (or its color-field fallback) for glsl mode", () => {
     seed({
       mode: "glsl",
diff --git a/packages/ui/src/backgrounds/ImageBackground.tsx b/packages/ui/src/backgrounds/ImageBackground.tsx
index 1260fafab6735..2a41c35259620 100644
--- a/packages/ui/src/backgrounds/ImageBackground.tsx
+++ b/packages/ui/src/backgrounds/ImageBackground.tsx
@@ -13,6 +13,17 @@ export interface ImageBackgroundProps {
  * A full-bleed cover image for the unified app background. Centered, cover-fit,
  * no repeat — the user's uploaded or generated wallpaper sits behind the home
  * and every view that opts into the shared background.
+ *
+ * The image is always painted UNDER a half-strength `--bg` scrim (the child
+ * layer below). A photo wallpaper is ambience, not content: without the scrim
+ * a bright, saturated image (the stock sunset especially) competes with the
+ * greeting, cards, and composer sitting on top of it. Mixing 50% of the page
+ * background over the photo pulls its brightness, contrast, AND chroma toward
+ * the theme's base surface, so foreground text wins in both themes — dark mode
+ * dims the photo toward the warm brand black, light mode lifts it toward the
+ * warm white that dark text needs. A token scrim (no blur, no per-pixel
+ * filter work) is also the cheapest possible treatment: one plain composited
+ * layer, gate-safe, GPU-trivial.
  */
 export function ImageBackground({
   imageUrl,
@@ -30,6 +41,16 @@ export function ImageBackground({
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
       }}
-    />
+    >
+      {/* Legibility scrim: recede the wallpaper so content wins. Kept INSIDE
+          the image layer (not a sibling) so the shell's exactly-one-background
+          invariant holds and every image wallpaper — default or user-uploaded —
+          gets the same treatment. */}
+      <div
+        aria-hidden="true"
+        data-testid="app-background-image-scrim"
+        className="absolute inset-0 bg-bg/50"
+      />
+    </div>
   );
 }
diff --git a/packages/ui/src/backgrounds/ShaderBackground.tsx b/packages/ui/src/backgrounds/ShaderBackground.tsx
index 18d29bd9e3485..7e345c1f87d1e 100644
--- a/packages/ui/src/backgrounds/ShaderBackground.tsx
+++ b/packages/ui/src/backgrounds/ShaderBackground.tsx
@@ -3,64 +3,104 @@
  * gentle rim pulse.
  */
 import type * as React from "react";
-import { DEFAULT_BACKGROUND_COLOR } from "../state/ui-preferences";
+import {
+  DEFAULT_BACKGROUND_COLOR,
+  DEFAULT_BACKGROUND_GLOW,
+} from "../state/ui-preferences";
 
 export interface ShaderBackgroundProps {
-  /** Base hex color (6-digit) for the flat field and its rim pulse. */
+  /** Base hex color (6-digit) for the deep warm field. */
   color?: string;
+  /** Ember glow hex (6-digit). Defaults to the brand orange. */
+  glow?: string;
 }
 
-// A flat warm field whose EDGE slowly breathes between warm-white and the
-// chosen color — a soft inset glow from the screen perimeter inward. The
-// center stays a clean flat field; only the rim shifts. Generalized from the
-// original /chat orange home so any color drives the same gentle pulse.
+// "Midnight ember." A deep warm near-black field with a single low orange glow
+// breathing up from the bottom, like a fire banked low in a dark room. The
+// center and top stay a clean dark field so content reads cleanly; only the
+// low glow drifts in brightness. This is the opposite of the prior "flat bright
+// color fills the whole viewport" wall: the field is dark, the warmth is an
+// accent that pools at the bottom near the composer, never a wash over the UI.
 //
-// Each rim color is a SEPARATE layer with a STATIC inset box-shadow (painted
-// once) and the breathing is a pure `opacity` crossfade between them. opacity is
-// compositor-only, so the rim animates without repainting the full-viewport
-// box-shadow every frame. Fully stilled under prefers-reduced-motion.
-const EDGE_CSS = `
-@keyframes app-bg-shader-0 { 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }
-@keyframes app-bg-shader-1 { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
-.app-bg-shader-layer {
-  position: absolute;
-  inset: 0;
-  animation-duration: 30s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-}
-.app-bg-shader-0 { box-shadow: inset 0 0 170px 10px rgba(255, 250, 244, 0.42); animation-name: app-bg-shader-0; }
-.app-bg-shader-1 { animation-name: app-bg-shader-1; }
+// Two stacked radial pools (a wide low ambient and a tighter hot core) crossfade
+// in opacity only (compositor-cheap, no per-frame repaint of the gradients) so
+// the ember "breathes" without ever animating layout or filters. A faint top
+// vignette keeps the status bar legible. Fully stilled under reduced-motion.
+const EMBER_CSS = `
+@keyframes app-ember-breathe-a { 0%{opacity:0.92} 50%{opacity:0.62} 100%{opacity:0.92} }
+@keyframes app-ember-breathe-b { 0%{opacity:0.55} 50%{opacity:0.9} 100%{opacity:0.55} }
+.app-ember-layer { position:absolute; inset:0; }
+.app-ember-a { animation: app-ember-breathe-a 26s ease-in-out infinite; }
+.app-ember-b { animation: app-ember-breathe-b 26s ease-in-out infinite; }
 @media (prefers-reduced-motion: reduce) {
-  .app-bg-shader-layer { animation: none; opacity: 0; }
-  .app-bg-shader-1 { opacity: 1; }
+  .app-ember-a, .app-ember-b { animation: none; }
+  .app-ember-a { opacity: 0.8; }
+  .app-ember-b { opacity: 0.72; }
 }
 `;
 
+/** Mix two 6-digit hex colors by `t` (0 = a, 1 = b). Used to derive the warm
+ *  field tones from the base + glow without hardcoding intermediate hexes. */
+function mixHex(a: string, b: string, t: number): string {
+  const pa = [1, 3, 5].map((i) => Number.parseInt(a.slice(i, i + 2), 16));
+  const pb = [1, 3, 5].map((i) => Number.parseInt(b.slice(i, i + 2), 16));
+  const out = pa.map((v, i) =>
+    Math.round(v + (pb[i] - v) * t)
+      .toString(16)
+      .padStart(2, "0"),
+  );
+  return `#${out.join("")}`;
+}
+
 /**
- * The animated shader field for the unified app background. Flat base color
- * with a gentle, living rim pulse — no gradient, no vignette, no text. The rim
- * glow is the base color at low alpha, so the whole field reads as one hue.
+ * The unified app background: a deep warm field with a low, living ember glow.
+ * No flat color wall, no text. The glow is the accent pooled at the bottom
+ * where the conversation lives, fading to a clean dark field up top.
  */
 export function ShaderBackground({
   color = DEFAULT_BACKGROUND_COLOR,
+  glow = DEFAULT_BACKGROUND_GLOW,
 }: ShaderBackgroundProps = {}): React.JSX.Element {
-  // Rim glow = the chosen color at ~0.30 alpha (8-digit hex). `color` is a
-  // validated 6-digit hex, so the suffix always yields a valid CSS color.
-  const rim = `${color}4d`;
+  // A subtle vertical settle from the base into a hair-warmer floor tone, so the
+  // dark field itself isn't perfectly flat (perfectly flat reads as cheap).
+  const floor = mixHex(color, glow, 0.14);
+  // The ember pools: a wide ambient warmth and a tighter hotter core, both
+  // anchored low-center. Alpha keeps them as a glow, never an opaque fill.
+  const emberWide = `${glow}33`; // ~0.20
+  const emberCore = `${glow}4d`; // ~0.30
   return (
     <div
       aria-hidden="true"
       data-testid="app-background-shader"
       data-eliza-bg="shader"
       className="pointer-events-none fixed inset-0 overflow-hidden"
-      style={{ zIndex: 0, backgroundColor: color }}
+      style={{
+        zIndex: 0,
+        backgroundImage: `linear-gradient(to bottom, ${color} 0%, ${color} 52%, ${floor} 100%)`,
+      }}
     >
-      <style>{EDGE_CSS}</style>
-      <div className="app-bg-shader-layer app-bg-shader-0" />
+      <style>{EMBER_CSS}</style>
+      {/* Wide ambient ember, low and broad. */}
+      <div
+        className="app-ember-layer app-ember-a"
+        style={{
+          backgroundImage: `radial-gradient(120% 75% at 50% 116%, ${emberWide} 0%, transparent 60%)`,
+        }}
+      />
+      {/* Hotter core, tighter and brighter, the heart of the banked fire. */}
+      <div
+        className="app-ember-layer app-ember-b"
+        style={{
+          backgroundImage: `radial-gradient(85% 52% at 50% 120%, ${emberCore} 0%, transparent 58%)`,
+        }}
+      />
+      {/* Faint top settle so the status bar / clock never sits on raw glow. */}
       <div
-        className="app-bg-shader-layer app-bg-shader-1"
-        style={{ boxShadow: `inset 0 0 150px 6px ${rim}` }}
+        className="app-ember-layer"
+        style={{
+          backgroundImage:
+            "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 18%)",
+        }}
       />
     </div>
   );
diff --git a/packages/ui/src/components/apps/AppsCatalogGrid.tsx b/packages/ui/src/components/apps/AppsCatalogGrid.tsx
index 3272b38afed60..69aaa220f98cd 100644
--- a/packages/ui/src/components/apps/AppsCatalogGrid.tsx
+++ b/packages/ui/src/components/apps/AppsCatalogGrid.tsx
@@ -5,7 +5,7 @@
  * a per-card favorite toggle; launching a card is delegated to `onLaunch`.
  */
 
-import { Star } from "lucide-react";
+import { LayoutGrid, Star } from "lucide-react";
 import {
   type MouseEvent,
   memo,
@@ -49,7 +49,7 @@ interface PackedCatalogRow {
   totalSlots: number;
 }
 
-const CARD_GAP_PX = 8;
+const CARD_GAP_PX = 12;
 const MAX_CARDS_PER_ROW = 5;
 const MIN_CARD_WIDTH_PX = 248;
 
@@ -265,15 +265,15 @@ function CatalogSkeletonSection({
   return (
     <section className="space-y-3" aria-hidden="true">
       <div className="flex items-center gap-3">
-        <Skeleton className="h-3 w-28 rounded-full bg-bg-accent/80" />
-        <div className="h-px flex-1 bg-border/30" />
+        <Skeleton className="h-3 w-28 rounded-full bg-bg-accent" />
+        <div className="h-px flex-1 bg-border" />
       </div>
 
-      <div className="space-y-2">
+      <div className="space-y-3">
         {rowDescriptors.map((rowDescriptor) => (
           <div
             key={rowDescriptor.key}
-            className="grid gap-2"
+            className="grid gap-3"
             style={{
               gridTemplateColumns: `repeat(${rowDescriptor.rowSize}, minmax(0, 1fr))`,
             }}
@@ -281,12 +281,9 @@ function CatalogSkeletonSection({
             {rowDescriptor.cardKeys.map((cardKey) => (
               <div
                 key={cardKey}
-                className="overflow-hidden rounded-sm border border-border/35 bg-card/72"
+                className="overflow-hidden rounded-lg border border-border bg-card"
               >
-                <Skeleton className="aspect-[4/3] w-full rounded-none bg-bg-accent/70" />
-                <div className="space-y-2 px-3 py-3">
-                  <Skeleton className="h-3 w-2/3 rounded-full bg-bg-accent/80" />
-                </div>
+                <Skeleton className="aspect-[4/3] w-full rounded-none bg-bg-accent" />
               </div>
             ))}
           </div>
@@ -314,8 +311,8 @@ const AppCard = memo(function AppCard({
 
   return (
     <div
-      className={`group relative overflow-hidden rounded-sm border bg-card/72 transition-all hover:border-accent/45   ${
-        isActive ? "border-ok/45 " : "border-border/35 "
+      className={`group relative overflow-hidden rounded-lg border bg-card transition-colors hover:border-accent/60 ${
+        isActive ? "border-ok/50" : "border-border"
       }`}
     >
       <Button
@@ -323,29 +320,29 @@ const AppCard = memo(function AppCard({
         data-testid={`app-card-${app.name.replace(/[^a-z0-9]+/gi, "-")}`}
         title={displayName}
         aria-label={displayName}
-        className="block h-auto w-full rounded-none p-0 text-left font-normal whitespace-normal hover:bg-transparent"
+        className="block h-auto w-full rounded-none p-0 text-left font-normal whitespace-normal hover:bg-transparent transition-transform active:scale-[0.99] motion-reduce:transition-none"
         onClick={() => onLaunch(app)}
       >
         <AppHero
           app={app}
-          className="aspect-[4/3] transition-transform duration-300 group-hover:scale-[1.02]"
+          className="aspect-[4/3] transition-transform duration-300 group-hover:scale-[1.03] motion-reduce:transition-none"
         />
         {provenanceLabels.originLabel || provenanceLabels.supportLabel ? (
           <div
-            className="pointer-events-none absolute left-3 top-3 flex max-w-[calc(100%-4rem)] flex-wrap gap-1.5"
+            className="pointer-events-none absolute left-2.5 top-2.5 flex max-w-[calc(100%-4rem)] flex-wrap gap-1.5"
             title={provenanceLabels.title}
           >
             {provenanceLabels.originLabel ? (
-              <span className="rounded-sm border border-white/20 bg-black/40 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white">
+              <span className="rounded-full bg-scrim px-2 py-0.5 text-3xs font-semibold uppercase tracking-[0.14em] text-white">
                 {provenanceLabels.originLabel}
               </span>
             ) : null}
             {provenanceLabels.supportLabel ? (
               <span
-                className={`rounded-sm border px-1.5 py-0.5 text-[10px] font-semibold uppercase ${
+                className={`rounded-full bg-scrim px-2 py-0.5 text-3xs font-semibold uppercase tracking-[0.14em] ${
                   provenanceLabels.supportLabel === "Community"
-                    ? "border-warn/45 bg-black/40 text-warn"
-                    : "border-accent/45 bg-black/40 text-white"
+                    ? "text-warn"
+                    : "text-accent"
                 }`}
               >
                 {provenanceLabels.supportLabel}
@@ -353,9 +350,9 @@ const AppCard = memo(function AppCard({
             ) : null}
           </div>
         ) : null}
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-2 pe-10">
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-2.5 pe-11">
           <div className="min-w-0 flex-1">
-            <div className="truncate text-xs font-semibold text-white">
+            <div className="truncate text-sm font-semibold leading-tight text-white">
               {displayName}
             </div>
           </div>
@@ -364,17 +361,16 @@ const AppCard = memo(function AppCard({
       {isActive ? (
         <span
           title="Running"
-          className="pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full bg-ok "
+          className="pointer-events-none absolute right-3 top-3 h-2.5 w-2.5 rounded-full bg-ok"
         />
       ) : null}
       <Button
         variant="ghost"
         size="icon-sm"
         aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
-        className={`absolute bottom-3 right-3 h-8 w-8 rounded-full p-0 text-white transition-all ${
-          isFavorite
-            ? "bg-black/70 text-warn"
-            : "bg-black/70 text-white/70 hover:text-warn "
+        aria-pressed={isFavorite}
+        className={`absolute bottom-2.5 right-2.5 h-8 w-8 rounded-full bg-scrim p-0 transition-colors ${
+          isFavorite ? "text-warn" : "text-white hover:text-warn"
         }`}
         onClick={(event: MouseEvent<HTMLButtonElement>) => {
           event.stopPropagation();
@@ -382,9 +378,10 @@ const AppCard = memo(function AppCard({
         }}
       >
         <Star
-          className="h-3.5 w-3.5"
+          className="h-4 w-4"
+          strokeWidth={2}
           fill={isFavorite ? "currentColor" : "none"}
-          aria-hidden
+          aria-hidden="true"
         />
       </Button>
     </div>
@@ -447,13 +444,13 @@ export function AppsCatalogGrid({
   return (
     <div ref={catalogRef} data-testid="apps-catalog-grid">
       {error ? (
-        <div className="mb-4 flex flex-col gap-2 rounded-sm border border-danger/30 bg-danger/10 px-3 py-2 text-xs-tight text-danger sm:flex-row sm:items-center sm:justify-between">
+        <div className="mb-4 flex flex-col gap-2 rounded-lg border border-danger/40 bg-danger/10 px-4 py-3 text-xs text-danger sm:flex-row sm:items-center sm:justify-between">
           <span>{error}</span>
           {onRetry ? (
             <Button
               variant="ghost"
               size="sm"
-              className="h-auto self-start rounded-full border border-danger/40 px-2.5 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.14em] text-danger transition-colors hover:bg-danger/10 sm:self-auto"
+              className="h-auto min-h-touch self-start rounded-full border border-danger/50 px-3 py-1 text-2xs font-semibold uppercase tracking-[0.14em] text-danger transition-colors hover:bg-danger/10 sm:self-auto"
               onClick={onRetry}
             >
               Retry
@@ -464,7 +461,7 @@ export function AppsCatalogGrid({
 
       {loading ? (
         <div
-          className="space-y-6"
+          className="space-y-8"
           role="status"
           aria-label={t("appsview.Loading")}
         >
@@ -485,15 +482,18 @@ export function AppsCatalogGrid({
           />
         </div>
       ) : visibleApps.length === 0 ? (
-        <div className="rounded-sm border border-dashed border-border/35 bg-card/72 px-6 py-16 text-center">
-          <div className="text-xs font-medium text-muted-strong">
+        <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border bg-card px-6 py-16 text-center">
+          <span className="grid h-10 w-10 place-items-center rounded-full bg-bg-accent text-muted">
+            <LayoutGrid className="h-5 w-5" strokeWidth={2} aria-hidden="true" />
+          </span>
+          <div className="text-sm font-medium text-muted-strong">
             {searchQuery
               ? t("appsview.NoAppsMatchSearch")
               : t("appsview.NoAppsAvailable")}
           </div>
         </div>
       ) : (
-        <div className="space-y-4">
+        <div className="space-y-6">
           {sectionRows.map((sectionRow) => {
             const rowKey = sectionRow.sections
               .map((section) => section.key)
@@ -517,13 +517,13 @@ export function AppsCatalogGrid({
                     }}
                   >
                     <div className="flex items-center gap-3">
-                      <h2 className="text-sm font-semibold text-muted-strong">
+                      <h2 className="text-xs-tight font-semibold uppercase tracking-[0.18em] text-muted-strong">
                         {section.label}
                       </h2>
-                      <div className="h-px flex-1 bg-border/30" />
+                      <div className="h-px flex-1 bg-border" />
                     </div>
 
-                    <div className="space-y-2">
+                    <div className="space-y-3">
                       {buildBalancedRows(section.apps, section.slots).map(
                         (row) => {
                           const sectionRowKey = row
@@ -532,7 +532,7 @@ export function AppsCatalogGrid({
                           return (
                             <div
                               key={`${section.key}-${sectionRowKey}`}
-                              className="grid gap-2"
+                              className="grid gap-3"
                               style={{
                                 gridTemplateColumns: `repeat(${row.length}, minmax(0, 1fr))`,
                               }}
diff --git a/packages/ui/src/components/apps/RunningAppsRow.tsx b/packages/ui/src/components/apps/RunningAppsRow.tsx
index 1684d6e7cfedc..2ca335c2c93cd 100644
--- a/packages/ui/src/components/apps/RunningAppsRow.tsx
+++ b/packages/ui/src/components/apps/RunningAppsRow.tsx
@@ -6,7 +6,7 @@
  * affected entry while an action is in flight.
  */
 
-import { Square } from "lucide-react";
+import { AlertTriangle, Square } from "lucide-react";
 import { type MouseEvent, memo, useMemo } from "react";
 import type { AppRunSummary, RegistryAppInfo } from "../../api";
 import { Button } from "../ui/button";
@@ -59,22 +59,22 @@ const RunningAppCard = memo(function RunningAppCard({
   return (
     <div
       data-testid={`running-app-card-${run.runId}`}
-      className="group relative overflow-hidden rounded-sm border border-accent/35 bg-card/72 transition-all hover:border-accent/55  "
+      className="group relative overflow-hidden rounded-lg border border-accent/40 bg-card transition-colors hover:border-accent/60"
     >
       <Button
         variant="ghost"
         aria-label={`Open ${run.displayName}`}
         aria-busy={isBusy || undefined}
-        className="block h-auto w-full rounded-none p-0 text-left font-normal whitespace-normal hover:bg-transparent"
+        className="block h-auto w-full rounded-none p-0 text-left font-normal whitespace-normal hover:bg-transparent transition-transform active:scale-[0.99] motion-reduce:transition-none"
         onClick={() => onOpenRun(run)}
       >
         <AppHero
           app={app}
-          className="aspect-[5/4] transition-transform duration-300 group-hover:scale-[1.02]"
+          className="aspect-[5/4] transition-transform duration-300 group-hover:scale-[1.03] motion-reduce:transition-none"
         />
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-4 pe-12">
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-3.5 pe-12">
           <div className="min-w-0 flex-1">
-            <div className="truncate text-sm font-semibold text-white">
+            <div className="truncate text-sm font-semibold leading-tight text-white">
               {run.displayName}
             </div>
           </div>
@@ -83,15 +83,15 @@ const RunningAppCard = memo(function RunningAppCard({
 
       <span
         title={needsAttention ? attentionReasons[0] : run.health.state}
-        className={`pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full ${tone.dot} ${tone.ring}`}
+        className={`pointer-events-none absolute right-3 top-3 h-2.5 w-2.5 rounded-full ${tone.dot} ${tone.ring}`}
       />
 
       {needsAttention ? (
         <span
           title={attentionReasons[0]}
-          className="pointer-events-none absolute right-10 top-3.5 inline-flex items-center rounded-full border border-warn/40 bg-black/40 px-2 py-0.5 text-[0.56rem] font-semibold uppercase tracking-[0.2em] text-warn"
+          className="pointer-events-none absolute right-8 top-2.5 inline-flex items-center rounded-full bg-scrim px-2 py-0.5 text-3xs font-semibold uppercase tracking-[0.2em] text-warn"
         >
-          !
+          <AlertTriangle className="h-3 w-3" strokeWidth={2} aria-hidden="true" />
         </span>
       ) : null}
 
@@ -102,14 +102,14 @@ const RunningAppCard = memo(function RunningAppCard({
           data-testid={`running-app-stop-${run.runId}`}
           aria-label={`Stop ${run.displayName}`}
           disabled={isStopping}
-          className="absolute bottom-3 right-3 h-8 w-8 rounded-full bg-black/70 p-0 text-white/90 transition-all hover:bg-danger/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+          className="absolute bottom-3 right-3 h-8 w-8 rounded-full bg-scrim p-0 text-white transition-colors hover:bg-danger disabled:cursor-not-allowed disabled:opacity-50"
           onClick={(event: MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
             onStopRun(run);
           }}
         >
           {isStopping ? (
-            <span className="h-2 w-2 animate-pulse rounded-full bg-white" />
+            <span className="h-2 w-2 animate-pulse rounded-full bg-white motion-reduce:animate-none" />
           ) : (
             <Square className="h-3.5 w-3.5" aria-hidden />
           )}
@@ -140,7 +140,7 @@ export function RunningAppsRow({
         <h2 className="text-xs-tight font-semibold uppercase tracking-[0.18em] text-accent">
           Running
         </h2>
-        <div className="h-px flex-1 bg-border/30" />
+        <div className="h-px flex-1 bg-border" />
       </div>
 
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
diff --git a/packages/ui/src/components/pages/AppsPageView.tsx b/packages/ui/src/components/pages/AppsPageView.tsx
index 0528ebdbfcd8a..36f560b042df1 100644
--- a/packages/ui/src/components/pages/AppsPageView.tsx
+++ b/packages/ui/src/components/pages/AppsPageView.tsx
@@ -54,6 +54,7 @@ export function AppsPageView() {
     }
   }, [appsSubTab, hasActiveGame, setState]);
 
+
   return (
     <ShellViewAgentSurface viewId="apps">
       {appsSubTab === "games" && hasActiveGame ? (
diff --git a/packages/ui/src/components/pages/GeneratedViewHero.tsx b/packages/ui/src/components/pages/GeneratedViewHero.tsx
index 1d5dd7c390772..3e8124626c613 100644
--- a/packages/ui/src/components/pages/GeneratedViewHero.tsx
+++ b/packages/ui/src/components/pages/GeneratedViewHero.tsx
@@ -33,7 +33,7 @@ const PALETTES: ReadonlyArray<{
   glyph: string;
 }> = [
   // 0 — Signature orange
-  { from: "#ff5800", to: "#ffb070", glyph: "#7a2600" },
+  { from: "var(--accent)", to: "#ffb070", glyph: "#7a2600" },
   // 1 — Warm sand neutral (light, low-chroma)
   { from: "#c9956b", to: "#f3dcc4", glyph: "#5c3d22" },
   // 2 — Ember / deep orange-red
diff --git a/packages/ui/src/components/pages/tutorial/__e2e__/run-tutorial-e2e.mjs b/packages/ui/src/components/pages/tutorial/__e2e__/run-tutorial-e2e.mjs
index 411907cb08afd..0b42f716a6ff7 100644
--- a/packages/ui/src/components/pages/tutorial/__e2e__/run-tutorial-e2e.mjs
+++ b/packages/ui/src/components/pages/tutorial/__e2e__/run-tutorial-e2e.mjs
@@ -147,7 +147,7 @@ try {
       `[${theme.name}] glow color == themed --accent-rgb (glow ${glowRgb} vs accent ${accentRgb})`,
     );
 
-    // The Continue button must use the themed --accent (resolved), not #FF5800.
+    // The Continue button must use the themed --accent (resolved), not a hardcoded orange hex.
     const accentResolved = rgbTriplet(
       await page.evaluate(() => {
         const b = document.querySelector('[data-testid="tutorial-continue"]');
diff --git a/packages/ui/src/components/shell/DefaultHomeWidgets.tsx b/packages/ui/src/components/shell/DefaultHomeWidgets.tsx
index f55788f07a5bb..a922985861316 100644
--- a/packages/ui/src/components/shell/DefaultHomeWidgets.tsx
+++ b/packages/ui/src/components/shell/DefaultHomeWidgets.tsx
@@ -14,18 +14,20 @@ import { cn } from "../../lib/utils";
 import { useAppSelector } from "../../state";
 
 /**
- * The home dashboard's always-on base widgets: a sized grid with the time and
- * weather as 2×2 neighbours. They have no card — white text sits directly on the
- * ambient orange field with a soft shadow for legibility ("background gone" per
- * the home redesign). The time needs only the device clock (offline-safe);
- * weather fetches current conditions from Open-Meteo + device location (see
- * {@link useWeather}) and degrades gracefully.
+ * The home dashboard's always-on base widgets: a deterministic 4-column grid
+ * with the time and weather as 2×2 neighbours. They have no card — white text
+ * sits directly on the ambient orange field with a soft shadow for legibility
+ * ("background gone" per the home redesign). The time needs only the device
+ * clock (offline-safe); weather fetches current conditions from Open-Meteo +
+ * device location (see {@link useWeather}) and degrades gracefully.
  *
  * Always rendered as the base of the home surface — the data-driven WidgetHost
  * cards flow in below it, so the dashboard is never bare.
  */
 
-// White text legibility over the bright orange field, no card behind it.
+// White text legibility over the bright orange field, no card behind it. The
+// wallpaper is a known field (not a theme surface), so `text-white` + this
+// shadow is the intended idiom here rather than themed text tokens.
 const FLOAT_SHADOW = "[text-shadow:0_1px_3px_rgba(0,0,0,0.38)]";
 
 const WEEKDAYS_LONG = [
@@ -69,7 +71,11 @@ function greeting(hour: number): string {
   return "Good night";
 }
 
-/** The weather half of the time/weather pair — a naked 2×2 tile. */
+/**
+ * The weather half of the time/weather pair — a naked 2×2 tile that mirrors the
+ * time tile's footprint (bottom-aligned so the reading settles against the same
+ * baseline band as the greeting, giving the pair a shared horizon).
+ */
 function WeatherTile(): React.JSX.Element {
   const weather = useWeather();
   const Icon = WEATHER_ICON[weather.kind];
@@ -78,36 +84,38 @@ function WeatherTile(): React.JSX.Element {
       data-testid="home-weather"
       data-status={weather.status}
       className={cn(
-        "col-span-2 row-span-2 flex aspect-square flex-col items-center justify-center gap-1 text-center text-white",
+        "col-span-2 row-span-2 flex min-w-0 flex-col items-end justify-end text-right text-white",
         FLOAT_SHADOW,
       )}
     >
       {weather.status === "loading" ? (
-        <div className="text-sm text-white/70">Loading weather…</div>
+        <div className="text-sm text-white/70">Loading…</div>
       ) : weather.status === "unavailable" ? (
         <>
-          <Cloud className="h-8 w-8 text-white/80" aria-hidden />
-          <div className="mt-1 text-sm font-medium text-white/85">Weather</div>
-          <div className="max-w-[8rem] text-xs text-white/65">
-            Enable location to see conditions
+          <Cloud className="h-7 w-7 text-white/70" aria-hidden />
+          <div className="mt-1.5 text-sm font-medium text-white/80">
+            Weather
+          </div>
+          <div className="mt-0.5 max-w-[11rem] text-xs-tight leading-tight text-white/60">
+            Enable location for conditions
           </div>
         </>
       ) : (
         <>
-          <div className="flex items-center justify-center gap-2">
-            <div className="text-[2.75rem] font-semibold leading-none tabular-nums tracking-tight">
+          <div className="flex items-center gap-2">
+            <Icon className="h-7 w-7 text-accent" aria-hidden />
+            <div className="text-4xl font-semibold leading-none tabular-nums tracking-tighter">
               {weather.temp}
-              <span className="align-top text-lg font-medium text-white/70">
+              <span className="align-top text-base font-medium text-white/60">
                 {weather.unit}
               </span>
             </div>
-            <Icon className="h-9 w-9 text-white" aria-hidden />
           </div>
-          <div className="text-sm font-medium text-white/85">
+          <div className="mt-1.5 text-sm font-medium text-white/85">
             {weather.condition}
           </div>
           {weather.city ? (
-            <div className="max-w-[8.5rem] truncate text-xs text-white/60">
+            <div className="mt-0.5 max-w-[9rem] truncate text-xs-tight text-white/60">
               {weather.city}
             </div>
           ) : null}
@@ -146,41 +154,45 @@ export function DefaultHomeWidgets(): React.JSX.Element | null {
   return (
     <div
       data-testid="default-home-widgets"
-      className="grid grid-cols-4 gap-2.5"
+      className="grid grid-cols-4 items-start gap-x-4 gap-y-2"
     >
-      {/* Time — naked 2×2 tile, white text on the ambient field */}
+      {/* Time, the editorial header. Big, left-aligned, with a tight tracking
+          display feel; the date + greeting sit beneath as a quiet stack so the
+          hierarchy is unmistakable (hero numeral, supporting line, soft
+          greeting). White on the ember field with a legibility shadow.
+
+          Hideable from Appearance settings (#10706): only render when the user
+          hasn't hidden the time tile. The tile footprint is reserved immediately;
+          the time text stays invisible (not unmounted) until the live clock
+          ticks, so nothing reflows when the epoch (1970) resolves. */}
       {showTime ? (
         <div
           data-testid="home-time-widget"
           className={cn(
-            "col-span-2 row-span-2 flex aspect-square flex-col items-center justify-center gap-1 text-center text-white",
+            "col-span-2 row-span-2 flex min-w-0 flex-col justify-end text-left text-white",
             FLOAT_SHADOW,
           )}
         >
-          {/* The tile footprint is reserved immediately; the time text stays
-              invisible (not unmounted) until the live clock ticks, so nothing
-              reflows when it appears. */}
-          <div
-            className={cn(
-              "flex flex-col items-center gap-1",
-              !timeReady && "invisible",
-            )}
-          >
-            <div className="text-[3.25rem] font-semibold leading-none tabular-nums tracking-tight">
-              {time}
-              <span className="ml-1.5 align-top text-base font-medium text-white/70">
+          <div className={cn("flex flex-col", !timeReady && "invisible")}>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-6xl font-semibold leading-[0.9] tabular-nums tracking-tighter">
+                {time}
+              </span>
+              <span className="text-base font-semibold uppercase tracking-wide text-white/60">
                 {ampm}
               </span>
             </div>
-            <div className="mt-1 text-sm font-medium text-white/85">
+            <div className="mt-3 text-base font-medium text-white/85">
               {dateLabel}
             </div>
-            <div className="text-xs text-white/65">{greeting(hours)}</div>
+            <div className="mt-1 text-sm font-medium text-accent/90">
+              {greeting(hours)}
+            </div>
           </div>
         </div>
       ) : null}
 
-      {/* Weather — naked 2×2 tile next to the time */}
+      {/* Weather: a quiet right-aligned cluster, not a competing block. */}
       <WeatherTile />
     </div>
   );
diff --git a/packages/ui/src/components/shell/HomeLauncherSurface.tsx b/packages/ui/src/components/shell/HomeLauncherSurface.tsx
index 8866808285aeb..c961f73b11b43 100644
--- a/packages/ui/src/components/shell/HomeLauncherSurface.tsx
+++ b/packages/ui/src/components/shell/HomeLauncherSurface.tsx
@@ -100,7 +100,13 @@ export function HomeLauncherSurface({
       <div
         ref={pager.railRef}
         data-testid="home-launcher-rail"
-        className="absolute inset-0 flex w-[200%]"
+        // `touch-pan-y`: reserve vertical panning for the browser but claim every
+        // horizontal drag across the whole rail for the flick — so a swipe is
+        // never handed to the browser's own scroll/back gesture (which fires
+        // pointercancel instead of pointerup and silently drops the flick). The
+        // two halves also set it; the rail sets it so any gap between them is
+        // covered too.
+        className="absolute inset-0 flex w-[200%] touch-pan-y"
       >
         <div
           data-testid="home-launcher-home-page"
diff --git a/packages/ui/src/components/shell/HomeScreen.tsx b/packages/ui/src/components/shell/HomeScreen.tsx
index daaf572189b97..92e8773ce94ae 100644
--- a/packages/ui/src/components/shell/HomeScreen.tsx
+++ b/packages/ui/src/components/shell/HomeScreen.tsx
@@ -257,19 +257,35 @@ export function HomeScreen({
         )}
       >
         <style>{HOME_ENTER_CSS}</style>
-        <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
+        {/* The content column owns the FULL height of the scroller (min-h-full)
+            and lays its blocks out as a flex column so the vertical space is
+            distributed on purpose, not left as a void above the composer. The
+            editorial header (greeting/clock + weather) anchors the TOP; the
+            prioritized widget stack sits in a `flex-1` breathing region that
+            grows to absorb the reclaimed space and centres its content within
+            it, so an empty widget set reads as calm airiness rather than a
+            broken gap; the AOSP tiles settle at the BOTTOM. */}
+        <div className="mx-auto flex min-h-full w-full max-w-2xl flex-col">
           {/* The always-on base: a naked sized grid with the time + weather as
-            2×2 neighbours and the week strip — no card, white text on the
-            ambient field. */}
+            2×2 neighbours — no card, white text on the ambient field. Anchored
+            at the top of the column as the editorial header. */}
           <div className={enterClass} style={{ animationDelay: "70ms" }}>
             <DefaultHomeWidgets />
           </div>
 
-          {/* The prioritized data widgets (#9143) flow in below the base. Each
-            self-hides when empty, so the host renders nothing until a widget has
-            something to show — the base above keeps the dashboard from ever
-            being just the floating chat. */}
-          <div className={enterClass} style={{ animationDelay: "110ms" }}>
+          {/* The prioritized data widgets (#9143) live in the breathing region:
+            a `flex-1` block that grows to fill the space between the header and
+            the bottom tiles, so the column always spans the full height. Its
+            content is vertically centred within that region — when widgets are
+            present they sit in the visual middle (no top-heavy clustering with a
+            void beneath); when the host self-hides everything, the empty region
+            simply reads as calm, intentional space rather than a dead gap. A
+            little top padding sets the stack apart from the editorial header as
+            its own section. */}
+          <div
+            className={cn(enterClass, "flex flex-1 flex-col justify-center py-6")}
+            style={{ animationDelay: "110ms" }}
+          >
             <WidgetHost
               slot="home"
               layout="grid"
@@ -282,7 +298,7 @@ export function HomeScreen({
             <nav
               aria-label="Apps"
               data-testid="home-tiles"
-              className={cn(enterClass, "mt-2")}
+              className={cn(enterClass, "pt-2")}
               style={{ animationDelay: "150ms" }}
             >
               <div className="grid grid-cols-4 gap-3">
diff --git a/packages/ui/src/components/shell/StartupShell.tsx b/packages/ui/src/components/shell/StartupShell.tsx
index ca8693d9f5c1b..4a52e2f47c649 100644
--- a/packages/ui/src/components/shell/StartupShell.tsx
+++ b/packages/ui/src/components/shell/StartupShell.tsx
@@ -153,7 +153,7 @@ function StartupLoading(props: { phase: string; status: string }) {
 
 function BootstrapGateShell({ children }: { children: ReactNode }) {
   return (
-    <div className="relative flex min-h-full w-full flex-col bg-[#F7F6F4] text-[#1b1b1b]">
+    <div className="relative flex min-h-full w-full flex-col bg-bg text-txt">
       <div className="relative z-10 flex flex-1 items-center justify-center px-4 pb-[max(1.5rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)_+_3.75rem)] sm:px-6 md:px-8">
         <div className="flex w-full max-w-[32rem] flex-col items-center gap-4">
           {children}
diff --git a/packages/ui/src/state/ui-preferences.ts b/packages/ui/src/state/ui-preferences.ts
index 4b08532ea376d..efbce17ca9ad7 100644
--- a/packages/ui/src/state/ui-preferences.ts
+++ b/packages/ui/src/state/ui-preferences.ts
@@ -54,8 +54,21 @@ export interface BackgroundConfig {
   shader?: ShaderConfig;
 }
 
-/** The default shader color — preserves the prior warm-orange home look. */
-export const DEFAULT_BACKGROUND_COLOR = "#ef5a1f";
+/**
+ * The default shader base: a warm near-black field (NOT a saturated orange
+ * wall). The home reads as a banked ember in a dark room, a deep brown-black
+ * substrate the orange glow breathes against, so content stays legible and the
+ * accent stays an accent. The old default (#ef5a1f) flooded the whole viewport
+ * with bright orange and washed every surface out.
+ */
+export const DEFAULT_BACKGROUND_COLOR = "#160d07";
+
+/**
+ * The ember glow hue layered over {@link DEFAULT_BACKGROUND_COLOR} by the
+ * shader: the warm orange that gives the dark field its banked-fire warmth
+ * without becoming the field itself. Matches the brand accent.
+ */
+export const DEFAULT_BACKGROUND_GLOW = "#ff6a1f";
 
 export const DEFAULT_BACKGROUND_CONFIG: BackgroundConfig = {
   mode: "shader",
@@ -79,15 +92,15 @@ export interface BackgroundPreset {
  * live, breathing shader field — not a flat fill.
  */
 export const BACKGROUND_PRESETS: readonly BackgroundPreset[] = [
-  { id: "orange", label: "Orange", color: DEFAULT_BACKGROUND_COLOR },
-  { id: "amber", label: "Amber", color: "#f59e0b" },
-  { id: "rose", label: "Rose", color: "#e11d48" },
-  { id: "red", label: "Red", color: "#dc2626" },
-  { id: "green", label: "Green", color: "#059669" },
-  { id: "olive", label: "Olive", color: "#65a30d" },
-  { id: "stone", label: "Stone", color: "#57534e" },
-  { id: "graphite", label: "Graphite", color: "#3f3f46" },
-  { id: "black", label: "Black", color: "#0a0a0a" },
+  { id: "ember", label: "Ember", color: DEFAULT_BACKGROUND_COLOR },
+  { id: "amber", label: "Amber", color: "#1a120a" },
+  { id: "rose", label: "Rose", color: "#190b0f" },
+  { id: "plum", label: "Plum", color: "#140b14" },
+  { id: "forest", label: "Forest", color: "#0b1410" },
+  { id: "olive", label: "Olive", color: "#11130a" },
+  { id: "stone", label: "Stone", color: "#16140f" },
+  { id: "graphite", label: "Graphite", color: "#101013" },
+  { id: "ink", label: "Ink", color: "#0a0a0c" },
   { id: "light", label: "Light", color: "#f4f4f5" },
 ];
 
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 1cf0fd3abe4a2..b99cd5938b0fc 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -3,9 +3,14 @@
 :root {
   /* Legacy alias retained for old theme references, neutralized per #8796. */
   --brand-blue: rgba(0, 0, 0, 0.6);
-  --brand-orange: #ff8a24;
-  --brand-black: #000000;
-  --brand-white: #ffffff;
+  /* Brand accent: warm orange (#ff6a1f). The prior #ff8a24 skewed yellow; this
+     is the locked Sol accent. */
+  --brand-orange: #ff6a1f;
+  /* No pure black anywhere. The brand near-black is a deep warm brown-black so
+     every dark surface carries a hint of ember warmth (pure #000 reads cold and
+     cheap, and never appears in the 2am editorial reference). */
+  --brand-black: #140c07;
+  --brand-white: #fdfaf7;
   --brand-gray: #d1d0d4;
   --sky-0: rgba(0, 0, 0, 0.6);
   --sky-1: rgba(0, 0, 0, 0.74);
@@ -45,10 +50,10 @@
 
   /* Accent */
   --accent: var(--brand-orange);
-  --accent-rgb: 255, 88, 0;
-  --accent-hover: #e54f00;
+  --accent-rgb: 255, 106, 31;
+  --accent-hover: #ff7d3a;
   --accent-muted: #c94400;
-  --accent-subtle: rgba(255, 88, 0, 0.14);
+  --accent-subtle: rgba(255, 106, 31, 0.14);
   --accent-foreground: var(--brand-white);
   --primary: var(--brand-orange);
   --primary-foreground: var(--brand-white);
@@ -59,10 +64,10 @@
   --ok-subtle: rgba(34, 197, 94, 0.12);
   --destructive: var(--brand-orange);
   --destructive-foreground: var(--brand-white);
-  --destructive-subtle: rgba(255, 88, 0, 0.12);
+  --destructive-subtle: rgba(255, 106, 31, 0.12);
   --warn: var(--brand-orange);
-  --warn-muted: rgba(255, 88, 0, 0.72);
-  --warn-subtle: rgba(255, 88, 0, 0.14);
+  --warn-muted: rgba(255, 106, 31, 0.72);
+  --warn-subtle: rgba(255, 106, 31, 0.14);
   --danger: var(--brand-orange);
   --info: var(--muted-strong);
 
@@ -78,7 +83,7 @@
   --status-info: var(--muted-strong);
   --status-info-bg: rgba(0, 0, 0, 0.06);
 
-  --focus: rgba(255, 88, 0, 0.2);
+  --focus: rgba(255, 106, 31, 0.2);
   --focus-ring: none;
   --scrollbar-track: rgba(255, 255, 255, 0.3);
   --scrollbar-thumb-start: rgba(0, 0, 0, 0.22);
@@ -113,16 +118,18 @@
   --shadow-xl: none;
   --shadow-2xl: none;
   --shadow-inset: none;
-  /* Brand: slight xs rounding. Never hard-edged, never pill-shaped. */
-  --radius-xs: 3px;
-  --radius-sm: var(--radius-xs);
-  --radius-md: var(--radius-xs);
-  --radius-lg: var(--radius-xs);
-  --radius-xl: var(--radius-xs);
-  --radius-2xl: var(--radius-xs);
-  --radius-3xl: var(--radius-xs);
+  /* A soft, intimate radius ramp. A companion surface should feel rounded and
+     calm, not hard-edged/utilitarian, but still restrained (no toy-like pills).
+     The ramp grows so chips stay tight while cards/sheets relax. */
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 11px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --radius-2xl: 22px;
+  --radius-3xl: 28px;
   --radius-full: 9999px;
-  --radius: var(--radius-xs);
+  --radius: var(--radius-md);
   --duration-normal: 150ms;
 
   /* Compact text sizes (replaces arbitrary text-[9px], text-[10px], text-[11px]) */
@@ -164,7 +171,15 @@
   --bg-hover: rgba(255, 255, 255, 0.08);
   --bg-muted: rgba(255, 255, 255, 0.06);
 
-  --card: rgba(0, 0, 0, 0.72);
+  /* Warm-dark SOLID surfaces. The home/chat float over a warm ember field, so a
+     translucent-black card let the field bleed through (the #1 "too
+     transparent" complaint). These are opaque warm near-blacks: an elevated
+     card tone and a hair-lighter raised tone, each tinted toward the ember so
+     they sit in the world instead of punching a cold hole in it. */
+  --surface-1: #1d130c;
+  --surface-2: #251810;
+  --surface-3: #2f1f15;
+  --card: var(--surface-1);
   --card-foreground: var(--brand-white);
   --surface: rgba(255, 255, 255, 0.06);
 
@@ -172,8 +187,10 @@
   --text-strong: var(--brand-white);
   --chat-text: var(--brand-white);
   --txt: var(--text);
-  --muted: rgba(255, 255, 255, 0.58);
-  --muted-strong: rgba(255, 255, 255, 0.74);
+  /* Warm-tinted muted text (toward the brand hue) reads richer than flat white
+     alpha on a warm-dark field. */
+  --muted: rgba(255, 240, 230, 0.56);
+  --muted-strong: rgba(255, 244, 236, 0.76);
 
   /* shadcn token aliases */
   --foreground: var(--text);
@@ -187,10 +204,10 @@
   --ring: var(--brand-orange);
 
   --accent: var(--brand-orange);
-  --accent-rgb: 255, 88, 0;
-  --accent-hover: #ff6d1f;
+  --accent-rgb: 255, 106, 31;
+  --accent-hover: #ff7d3a;
   --accent-muted: #c94400;
-  --accent-subtle: rgba(255, 88, 0, 0.14);
+  --accent-subtle: rgba(255, 106, 31, 0.16);
   --accent-foreground: var(--brand-white);
   --primary: var(--brand-orange);
   --primary-foreground: var(--brand-white);
@@ -200,10 +217,10 @@
   --ok-subtle: rgba(74, 222, 128, 0.12);
   --destructive: var(--brand-orange);
   --destructive-foreground: var(--brand-white);
-  --destructive-subtle: rgba(255, 88, 0, 0.12);
+  --destructive-subtle: rgba(255, 106, 31, 0.12);
   --warn: var(--brand-orange);
-  --warn-muted: rgba(255, 88, 0, 0.7);
-  --warn-subtle: rgba(255, 88, 0, 0.12);
+  --warn-muted: rgba(255, 106, 31, 0.7);
+  --warn-subtle: rgba(255, 106, 31, 0.12);
   --danger: var(--brand-orange);
   --info: var(--muted-strong);
 
@@ -217,7 +234,7 @@
   --status-info: var(--muted-strong);
   --status-info-bg: rgba(255, 255, 255, 0.08);
 
-  --focus: rgba(255, 88, 0, 0.22);
+  --focus: rgba(255, 106, 31, 0.22);
   --focus-ring: none;
   --scrollbar-track: transparent;
   --scrollbar-thumb-start: rgba(255, 255, 255, 0.32);
diff --git a/packages/ui/src/styles/styles.css b/packages/ui/src/styles/styles.css
index 825957e26ac3e..eb0579ff587dc 100644
--- a/packages/ui/src/styles/styles.css
+++ b/packages/ui/src/styles/styles.css
@@ -38,13 +38,30 @@ electrobun-wgpu {
 
 /* ── Global resets ──────────────────────────────────────────────────── */
 
+/* LAUNCH / BASE BACKGROUND (the orange-bottom-band fix, reported 3x on
+   mobile): the html/body/#root base color is what bleeds through wherever the
+   app's fixed-position background layers don't reach — most visibly the iOS
+   home-indicator safe-area below the composer and the overscroll zones. It
+   MUST be the DARK app background (--brand-black #140c07, theme.css), never
+   the bright brand orange: a dark bleed is invisible against the dark app, an
+   orange one reads as a glowing band. index.html's inline FOUC guard still
+   seeds --launch-bg as orange pre-CSS (we can't edit index.html here), so this
+   :root re-declaration — loaded AFTER the inline <style>, same specificity —
+   wins the cascade the moment the real stylesheet lands and flips every
+   var(--launch-bg) consumer (html/body/#root here, the StartupShell loader,
+   the preboot shell) to dark. Only the brief pre-stylesheet flash stays
+   orange. Keep the var indirection: it remains the whitelabel seam. */
+:root {
+  --launch-bg: #140c07;
+}
+
 html,
 body {
   width: 100%;
   max-width: 100%;
   height: 100%;
   margin: 0;
-  background: var(--launch-bg, #ef5a1f);
+  background: var(--launch-bg, #140c07);
   overflow: hidden;
   /* Split the axes instead of a blanket `overscroll-behavior: none`.
      `-y: none` keeps the vertical rubber-band / pull-to-refresh suppression
@@ -69,7 +86,7 @@ body {
   overflow: hidden;
   font-family: var(--font-body);
   color: var(--text);
-  background: var(--launch-bg, #ef5a1f);
+  background: var(--launch-bg, #140c07);
 }
 
 html.eliza-chat-overlay-shell,
diff --git a/packages/ui/src/styles/tailwind-theme.css b/packages/ui/src/styles/tailwind-theme.css
index 270ffca16a991..e7ab9722b94fd 100644
--- a/packages/ui/src/styles/tailwind-theme.css
+++ b/packages/ui/src/styles/tailwind-theme.css
@@ -16,6 +16,7 @@
   --color-card: var(--card);
   --color-card-fg: var(--card-foreground);
   --color-surface: var(--surface);
+  --color-scrim: var(--scrim);
 
   --color-txt: var(--text);
   --color-txt-strong: var(--text-strong);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index a3c776004619d..5f55793ea8b33 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -3,9 +3,9 @@
      stragglers that still reference it don't render blue. The Eliza Cloud
      palette is black + white + orange accent only. */
   --brand-blue: rgba(0, 0, 0, 0.6);
-  --brand-orange: #ff8a24;
-  --brand-black: #000000;
-  --brand-white: #ffffff;
+  --brand-orange: #ff6a1f;
+  --brand-black: #140c07;
+  --brand-white: #fdfaf7;
   --sky-0: rgba(0, 0, 0, 0.8);
   --sky-1: rgba(0, 0, 0, 0.6);
   --sky-2: var(--brand-white);
@@ -25,26 +25,31 @@
   --muted-strong: rgba(0, 0, 0, 0.74);
   --border: rgba(0, 0, 0, 0.12);
   --border-strong: rgba(0, 0, 0, 0.22);
+  /* Modal/drawer scrim: brand black at a fixed dim so an open sheet reads as a
+     genuine backdrop (never off-palette "ember" rgba). */
+  --scrim: rgba(20, 12, 7, 0.7);
   --accent: var(--brand-orange);
-  --accent-rgb: 255, 88, 0;
+  --accent-rgb: 255, 106, 31;
   --accent-foreground: var(--brand-white);
-  --accent-subtle: rgba(255, 88, 0, 0.14);
+  --accent-subtle: rgba(255, 106, 31, 0.14);
   --destructive: var(--brand-orange);
   --destructive-foreground: var(--brand-white);
-  --destructive-subtle: rgba(255, 88, 0, 0.12);
+  --destructive-subtle: rgba(255, 106, 31, 0.12);
   --status-success: #22c55e;
   --status-success-bg: rgba(34, 197, 94, 0.12);
   --status-danger: var(--brand-orange);
-  --status-danger-bg: rgba(255, 88, 0, 0.12);
+  --status-danger-bg: rgba(255, 106, 31, 0.12);
   --status-warning: var(--brand-orange);
-  --status-warning-bg: rgba(255, 88, 0, 0.14);
+  --status-warning-bg: rgba(255, 106, 31, 0.14);
   --status-info: rgba(0, 0, 0, 0.7);
   --status-info-bg: rgba(0, 0, 0, 0.06);
   /* `--info` (base.css) maps to brand-blue; neutralize it here too so any
      `info` utility renders neutral, not blue. */
   --info: rgba(0, 0, 0, 0.7);
   --info-bg: rgba(0, 0, 0, 0.06);
-  --font-sans: "Poppins", Arial, system-ui, sans-serif;
+  --font-sans:
+    "Poppins", "Poppins Variable", system-ui, -apple-system, "Segoe UI", Arial,
+    sans-serif;
   --font-body: var(--font-sans);
   --font-display: var(--font-body);
   --font-chat: var(--font-body);
@@ -59,29 +64,35 @@
   --bg-elevated: rgba(255, 255, 255, 0.04);
   --bg-hover: rgba(255, 255, 255, 0.08);
   --bg-muted: rgba(255, 255, 255, 0.06);
-  --card: rgba(0, 0, 0, 0.72);
+  --surface-1: #1d130c;
+  --surface-2: #251810;
+  --surface-3: #2f1f15;
+  --card: var(--surface-1);
   --card-foreground: var(--brand-white);
   --surface: rgba(255, 255, 255, 0.06);
   --text: var(--brand-white);
   --text-strong: var(--brand-white);
   --txt: var(--text);
-  --muted: rgba(255, 255, 255, 0.58);
-  --muted-strong: rgba(255, 255, 255, 0.74);
+  --muted: rgba(255, 240, 230, 0.56);
+  --muted-strong: rgba(255, 244, 236, 0.76);
   --border: rgba(255, 255, 255, 0.12);
   --border-strong: rgba(255, 255, 255, 0.22);
+  /* Modal/drawer scrim: brand black at a fixed dim so an open sheet reads as a
+     genuine backdrop (never off-palette "ember" rgba). */
+  --scrim: rgba(20, 12, 7, 0.72);
   --accent: var(--brand-orange);
-  --accent-rgb: 255, 88, 0;
+  --accent-rgb: 255, 106, 31;
   --accent-foreground: var(--brand-white);
-  --accent-subtle: rgba(255, 88, 0, 0.14);
+  --accent-subtle: rgba(255, 106, 31, 0.14);
   --destructive: var(--brand-orange);
   --destructive-foreground: var(--brand-white);
-  --destructive-subtle: rgba(255, 88, 0, 0.12);
+  --destructive-subtle: rgba(255, 106, 31, 0.12);
   --status-success: #4ade80;
   --status-success-bg: rgba(74, 222, 128, 0.16);
   --status-danger: var(--brand-orange);
-  --status-danger-bg: rgba(255, 88, 0, 0.12);
+  --status-danger-bg: rgba(255, 106, 31, 0.12);
   --status-warning: var(--brand-orange);
-  --status-warning-bg: rgba(255, 88, 0, 0.12);
+  --status-warning-bg: rgba(255, 106, 31, 0.12);
   --status-info: rgba(255, 255, 255, 0.7);
   --status-info-bg: rgba(255, 255, 255, 0.06);
   --info: rgba(255, 255, 255, 0.7);
diff --git a/packages/ui/src/widgets/WidgetHost.tsx b/packages/ui/src/widgets/WidgetHost.tsx
index ada19acbfbcfc..1a46667553a90 100644
--- a/packages/ui/src/widgets/WidgetHost.tsx
+++ b/packages/ui/src/widgets/WidgetHost.tsx
@@ -145,16 +145,17 @@ function isWidgetSlot(value: string): value is WidgetSlot {
 /**
  * Map a home widget's declared `size` to STATIC Tailwind grid-span classes.
  * The classes are spelled out as literals (never interpolated) so Tailwind's
- * content scanner keeps them. Default footprint is 2x1.
+ * content scanner keeps them.
+ *
+ * The home dashboard reads best as a vertical stack of full-width rows: the
+ * widgets are the hero, so each glanceable card gets a full row with a visible
+ * label + datum rather than being crammed two-up (which truncated labels to
+ * "New …" and "Website Build and …"). A `cols: 1` chip stays half-width for the
+ * rare compact pair; everything `cols: 2`+ spans the full 4-col grid.
  */
 function spanClassForSize(size: PluginWidgetDeclaration["size"]): string {
-  if (!size) return "col-span-2 row-span-1";
-  const cols =
-    size.cols === 1
-      ? "col-span-1"
-      : size.cols === 4
-        ? "col-span-4"
-        : "col-span-2";
+  if (!size) return "col-span-4 row-span-1";
+  const cols = size.cols === 1 ? "col-span-2" : "col-span-4";
   const rows = size.rows === 2 ? "row-span-2" : "row-span-1";
   return `${cols} ${rows}`;
 }
@@ -240,7 +241,6 @@ export function WidgetHost({
     );
   }, [plugins]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: registryVersion re-runs resolveWidgetsForSlot so an idle-registered widget is picked up
   const resolved = useMemo(() => {
     const all = resolveWidgetsForSlot(slot, plugins ?? [], serverDeclarations);
     const fullAppShellRoutesEnabled =
@@ -445,7 +445,7 @@ export function WidgetHost({
   // and non-grid layouts stay a vertical stack.
   const layoutClass =
     slot === "home"
-      ? "grid grid-cols-4 gap-2.5"
+      ? "grid grid-cols-4 gap-2.5 [grid-auto-rows:min-content]"
       : layout === "grid"
         ? "grid grid-cols-1 gap-3 sm:grid-cols-2"
         : "flex flex-col gap-3";
diff --git a/packages/ui/src/widgets/home-priority.test.ts b/packages/ui/src/widgets/home-priority.test.ts
index 4d39b3188e87c..03371ec2912c3 100644
--- a/packages/ui/src/widgets/home-priority.test.ts
+++ b/packages/ui/src/widgets/home-priority.test.ts
@@ -5,16 +5,22 @@
 import { describe, expect, it } from "vitest";
 import {
   baseHomeScore,
+  HOME_MIN_SEVERITY,
+  HOME_NOTIFICATION_MAX_AGE_MS,
   HOME_SIGNAL_WEIGHTS,
+  type HomeGroupedNotification,
   type HomeWidgetSignal,
   homeSignalsFromEvents,
   homeSignalsFromNotifications,
   homeSignalWeight,
+  isHomeWorthy,
   type RankableContentNotification,
+  type RankableHomeNotification,
   type RankableHomeWidget,
   rankHomeNotifications,
   rankHomeWidgets,
   scoreHomeWidget,
+  selectHomeNotifications,
   signalKindForEventType,
 } from "./home-priority";
 
@@ -423,3 +429,177 @@ describe("rankHomeNotifications — content-item priority", () => {
     expect(ranked.map((x) => x.id)).toEqual(["a", "b", "c"]);
   });
 });
+
+// The home quiet-threshold + grouping layer (signal, not noise). The full inbox
+// never calls these; only the home widget does.
+describe("isHomeWorthy — home quiet threshold", () => {
+  const hn = (
+    patch: Partial<RankableHomeNotification> = {},
+  ): RankableHomeNotification => ({
+    priority: "high",
+    category: "general",
+    createdAt: NOW,
+    readAt: null,
+    ...patch,
+  });
+
+  it("admits an unread, recent, high-severity notification", () => {
+    expect(isHomeWorthy(hn(), { now: NOW })).toBe(true);
+  });
+
+  it("rejects a read notification (already acknowledged = not signal)", () => {
+    expect(isHomeWorthy(hn({ readAt: NOW }), { now: NOW })).toBe(false);
+  });
+
+  it("rejects below-threshold severity (normal/low stay in the inbox)", () => {
+    expect(isHomeWorthy(hn({ priority: "normal" }), { now: NOW })).toBe(false);
+    expect(isHomeWorthy(hn({ priority: "low" }), { now: NOW })).toBe(false);
+  });
+
+  it("admits urgent (>= HOME_MIN_SEVERITY)", () => {
+    expect(isHomeWorthy(hn({ priority: "urgent" }), { now: NOW })).toBe(true);
+  });
+
+  it("rejects a stale notification past the recency window", () => {
+    const old = hn({ createdAt: NOW - HOME_NOTIFICATION_MAX_AGE_MS - 1 });
+    expect(isHomeWorthy(old, { now: NOW })).toBe(false);
+  });
+
+  it("does NOT age-filter on the deterministic first render (now === 0)", () => {
+    // useNow returns 0 on first paint; a fresh high notification must still show.
+    expect(isHomeWorthy(hn({ createdAt: NOW }), { now: 0 })).toBe(true);
+  });
+
+  it("HOME_MIN_SEVERITY is `high` (2) by default", () => {
+    expect(HOME_MIN_SEVERITY).toBe(2);
+  });
+
+  it("a lowered minSeverity lets normal notifications through", () => {
+    expect(
+      isHomeWorthy(hn({ priority: "normal" }), { now: NOW, minSeverity: 1 }),
+    ).toBe(true);
+  });
+
+  it("unreadOnly:false lets a read (but important, recent) notification through", () => {
+    expect(
+      isHomeWorthy(hn({ readAt: NOW }), { now: NOW, unreadOnly: false }),
+    ).toBe(true);
+  });
+});
+
+describe("selectHomeNotifications — quiet + category grouping", () => {
+  const hn = (
+    id: string,
+    patch: Partial<RankableHomeNotification> = {},
+  ): RankableHomeNotification & { id: string } => ({
+    id,
+    priority: "high",
+    category: "general",
+    createdAt: NOW,
+    readAt: null,
+    ...patch,
+  });
+
+  it("drops everything below the quiet threshold (near-empty unless it matters)", () => {
+    const entries = selectHomeNotifications(
+      [
+        hn("normal", { priority: "normal" }),
+        hn("low", { priority: "low" }),
+        hn("read-urgent", { priority: "urgent", readAt: NOW }),
+        hn("stale-high", { createdAt: NOW - HOME_NOTIFICATION_MAX_AGE_MS - 1 }),
+      ],
+      { now: NOW },
+    );
+    // All four fail the threshold (low severity / read / stale) → nothing surfaces.
+    expect(entries).toEqual([]);
+  });
+
+  it("keeps a single home-worthy notification as a single entry", () => {
+    const entries = selectHomeNotifications(
+      [hn("a", { category: "health", priority: "urgent" })],
+      { now: NOW },
+    );
+    expect(entries).toHaveLength(1);
+    expect(entries[0].kind).toBe("single");
+  });
+
+  it("collapses same-category notifications into ONE grouped row", () => {
+    const entries = selectHomeNotifications(
+      [
+        hn("h1", { category: "health" }),
+        hn("h2", { category: "health" }),
+        hn("h3", { category: "health" }),
+      ],
+      { now: NOW },
+    );
+    expect(entries).toHaveLength(1);
+    expect(entries[0].kind).toBe("group");
+    const group = entries[0] as HomeGroupedNotification<
+      RankableHomeNotification & { id: string }
+    >;
+    expect(group.category).toBe("health");
+    expect(group.count).toBe(3);
+    expect(group.members).toHaveLength(3);
+  });
+
+  it("mixes singles and groups: a lone category stays single, a chatty one collapses", () => {
+    const entries = selectHomeNotifications(
+      [
+        hn("lone", { category: "approval", priority: "urgent" }),
+        hn("t1", { category: "task" }),
+        hn("t2", { category: "task" }),
+      ],
+      { now: NOW },
+    );
+    const kinds = entries.map((e) => e.kind).sort();
+    expect(kinds).toEqual(["group", "single"]);
+    const group = entries.find((e) => e.kind === "group") as
+      | HomeGroupedNotification<RankableHomeNotification & { id: string }>
+      | undefined;
+    expect(group?.category).toBe("task");
+    expect(group?.count).toBe(2);
+  });
+
+  it("the group lead is the highest-attention member (urgent over high)", () => {
+    const entries = selectHomeNotifications(
+      [
+        hn("high", { category: "task", priority: "high", createdAt: NOW }),
+        hn("urgent", {
+          category: "task",
+          priority: "urgent",
+          createdAt: NOW - 5_000,
+        }),
+      ],
+      { now: NOW },
+    );
+    const group = entries[0] as HomeGroupedNotification<
+      RankableHomeNotification & { id: string }
+    >;
+    expect(group.kind).toBe("group");
+    expect(group.lead.id).toBe("urgent");
+  });
+
+  it("groupByCategory:false keeps every eligible notification as its own row", () => {
+    const entries = selectHomeNotifications(
+      [
+        hn("h1", { category: "health" }),
+        hn("h2", { category: "health" }),
+      ],
+      { now: NOW, groupByCategory: false },
+    );
+    expect(entries).toHaveLength(2);
+    expect(entries.every((e) => e.kind === "single")).toBe(true);
+  });
+
+  it("groupMinSize gates collapsing (raise it and a pair stays as singles)", () => {
+    const entries = selectHomeNotifications(
+      [
+        hn("h1", { category: "health" }),
+        hn("h2", { category: "health" }),
+      ],
+      { now: NOW, groupMinSize: 3 },
+    );
+    expect(entries).toHaveLength(2);
+    expect(entries.every((e) => e.kind === "single")).toBe(true);
+  });
+});
diff --git a/packages/ui/src/widgets/home-priority.ts b/packages/ui/src/widgets/home-priority.ts
index b8796bafb3585..80d775be676fe 100644
--- a/packages/ui/src/widgets/home-priority.ts
+++ b/packages/ui/src/widgets/home-priority.ts
@@ -305,6 +305,202 @@ export function rankHomeNotifications<T extends RankableContentNotification>(
     .map((entry) => entry.item);
 }
 
+// ---------------------------------------------------------------------------
+// Home notification QUIET-THRESHOLD + GROUPING (signal, not noise).
+//
+// The frontpage notification widget was showing every recent notification, so
+// a burst of low-value informational items read as a wall of noise. This layer
+// makes the HOME surface aggressively quiet:
+//   1. A relevance threshold — only unread, recent, and important-enough
+//      notifications are eligible for home. Everything else still lives in the
+//      full inbox/pull-down; it just never clutters home.
+//   2. Category grouping — when several eligible notifications share a category,
+//      they collapse into ONE grouped row ("N updates from X") instead of N
+//      rows, so a chatty source can't dominate the surface.
+// Pure + deterministic: `now` flows in from the caller (no Date.now in render).
+// The inbox/pull-down is unaffected — only `selectHomeNotifications` applies
+// this, and only the home widget calls it.
+// ---------------------------------------------------------------------------
+
+/**
+ * Home quiet-threshold + grouping knobs. Exported so the home widget shares one
+ * notion of "what deserves home" and Shadow can dial the aggressiveness later
+ * without touching the algorithm.
+ */
+export interface HomeNotificationQuietOptions {
+  /** Current time (epoch-ms). Passed in for determinism + testability. */
+  now: number;
+  /**
+   * Minimum priority rank a notification must reach to be eligible for home.
+   * Defaults to {@link HOME_MIN_SEVERITY}. Notifications below this never appear
+   * on home (they remain in the full inbox).
+   */
+  minSeverity?: number;
+  /**
+   * Only notifications newer than this age (epoch-ms delta) are eligible.
+   * Defaults to {@link HOME_NOTIFICATION_MAX_AGE_MS}. A stale notification —
+   * however important it once was — isn't "act now" and shouldn't sit on home.
+   */
+  maxAgeMs?: number;
+  /**
+   * When true (default), only UNREAD notifications are eligible for home.
+   * A read notification has already been acknowledged, so it's not signal.
+   */
+  unreadOnly?: boolean;
+  /**
+   * When true (default), collapse eligible notifications that share a category
+   * into a single grouped row. Set false to keep every eligible notification as
+   * its own row (grouping off).
+   */
+  groupByCategory?: boolean;
+  /**
+   * A category needs at least this many eligible notifications before it
+   * collapses into a grouped row; below it, its notifications stay as single
+   * rows. Defaults to {@link HOME_GROUP_MIN_SIZE}.
+   */
+  groupMinSize?: number;
+}
+
+/**
+ * The default relevance floor for the home surface: only `high` and `urgent`
+ * notifications are important enough to interrupt the home glance. `normal` and
+ * `low` land silently in the inbox. Raise/lower to dial the quiet.
+ * (2 === `high` in {@link NOTIFICATION_PRIORITY_RANK}.)
+ */
+export const HOME_MIN_SEVERITY = NOTIFICATION_PRIORITY_RANK.high; // 2
+
+/**
+ * How recent a notification must be to be eligible for home. Older than this
+ * and it's history, not a live signal. 6h mirrors the widget attention window.
+ */
+export const HOME_NOTIFICATION_MAX_AGE_MS = 6 * 60 * 60_000;
+
+/** Group a category into one row once it has at least this many eligible items. */
+export const HOME_GROUP_MIN_SIZE = 2;
+
+/** Group notifications by their category by default. */
+export const GROUP_BY_CATEGORY = true;
+
+/** Minimal notification shape the home quiet/grouping layer needs. */
+export interface RankableHomeNotification extends RankableContentNotification {
+  /** Producer category — the grouping key. */
+  category?: string;
+}
+
+/** A single notification eligible for the home surface. */
+export interface HomeSingleNotification<T> {
+  kind: "single";
+  notification: T;
+}
+
+/** A collapsed group of same-category notifications on the home surface. */
+export interface HomeGroupedNotification<T> {
+  kind: "group";
+  /** The shared category the group collapses. */
+  category: string;
+  /** How many notifications this row stands in for. */
+  count: number;
+  /** The highest-attention member (drives icon/priority/deep-link of the row). */
+  lead: T;
+  /** Every member, ranked (lead first) — for expansion / a11y. */
+  members: T[];
+}
+
+/** A home notification entry: either one notification or a collapsed group. */
+export type HomeNotificationEntry<T> =
+  | HomeSingleNotification<T>
+  | HomeGroupedNotification<T>;
+
+/** Numeric priority rank of a notification (higher = more urgent). */
+function priorityRank(priority: string | undefined): number {
+  return NOTIFICATION_PRIORITY_RANK[priority ?? "normal"] ?? 1;
+}
+
+/**
+ * Whether a notification clears the home quiet threshold: important enough
+ * (severity), fresh enough (recency), and unacknowledged (unread) to be worth
+ * interrupting the home glance. Everything failing this stays in the full inbox.
+ */
+export function isHomeWorthy(
+  notification: RankableHomeNotification,
+  opts: HomeNotificationQuietOptions,
+): boolean {
+  const unreadOnly = opts.unreadOnly ?? true;
+  if (unreadOnly && notification.readAt) return false;
+
+  const minSeverity = opts.minSeverity ?? HOME_MIN_SEVERITY;
+  if (priorityRank(notification.priority) < minSeverity) return false;
+
+  const maxAgeMs = opts.maxAgeMs ?? HOME_NOTIFICATION_MAX_AGE_MS;
+  // `now === 0` is the deterministic first-render sentinel (see useNow) — don't
+  // age-gate against it, or the home surface flashes empty on first paint.
+  if (opts.now > 0 && opts.now - notification.createdAt >= maxAgeMs) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Aggressively reduce the notification list to a QUIET, GROUPED set for the
+ * home surface:
+ *   1. Drop everything below the quiet threshold ({@link isHomeWorthy}).
+ *   2. Rank the survivors by attention ({@link rankHomeNotifications}).
+ *   3. Collapse same-category runs into one grouped row once a category has
+ *      `groupMinSize`+ survivors, so a chatty source contributes a single
+ *      "N updates" row instead of N rows.
+ * Returns home ENTRIES (single | group) in attention order — the lead of each
+ * group is the highest-attention member, and groups sit where their lead ranks.
+ *
+ * The full inbox/pull-down does NOT call this — it's home-only. Pure + stable.
+ */
+export function selectHomeNotifications<T extends RankableHomeNotification>(
+  notifications: readonly T[],
+  opts: HomeNotificationQuietOptions,
+): HomeNotificationEntry<T>[] {
+  const eligible = notifications.filter((n) => isHomeWorthy(n, opts));
+  const ranked = rankHomeNotifications(eligible);
+
+  const groupByCategory = opts.groupByCategory ?? GROUP_BY_CATEGORY;
+  if (!groupByCategory) {
+    return ranked.map((notification) => ({ kind: "single", notification }));
+  }
+
+  const groupMinSize = opts.groupMinSize ?? HOME_GROUP_MIN_SIZE;
+
+  // Count survivors per category so we know which categories are chatty enough
+  // to collapse. A category below the threshold keeps its rows individual.
+  const categoryCounts = new Map<string, number>();
+  for (const n of ranked) {
+    const cat = n.category ?? "general";
+    categoryCounts.set(cat, (categoryCounts.get(cat) ?? 0) + 1);
+  }
+
+  const entries: HomeNotificationEntry<T>[] = [];
+  const seenGroupCategory = new Set<string>();
+  for (const notification of ranked) {
+    const category = notification.category ?? "general";
+    const count = categoryCounts.get(category) ?? 1;
+    if (count < groupMinSize) {
+      entries.push({ kind: "single", notification });
+      continue;
+    }
+    // Chatty category → one grouped row, placed where its lead (highest-
+    // attention member) ranks. Since `ranked` is attention-ordered, the first
+    // member we hit for this category is the lead.
+    if (seenGroupCategory.has(category)) continue;
+    seenGroupCategory.add(category);
+    const members = ranked.filter((n) => (n.category ?? "general") === category);
+    entries.push({
+      kind: "group",
+      category,
+      count: members.length,
+      lead: members[0],
+      members,
+    });
+  }
+  return entries;
+}
+
 /** Minimal activity-event shape the signal derivation needs. */
 export interface RankableActivityEvent {
   eventType: string;