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

[ajitpratap0]

Summary

• Fonts: removed Space Grotesk (4 static weights). Two variable families remain: Inter Variable (UI and headings, weight 700, -0.02em tracking) and JetBrains Mono Variable (preload: false) for code, stat numbers and eyebrows.
• Fluid type tokens in globals.css: display clamp(2.5rem,6vw,4.5rem)/1.05, h2 clamp(1.75rem,3.5vw,2.5rem), body 1rem/1.6, eyebrow 0.8125rem mono. Added .eyebrow and .stat-number (tabular-nums) utilities.
• Applied: hero h1 uses text-display; TrustSection now has a mono eyebrow separate from a real <h2>, and stat numbers are mono/tabular.
• Build output: only the Inter latin woff2 (~48KB) is preloaded; the mono face is no longer preloaded. Lighthouse CI on this PR should confirm CLS <= 0.05.
• CHANGELOG.md intentionally not edited (release prepared in another session).

Test Plan

• npm ci, npm run typecheck (clean), npm run lint (0 errors, 7 pre-existing warnings), npm run build (passes)
• Lighthouse CI: CLS <= 0.05, font transfer below baseline
• Vercel preview visual check of home hero and Trusted by Developers

Breaking Changes

None. Visual only: headings now render in Inter instead of Space Grotesk.

Closes #660
Part of #634

🤖 Generated with Claude Code

https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9

[vercel]

Deployment failed for project gosqlx-website with the following error:

Resource is limited - try again in 24 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/coolajitpratapsingh0-9932s-projects?upgradeToPro=build-rate-limit

[github-actions]

Claude finished @ajitpratap0's task in 20s —— View job

---

Review of PR #715: two-family type system

Overall this is a clean, focused change. I found no blocking issues. I read the diff and grepped for leftover references. I did not run the build or Lighthouse.

Checked

• No remaining references to spaceGrotesk, Space Grotesk or --font-body anywhere in website/. The only remaining --font-heading is its definition in globals.css:96.
• Fonts: omitting weight on Inter gives the variable file, and preload: false on JetBrains Mono matches the PR description.
• The --text-display and --text-h2 tokens follow Tailwind v4's --text-* / --text-*--line-height convention. That should generate the text-display and text-h2 utilities, which the build passing supports.

Suggestions (non-blocking)

1. globals.css:96: --font-heading is now an alias of --font-inter and nothing uses it. Either remove it or point the h1…h6 rule at it, so there is one source of truth.
2. Hero.tsx:41: the inline letterSpacing: '-0.03em' overrides the new global -0.02em heading tracking. That is probably intentional for display size, but it is worth a comment or a .text-display tracking token. font-bold is also redundant now that headings are 700.
3. Mono preload: false and CLS: the mono face is used for .eyebrow and .stat-number in the above-the-fold-adjacent Trust section, and with display: 'swap' it will swap late. Next adjusts the fallback metrics for next/font/google fonts by default, so the shift should be small. The CLS ≤ 0.05 check in Lighthouse is the right validation, so keep an eye on it. adjustFontFallback is available if it regresses.
4. TrustSection.tsx: the eyebrow is aria-hidden, which is fine for decorative text. "By the numbers" does add context, though, so consider dropping aria-hidden unless you want screen readers to skip it. text-zinc-300 on dark is fine for contrast.
5. .stat-number and text-lg: the stat numbers stay at text-lg. If the intent is for stats to read as data, a slightly larger size or font-semibold for the mono face might look better. This is purely visual, so check it in the Vercel preview.
6. html.light selectors at the top of globals.css reference font-mono textareas. They are unaffected, since --font-mono still resolves.

Tests: This is visual-only and there are no unit tests. The remaining checklist items (Lighthouse CI and the visual preview) are the real verification.

Looks good to merge once Lighthouse confirms CLS and font transfer.

[vercel]

Deployment failed for project gosqlx-website with the following error:

Resource is limited - try again in 1 day (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/coolajitpratapsingh0-9932s-projects?upgradeToPro=build-rate-limit

[ajitpratap0]

Fixed in bd2a5a2: the global heading rule (font-family, weight 700, letter-spacing -0.02em) is now wrapped in @layer base in website/src/app/globals.css, so Tailwind utilities (font-, tracking-) in @layer utilities override it again. The Toc h4, footer h3s, playground h1 and the other headings keep their utility weights and tracking. typecheck and build pass; lint has 0 errors (7 existing warnings).

[github-actions]

Claude finished @ajitpratap0's task in 18s —— View job

---

Review of PR #715: two-family type system

I read the full diff against origin/main. I did not run the build, typecheck or Lighthouse. The PR description reports that typecheck, lint and build passed. I found no blocking issues. This largely agrees with the earlier review on this PR.

What looks good

• Space Grotesk and its four static weights are gone from fonts.ts and layout.tsx. The diff shows no leftover spaceGrotesk import or --font-body usage in the changed files.
• Omitting weight on Inter loads the single variable file, which cuts font requests.
• Moving the heading rule into @layer base lets Tailwind utilities override it. That fixes the cascade problem from the previous commit.
• The --text-display and --text-h2 tokens, with their --line-height companions, follow Tailwind v4's theme naming, so text-display and text-h2 should generate.
• In TrustSection, the separate <p class="eyebrow"> and real <h2> is better semantically than styling the h2 as a label.

Suggestions (non-blocking)

1. globals.css:96: --font-heading is now an alias of Inter and nothing seems to use it. Remove it, or point the h1…h6 rule at it.
2. Hero.tsx:41: the inline letterSpacing: '-0.03em' overrides the global -0.02em. That is probably intended at display size, but it would be cleaner as a --text-display--letter-spacing token (Tailwind v4 supports this) than as inline style. font-bold is redundant now that headings are 700.
3. Mono preload: false and CLS: .eyebrow and .stat-number use mono in the Trust section, and display: 'swap' will swap them late. next/font applies a size-adjusted fallback by default, so the shift should be small. Lighthouse CLS ≤ 0.05 is the right check. If it regresses, re-enable preload for mono.
4. TrustSection.tsx:102: aria-hidden on "By the numbers" hides it from screen readers. It is only decorative if the h2 carries the meaning, so this is fine, but you could drop it.
5. --text-body and --text-eyebrow tokens: .eyebrow uses --text-eyebrow directly. Because the tokens are in Tailwind's --text-* namespace, text-body and text-eyebrow utilities also exist. Make sure they are not meant to be used alongside .eyebrow, or you will have two ways to do the same thing.
6. Stat size: stats stay at text-lg. Check in the Vercel preview whether mono at that size reads well as data. This is a visual call.

Tests: This change is visual only, with no unit tests. The remaining checklist items are the real verification. Lighthouse CI for CLS and font transfer is still unchecked. The Vercel preview failed because of the free-tier deployment limit (api-deployments-free-per-day), not because of this change, so the visual check will need a redeploy later or a local run.

The change looks good to merge once Lighthouse confirms CLS and font transfer.