Rebrand the generated OG images (docs, blog, site)

[ankur-arch]

Summary

The generated Open Graph cards still carried the pre-2026 brand after #8142: all three next/og routes drew the old triangle wordmark, and the docs and site cards kept the dark teal surface with Barlow and JetBrains Mono. Sharing a link to any docs page, the blog index, or the site route produced an off-brand preview.

This PR moves all three routes onto one shared card in @prisma-docs/ui that follows the brand cover recipe, and ships the real brand fonts (Sora, Inter, Mona Sans Mono) as static cuts each route can load at build time.

What changed

Shared card (packages/ui/src/components/og-image.tsx)

• Paper surface with the prism spectral wash pooling along the bottom edge, a dot kicker in the product accent, a Sora 500 headline, Inter body, and the full-color prism lockup as the sign-off (no more prisma.io/docs URL line).
• Long titles step down in size and clamp to three lines; descriptions clamp to two.

Docs (apps/docs/src/app/og/[...slug]/route.tsx)

• Kicker shows the section (Prisma ORM, Prisma Postgres, Management API, ...) with a muted "Docs" qualifier.
• Accent follows the product: ORM and Prisma 8 cyan, Postgres yellow, Compute red.
• API reference pages render the HTTP method as a tinted Mona Sans Mono chip beside the path, with {params} highlighted.

Blog and site (apps/blog/.../og/image.png, apps/site/.../og/image.png)

• Both use the shared card. The site route previously rendered "Prisma Blog" with a prisma.io/blog footer; it now renders the site tagline and description.
• Fonts are read from disk instead of Google Fonts at request time.

Fonts (apps/{docs,blog,site}/public/fonts)

• Static TTF cuts (Sora 500/600, Inter 400/600, Mona Sans Mono 500) instanced with fontTools from the variable fonts in packages/eclipse/src/static/fonts and subset to Latin. satori cannot parse woff2, and the docs route pre-renders one card per page at build time so it must not need the network. The old Barlow-era Inter-Regular.ttf and JetBrainsMono-Regular.ttf in docs are replaced.

Verification

• Rendered docs (regular page, Postgres page, API reference page), blog, and site cards locally through the dev servers and checked them visually.
• pnpm types:check passes for docs, blog, and site; oxlint and oxfmt clean on the changed files.

Audit: what still carries the old brand

Not changed here, listed for follow-up:

• Static site OG PNGs in apps/site/public/og/ (about 45 files, last touched March and April 2026): og-index.png, og-orm.png, og-postgres.png, og-pricing.png, the twelve prisma-with/*.png, and the rest. Pages reference them through ogImage in createPageMetadata, so every marketing page except the homepage (/og.png, redone in 2026 rebrand: redesigned site, docs and blog branding, Prisma 8 #8142) still previews with the old brand.
• apps/docs/public/og/docs/default.png and apps/blog/public/og/docs/default.png (February 2026) are unreferenced leftovers and can be deleted.
• packages/ui/src/components/navigation-menu.tsx still embeds the old wordmark path as Logo, and WebNavigation renders it. The only consumer is apps/site/src/components/navigation-wrapper.tsx, which nothing imports anymore, so both are dead code from before the rebrand.
• apps/blog/src/app/layout.tsx and apps/eclipse/src/app/layout.tsx still load Barlow from Google Fonts.

Summary by CodeRabbit

• New Features
  • Introduced a consistent branded design for Open Graph images across the blog, documentation, and site.
  • Added support for section labels, contextual accents, API method chips, and highlighted path parameters in documentation previews.
  • Improved title sizing, descriptions, branding, and visual styling for shared social images.
  • Added reliable local font loading for generated Open Graph images.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blog	Ready	Preview	Aug 26, 2026 9:32am
docs	Ready	Preview	Aug 26, 2026 9:32am
eclipse	Ready	Preview	Aug 26, 2026 9:32am
site	Ready	Preview	Aug 26, 2026 9:32am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 322a8437-07ef-489f-a9c8-c79ff1b5ada9

📥 Commits

Reviewing files that changed from the base of the PR and between 2f89ccb and 448ceb6.

⛔ Files ignored due to path filters (16)

• apps/blog/public/fonts/Inter-Regular.ttf is excluded by !**/*.ttf
• apps/blog/public/fonts/Inter-SemiBold.ttf is excluded by !**/*.ttf
• apps/blog/public/fonts/MonaSansMono-Medium.ttf is excluded by !**/*.ttf
• apps/blog/public/fonts/Sora-Medium.ttf is excluded by !**/*.ttf
• apps/blog/public/fonts/Sora-SemiBold.ttf is excluded by !**/*.ttf
• apps/docs/public/fonts/Inter-Regular.ttf is excluded by !**/*.ttf
• apps/docs/public/fonts/Inter-SemiBold.ttf is excluded by !**/*.ttf
• apps/docs/public/fonts/JetBrainsMono-Regular.ttf is excluded by !**/*.ttf
• apps/docs/public/fonts/MonaSansMono-Medium.ttf is excluded by !**/*.ttf
• apps/docs/public/fonts/Sora-Medium.ttf is excluded by !**/*.ttf
• apps/docs/public/fonts/Sora-SemiBold.ttf is excluded by !**/*.ttf
• apps/site/public/fonts/Inter-Regular.ttf is excluded by !**/*.ttf
• apps/site/public/fonts/Inter-SemiBold.ttf is excluded by !**/*.ttf
• apps/site/public/fonts/MonaSansMono-Medium.ttf is excluded by !**/*.ttf
• apps/site/public/fonts/Sora-Medium.ttf is excluded by !**/*.ttf
• apps/site/public/fonts/Sora-SemiBold.ttf is excluded by !**/*.ttf

📒 Files selected for processing (5)

• apps/blog/src/app/og/image.png/route.tsx
• apps/docs/src/app/og/[...slug]/route.tsx
• apps/site/src/app/og/image.png/route.tsx
• packages/ui/src/components/og-image.tsx
• packages/ui/src/lib/og-fonts.ts

---

Walkthrough

The change adds shared OG image rendering and font-loading utilities. Blog, docs, and site routes now use the shared utilities. The docs route adds section, method, and API path styling.

Changes

Open Graph image system

Layer / File(s)	Summary
Shared OG font loading packages/ui/src/lib/og-fonts.ts	Adds cached loading for Sora, Inter, and Mona Sans Mono font files.
Shared OG renderer packages/ui/src/components/og-image.tsx	Adds shared dimensions, brand styling, accent palettes, responsive title sizing, gradient washes, content layout, and Prisma branding.
Blog and site route integration apps/blog/src/app/og/image.png/route.tsx, apps/site/src/app/og/image.png/route.tsx	Updates both routes to load shared fonts and render metadata through PrismaOgImage.
Documentation route integration apps/docs/src/app/og/[...slug]/route.tsx	Adds section labels, HTTP method accents, API path formatting, and shared PrismaOgImage rendering.

Estimated code review effort: 4 (Complex) | ~45 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/og-image-rebrand

---

_{Comment @coderabbitai help to get the list of available commands.}