fix(workspace): correct typography — Space Grotesk 600, drop dead font, un-caps theme labels

LEANDERANTONY · claude · LEANDERANTONY · commit e6f2e0c2a528 · 2026-05-19T00:16:37.000+05:30
Three coupled frontend-only typography fixes:

1. Space Grotesk loaded weights ["400","500","700"] but globals.css
   requests `font-weight: 600` in 60+ rules (every .b-shell heading,
   region title, button, chip via --font-display). With no 600 face
   the browser substituted the 700 Bold face, so workspace headings
   and labels rendered heavier than designed — the "weird font"
   report. Now ["400","500","600","700"], matching HelpmateAI exactly
   -&gt; genuine SemiBold.

2. Geist (sans) was imported + loaded but referenced NOWHERE (only
   --font-geist-mono is used). Dropped the import, instance, and
   className var — one fewer webfont fetched per page load.

3. .b-artifact-style-option had text-transform: uppercase, so the
   download page's theme picker rendered the already-correctly-cased
   "Professional"/"Classic ATS" labels as shouty spaced mono caps.
   Removed it (+ tightened tracking 0.04-&gt;0.02em now that it's
   mixed-case). The intentional "STYLE" eyebrow stays uppercase.

tsc + eslint clean. No behavioral/logic change.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -7075,8 +7075,10 @@ code {
   font-family: var(--font-mono);
   font-size: 11.5px;
   font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  /* No text-transform: the labels ("Professional", "Classic ATS")
+     are already correctly cased in THEME_OPTIONS. Uppercasing them
+     made the picker read as shouty all-caps mono. */
   color: var(--fg-3);
   border-radius: 6px;
   cursor: pointer;
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { DM_Sans, Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
+import { DM_Sans, Geist_Mono, Space_Grotesk } from "next/font/google";
 import { Analytics } from "@vercel/analytics/next";
 import { CookieConsentBanner } from "@/components/cookie-consent";
 import { PostHogProvider } from "@/components/posthog-provider";
@@ -13,15 +13,18 @@ const dmSans = DM_Sans({
 const spaceGrotesk = Space_Grotesk({
   variable: "--font-space-grotesk",
   subsets: ["latin"],
-  weight: ["400", "500", "700"],
+  // 600 (SemiBold) is required: globals.css uses `font-weight: 600`
+  // in 60+ rules — every `.b-shell` heading, region title, button and
+  // chip via --font-display. Omitting it made the browser substitute
+  // the 700 Bold face for all of them, so workspace headings/labels
+  // rendered heavier than intended (the "weird font" report). Matches
+  // HelpmateAI's load exactly.
+  weight: ["400", "500", "600", "700"],
 });
 
-// Workspace-scoped typography (Direction B redesign). Consumed by
-// `.b-shell` only — see globals.css.
-const geist = Geist({
-  variable: "--font-geist",
-  subsets: ["latin"],
-});
+// Workspace mono (Direction B redesign). The only Geist face the
+// workspace consumes — `.b-shell --font-mono` in globals.css. (The
+// Geist *sans* face was loaded but never referenced; dropped.)
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
@@ -48,7 +51,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${dmSans.variable} ${spaceGrotesk.variable} ${geist.variable} ${geistMono.variable}`}
+      className={`${dmSans.variable} ${spaceGrotesk.variable} ${geistMono.variable}`}
       suppressHydrationWarning
     >
       <body>
