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>
This commit is contained in:
Bryan Helmkamp 2026-03-16 10:50:53 -04:00
parent 28dd481ed2
commit 10ba327aad
No known key found for this signature in database
3 changed files with 12 additions and 12 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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;