From 10ba327aad933205cb55b812864eaf97ffd378a1 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Mon, 16 Mar 2026 10:50:53 -0400
Subject: [PATCH] Switch display font from Barlow Condensed to Space Grotesk

Replace aggressive uppercase/wide-tracking headings with sentence-case
tight-tracking for a more natural, geometric-techy feel.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/marketing/src/layouts/Layout.astro |  2 +-
 apps/marketing/src/pages/index.astro    | 20 ++++++++++----------
 apps/marketing/src/styles/global.css    |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro
index bed8631af..e8766db58 100644
--- a/apps/marketing/src/layouts/Layout.astro
+++ b/apps/marketing/src/layouts/Layout.astro
@@ -18,7 +18,7 @@ const { title } = Astro.props;
     <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=Barlow+Condensed:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
     <title>{title}</title>
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 1ff170663..6c300c912 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -83,7 +83,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
             Open Source &middot; MIT Licensed
           </p>
         </div>
-        <h1 class="reveal reveal-d1 font-display text-5xl font-extrabold uppercase tracking-wide text-ice-50 sm:text-7xl leading-[1.08]">
+        <h1 class="reveal reveal-d1 font-display text-5xl font-bold tracking-tight text-ice-50 sm:text-7xl leading-[1.08]">
           The dark software factory<br />
           for <span class="gradient-text">expert engineers</span>
         </h1>
@@ -127,7 +127,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
     <section class="relative py-16">
       <hr class="mx-auto max-w-xs border-navy-800" />
       <div class="mx-auto max-w-3xl px-6 pt-16 text-center">
-        <h2 class="reveal font-display text-2xl font-semibold uppercase tracking-widest text-ice-50 sm:text-3xl">
+        <h2 class="reveal font-display text-3xl font-bold tracking-tight text-ice-50 sm:text-3xl">
           Stop babysitting agents.<br class="hidden sm:inline" /> Start orchestrating workflows.
         </h2>
         <p class="reveal reveal-d1 mt-5 text-lg leading-relaxed text-ice-300">
@@ -141,7 +141,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
     <!-- Feature Grid -->
     <section class="relative bg-navy-900 pt-20 pb-28">
       <div class="mx-auto max-w-6xl px-6">
-        <h2 class="reveal font-display text-2xl font-semibold uppercase tracking-widest text-ice-50 text-center mb-16">
+        <h2 class="reveal font-display text-3xl font-bold tracking-tight text-ice-50 text-center mb-16">
           Key features
         </h2>
         <div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
@@ -291,7 +291,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
       <div class="mx-auto max-w-6xl px-6">
         <div class="grid items-start gap-16 lg:grid-cols-2">
           <div class="reveal-left">
-            <h2 class="font-display text-2xl font-semibold uppercase tracking-widest text-ice-50">
+            <h2 class="font-display text-3xl font-bold tracking-tight text-ice-50">
               Workflow-as-Code
             </h2>
             <p class="mt-5 text-lg leading-relaxed text-ice-300">
@@ -398,7 +398,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
             </div>
           </div>
           <div class="order-1 lg:order-2 reveal-right">
-            <h2 class="font-display text-2xl font-semibold uppercase tracking-widest text-ice-50">
+            <h2 class="font-display text-3xl font-bold tracking-tight text-ice-50">
               Verification is a<br class="hidden sm:inline" /> first-class concept
             </h2>
             <p class="mt-5 text-lg leading-relaxed text-ice-300">
@@ -420,7 +420,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
         <!-- Multi-model: 2-col -->
         <div class="grid items-start gap-16 lg:grid-cols-2">
           <div class="reveal-left">
-            <h2 class="font-display text-2xl font-semibold uppercase tracking-widest text-ice-50">
+            <h2 class="font-display text-3xl font-bold tracking-tight text-ice-50">
               Multi-model, multi-provider
             </h2>
             <p class="mt-5 text-lg leading-relaxed text-ice-300">
@@ -460,7 +460,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
         <!-- Observability: centered -->
         <div class="mx-auto max-w-4xl">
           <div class="text-center">
-            <h2 class="reveal font-display text-2xl font-semibold uppercase tracking-widest text-ice-50">
+            <h2 class="reveal font-display text-3xl font-bold tracking-tight text-ice-50">
               Ground-up observability
             </h2>
             <p class="reveal reveal-d1 mt-5 text-lg leading-relaxed text-ice-300">
@@ -527,7 +527,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
       <div class="absolute inset-0 grid-overlay"></div>
       <div class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-teal-700/6 blur-[150px]"></div>
       <div class="relative mx-auto max-w-3xl px-6 text-center">
-        <h2 class="reveal font-display text-4xl font-bold uppercase tracking-wide text-ice-50 sm:text-5xl">
+        <h2 class="reveal font-display text-4xl font-bold tracking-tight text-ice-50 sm:text-5xl">
           Workflows you can audit.<br />
           <span class="gradient-text">Output you can trust.</span>
         </h2>
@@ -599,7 +599,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
         </div>
         <!-- Col 2: Product -->
         <div>
-          <h3 class="font-display text-sm font-semibold uppercase tracking-widest text-ice-300/70 mb-4">Product</h3>
+          <h3 class="font-display text-sm font-semibold uppercase tracking-wider text-ice-300/70 mb-4">Product</h3>
           <ul class="space-y-2 text-sm">
             <li><a href="https://docs.fabro.sh/getting-started/quick-start" class="text-ice-300 hover:text-ice-50 transition-colors">Quick Start</a></li>
             <li><a href="https://docs.fabro.sh" class="text-ice-300 hover:text-ice-50 transition-colors">Docs</a></li>
@@ -608,7 +608,7 @@ const cssExample = `<span class="text-ice-300">/* All nodes default to fast + ch
         </div>
         <!-- Col 3: Community -->
         <div>
-          <h3 class="font-display text-sm font-semibold uppercase tracking-widest text-ice-300/70 mb-4">Community</h3>
+          <h3 class="font-display text-sm font-semibold uppercase tracking-wider text-ice-300/70 mb-4">Community</h3>
           <ul class="space-y-2 text-sm">
             <li><a href="https://github.com/fabro-sh/fabro" class="text-ice-300 hover:text-ice-50 transition-colors">GitHub</a></li>
             <li><a href="https://github.com/fabro-sh/fabro/issues" class="text-ice-300 hover:text-ice-50 transition-colors">Issues</a></li>
diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css
index d66664f24..c50e0addb 100644
--- a/apps/marketing/src/styles/global.css
+++ b/apps/marketing/src/styles/global.css
@@ -18,7 +18,7 @@
   --color-amber: #F0A45B;
   --color-coral: #E86B6B;
 
-  --font-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
   --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, monospace;