From 6450cfd64088ea7fc8a6f67bdf3a882c6e71235a Mon Sep 17 00:00:00 2001
From: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local>
Date: Thu, 15 Oct 2026 01:23:17 +0530
Subject: [PATCH 1/2] feat(website/design): two-family variable type system and
 fluid type scale

Drop Space Grotesk (4 static weights); headings use Inter Variable at 700
with -0.02em tracking. JetBrains Mono Variable (preload:false) for code,
tabular-nums stat numbers and a separate mono eyebrow. Add fluid display/h2
tokens and apply them to the hero and Trusted by Developers section.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9
---
 website/src/app/globals.css                  | 36 +++++++++++++++++---
 website/src/app/layout.tsx                   |  4 +--
 website/src/components/home/Hero.tsx         |  2 +-
 website/src/components/home/TrustSection.tsx |  7 ++--
 website/src/lib/fonts.ts                     | 16 ++++-----
 5 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index df23bd06..611c6baf 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -92,9 +92,19 @@ 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 {
@@ -102,7 +112,25 @@ html {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-heading), system-ui, sans-serif;
+  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 {
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index c4c7a589..5993e7f6 100644
--- a/website/src/app/layout.tsx
+++ b/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={{
diff --git a/website/src/components/home/Hero.tsx b/website/src/components/home/Hero.tsx
index d961f595..1d901964 100644
--- a/website/src/components/home/Hero.tsx
+++ b/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>
diff --git a/website/src/components/home/TrustSection.tsx b/website/src/components/home/TrustSection.tsx
index 74b063f3..9295280f 100644
--- a/website/src/components/home/TrustSection.tsx
+++ b/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>
diff --git a/website/src/lib/fonts.ts b/website/src/lib/fonts.ts
index 256a432e..028c05a5 100644
--- a/website/src/lib/fonts.ts
+++ b/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,
 });

From bd2a5a2f0c48f31ceb1d67516273e96bf905e0e7 Mon Sep 17 00:00:00 2001
From: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local>
Date: Thu, 15 Oct 2026 01:26:02 +0530
Subject: [PATCH 2/2] fix(website): move global heading rule into @layer base
 so utilities override

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9
---
 website/src/app/globals.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index 611c6baf..e6b6b305 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -111,10 +111,13 @@ html {
   overflow-x: clip;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-inter), system-ui, sans-serif;
-  font-weight: 700;
-  letter-spacing: -0.02em;
+/* 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. */