diff --git a/ui/package.json b/ui/package.json
index 42643b18..16127c6a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "dev:demo": "vite --mode demo",
+    "dev:design": "vite --mode demo --host 127.0.0.1 --port 5173",
     "build": "tsc -b && vite build",
     "build:demo": "tsc -b && vite build --mode demo",
     "preview": "vite preview",
@@ -47,4 +48,4 @@
       "public"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index ef32fd5f..d4b477aa 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -58,6 +58,7 @@ function AppShell() {
   const section = findSectionForActivity(selectedSidebar)
   const isDesktop = useIsDesktop()
   const showSidebarPanel = isDesktop && section != null
+  const showDemoBanner = import.meta.env.VITE_DEMO_MODE && import.meta.env.VITE_SHOW_DEMO_BANNER
 
   // Auto-close the mobile secondary drawer once the user picks a sub-item.
   // We snapshot the focused tab at drawer-open time (see openSecondaryDrawer
@@ -104,7 +105,7 @@ function AppShell() {
   const mainContent = (
     <main className="flex flex-col min-w-0 min-h-0 bg-bg h-full">
       {/* Mobile header — visible only below md */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-bg-secondary shrink-0 md:hidden">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border/80 bg-bg-secondary shrink-0 md:hidden">
         <button
           onClick={() => setSidebarOpen(true)}
           className="text-text-muted hover:text-text p-1 -ml-1"
@@ -123,7 +124,7 @@ function AppShell() {
 
   return (
     <div className="flex flex-col h-full">
-      {import.meta.env.VITE_DEMO_MODE && <DemoBanner />}
+      {showDemoBanner && <DemoBanner />}
       {import.meta.env.VITE_DEMO_MODE && <DemoAnalytics />}
       <UpdateBanner />
       <div className="flex flex-1 min-h-0">
@@ -163,7 +164,7 @@ function AppShell() {
                   <section.Secondary />
                 </Sidebar>
               </Panel>
-              <Separator className="w-px bg-border hover:bg-accent/40 active:bg-accent/60 transition-colors" />
+              <Separator className="w-px bg-border/80 hover:bg-accent/40 active:bg-accent/60 transition-colors" />
             </>
           )}
           <Panel id="main">
diff --git a/ui/src/components/ActivityBar.tsx b/ui/src/components/ActivityBar.tsx
index 0db49cb0..e1e547f2 100644
--- a/ui/src/components/ActivityBar.tsx
+++ b/ui/src/components/ActivityBar.tsx
@@ -144,7 +144,7 @@ const NAV_SECTIONS: NavSection[] = [
 // ==================== ActivityBar ====================
 
 /**
- * Linear-style left nav. 200px wide on all viewports; on mobile (<md)
+ * Linear-style left nav. 276px wide on desktop; on mobile (<md)
  * it slides in over the page from the left, on desktop it's a static
  * column. Top section (no header) is the pinned-nav block — Chat,
  * Inbox, Workspaces, etc. — always visible. Labeled sections (Agent,
@@ -175,13 +175,13 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
         onClick={onClose}
       />
 
-      {/* ActivityBar — 200px on all viewports. Mobile: slide-in over
+      {/* ActivityBar — Linear-style workspace rail. Mobile: slide-in over
        *  page with backdrop. Desktop: static column flush left. */}
       <aside
         className={`
-          w-[200px] h-full flex flex-col shrink-0
+          w-[276px] h-full flex flex-col shrink-0
           bg-bg-secondary
-          border-r border-border
+          border-r border-border/80
           fixed z-50 top-0 left-0 transition-transform duration-200
           ${open ? 'translate-x-0' : '-translate-x-full'}
           md:static md:translate-x-0 md:z-auto md:transition-none
@@ -192,14 +192,15 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
           <img
             src="/alice.ico"
             alt="Alice"
-            className="w-7 h-7 rounded-lg ring-1 ring-accent/25 shadow-[0_0_8px_rgba(88,166,255,0.15)]"
+            className="w-7 h-7 rounded-full ring-1 ring-white/10 shadow-[0_0_14px_rgba(198,109,55,0.12)]"
             draggable={false}
           />
-          <h1 className="text-[15px] font-semibold text-text">OpenAlice</h1>
+          <h1 className="min-w-0 flex-1 truncate text-[15px] font-semibold text-text">OpenAlice</h1>
+          <span className="text-text-muted/70">⌄</span>
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 flex flex-col px-2 overflow-y-auto pb-3">
+        <nav className="flex-1 flex flex-col px-3 overflow-y-auto pb-3">
           {NAV_SECTIONS.map((section, si) => {
             const labeled = section.sectionLabel.length > 0
             // User toggle wins over default. The collapse store stores
@@ -228,7 +229,7 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
                   />
                 )}
                 {showItems && (
-                  <div className="flex flex-col gap-0.5" id={`activity-section-${si}`}>
+                  <div className="flex flex-col gap-1" id={`activity-section-${si}`}>
                     {section.items.map((item) => {
                       const sec = activitySectionFor(item.page)
                       const isActive = selectedSidebar === sec
@@ -263,8 +264,8 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
                           title={t(item.labelKey)}
                           className={`relative flex items-center gap-3 px-3 py-1.5 rounded-md text-[13px] transition-colors text-left ${
                             isActive
-                              ? 'bg-bg-tertiary text-text'
-                              : 'text-text-muted hover:text-text hover:bg-bg-tertiary/50'
+                              ? 'bg-bg-tertiary text-text shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]'
+                              : 'text-text-muted hover:text-text hover:bg-white/[0.035]'
                           }`}
                         >
                           {/* Active indicator — left vertical bar */}
@@ -281,7 +282,7 @@ export function ActivityBar({ open, onClose, onItemActivated }: ActivityBarProps
                           {item.page === 'inbox' && unreadInbox > 0 && (
                             <span
                               aria-label={t('nav.unread', { count: unreadInbox })}
-                              className="shrink-0 min-w-[18px] h-[18px] px-1.5 rounded-full bg-red text-[10px] font-semibold text-white tabular-nums flex items-center justify-center"
+                              className="shrink-0 min-w-[18px] h-[18px] px-1.5 rounded-full border border-border bg-bg-tertiary text-[10px] font-semibold text-text-muted tabular-nums flex items-center justify-center"
                             >
                               {unreadInbox > 99 ? '99+' : unreadInbox}
                             </span>
@@ -340,7 +341,7 @@ function SectionHeader({
         <button
           type="button"
           onClick={onToggleCollapse}
-          className="flex-1 flex items-center gap-1.5 py-1 text-[11px] font-medium text-text-muted/60 hover:text-text-muted uppercase tracking-wider transition-colors text-left"
+          className="flex-1 flex items-center gap-1.5 py-1 text-[12px] font-semibold text-text-muted/75 hover:text-text-muted transition-colors text-left"
           aria-expanded={!isCollapsed}
           aria-controls={controlsId}
         >
diff --git a/ui/src/components/EmptyEditor.tsx b/ui/src/components/EmptyEditor.tsx
index e1fdba9b..6dc032ca 100644
--- a/ui/src/components/EmptyEditor.tsx
+++ b/ui/src/components/EmptyEditor.tsx
@@ -1,26 +1,89 @@
+import { ArrowUp, Boxes, Paperclip, Sparkles } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
 /**
- * Shown in the main editor area when no tabs are open. Phase-2 minimal:
- * logo + a couple of plain-text pointers so a fresh user knows where to
- * start. The full onboarding system (guided setup, status checks, etc.)
- * is a separate effort that will replace this surface.
+ * Default editor surface when no tab is open.
+ *
+ * The empty state is intentionally a product surface, not onboarding copy:
+ * the central composer is the primary object on screen and the surrounding
+ * canvas stays quiet until Alice has something to render.
  */
 export function EmptyEditor() {
+  const { t } = useTranslation()
+
   return (
-    <div className="flex flex-col items-center justify-center h-full select-none px-6 gap-5 text-center">
-      <img
-        src="/alice.ico"
-        alt="OpenAlice"
-        className="w-16 h-16 rounded-2xl ring-1 ring-accent/25 shadow-[0_0_18px_rgba(88,166,255,0.18)]"
-        draggable={false}
-      />
-      <div className="space-y-2 max-w-md">
-        <h2 className="text-base font-semibold text-text">OpenAlice</h2>
-        <p className="text-[13px] text-text-muted leading-relaxed">
-          Click an icon on the activity bar to open its sidebar, then pick something from the sidebar to open it as a tab.
-        </p>
-        <p className="text-[12px] text-text-muted/70 leading-relaxed">
-          First time here? Open <span className="text-text">Settings → AI Provider</span> to configure a model, then jump back to <span className="text-text">Chat</span>.
-        </p>
+    <div className="relative h-full min-h-0 overflow-hidden bg-bg text-text select-none">
+      <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white/[0.035] to-transparent" />
+      <div className="absolute inset-x-0 bottom-0 h-[38%] bg-gradient-to-t from-black/35 to-transparent" />
+
+      <div className="absolute inset-0 opacity-[0.08] [background-image:linear-gradient(to_right,#ffffff_1px,transparent_1px),linear-gradient(to_bottom,#ffffff_1px,transparent_1px)] [background-size:96px_96px]" />
+
+      <div className="absolute left-1/2 top-[29%] h-[26rem] w-[26rem] -translate-x-1/2 rounded-full border border-white/[0.045]" />
+      <div className="absolute left-1/2 top-[38%] h-12 w-80 -translate-x-[43%] rotate-[-45deg] rounded-xl bg-white/[0.025]" />
+      <div className="absolute left-1/2 top-[43%] h-10 w-64 -translate-x-[52%] rotate-[-45deg] rounded-xl bg-white/[0.02]" />
+      <div className="absolute left-1/2 top-[48%] h-10 w-44 -translate-x-[62%] rotate-[-45deg] rounded-xl bg-white/[0.018]" />
+
+      <div className="relative z-10 flex h-full flex-col items-center justify-center px-6">
+        <div className="w-full max-w-[890px] rounded-xl border border-border bg-bg-tertiary/88 shadow-[0_34px_90px_rgba(0,0,0,0.48)] backdrop-blur-sm">
+          <label htmlFor="ask-alice-input" className="sr-only">{t('home.askLabel')}</label>
+          <textarea
+            id="ask-alice-input"
+            rows={2}
+            placeholder={t('home.askPlaceholder')}
+            className="block h-20 w-full resize-none bg-transparent px-6 py-5 text-[20px] font-medium leading-7 text-text outline-none placeholder:text-text-muted/55"
+          />
+
+          <div className="flex h-14 items-center gap-3 border-t border-border/80 px-5">
+            <button
+              type="button"
+              className="inline-flex h-8 items-center gap-2 rounded-lg px-2.5 text-[13px] font-semibold text-text-muted transition-colors hover:bg-white/[0.045] hover:text-text"
+            >
+              <Boxes size={15} strokeWidth={1.8} />
+              <span>{t('home.skills')}</span>
+            </button>
+
+            <div className="inline-flex h-7 items-center gap-2 rounded-full border border-border bg-white/[0.035] px-3 text-[12px] font-medium text-text-muted">
+              <span className="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_12px_rgba(35,185,154,0.65)]" />
+              <span>{t('home.agentRuntime')}</span>
+            </div>
+
+            <div className="ml-auto flex items-center gap-2">
+              <button
+                type="button"
+                aria-label={t('home.attachContext')}
+                className="flex h-8 w-8 items-center justify-center rounded-full text-text-muted transition-colors hover:bg-white/[0.045] hover:text-text"
+              >
+                <Paperclip size={16} strokeWidth={1.9} />
+              </button>
+              <button
+                type="button"
+                aria-label={t('home.submit')}
+                className="flex h-9 w-9 items-center justify-center rounded-full bg-white/[0.07] text-text-muted transition-colors hover:bg-white/[0.11] hover:text-text"
+              >
+                <ArrowUp size={17} strokeWidth={2.1} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-3 flex w-full max-w-[872px] items-center gap-3 rounded-full border border-border/80 bg-[#0f1012]/90 px-3 py-2 text-[13px] shadow-[0_18px_44px_rgba(0,0,0,0.3)]">
+          <span className="rounded-full border border-border bg-bg-tertiary px-2.5 py-1 font-mono text-[10px] font-medium text-text-muted">
+            {t('home.newBadge')}
+          </span>
+          <span className="flex-1 truncate font-semibold text-text/85">
+            {t('home.sharedSkills')}
+          </span>
+          <button type="button" className="hidden text-text-muted transition-colors hover:text-text sm:inline">
+            {t('home.dismiss')}
+          </button>
+          <button
+            type="button"
+            className="inline-flex h-7 items-center gap-1.5 rounded-full bg-white/[0.08] px-3 text-[12px] font-semibold text-text transition-colors hover:bg-white/[0.12]"
+          >
+            <Sparkles size={13} strokeWidth={1.8} />
+            {t('home.shareSkills')}
+          </button>
+        </div>
       </div>
     </div>
   )
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index 8d7fc2f3..69dbc498 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -23,10 +23,10 @@ interface SidebarProps {
 export function Sidebar({ title, actions, children, leading }: SidebarProps) {
   return (
     <aside className="flex h-full w-full flex-col bg-bg-secondary">
-      <div className="flex items-center justify-between px-3 h-10 shrink-0 gap-2">
+      <div className="flex items-center justify-between px-4 h-10 shrink-0 gap-2 border-b border-border/60">
         <div className="flex items-center gap-1.5 min-w-0">
           {leading}
-          <h2 className="text-[13px] font-medium text-text truncate">{title}</h2>
+          <h2 className="text-[13px] font-semibold text-text truncate">{title}</h2>
         </div>
         {actions && <div className="flex items-center gap-0.5 shrink-0">{actions}</div>}
       </div>
diff --git a/ui/src/components/TabHost.tsx b/ui/src/components/TabHost.tsx
index 510f003d..2878f3c7 100644
--- a/ui/src/components/TabHost.tsx
+++ b/ui/src/components/TabHost.tsx
@@ -32,22 +32,24 @@ export function TabHost() {
   const isDesktop = useIsDesktop()
 
   return (
-    <div className="flex flex-col flex-1 min-h-0">
-      <TabStrip />
-      <div className="relative flex-1 min-h-0">
-        {tabIds.length === 0 ? (
-          <EmptyEditor />
-        ) : (
-          tabIds.map((id) => {
-            const tab = tabsMap[id]
-            if (!tab) return null
-            const isActive = id === activeTabId
-            // Mobile: only render the active tab to avoid blowing memory and
-            // because we don't even have a strip to switch tabs from.
-            if (!isDesktop && !isActive) return null
-            return <TabFrame key={id} tab={tab} visible={isActive} />
-          })
-        )}
+    <div className="flex flex-col flex-1 min-h-0 bg-bg p-3">
+      <div className="flex flex-col flex-1 min-h-0 overflow-hidden rounded-xl border border-border/80 bg-[#0a0a0b] shadow-[inset_0_1px_0_rgba(255,255,255,0.025)]">
+        <TabStrip />
+        <div className="relative flex-1 min-h-0">
+          {tabIds.length === 0 ? (
+            <EmptyEditor />
+          ) : (
+            tabIds.map((id) => {
+              const tab = tabsMap[id]
+              if (!tab) return null
+              const isActive = id === activeTabId
+              // Mobile: only render the active tab to avoid blowing memory and
+              // because we don't even have a strip to switch tabs from.
+              if (!isDesktop && !isActive) return null
+              return <TabFrame key={id} tab={tab} visible={isActive} />
+            })
+          )}
+        </div>
       </div>
     </div>
   )
diff --git a/ui/src/components/TabStrip.tsx b/ui/src/components/TabStrip.tsx
index 8c900923..b97c9026 100644
--- a/ui/src/components/TabStrip.tsx
+++ b/ui/src/components/TabStrip.tsx
@@ -95,7 +95,7 @@ export function TabStrip() {
     <>
       <div
         onWheel={handleWheel}
-        className="scrollbar-hide hidden md:flex shrink-0 h-9 bg-bg-secondary border-b border-border overflow-x-auto"
+        className="scrollbar-hide hidden md:flex shrink-0 h-10 bg-bg-secondary/95 border-b border-border/80 overflow-x-auto"
       >
         {tabIds.map((id) => {
           const tab = tabsMap[id]
@@ -150,10 +150,10 @@ function TabButton({ title, active, onSelect, onClose, onContextMenu }: TabButto
         }
       }}
       onContextMenu={onContextMenu}
-      className={`group flex items-center gap-2 pl-3 pr-2 h-full text-[13px] cursor-pointer border-r border-border transition-colors ${
+      className={`group flex items-center gap-2 pl-3 pr-2 h-full text-[13px] cursor-pointer border-r border-border/80 transition-colors ${
         active
-          ? 'bg-bg text-text'
-          : 'text-text-muted hover:text-text hover:bg-bg-tertiary/40'
+          ? 'bg-bg-tertiary text-text'
+          : 'text-text-muted hover:text-text hover:bg-white/[0.035]'
       }`}
     >
       <span className="truncate max-w-[200px]">{title}</span>
@@ -163,7 +163,7 @@ function TabButton({ title, active, onSelect, onClose, onContextMenu }: TabButto
           e.stopPropagation()
           onClose()
         }}
-        className="w-4 h-4 rounded flex items-center justify-center text-text-muted/60 hover:text-text hover:bg-bg-tertiary"
+        className="w-4 h-4 rounded flex items-center justify-center text-text-muted/60 hover:text-text hover:bg-white/[0.06]"
         aria-label={`Close ${title}`}
       >
         <X size={11} strokeWidth={2.5} />
diff --git a/ui/src/i18n/locales/en.ts b/ui/src/i18n/locales/en.ts
index 5c2c10a4..149ef512 100644
--- a/ui/src/i18n/locales/en.ts
+++ b/ui/src/i18n/locales/en.ts
@@ -17,7 +17,7 @@ export const en = {
     item: {
       inbox: 'Inbox',
       tracked: 'Tracked',
-      chat: 'Chat',
+      chat: 'Ask Alice',
       workspaces: 'Workspaces',
       market: 'Market',
       news: 'News',
@@ -36,6 +36,18 @@ export const en = {
     unread: '{{count}} unread',
     about: 'About {{label}}',
   },
+  home: {
+    askLabel: 'Ask Alice',
+    askPlaceholder: 'Ask Alice...',
+    skills: 'Skills',
+    agentRuntime: 'Agent Runtime',
+    attachContext: 'Attach context',
+    submit: 'Submit',
+    newBadge: 'NEW',
+    sharedSkills: 'Shared skills: create and use skills across your team',
+    dismiss: 'Dismiss',
+    shareSkills: 'Share skills',
+  },
   settings: {
     title: 'Settings',
     tab: {
diff --git a/ui/src/i18n/locales/ja.ts b/ui/src/i18n/locales/ja.ts
index 12252ca2..19805ae6 100644
--- a/ui/src/i18n/locales/ja.ts
+++ b/ui/src/i18n/locales/ja.ts
@@ -6,7 +6,7 @@ export const ja: Resources = {
     item: {
       inbox: '受信トレイ',
       tracked: 'トラッキング',
-      chat: 'チャット',
+      chat: 'Alice に聞く',
       workspaces: 'ワークスペース',
       market: 'マーケット',
       news: 'ニュース',
@@ -25,6 +25,18 @@ export const ja: Resources = {
     unread: '未読 {{count}} 件',
     about: '{{label}}について',
   },
+  home: {
+    askLabel: 'Alice に聞く',
+    askPlaceholder: 'Alice に聞く...',
+    skills: 'スキル',
+    agentRuntime: 'エージェントランタイム',
+    attachContext: 'コンテキストを添付',
+    submit: '送信',
+    newBadge: 'NEW',
+    sharedSkills: '共有スキル: チーム全体でスキルを作成して使用',
+    dismiss: '閉じる',
+    shareSkills: 'スキルを共有',
+  },
   settings: {
     title: '設定',
     tab: {
diff --git a/ui/src/i18n/locales/zh-Hant.ts b/ui/src/i18n/locales/zh-Hant.ts
index 33e36081..1e3a2f58 100644
--- a/ui/src/i18n/locales/zh-Hant.ts
+++ b/ui/src/i18n/locales/zh-Hant.ts
@@ -33,6 +33,18 @@ export const zhHant: Resources = {
     unread: '{{count}} 則未讀',
     about: '關於{{label}}',
   },
+  home: {
+    askLabel: '問 Alice',
+    askPlaceholder: '問 Alice...',
+    skills: '技能',
+    agentRuntime: '智慧體執行環境',
+    attachContext: '附加上下文',
+    submit: '送出',
+    newBadge: 'NEW',
+    sharedSkills: '共享技能：在團隊中建立並使用技能',
+    dismiss: '忽略',
+    shareSkills: '共享技能',
+  },
   settings: {
     title: '設定',
     tab: {
diff --git a/ui/src/i18n/locales/zh.ts b/ui/src/i18n/locales/zh.ts
index 55d00953..a15021a7 100644
--- a/ui/src/i18n/locales/zh.ts
+++ b/ui/src/i18n/locales/zh.ts
@@ -6,7 +6,7 @@ export const zh: Resources = {
     item: {
       inbox: '收件箱',
       tracked: '追踪',
-      chat: '对话',
+      chat: '问 Alice',
       workspaces: '工作区',
       market: '市场',
       news: '新闻',
@@ -25,6 +25,18 @@ export const zh: Resources = {
     unread: '{{count}} 条未读',
     about: '关于{{label}}',
   },
+  home: {
+    askLabel: '问 Alice',
+    askPlaceholder: '问 Alice...',
+    skills: '技能',
+    agentRuntime: '智能体运行时',
+    attachContext: '附加上下文',
+    submit: '提交',
+    newBadge: 'NEW',
+    sharedSkills: '共享技能：在团队中创建和使用技能',
+    dismiss: '忽略',
+    shareSkills: '共享技能',
+  },
   settings: {
     title: '设置',
     tab: {
diff --git a/ui/src/index.css b/ui/src/index.css
index 0cf00d62..30e99423 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,23 +1,23 @@
 @import "tailwindcss";
 
-/* GitHub Dark theme palette */
+/* Linear dark Alice shell palette */
 @theme {
-  --color-bg: #0d1117;
-  --color-bg-secondary: #161b22;
-  --color-bg-tertiary: #21262d;
-  --color-border: #30363d;
-  --color-text: #e6edf3;
-  --color-text-muted: #8b949e;
-  --color-accent: #58a6ff;
-  --color-accent-dim: rgba(31, 111, 235, 0.2);
-  --color-user-bubble: #1f6feb;
-  --color-assistant-bubble: #161b22;
-  --color-notification-bg: #2d1f00;
-  --color-notification-border: #d29922;
-  --color-green: #3fb950;
-  --color-red: #f85149;
-  --color-purple: #a78bfa;
-  --color-purple-dim: rgba(139, 92, 246, 0.2);
+  --color-bg: #050506;
+  --color-bg-secondary: #070708;
+  --color-bg-tertiary: #17181d;
+  --color-border: #202126;
+  --color-text: #f1f2f5;
+  --color-text-muted: #8f929b;
+  --color-accent: #23b99a;
+  --color-accent-dim: rgba(35, 185, 154, 0.16);
+  --color-user-bubble: #1f2026;
+  --color-assistant-bubble: #141519;
+  --color-notification-bg: #1d1610;
+  --color-notification-border: #8a5b2f;
+  --color-green: #23b99a;
+  --color-red: #e5484d;
+  --color-purple: #8f72ff;
+  --color-purple-dim: rgba(143, 114, 255, 0.16);
 
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
     "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
@@ -51,6 +51,18 @@ body,
   height: 100%;
 }
 
+body {
+  background:
+    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.035), transparent 32rem),
+    linear-gradient(180deg, #070708 0%, #050506 46%, #030304 100%);
+  color: var(--color-text);
+}
+
+::selection {
+  background: rgba(35, 185, 154, 0.28);
+  color: var(--color-text);
+}
+
 /* ==================== Typography scale ====================
    Five semantic sizes covering the entire app. New code should
    prefer these over arbitrary `text-[Npx]` so size choices stay
diff --git a/ui/src/tabs/UrlAdopter.tsx b/ui/src/tabs/UrlAdopter.tsx
index 712e4e8c..06e7cdb9 100644
--- a/ui/src/tabs/UrlAdopter.tsx
+++ b/ui/src/tabs/UrlAdopter.tsx
@@ -1,9 +1,11 @@
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { Navigate, Route, Routes, useParams, useSearchParams } from 'react-router-dom'
 import { useWorkspace } from './store'
 import { specEquals, type ActivitySection, type ViewSpec } from './types'
 import { getView } from './registry'
 
+let suppressNextFocusedUrlSync = false
+
 /**
  * Two-way bridge between window.location and the workspace store.
  *
@@ -26,15 +28,15 @@ export function UrlAdopter() {
   return (
     <>
       <Routes>
-        {/* Root → Inbox (the workspace-anchored landing). */}
-        <Route path="/" element={<Navigate to="/inbox" replace />} />
+        {/* Root → Ask Alice landing. Keep it deterministic even when the
+            user previously had persisted tabs open. */}
+        <Route path="/" element={<LandingRoute />} />
 
         {/* Activities */}
         {/* Legacy /chat URLs (the retired traditional-chat surface) →
-            Inbox, so any stale bookmark or persisted history entry lands
-            on the live surface instead of a 404. */}
-        <Route path="/chat" element={<Navigate to="/inbox" replace />} />
-        <Route path="/chat/:channelId" element={<Navigate to="/inbox" replace />} />
+            the Ask Alice landing instead of a 404. */}
+        <Route path="/chat" element={<Navigate to="/" replace />} />
+        <Route path="/chat/:channelId" element={<Navigate to="/" replace />} />
         <Route path="/portfolio" element={<AdoptStatic spec={{ kind: 'portfolio', params: {} }} />} />
         <Route path="/automation" element={<Navigate to="/automation/flow" replace />} />
         <Route path="/automation/:section" element={<AdoptAutomation />} />
@@ -207,6 +209,17 @@ function SetSidebarOnly({ section }: { section: import('./types').ActivitySectio
   return null
 }
 
+function LandingRoute() {
+  const setSidebar = useWorkspace((state) => state.setSidebar)
+  const closeAll = useWorkspace((state) => state.closeAll)
+  useLayoutEffect(() => {
+    suppressNextFocusedUrlSync = true
+    setSidebar(null)
+    closeAll()
+  }, [closeAll, setSidebar])
+  return null
+}
+
 /**
  * Map a ViewSpec to the ActivitySection whose sidebar should accompany
  * it. URL adoption uses this so a fresh page load / deep link / browser
@@ -274,6 +287,10 @@ function UrlSync() {
     return id ? state.tabs[id]?.spec ?? null : null
   })
   useEffect(() => {
+    if (suppressNextFocusedUrlSync) {
+      suppressNextFocusedUrlSync = false
+      return
+    }
     if (!focusedSpec) return
     const view = getView(focusedSpec.kind)
     const target = view.toUrl(focusedSpec as never)
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
index def41c5e..a520a691 100644
--- a/ui/src/vite-env.d.ts
+++ b/ui/src/vite-env.d.ts
@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_DEMO_MODE?: string
+  readonly VITE_SHOW_DEMO_BANNER?: string
 }
 
 interface ImportMeta {