diff --git a/.claude/launch.json b/.claude/launch.json
index c92f22f0..544754b0 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -9,9 +9,9 @@
         "packages/cli/src/index.ts",
         "dev",
         "examples/basic-app",
-        "--port=3410"
+        "--port=3520"
       ],
-      "port": 3410
+      "port": 3520
     },
     {
       "name": "component-showcase",
diff --git a/examples/basic-app/app/layouts/public.wrn b/examples/basic-app/app/layouts/public.wrn
index 45f7b755..55a1f9c3 100644
--- a/examples/basic-app/app/layouts/public.wrn
+++ b/examples/basic-app/app/layouts/public.wrn
@@ -11,6 +11,7 @@ component PublicLayout {
           <a href="/chat">{t:nav.chat}</a>
           <a href="/dashboard">{t:nav.dashboard}</a>
           <a href="/about">{t:nav.about}</a>
+          <a href="/navigation">{t:nav.navigation}</a>
           <button type="button" data-wire-theme-toggle aria-label="Toggle color theme">Theme</button>
           <button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="en">EN</button>
           <button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="es">ES</button>
diff --git a/examples/basic-app/app/locales/en.json b/examples/basic-app/app/locales/en.json
index c1fe6edc..2886371e 100644
--- a/examples/basic-app/app/locales/en.json
+++ b/examples/basic-app/app/locales/en.json
@@ -4,7 +4,8 @@
     "ui": "UI",
     "chat": "Chat",
     "dashboard": "Dashboard",
-    "about": "About"
+    "about": "About",
+    "navigation": "Navigation"
   },
   "home": {
     "title": "Hello from WrNexus",
diff --git a/examples/basic-app/app/locales/es.json b/examples/basic-app/app/locales/es.json
index a319b016..64d20a5d 100644
--- a/examples/basic-app/app/locales/es.json
+++ b/examples/basic-app/app/locales/es.json
@@ -4,7 +4,8 @@
     "ui": "UI",
     "chat": "Chat",
     "dashboard": "Panel",
-    "about": "Acerca de"
+    "about": "Acerca de",
+    "navigation": "Navegación"
   },
   "home": {
     "title": "Hola desde WrNexus",
diff --git a/examples/basic-app/app/pages/navigation.wrn b/examples/basic-app/app/pages/navigation.wrn
index 368ae996..aafe1057 100644
--- a/examples/basic-app/app/pages/navigation.wrn
+++ b/examples/basic-app/app/pages/navigation.wrn
@@ -17,6 +17,8 @@
 // attribute would put a brace at the start of the value, which the compiler
 // reads as an interpolation.
 page NavigationTour {
+  layout = "public"
+
   seo {
     title = "Navigation tour"
     description = "Every navigation component working together in one shell."
diff --git a/examples/basic-app/app/styles/global.css b/examples/basic-app/app/styles/global.css
index 21912387..28eff61f 100644
--- a/examples/basic-app/app/styles/global.css
+++ b/examples/basic-app/app/styles/global.css
@@ -13,12 +13,21 @@
 
 /* --- App theme layered on top of Tailwind's utilities & preflight --- */
 
+/*
+ * The app palette is derived from the theme tokens rather than fixed.
+ *
+ * These used to be hardcoded dark values. Wire UI surfaces follow the theme,
+ * so switching to light turned the cards light while this text stayed light
+ * too -- the sign-in form rendered at a contrast of about 1.1 and was
+ * unreadable. Anything an app hardcodes here has to be themed as well, or it
+ * only ever looks right in one mode.
+ */
 :root {
-  --bg: #0b1020;
-  --surface: #141a30;
-  --text: #e7ecff;
-  --muted: #9aa6d0;
-  --brand: #6c8cff;
+  --bg: var(--wire-color-bg);
+  --surface: var(--wire-color-surface);
+  --text: var(--wire-color-text);
+  --muted: var(--wire-color-text-muted);
+  --brand: var(--wire-color-primary);
   --radius: 10px;
   --maxw: 720px;
 }
@@ -36,7 +45,12 @@ body {
     Roboto,
     sans-serif;
   color: var(--text);
-  background: radial-gradient(1200px 600px at 50% -10%, #1b2750 0%, var(--bg) 60%);
+  /* Tinted from the primary token so the wash follows the theme too. */
+  background: radial-gradient(
+    1200px 600px at 50% -10%,
+    color-mix(in srgb, var(--wire-color-primary) 18%, var(--bg)) 0%,
+    var(--bg) 60%
+  );
   background-color: var(--bg);
 }