diff --git a/web/brand/apple-touch-icon.png b/web/brand/apple-touch-icon.png
new file mode 100644
index 0000000..b4dc293
Binary files /dev/null and b/web/brand/apple-touch-icon.png differ
diff --git a/web/brand/hope-icon-192.png b/web/brand/hope-icon-192.png
new file mode 100644
index 0000000..5d72e1f
Binary files /dev/null and b/web/brand/hope-icon-192.png differ
diff --git a/web/brand/hope-icon-512.png b/web/brand/hope-icon-512.png
new file mode 100644
index 0000000..74b40cd
Binary files /dev/null and b/web/brand/hope-icon-512.png differ
diff --git a/web/brand/hope-icon.svg b/web/brand/hope-icon.svg
new file mode 100644
index 0000000..610bc0f
--- /dev/null
+++ b/web/brand/hope-icon.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!--
+    Hope app icon — forced-dark Lightwell aperture, icon-grid tuned
+    (capsule scaled up ~40% vs the standard mark; full-bleed background,
+    no transparency). Colors: Nearlight dark tokens.
+  -->
+  <defs>
+    <linearGradient id="core" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#E3A2BC" stop-opacity="0.35"/>
+      <stop offset="0.5" stop-color="#E3A2BC" stop-opacity="1"/>
+      <stop offset="1" stop-color="#E3A2BC" stop-opacity="0.55"/>
+    </linearGradient>
+    <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="#E3A2BC" stop-opacity="0.34"/>
+      <stop offset="0.55" stop-color="#E3A2BC" stop-opacity="0.11"/>
+      <stop offset="1" stop-color="#E3A2BC" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="hotspot" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="#E3A2BC" stop-opacity="0.6"/>
+      <stop offset="1" stop-color="#E3A2BC" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="512" height="512" fill="#1C191F"/>
+  <rect x="116" y="46" width="280" height="420" rx="140" fill="#28232E" stroke="#BFB2C6" stroke-width="8"/>
+  <ellipse cx="256" cy="256" rx="185" ry="225" fill="url(#halo)"/>
+  <rect x="221" y="168.5" width="70" height="175" rx="35" fill="url(#core)"/>
+  <ellipse cx="256" cy="256" rx="82" ry="103" fill="url(#hotspot)"/>
+</svg>
diff --git a/web/brand/hope-logo-horizontal.svg b/web/brand/hope-logo-horizontal.svg
new file mode 100644
index 0000000..8d03506
--- /dev/null
+++ b/web/brand/hope-logo-horizontal.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 240">
+  <!--
+    Hope horizontal lockup — Lightwell mark + wordmark.
+    Wordmark: system rounded design, semibold, ink color. Fonts resolve to
+    SF Pro Rounded on Apple platforms; falls back to the system UI face.
+  -->
+  <style>
+    :root { --ground:#F4F2F6; --surface:#FFFFFF; --quiet:#655D6C; --ink:#29232F; --core:#874761; }
+    @media (prefers-color-scheme: dark) {
+      :root { --ground:#1C191F; --surface:#28232E; --quiet:#BFB2C6; --ink:#F6EFF7; --core:#E3A2BC; }
+    }
+    text { font-family: ui-rounded, -apple-system, "SF Pro Rounded", "Helvetica Rounded", system-ui, sans-serif;
+           font-weight: 600; font-size: 120px; letter-spacing: -2px; }
+  </style>
+  <defs>
+    <linearGradient id="core" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="var(--core)" stop-opacity="0.35"/>
+      <stop offset="0.5" stop-color="var(--core)" stop-opacity="1"/>
+      <stop offset="1" stop-color="var(--core)" stop-opacity="0.55"/>
+    </linearGradient>
+    <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="var(--core)" stop-opacity="0.32"/>
+      <stop offset="0.55" stop-color="var(--core)" stop-opacity="0.10"/>
+      <stop offset="1" stop-color="var(--core)" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="hotspot" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="var(--core)" stop-opacity="0.55"/>
+      <stop offset="1" stop-color="var(--core)" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="720" height="240" fill="var(--ground)"/>
+  <!-- mark scaled 0.42 from the 512 canvas, placed at x=24, centered vertically -->
+  <g transform="translate(24 12) scale(0.42)">
+    <rect x="156" y="106" width="200" height="300" rx="100" fill="var(--surface)" stroke="var(--quiet)" stroke-width="14"/>
+    <ellipse cx="256" cy="256" rx="150" ry="180" fill="url(#halo)"/>
+    <rect x="231" y="193.5" width="50" height="125" rx="25" fill="url(#core)"/>
+    <ellipse cx="256" cy="256" rx="60" ry="75" fill="url(#hotspot)"/>
+  </g>
+  <text x="252" y="163" fill="var(--ink)">Hope</text>
+</svg>
diff --git a/web/brand/hope-mark.svg b/web/brand/hope-mark.svg
new file mode 100644
index 0000000..981b13d
--- /dev/null
+++ b/web/brand/hope-mark.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!--
+    Hope brand mark — the Lightwell aperture.
+    Geometry from Sources/Features/Conversation/LightwellView.swift:
+    64x96 outer capsule, 16x40 inner core, centered; 1pt quiet stroke;
+    vertical rosewood gradient 0.35 / 1.0 / 0.55. Nearlight tokens.
+    The radial halo emulates the Lightwell's soft emissive core without
+    SVG filters (renders identically in QuickLook, browsers, rsvg).
+    Adapts to light/dark via prefers-color-scheme.
+  -->
+  <style>
+    :root { --ground:#F4F2F6; --surface:#FFFFFF; --quiet:#655D6C; --core:#874761; }
+    @media (prefers-color-scheme: dark) {
+      :root { --ground:#1C191F; --surface:#28232E; --quiet:#BFB2C6; --core:#E3A2BC; }
+    }
+  </style>
+  <defs>
+    <linearGradient id="core" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="var(--core)" stop-opacity="0.35"/>
+      <stop offset="0.5" stop-color="var(--core)" stop-opacity="1"/>
+      <stop offset="1" stop-color="var(--core)" stop-opacity="0.55"/>
+    </linearGradient>
+    <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="var(--core)" stop-opacity="0.32"/>
+      <stop offset="0.55" stop-color="var(--core)" stop-opacity="0.10"/>
+      <stop offset="1" stop-color="var(--core)" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="hotspot" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0" stop-color="var(--core)" stop-opacity="0.55"/>
+      <stop offset="1" stop-color="var(--core)" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="512" height="512" fill="var(--ground)"/>
+  <rect x="156" y="106" width="200" height="300" rx="100" fill="var(--surface)" stroke="var(--quiet)" stroke-width="6"/>
+  <!-- emissive glow: halo spills past the core, hotspot brightens its center -->
+  <ellipse cx="256" cy="256" rx="150" ry="180" fill="url(#halo)"/>
+  <rect x="231" y="193.5" width="50" height="125" rx="25" fill="url(#core)"/>
+  <ellipse cx="256" cy="256" rx="60" ry="75" fill="url(#hotspot)"/>
+</svg>
diff --git a/web/favicon.svg b/web/favicon.svg
index 47f2201..770b4b9 100644
--- a/web/favicon.svg
+++ b/web/favicon.svg
@@ -1,7 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="16" fill="#08111f"/>
-  <circle cx="31" cy="33" r="21" fill="none" stroke="#8ba7ff" stroke-width="2"/>
-  <ellipse cx="31" cy="33" rx="18" ry="11" fill="none" stroke="#526cae" stroke-width="1.5" transform="rotate(-18 31 33)"/>
-  <circle cx="31" cy="33" r="5" fill="#8ba7ff"/>
-  <circle cx="49" cy="18" r="5" fill="#ffb38e"/>
+  <!-- Hope favicon: Lightwell aperture, small-size tuned (strokes widened, halo dropped). -->
+  <defs>
+    <linearGradient id="core" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#E3A2BC" stop-opacity="0.35"/>
+      <stop offset="0.5" stop-color="#E3A2BC" stop-opacity="1"/>
+      <stop offset="1" stop-color="#E3A2BC" stop-opacity="0.55"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="#1C191F"/>
+  <rect x="19" y="8" width="26" height="48" rx="13" fill="#28232E" stroke="#BFB2C6" stroke-width="2.5"/>
+  <rect x="27.5" y="21.5" width="9" height="21" rx="4.5" fill="url(#core)"/>
 </svg>
diff --git a/web/index.html b/web/index.html
index 345a507..58603f9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,10 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="theme-color" content="#08111f">
+    <meta name="theme-color" content="#1C191F">
     <title>Hope · Voice companion</title>
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="apple-touch-icon" href="brand/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="brand/hope-icon-192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="brand/hope-icon-512.png">
     <link rel="stylesheet" href="style.css">
 </head>
 <body data-mode="voice">
diff --git a/web/manifest.json b/web/manifest.json
index de15600..cf363f8 100644
--- a/web/manifest.json
+++ b/web/manifest.json
@@ -4,14 +4,26 @@
     "description": "A private, real-time voice companion with personal memory.",
     "start_url": "/",
     "display": "standalone",
-    "background_color": "#08111f",
-    "theme_color": "#08111f",
+    "background_color": "#1C191F",
+    "theme_color": "#1C191F",
     "icons": [
         {
             "src": "favicon.svg",
             "sizes": "any",
             "type": "image/svg+xml",
             "purpose": "any"
+        },
+        {
+            "src": "brand/hope-icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "brand/hope-icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
         }
     ]
 }