MLSysDev · HumbleBee14 · Jul 13, 2026 · Jul 12, 2026 · Jul 12, 2026 · Jul 12, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@blocknote/core": "^0.51.4",
     "@blocknote/mantine": "^0.51.4",
     "@blocknote/react": "^0.51.4",
+    "@fontsource/fraunces": "^5.2.9",
     "@fontsource/instrument-serif": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@resvg/resvg-js": "^2.6.2",

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -166,18 +166,18 @@ const siteJsonLd = [
   <link
     rel="preload"
     as="style"
-    href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
   />
   <link
     rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
     media="print"
     onload="this.media='all'"
   />
   <noscript>
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
     />
   </noscript>
 

diff --git a/src/lib/og.tsx b/src/lib/og.tsx
@@ -62,7 +62,7 @@ const SHELL_STYLE: React.CSSProperties = {
   background: C.paper,
   padding: '64px 72px',
   position: 'relative',
-  fontFamily: 'Geist',
+  fontFamily: 'Fraunces',
 };
 
 const BORDER_STYLE: React.CSSProperties = {
@@ -111,7 +111,7 @@ function brandBar(): React.ReactElement {
         </span>
         <span
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontStyle: 'italic',
             fontSize: 28,
             color: C.ink2,
@@ -141,7 +141,7 @@ function template(d: OgArticle): React.ReactElement {
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 24 }}>
         <div
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontSize: 76,
             lineHeight: 1.04,
             color: C.ink,
@@ -168,7 +168,7 @@ function pageTemplate(title: string): React.ReactElement {
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 28 }}>
         <div
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontSize: 132,
             lineHeight: 1.0,
             color: C.ink,
@@ -215,7 +215,7 @@ function authorTemplate(name: string, bio?: string, handle?: string): React.Reac
         </div>
         <div
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontSize: 108,
             lineHeight: 1.0,
             color: C.ink,
@@ -229,7 +229,7 @@ function authorTemplate(name: string, bio?: string, handle?: string): React.Reac
         {bio && (
           <div
             style={{
-              fontFamily: 'Instrument Serif',
+              fontFamily: 'Fraunces',
               fontStyle: 'italic',
               fontSize: 32,
               lineHeight: 1.3,
@@ -280,7 +280,7 @@ function toolTemplate(name: string, summary: string, tag: string): React.ReactEl
         </div>
         <div
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontSize: 92,
             lineHeight: 1.0,
             color: C.ink,
@@ -294,7 +294,7 @@ function toolTemplate(name: string, summary: string, tag: string): React.ReactEl
         </div>
         <div
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontStyle: 'italic',
             fontSize: 28,
             lineHeight: 1.35,
@@ -321,7 +321,7 @@ function defaultTemplate(): React.ReactElement {
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 28 }}>
         <div
           style={{
-            fontFamily: 'Instrument Serif',
+            fontFamily: 'Fraunces',
             fontSize: 124,
             lineHeight: 1.0,
             color: C.ink,
@@ -341,18 +341,15 @@ function defaultTemplate(): React.ReactElement {
 
 async function renderToPng(node: React.ReactElement, context: string): Promise<Buffer> {
   try {
-    const serif = loadFont(
-      '@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff',
-    );
+    const serif = loadFont('@fontsource/fraunces/files/fraunces-latin-400-normal.woff');
     const mono = loadFont('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff');
 
     const svg = await satori(node, {
       width: 1200,
       height: 630,
       fonts: [
-        { name: 'Instrument Serif', data: serif, weight: 400, style: 'normal' },
+        { name: 'Fraunces', data: serif, weight: 400, style: 'normal' },
         { name: 'JetBrains Mono', data: mono, weight: 400, style: 'normal' },
-        { name: 'Geist', data: mono, weight: 400, style: 'normal' },
       ],
     });
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -328,18 +328,25 @@ const featuredTools = allTools
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: thin;
+    scrollbar-color: var(--line-2) transparent;
     -webkit-overflow-scrolling: touch;
     padding: 4px 0 16px;
     margin-bottom: 24px;
     border-bottom: 1px solid var(--line);
     scroll-snap-type: x proximity;
   }
   .topic-tabs::-webkit-scrollbar {
-    height: 4px;
+    height: 6px;
+  }
+  .topic-tabs::-webkit-scrollbar-track {
+    background: transparent;
   }
   .topic-tabs::-webkit-scrollbar-thumb {
     background: var(--line-2);
-    border-radius: 2px;
+    border-radius: var(--radius-pill);
+  }
+  .topic-tabs:hover::-webkit-scrollbar-thumb {
+    background: var(--ink-4);
   }
   .topic-tab {
     flex-shrink: 0;

diff --git a/src/pages/playground/[tool].astro b/src/pages/playground/[tool].astro
@@ -120,7 +120,7 @@ const breadcrumbJsonLd = {
     border: 1px solid var(--line-2);
   }
   .tool-tag-live {
-    color: #fff;
+    color: var(--paper);
     background: var(--accent);
     border-color: var(--accent);
   }

diff --git a/src/pages/write.astro b/src/pages/write.astro
@@ -24,6 +24,9 @@ const repoUrl = SITE.repoUrl;
     <p style="color: var(--ink-3); max-width: 620px; margin: 0 auto; line-height: 1.6;">
       Write your post, then download it and send it over — by email or pull request.
     </p>
+    <p style="margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px;">
+      <a href="/contribute" style="color: var(--accent);">First time? See how it works →</a>
+    </p>
   </div>
 
   <WritePortal

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -27,8 +27,8 @@ html {
 
 :root {
   /* Type */
-  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
-  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
+  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
+  --font-sans: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
   --font-read: 'Source Serif 4', 'Source Serif Pro', Georgia, Cambria, 'Times New Roman', serif;
 
@@ -277,12 +277,12 @@ body {
 
 /* Type pairing modes */
 [data-typeset='editorial'] {
-  --font-display: 'Instrument Serif', Georgia, serif;
-  --font-sans: 'Geist', system-ui, sans-serif;
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
 }
 [data-typeset='modern'] {
-  --font-display: 'Geist', system-ui, sans-serif;
-  --font-sans: 'Geist', system-ui, sans-serif;
+  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
+  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
 }
 [data-typeset='terminal'] {
   --font-display: 'JetBrains Mono', monospace;
@@ -2650,3 +2650,37 @@ main {
     transform: scale(1);
   }
 }
+
+/* Theme-aware scrollbars for horizontal-scroll content (tables, math, code).
+   The default browser track is bright/white and cheapens the look. */
+.article-body .table-wrap,
+.article-body .katex-display {
+  scrollbar-width: thin;
+  scrollbar-color: var(--line-2) transparent;
+}
+.article-body .table-wrap::-webkit-scrollbar,
+.article-body .katex-display::-webkit-scrollbar {
+  height: 8px;
+}
+.article-body .table-wrap::-webkit-scrollbar-track,
+.article-body .katex-display::-webkit-scrollbar-track,
+.article-body pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+.article-body .table-wrap::-webkit-scrollbar-thumb,
+.article-body .katex-display::-webkit-scrollbar-thumb {
+  background: var(--line-2);
+  border-radius: var(--radius-pill);
+}
+/* Code blocks are always dark → a light, low-opacity thumb reads better. */
+.article-body pre {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(225, 228, 232, 0.25) transparent;
+}
+.article-body pre::-webkit-scrollbar {
+  height: 8px;
+}
+.article-body pre::-webkit-scrollbar-thumb {
+  background: rgba(225, 228, 232, 0.25);
+  border-radius: var(--radius-pill);
+}
diff --git a/src/write/editor/editor-theme.css b/src/write/editor/editor-theme.css
@@ -14,8 +14,8 @@
   width: 100%;
   border: none;
   background: none;
-  color: var(--ink-1);
-  font-family: var(--font-sans, 'Geist', sans-serif);
+  color: var(--ink);
+  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
   font-weight: 700;
   font-size: clamp(32px, 6vw, 56px);
   line-height: 1.1;
@@ -30,7 +30,7 @@
   background: none;
   resize: none;
   color: var(--ink-2);
-  font-family: var(--font-sans, 'Geist', sans-serif);
+  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
   font-size: clamp(15px, 2.5vw, 22px);
   line-height: 1.4;
   margin-top: 12px;
@@ -69,7 +69,7 @@
   font-size: 14px;
   text-transform: none;
   letter-spacing: normal;
-  color: var(--ink-1);
+  color: var(--ink);
   background: var(--paper-2, var(--paper));
   border: 1px solid var(--line-2);
   border-radius: 6px;
@@ -169,7 +169,7 @@
   padding: 6px 12px;
   border: 1px solid var(--line-2);
   background: var(--paper);
-  color: var(--ink-1);
+  color: var(--ink);
 }
 
 .write-ghost,
@@ -201,8 +201,8 @@
 .write-issues {
   margin-top: 20px;
   padding: 14px 18px;
-  border-left: 3px solid #c0392b;
-  background: rgba(192, 57, 43, 0.06);
+  border-left: 3px solid var(--tc-red);
+  background: color-mix(in srgb, var(--tc-red) 8%, transparent);
   border-radius: 0 6px 6px 0;
   font-size: 14px;
 }
@@ -329,7 +329,7 @@
 .bn-editor {
   --bn-font-family: var(--font-read, 'Source Serif 4', serif);
   background: transparent;
-  color: var(--ink-body, var(--ink-1));
+  color: var(--ink-body, var(--ink));
 }
 
 .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg {
@@ -372,15 +372,15 @@
   ) {
   border-radius: 5px;
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-2) 45%, transparent);
-  background: color-mix(in srgb, var(--ink-1) 2%, transparent);
+  background: color-mix(in srgb, var(--ink) 2%, transparent);
 }
 
 .bn-block-content h1,
 .bn-block-content h2,
 .bn-block-content h3 {
-  font-family: var(--font-sans, 'Geist', sans-serif);
+  font-family: var(--font-sans, 'Hanken Grotesk', sans-serif);
   font-weight: 600;
-  color: var(--ink-1);
+  color: var(--ink);
 }
 
 .write-block-form,
@@ -425,7 +425,7 @@
   font-family: inherit;
   font-size: 14px;
   background: var(--paper);
-  color: var(--ink-1);
+  color: var(--ink);
 }
 
 .write-component textarea,
@@ -435,12 +435,12 @@
 }
 
 .write-input-invalid {
-  border-color: #c0392b;
+  border-color: var(--tc-red);
 }
 
 .write-block-error {
   display: block;
-  color: #c0392b;
+  color: var(--tc-red);
   font-size: 12px;
   margin-top: 6px;
 }