style: match timq.xyz typography — Anton condensed-black display + Martian Mono labels

Author: kohsheen1234

docs/assets/screenshots/01-overview.png

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Martian+Mono:wght@400;500;600&family=Libre+Caslon+Display&display=swap"
       rel="stylesheet"
     />
     <title>AgentWatch — AI Incident Observatory</title>

docs/assets/screenshots/02-explorer.png

@@ -66,10 +66,10 @@ body {
 }
 
 .eyebrow {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-family: "Martian Mono", ui-monospace, monospace;
   color: #f5a524;
-  font-size: 0.72rem;
-  letter-spacing: 0.2em;
+  font-size: 0.68rem;
+  letter-spacing: 0.22em;
   text-transform: uppercase;
 }
 

docs/assets/screenshots/03-review.png

@@ -19,7 +19,7 @@ export function StatCard({ label, value, hint }: { label: string; value: ReactNo
   return (
     <Card className="p-5">
       <div className="font-mono text-[0.68rem] uppercase tracking-[0.12em] text-faint">{label}</div>
-      <div className="text-3xl font-bold text-ink mt-2 tabular-nums">{value}</div>
+      <div className="font-display text-4xl text-ink mt-2 tabular-nums">{value}</div>
       {hint && <div className="text-xs text-muted mt-1">{hint}</div>}
     </Card>
   );
@@ -96,8 +96,10 @@ export function Spinner({ label }: { label: string }) {
 export function SectionHeader({ eyebrow, title }: { eyebrow?: string; title: string }) {
   return (
     <div className="mb-4">
-      {eyebrow && <div className="eyebrow mb-1.5">{eyebrow}</div>}
-      <h2 className="text-2xl font-bold text-ink tracking-tight">{title}</h2>
+      {eyebrow && <div className="eyebrow mb-2">{eyebrow}</div>}
+      <h2 className="font-display uppercase text-3xl md:text-4xl text-ink tracking-tight leading-none">
+        {title}
+      </h2>
     </div>
   );
 }

frontend/index.html

@@ -67,12 +67,12 @@ export function Overview({ onExplore }: { onExplore?: () => void }) {
       {/* Hero */}
       <section className="text-center max-w-3xl mx-auto pt-6 pb-4">
         <div className="eyebrow mb-4">Live · AI-agent incident monitoring</div>
-        <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.05]">
+        <h1 className="font-display uppercase text-5xl md:text-8xl leading-[0.9] tracking-tight">
           <span className="grad-text">The observatory for</span>
           <br />
           <span className="text-ink">AI-agent incidents</span>
         </h1>
-        <p className="text-muted text-lg leading-relaxed mt-6">
+        <p className="text-muted text-lg leading-relaxed mt-7 max-w-2xl mx-auto">
           As AI systems increasingly act on their own, people post when they misbehave — deleting
           files, ignoring instructions, acting without permission. AgentWatch turns those scattered,
           disappearing reports into a durable, measurable evidence base.

frontend/src/index.css

@@ -17,7 +17,9 @@ export default {
       },
       fontFamily: {
         sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
-        mono: ["'JetBrains Mono'", "ui-monospace", "monospace"],
+        display: ["Anton", "Impact", "ui-sans-serif", "sans-serif"],
+        serif: ["'Libre Caslon Display'", "Georgia", "serif"],
+        mono: ["'Martian Mono'", "ui-monospace", "monospace"],
       },
       maxWidth: { content: "1180px" },
       boxShadow: {