From 7d9e24bf7d7489f72a5ad1a9d2052db7962953b0 Mon Sep 17 00:00:00 2001
From: Kevin Longe <273747162+kvlonge@users.noreply.github.com>
Date: Wed, 4 Nov 2026 08:07:58 +0000
Subject: [PATCH] fix: match header wordmark to product typography

Render the SQLStack header wordmark in Space Grotesk 700 with normal
letter-spacing, matching the product names, while keeping its 22px size.
---
 styles.css             | 2 +-
 tests/website.spec.mjs | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index d50aa23..7291e1b 100644
--- a/styles.css
+++ b/styles.css
@@ -68,7 +68,7 @@ img { display: block; object-fit: contain; }
 .site-header { border-bottom: 1px solid var(--line); }
 .header-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
 .brand { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); text-decoration: none; }
-.brand span { font-size: 22px; font-weight: 750; letter-spacing: -.8px; }
+.brand span { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0; }
 .nav-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
 .nav-icon:hover { color: var(--ink); }
 .nav-icon:focus-visible { outline-offset: 3px; }
diff --git a/tests/website.spec.mjs b/tests/website.spec.mjs
index 408c3f8..743ee84 100644
--- a/tests/website.spec.mjs
+++ b/tests/website.spec.mjs
@@ -50,6 +50,10 @@ test('approved products, sharing assets and responsive navigation work in both t
     await expect(page.getByRole('heading', { level: 1 })).toHaveText('Your data stack. Engineered for safer change.');
     await expect(page.locator('.hero .lede')).toHaveText('Rust-backed SQL and Python tools for data engineers.');
     await expect(page.getByRole('heading', { level: 3 })).toHaveText(names);
+    const wordmark = page.locator('.brand span');
+    for (const [property, value] of [['font-family', '"Space Grotesk", sans-serif'], ['font-weight', '700'], ['letter-spacing', 'normal'], ['font-size', '22px']]) {
+      await expect(wordmark).toHaveCSS(property, value);
+    }
     await expect(page.getByRole('link', { name: 'SQLStack on GitHub', exact: true })).toHaveAttribute('href', 'https://github.com/sqlstack-io');
     for (const [name, website] of [['SQLBuild', 'https://sqlbuild.com'], ['SQLTide', 'https://sqltide.io/'], ['SQLClean', 'https://sqlclean.io'], ['Fensu', 'https://fensu.io/']]) {
       const card = page.getByRole('article', { name, exact: true });