Restyle the UI: instrument-panel palette, type system, and a signal accent

Replaces the default shadcn grayscale/Geist look with a deliberate
identity built around the product's own subject - a control panel for
running scripts and watching their output live:

- Type: Bricolage Grotesque for page/card titles (via the existing
  --font-heading token, used with restraint), IBM Plex Sans for UI body
  text, IBM Plex Mono for technical data (run IDs, commands, timestamps,
  status labels) - all self-hosted at build time via next/font/google,
  no runtime CDN dependency for a self-hosted tool.
- Color: a cool graphite ink/paper base with a warm brass signal accent
  in both themes. The brass tone doubles as the "running" status color,
  so an active run literally lights the UI up with the brand color.
  New --status-* tokens give queued/running/succeeded/failed/cancelled/
  warn a single source of truth instead of ad-hoc Tailwind color classes.
- Structural language: small tracked-out uppercase mono labels mark
  technical fields (Command, Variables, Triggered by...) consistently;
  the live-output terminal gets an instrument-bezel frame (header bar +
  panel) instead of floating loose above the xterm canvas.

Layout/IA is unchanged throughout - this is a token- and detail-level
pass, not a restructuring.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/layout/nav.tsx

@@ -34,9 +34,9 @@ export function Nav({
         <div className="flex min-w-0 items-center gap-3 sm:gap-6">
           <Link
             href="/"
-            className="flex shrink-0 items-center gap-2 font-semibold tracking-tight"
+            className="font-heading flex shrink-0 items-center gap-2 text-[1.05rem] font-semibold tracking-tight"
           >
-            <Terminal className="size-5" />
+            <Terminal className="text-primary size-5" />
             TriggerShell
           </Link>
           <nav className="flex items-center gap-1">
@@ -45,8 +45,8 @@ export function Nav({
                 key={href}
                 href={href}
                 className={cn(
-                  "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors sm:px-3",
-                  pathname === href && "bg-muted text-foreground",
+                  "text-muted-foreground hover:text-foreground hover:bg-muted/60 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors sm:px-3",
+                  pathname === href && "bg-primary/10 text-foreground",
                 )}
               >
                 <Icon className="size-4" />

src/components/runs/run-status-badge.tsx

@@ -3,13 +3,13 @@ import type { RunStatus } from "@/lib/db/schema";
 import { cn } from "@/lib/utils";
 
 const styles: Record<RunStatus, string> = {
-  queued: "bg-muted text-muted-foreground",
-  running: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
-  succeeded: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
-  failed: "bg-destructive/15 text-destructive",
-  cancelled: "bg-muted text-muted-foreground",
-  timed_out: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
-  interrupted: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+  queued: "bg-status-queued/12 text-status-queued",
+  running: "bg-status-running/15 text-status-running",
+  succeeded: "bg-status-succeeded/12 text-status-succeeded",
+  failed: "bg-status-failed/12 text-status-failed",
+  cancelled: "bg-status-cancelled/12 text-status-cancelled",
+  timed_out: "bg-status-warn/12 text-status-warn",
+  interrupted: "bg-status-warn/12 text-status-warn",
 };
 
 export const runStatusLabels: Record<RunStatus, string> = {
@@ -25,12 +25,18 @@ export const runStatusLabels: Record<RunStatus, string> = {
 export function RunStatusBadge({ status }: { status: RunStatus }) {
   return (
     <Badge
-      className={cn("border-transparent font-medium", styles[status])}
+      className={cn(
+        "gap-1.5 border-transparent font-mono text-[0.7rem] font-medium tracking-wide uppercase",
+        styles[status],
+      )}
       variant="outline"
     >
-      {status === "running" && (
-        <span className="mr-1 inline-block size-1.5 animate-pulse rounded-full bg-current" />
-      )}
+      <span
+        className={cn(
+          "size-1.5 shrink-0 rounded-full bg-current",
+          status === "running" && "animate-pulse",
+        )}
+      />
       {runStatusLabels[status]}
     </Badge>
   );

src/components/runs/run-terminal.tsx

@@ -74,13 +74,13 @@ export function RunTerminal({
   }
 
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center justify-between">
+    <div className="border-border overflow-hidden rounded-lg border">
+      <div className="bg-muted/40 flex items-center justify-between gap-3 border-b px-3 py-2">
         <div className="flex items-center gap-3">
           <RunStatusBadge status={status} />
           {exitCode !== null && (
-            <span className="text-muted-foreground text-xs">
-              exit code {exitCode}
+            <span className="text-muted-foreground font-mono text-xs">
+              exit {exitCode}
             </span>
           )}
         </div>

src/components/runs/xterm-view.tsx

@@ -10,9 +10,9 @@ export interface XtermViewHandle {
 }
 
 const theme = {
-  background: "#09090b",
-  foreground: "#f4f4f5",
-  cursor: "#f4f4f5",
+  background: "#101215",
+  foreground: "#edeef0",
+  cursor: "#e9a857",
   selectionBackground: "#3f3f46",
   black: "#18181b",
   red: "#f87171",
@@ -95,7 +95,7 @@ export const XtermView = forwardRef<XtermViewHandle, XtermViewProps>(
     return (
       <div
         ref={containerRef}
-        className="h-[60vh] overflow-hidden rounded-lg bg-zinc-950 p-2"
+        className="h-[60vh] overflow-hidden bg-[#101215] p-2"
       />
     );
   },