Restyle UI with a channel-strip console look and brand icon

Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks
the visual language around the app's actual interaction - fader-driven
device control - via LED-style indicators, mono instrument readouts,
hairline-framed cards, console-tab nav, and an oscilloscope-style
session timeline. Leaves components/ui/* untouched, restyling only via
design tokens and the app's own composed components. Also fixes a
proxy.ts matcher gap that was gating /icon.svg behind auth.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb

app/(app)/control/page.tsx

@@ -4,7 +4,7 @@ export default function ControlPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Control</h1>
+        <h1 className="font-heading text-2xl font-semibold">Control</h1>
         <p className="text-sm text-muted-foreground">
           Scan for devices, connect, and control them live. Every command runs directly from your browser
           to the device over Web Bluetooth - the server never sees it in real time.

app/(app)/devices/page.tsx

@@ -10,7 +10,7 @@ export default async function DevicesPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Devices</h1>
+        <h1 className="font-heading text-2xl font-semibold">Devices</h1>
         <p className="text-sm text-muted-foreground">Devices seen across past sessions. Give them friendlier names.</p>
       </div>
       <Card className="bp-glass">

app/(app)/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { BrandMark } from "@/components/layout/BrandMark";
 import { listRecordings } from "@/lib/db/queries/recordings";
 import { listPlaySessions } from "@/lib/db/queries/play-sessions";
 import { getSessionsSummary } from "@/lib/db/queries/stats";
@@ -23,7 +24,8 @@ export default async function DashboardPage() {
     <div className="flex flex-col gap-8">
       <Card className="bp-glass overflow-hidden">
         <CardContent className="flex flex-col items-start gap-4 py-8">
-          <h1 className="font-display bp-gradient-text text-3xl font-semibold">Welcome back</h1>
+          <BrandMark size={40} className="bp-pulse rounded-[9px]" />
+          <h1 className="font-heading bp-gradient-text text-3xl font-semibold">Welcome back</h1>
           <p className="max-w-xl text-sm text-muted-foreground">
             Scan for nearby devices, take control, and record sessions to replay later - all running
             directly from your browser over Web Bluetooth.
@@ -39,13 +41,13 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{summary.count}</CardContent>
+          <CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
         </Card>
         <Card className="bp-glass">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Total play time</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">
+          <CardContent className="bp-readout text-3xl">
             {(summary.totalDurationMs / 3_600_000).toFixed(1)}h
           </CardContent>
         </Card>
@@ -53,7 +55,7 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{recordings.length}</CardContent>
+          <CardContent className="bp-readout text-3xl">{recordings.length}</CardContent>
         </Card>
       </div>
 
@@ -62,18 +64,17 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle>Recent recordings</CardTitle>
           </CardHeader>
-          <CardContent className="flex flex-col gap-2">
+          <CardContent className="flex flex-col">
             {recentRecordings.length === 0 && (
               <p className="text-sm text-muted-foreground">Nothing saved yet.</p>
             )}
-            {recentRecordings.map((r) => (
-              <Link
-                key={r.id}
-                href={`/recordings/${r.id}`}
-                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
-              >
-                <span>{r.name}</span>
-                <span className="text-muted-foreground">{r.playCount} plays</span>
+            {recentRecordings.map((r, i) => (
+              <Link key={r.id} href={`/recordings/${r.id}`} className="group">
+                {i > 0 && <div className="bp-hairline" />}
+                <div className="flex items-center justify-between px-1 py-2 text-sm">
+                  <span className="group-hover:text-primary">{r.name}</span>
+                  <span className="bp-readout text-xs text-muted-foreground">{r.playCount} plays</span>
+                </div>
               </Link>
             ))}
           </CardContent>
@@ -83,16 +84,17 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle>Recent sessions</CardTitle>
           </CardHeader>
-          <CardContent className="flex flex-col gap-2">
+          <CardContent className="flex flex-col">
             {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
-            {recentSessions.map((s) => (
-              <Link
-                key={s.id}
-                href={`/sessions/${s.id}`}
-                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
-              >
-                <span>{s.name ?? `Session #${s.id}`}</span>
-                <span className="text-muted-foreground">{new Date(s.startedAt).toLocaleDateString()}</span>
+            {recentSessions.map((s, i) => (
+              <Link key={s.id} href={`/sessions/${s.id}`} className="group">
+                {i > 0 && <div className="bp-hairline" />}
+                <div className="flex items-center justify-between px-1 py-2 text-sm">
+                  <span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
+                  <span className="bp-readout text-xs text-muted-foreground">
+                    {new Date(s.startedAt).toLocaleDateString()}
+                  </span>
+                </div>
               </Link>
             ))}
           </CardContent>

app/(app)/recordings/[id]/page.tsx

@@ -23,7 +23,7 @@ export default async function RecordingDetailPage({ params }: { params: Promise<
     <div className="flex flex-col gap-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="font-display text-2xl font-semibold">{recording.name}</h1>
+          <h1 className="font-heading text-2xl font-semibold">{recording.name}</h1>
           {recording.description && <p className="text-sm text-muted-foreground">{recording.description}</p>}
         </div>
         <Button asChild>

app/(app)/recordings/[id]/replay/page.tsx

@@ -4,7 +4,7 @@ export default async function ReplayPage({ params }: { params: Promise<{ id: str
   const { id } = await params;
   return (
     <div className="flex flex-col gap-6">
-      <h1 className="font-display text-2xl font-semibold">Replay</h1>
+      <h1 className="font-heading text-2xl font-semibold">Replay</h1>
       <ReplayPlayerLoader recordingId={Number(id)} />
     </div>
   );

app/(app)/recordings/page.tsx

@@ -10,7 +10,7 @@ export default async function RecordingsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Recordings</h1>
+        <h1 className="font-heading text-2xl font-semibold">Recordings</h1>
         <p className="text-sm text-muted-foreground">Saved sessions you can replay against connected devices.</p>
       </div>
       <Card className="bp-glass">

app/(app)/sessions/[id]/page.tsx

@@ -21,7 +21,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
+        <h1 className="font-heading text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
         <p className="text-sm text-muted-foreground">
           {detail.session.kind} · {detail.session.status} · {formatDuration(detail.session.durationMs)}
         </p>

app/(app)/sessions/page.tsx

@@ -10,7 +10,7 @@ export default async function SessionsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Sessions</h1>
+        <h1 className="font-heading text-2xl font-semibold">Sessions</h1>
         <p className="text-sm text-muted-foreground">History of live control and replay sessions.</p>
       </div>
       <Card className="bp-glass">

app/(app)/stats/page.tsx

@@ -20,7 +20,7 @@ export default async function StatsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Stats</h1>
+        <h1 className="font-heading text-2xl font-semibold">Stats</h1>
         <p className="text-sm text-muted-foreground">Usage across sessions, devices, and your recording library.</p>
       </div>
 

app/globals.css

@@ -7,6 +7,7 @@
 @theme inline {
     --font-heading: var(--font-display);
     --font-sans: var(--font-sans);
+    --font-mono: var(--font-mono);
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -48,79 +49,77 @@
 }
 
 /*
- * Palette: dark-mode-first (fits the product's low-lit, intimate register).
- * Every hue anchors to the pink -> purple -> blue brand sweep; --primary/
- * --accent/--chart-* are the only places it should read as loud. Card
- * surfaces stay a near-neutral indigo-black so the sweep doesn't flood
- * every panel.
+ * Modern pink -> purple -> blue palette (the app's signature sweep, also
+ * used in app/icon.svg / BrandMark). Dark cool near-black base with a vivid
+ * pink primary; violet/blue fill out charts and the wordmark/icon gradient.
  */
 :root {
-    --background: oklch(0.99 0.005 300);
-    --foreground: oklch(0.22 0.03 290);
-    --card: oklch(0.98 0.008 300);
-    --card-foreground: oklch(0.22 0.03 290);
-    --popover: oklch(0.99 0.005 300);
-    --popover-foreground: oklch(0.22 0.03 290);
-    --primary: oklch(0.58 0.23 322);
-    --primary-foreground: oklch(0.99 0.01 322);
-    --secondary: oklch(0.94 0.02 300);
-    --secondary-foreground: oklch(0.3 0.05 300);
-    --muted: oklch(0.95 0.015 300);
-    --muted-foreground: oklch(0.5 0.03 290);
-    --accent: oklch(0.9 0.06 330);
-    --accent-foreground: oklch(0.3 0.1 330);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.9 0.02 300);
-    --input: oklch(0.9 0.02 300);
-    --ring: oklch(0.58 0.23 322);
-    --chart-1: oklch(0.72 0.2 350);
-    --chart-2: oklch(0.62 0.24 320);
-    --chart-3: oklch(0.58 0.22 280);
-    --chart-4: oklch(0.6 0.2 250);
-    --chart-5: oklch(0.68 0.15 220);
-    --radius: 0.9rem;
-    --sidebar: oklch(0.97 0.01 300);
-    --sidebar-foreground: oklch(0.22 0.03 290);
-    --sidebar-primary: oklch(0.58 0.23 322);
-    --sidebar-primary-foreground: oklch(0.99 0.01 322);
-    --sidebar-accent: oklch(0.9 0.06 330);
-    --sidebar-accent-foreground: oklch(0.3 0.1 330);
-    --sidebar-border: oklch(0.9 0.02 300);
-    --sidebar-ring: oklch(0.58 0.23 322);
+    --background: #f5f3fb;
+    --foreground: #1f1b2e;
+    --card: #ffffff;
+    --card-foreground: #1f1b2e;
+    --popover: #ffffff;
+    --popover-foreground: #1f1b2e;
+    --primary: #db2777;
+    --primary-foreground: #ffffff;
+    --secondary: #ede9fe;
+    --secondary-foreground: #3a2d54;
+    --muted: #efeafd;
+    --muted-foreground: #6b6280;
+    --accent: #ede4fb;
+    --accent-foreground: #4c1d95;
+    --destructive: #dc2626;
+    --border: #e4defa;
+    --input: #e4defa;
+    --ring: #db2777;
+    --chart-1: #db2777;
+    --chart-2: #9333ea;
+    --chart-3: #7c3aed;
+    --chart-4: #2563eb;
+    --chart-5: #0284c7;
+    --radius: 0.75rem;
+    --sidebar: #ede9fe;
+    --sidebar-foreground: #1f1b2e;
+    --sidebar-primary: #db2777;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #ede4fb;
+    --sidebar-accent-foreground: #4c1d95;
+    --sidebar-border: #e4defa;
+    --sidebar-ring: #db2777;
 }
 
 .dark {
-    --background: oklch(0.16 0.025 285);
-    --foreground: oklch(0.95 0.015 290);
-    --card: oklch(0.21 0.03 285);
-    --card-foreground: oklch(0.95 0.015 290);
-    --popover: oklch(0.19 0.03 285);
-    --popover-foreground: oklch(0.95 0.015 290);
-    --primary: oklch(0.7 0.2 322);
-    --primary-foreground: oklch(0.15 0.03 322);
-    --secondary: oklch(0.28 0.04 285);
-    --secondary-foreground: oklch(0.92 0.02 290);
-    --muted: oklch(0.26 0.03 285);
-    --muted-foreground: oklch(0.68 0.03 290);
-    --accent: oklch(0.35 0.09 330);
-    --accent-foreground: oklch(0.95 0.03 330);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 14%);
-    --ring: oklch(0.7 0.2 322);
-    --chart-1: oklch(0.75 0.19 350);
-    --chart-2: oklch(0.7 0.22 320);
-    --chart-3: oklch(0.68 0.2 280);
-    --chart-4: oklch(0.68 0.19 250);
-    --chart-5: oklch(0.72 0.15 220);
-    --sidebar: oklch(0.19 0.03 285);
-    --sidebar-foreground: oklch(0.95 0.015 290);
-    --sidebar-primary: oklch(0.7 0.2 322);
-    --sidebar-primary-foreground: oklch(0.15 0.03 322);
-    --sidebar-accent: oklch(0.35 0.09 330);
-    --sidebar-accent-foreground: oklch(0.95 0.03 330);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.7 0.2 322);
+    --background: #15131f;
+    --foreground: #f2f0f7;
+    --card: #1f1b2c;
+    --card-foreground: #f2f0f7;
+    --popover: #1c1829;
+    --popover-foreground: #f2f0f7;
+    --primary: #ec4899;
+    --primary-foreground: #ffffff;
+    --secondary: #2a2440;
+    --secondary-foreground: #e5e1f0;
+    --muted: #272138;
+    --muted-foreground: #a79fc0;
+    --accent: #3a2d54;
+    --accent-foreground: #efeaff;
+    --destructive: #ef4444;
+    --border: color-mix(in srgb, #a78bfa 25%, transparent);
+    --input: color-mix(in srgb, #a78bfa 18%, transparent);
+    --ring: #ec4899;
+    --chart-1: #f472b6;
+    --chart-2: #c084fc;
+    --chart-3: #a78bfa;
+    --chart-4: #60a5fa;
+    --chart-5: #38bdf8;
+    --sidebar: #1c1829;
+    --sidebar-foreground: #f2f0f7;
+    --sidebar-primary: #ec4899;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #3a2d54;
+    --sidebar-accent-foreground: #efeaff;
+    --sidebar-border: color-mix(in srgb, #a78bfa 25%, transparent);
+    --sidebar-ring: #ec4899;
 }
 
 @layer base {
@@ -135,52 +134,69 @@
     }
 }
 
-/* Signature pink -> purple -> blue sweep, used sparingly (primary CTAs,
-   active rings, headline accents) rather than flooding every surface. */
+/* Signature pink -> purple -> blue sweep (matches app/icon.svg), used for
+   the wordmark and one hero moment - not smeared across every surface. */
 .bp-gradient-text {
-  background: linear-gradient(
-    100deg,
-    oklch(0.75 0.19 350),
-    oklch(0.65 0.23 322),
-    oklch(0.62 0.2 260)
-  );
+  background: linear-gradient(100deg, #ff6fb0, #b34bde 50%, #4f7fe0);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
 }
 
 .bp-gradient-ring {
-  background: linear-gradient(
-    135deg,
-    oklch(0.75 0.19 350),
-    oklch(0.65 0.23 322),
-    oklch(0.62 0.2 260)
-  );
+  background: linear-gradient(135deg, #ff6fb0, #b34bde 50%, #4f7fe0);
 }
 
-/* Glassy translucent card surface, subtle glow on hover. */
+/* Console-module surface: hairline border + a soft inset top highlight,
+   standing in for backdrop-blur glassmorphism. */
 .bp-glass {
-  background: color-mix(in oklch, var(--card) 72%, transparent);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
+  background: var(--card);
   border: 1px solid var(--border);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
   transition:
-    box-shadow 0.2s ease,
     border-color 0.2s ease,
-    transform 0.2s ease;
+    box-shadow 0.2s ease;
 }
 .bp-glass:hover {
-  border-color: color-mix(in oklch, var(--primary) 45%, var(--border));
-  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 25%, transparent), 0 10px 30px -12px rgba(0, 0, 0, 0.45);
+  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--foreground) 10%, transparent),
+    0 10px 30px -14px rgba(0, 0, 0, 0.45);
+}
+
+/* Illuminated indicator dot - reused on connection status and per-actuator
+   transmit indicators. */
+.bp-led {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: var(--muted-foreground);
+}
+.bp-led[data-on="true"] {
+  background: var(--primary);
+}
+
+/* Thin panel seam - a hardware "trim line," not a plain UI divider. */
+.bp-hairline {
+  height: 1px;
+  background: color-mix(in srgb, #a78bfa 35%, transparent);
+}
+
+/* Instrument-readout numerals: tabular mono for actuator %, timers, stats. */
+.bp-readout {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
 }
 
 @keyframes bp-pulse-glow {
   0%,
   100% {
-    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 55%, transparent);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 6px color-mix(in oklch, var(--primary) 0%, transparent);
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent);
   }
 }
 .bp-pulse {

app/icon.svg

@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bpGrad" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#ff6fb0" />
+      <stop offset="52%" stop-color="#b34bde" />
+      <stop offset="100%" stop-color="#4f7fe0" />
+    </linearGradient>
+  </defs>
+  <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGrad)" />
+  <path
+    d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+    fill="rgba(255,255,255,0.22)"
+  />
+  <polyline
+    points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+    fill="none"
+    stroke="#ffffff"
+    stroke-width="1.7"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

app/layout.tsx

@@ -1,15 +1,16 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Geist, Space_Grotesk } from "next/font/google";
+import { Inter, Space_Grotesk, JetBrains_Mono } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/layout/ThemeProvider";
 import { Toaster } from "@/components/ui/sonner";
 
-const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-display" });
+const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });
 
 export const metadata: Metadata = {
-  title: "sexy",
+  title: "SEXY",
   description: "Bluetooth toy control console",
 };
 
@@ -18,7 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html
       lang="en"
       suppressHydrationWarning
-      className={cn("font-sans", geist.variable, spaceGrotesk.variable)}
+      className={cn("font-sans", inter.variable, spaceGrotesk.variable, jetbrainsMono.variable)}
     >
       <body>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>

app/login/page.tsx

@@ -1,13 +1,17 @@
 import { Suspense } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { LoginForm } from "@/components/auth/LoginForm";
+import { BrandMark } from "@/components/layout/BrandMark";
 
 export default function LoginPage() {
   return (
     <div className="flex min-h-dvh items-center justify-center p-4">
       <Card className="bp-glass w-full max-w-sm">
         <CardHeader>
-          <CardTitle className="font-display bp-gradient-text text-2xl">sexy</CardTitle>
+          <div className="flex items-center gap-2">
+            <BrandMark size={32} />
+            <CardTitle className="font-heading bp-gradient-text text-2xl">SEXY</CardTitle>
+          </div>
           <CardDescription>Enter the shared access secret to continue.</CardDescription>
         </CardHeader>
         <CardContent>