feat(website/design): two-family type system and fluid type scale

website/src/app/globals.css

@@ -92,17 +92,48 @@ html.light textarea[class*="font-mono"] {
   --color-danger: var(--danger);
   --color-ok: var(--ok);
 
-  --font-sans: var(--font-body), system-ui, sans-serif;
-  --font-heading: var(--font-heading), system-ui, sans-serif;
-  --font-mono: var(--font-jetbrains), monospace;
+  --font-sans: var(--font-inter), system-ui, sans-serif;
+  --font-heading: var(--font-inter), system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains), ui-monospace, monospace;
+
+  /* Fluid type scale */
+  --text-display: clamp(2.5rem, 6vw, 4.5rem);
+  --text-display--line-height: 1.05;
+  --text-h2: clamp(1.75rem, 3.5vw, 2.5rem);
+  --text-h2--line-height: 1.15;
+  --text-body: 1rem;
+  --text-body--line-height: 1.6;
+  --text-eyebrow: 0.8125rem;
+  --text-eyebrow--line-height: 1.4;
 }
 
 html {
   overflow-x: clip;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-heading), system-ui, sans-serif;
+/* In @layer base so Tailwind utilities (font-*, tracking-*) can still override. */
+@layer base {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-inter), system-ui, sans-serif;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+}
+
+/* Mono eyebrow label, kept separate from the real heading it introduces. */
+.eyebrow {
+  font-family: var(--font-jetbrains), ui-monospace, monospace;
+  font-size: var(--text-eyebrow);
+  line-height: var(--text-eyebrow--line-height);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* Stat numbers: mono, aligned digits. */
+.stat-number {
+  font-family: var(--font-jetbrains), ui-monospace, monospace;
+  font-variant-numeric: tabular-nums;
 }
 
 body {

website/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { spaceGrotesk, inter, jetbrainsMono } from '@/lib/fonts';
+import { inter, jetbrainsMono } from '@/lib/fonts';
 import { Navbar } from '@/components/layout/Navbar';
 import { Footer } from '@/components/layout/Footer';
 import { Providers } from '@/components/Providers';
@@ -40,7 +40,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`dark ${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
+    <html lang="en" className={`dark ${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
       <head>
         <script
           dangerouslySetInnerHTML={{

website/src/components/home/Hero.tsx

@@ -38,7 +38,7 @@ export function Hero({ stars }: { stars: number | null }) {
 
         {/* Headline */}
         <h1
-          className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 break-words hyphens-auto w-full max-w-full px-4 sm:px-0"
+          className="text-display font-bold mb-6 break-words hyphens-auto w-full max-w-full px-4 sm:px-0"
           style={{ letterSpacing: '-0.03em' }}
         >
           <GradientText>Parse SQL at the speed of Go</GradientText>

website/src/components/home/TrustSection.tsx

@@ -99,7 +99,10 @@ export function TrustSection({ stars }: { stars: number | null }) {
       <div className="max-w-5xl mx-auto px-4">
         {/* Heading */}
         <FadeIn viewport>
-          <h2 className="text-center text-sm font-semibold uppercase tracking-widest text-zinc-300 mb-10">
+          <p className="eyebrow text-center text-zinc-300 mb-2" aria-hidden="true">
+            By the numbers
+          </p>
+          <h2 className="text-center text-h2 text-zinc-100 mb-10">
             Trusted by Developers
           </h2>
         </FadeIn>
@@ -110,7 +113,7 @@ export function TrustSection({ stars }: { stars: number | null }) {
             <FadeIn viewport key={m.id} delay={i * 0.07}>
               <div className="glass text-center px-4 py-5 flex flex-col items-center gap-2">
                 {m.icon}
-                <span className="text-lg font-bold text-zinc-100">
+                <span className="stat-number text-lg font-bold text-zinc-100">
                   {m.id === 'stars' && stars !== null ? formatStars(stars) : m.value}
                 </span>
                 <span className="text-xs text-zinc-300">{m.label}</span>

website/src/lib/fonts.ts

@@ -1,20 +1,18 @@
-import { Space_Grotesk, Inter, JetBrains_Mono } from 'next/font/google';
-
-export const spaceGrotesk = Space_Grotesk({
-  subsets: ['latin'],
-  variable: '--font-heading',
-  display: 'swap',
-  weight: ['400', '500', '600', '700'],
-});
+import { Inter, JetBrains_Mono } from 'next/font/google';
 
+// Two variable families only. Omitting `weight` makes next/font load the
+// variable font file, so every weight is served from a single woff2.
 export const inter = Inter({
   subsets: ['latin'],
-  variable: '--font-body',
+  variable: '--font-inter',
   display: 'swap',
 });
 
+// Code, stat numbers and eyebrows. Not preloaded: it is not needed for the
+// first paint of most routes.
 export const jetbrainsMono = JetBrains_Mono({
   subsets: ['latin'],
   variable: '--font-jetbrains',
   display: 'swap',
+  preload: false,
 });