fix(docs-og-image): match reference cover template typography exactly

- swap Season Sans for Söhne Kräftig (500) — the reference cover's actual
  brand font, confirmed by letterform comparison; recovered from git
  history since it was removed as an unused static asset
- fix ink/background colors to exact reference hex values
- square caps + miter join on the corner arrow to match the reference's
  sharp corners instead of rounded ones
- recalibrate title font size, line height, and wrap width for the new
  font's metrics

Author: waleedlatif1

apps/docs/app/api/og/route.tsx

@@ -5,25 +5,25 @@ import type { NextRequest } from 'next/server'
 export const runtime = 'edge'
 
 const TITLE_FONT_SIZE = {
-  large: 105,
-  medium: 91,
-  small: 81,
+  large: 110,
+  medium: 96,
+  small: 85,
 } as const
 /** Average glyph width as a fraction of font size, for this weight/family — used to pack words into lines. */
-const AVG_CHAR_WIDTH_EM = 0.46
+const AVG_CHAR_WIDTH_EM = 0.42
 const TITLE_BOX_WIDTH = 1020
 const FONT_CACHE_REVALIDATE_SECONDS = 60 * 60 * 24 * 30
-/** Measured off the reference cover template (`apps/sim/public/library/best-zapier-alternatives/cover.jpg`). */
-const INK_COLOR = '#525252'
+/** Exact hex from a vector trace of the reference cover template, not an estimate off compressed JPEG pixels. */
+const INK_COLOR = '#515151'
 const OG_CONTAINER_STYLE = {
   height: '100%',
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
   padding: '26px',
-  background: '#c3c3c3',
-  fontFamily: 'Season',
+  background: '#c1c1c1',
+  fontFamily: 'Soehne',
 } satisfies CSSProperties
 const OG_HEADER_STYLE = {
   display: 'flex',
@@ -34,10 +34,12 @@ const OG_HEADER_STYLE = {
 const OG_TITLE_STYLE = {
   display: 'flex',
   flexDirection: 'column',
-  fontWeight: 600,
+  fontWeight: 500,
   color: INK_COLOR,
-  lineHeight: 1.15,
+  lineHeight: 1.1,
   width: `${TITLE_BOX_WIDTH}px`,
+  /** Compensates for Satori adding extra invisible leading below the last line instead of splitting it evenly. */
+  transform: 'translateY(14px)',
 } satisfies CSSProperties
 
 function getTitleFontSize(title: string): number {
@@ -83,21 +85,16 @@ function wrapTitleLines(title: string, fontSize: number): string[] {
 }
 
 /**
- * Loads a static (600/semibold) TTF instance of the site's own Season Sans
- * font — the platform's real brand/body font, also used by the library/blog
- * cover template this OG image matches. Instantiated from the variable font
- * at `apps/docs/app/fonts/SeasonSansUprightsVF.woff2` (`fonttools
- * varLib.instancer wght=600`, then flavor-stripped to plain TTF) rather than
- * loading the variable WOFF2 directly: Satori (`next/og`'s renderer) can't
- * parse variable fonts without excessive memory use, and can't parse WOFF2
- * at all ("Unsupported OpenType signature wOF2") — it needs an uncompressed
- * TTF/OTF. Fetched over HTTP since the edge runtime has no filesystem access
- * — served from `/static/fonts/` (not `/fonts/`) so it isn't intercepted by
- * the site's i18n proxy (`proxy.ts`), whose matcher excludes `static` but
- * not `fonts`.
+ * Loads Söhne Kräftig (weight 500), the typeface used on the reference cover
+ * template this OG image matches. Converted to a plain TTF from the
+ * last-shipped `soehne-kraftig.woff2` since Satori (`next/og`'s renderer)
+ * can't parse WOFF2 or variable fonts. Fetched over HTTP since the edge
+ * runtime has no filesystem access — served from `/static/fonts/` (not
+ * `/fonts/`) so it isn't intercepted by the site's i18n proxy (`proxy.ts`),
+ * whose matcher excludes `static` but not `fonts`.
  */
-async function loadSeasonFont(baseUrl: string): Promise<ArrayBuffer> {
-  const response = await fetch(new URL('/static/fonts/SeasonSans-600-static.ttf', baseUrl), {
+async function loadTitleFont(baseUrl: string): Promise<ArrayBuffer> {
+  const response = await fetch(new URL('/static/fonts/Soehne-Kraftig.ttf', baseUrl), {
     next: { revalidate: FONT_CACHE_REVALIDATE_SECONDS },
   })
 
@@ -128,16 +125,16 @@ function SimWordmark() {
   )
 }
 
-/** Diagonal "open" arrow, top-right — matches the library/blog cover template. */
+/** Diagonal "open" arrow, top-right — square caps and a miter join to match the reference's sharp corners. */
 function CornerArrow() {
   return (
     <svg width='58' height='58' viewBox='0 0 24 24' fill='none'>
       <path
         d='M2 22 22 2M22 2H12M22 2V12'
         stroke={INK_COLOR}
         strokeWidth={3.6}
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeLinecap='square'
+        strokeLinejoin='miter'
       />
     </svg>
   )
@@ -153,7 +150,7 @@ export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url)
   const title = searchParams.get('title') || 'Documentation'
 
-  const fontData = await loadSeasonFont(request.url)
+  const fontData = await loadTitleFont(request.url)
   const fontSize = getTitleFontSize(title)
   const titleLines = wrapTitleLines(title, fontSize)
 
@@ -175,10 +172,10 @@ export async function GET(request: NextRequest) {
       height: 675,
       fonts: [
         {
-          name: 'Season',
+          name: 'Soehne',
           data: fontData,
           style: 'normal',
-          weight: 600,
+          weight: 500,
         },
       ],
     }