Developer Open Graph image templates

An API reference card: an 'API Reference' eyebrow, a METHOD badge with a mono endpoint path, a title and description, and a rounded code panel showing a faux JSON response.

A system-architecture diagram card: an eyebrow, bold title and subtitle above a drawn left-to-right flow of up to four labelled node boxes (each with a glyph, label and sublabel) connected by arrows, plus a detail line.

A performance-comparison card whose hero is a horizontal bar chart built from up to 4 'label | value' rows, with each bar width scaled to the max and the winning (largest) bar highlighted in the accent color.

A CI build-status card: a product lockup with a 'CI Pipeline' eyebrow and a commit · branch line (your uploaded icon/logo, or a letter-mark fallback), a bold title and a shields-style build badge whose color is derived from the overall state, and a row of pipeline stage nodes each with a state-colored icon and duration.

Release-notes card with a version chip, headline, and an accented bullet list.

A developer cheat-sheet / quick-reference card: an eyebrow, a bold title and subtitle, then a list of 'key | action' rows each shown as a drawn keycap chip plus its description.

A CLI / SDK install hero: a product lockup (a drawn '>_' terminal mark + name) with a version chip, a bold title and subtitle, a prominent install command in a drawn terminal panel with a copy icon, up to three example commands, and a row of feature tags.

A dev-tip card with an eyebrow and bold title above a rounded code window — traffic-light title bar, filename tab, language chip, and a line-numbered monospace snippet — with a caption below.

Terminal/IDE aesthetic with monospace type, window chrome, and a neon prompt.

A developer-tool hero card: split layout with a left product lockup, headline, tagline, and feature tags, beside a synthetically drawn faux browser inspector panel with a highlighted element and a CSS-line tooltip.

A documentation landing hero: a product lockup with a version chip, a big title and subtitle, a search-bar mockup and CTA pill, beside a drawn docs layout with a parsed section nav.

A generic error-page share card: a giant accent status code with a light glitch offset, a bold title, a friendly subtitle, an optional mono path chip for the bad route, a 'Back to home' CTA pill, and a small brand lockup (your uploaded icon/logo, or a letter-mark fallback).

A developer glossary card that presents a tech term like a dictionary entry — category tag, big headword, pronunciation/part-of-speech line, and a definition body — in a dark, syntax-accented dev aesthetic.

A focused two-party integration card: two round logo tiles joined by a drawn connector node, under an Integration badge, a headline, a subtitle, the two product names, and a detail line.

A package-registry card: a registry chip with the package name and version, a description, a prominent mono install command, a parsed stat row, keyword tags, and a license chip.

A code-review / pull-request card: a repo lockup with a PR number chip, a status pill whose color + icon are derived from the status word, a PR title and summary, a branch-from → branch-to row, a green/red diff stat, and a cluster of reviewer avatars.

A getting-started / README OG card: a product lockup, a Quickstart eyebrow and bold title, a subtitle, and a numbered step list whose accent step numbers are computed from index, each pairing a short label with a mono command in a drawn code pill.

An open-source repo card: a repo lockup (repo icon + owner/name), a description, a row of topic tags, and a stat row (stars, forks, and a language with a colored dot).

A CVE-style security advisory card: an eyebrow with a shield glyph plus a mono advisory-id chip, a big severity badge whose color and label are derived from the severity word, an optional CVSS chip, a bold title and summary, an Affected/Patched meta row, and a detail action line.

A system-status card: an org lockup with a 'System Status' eyebrow and an updated timestamp, a big status banner whose color and icon are derived from the overall state, and a list of component rows each with a state-colored status dot.

A "built with" tech-stack card: an eyebrow, bold title, and subtitle over a tidy 4-up grid of tech tiles parsed from a list, each showing an uploaded logo or a letter-tile fallback, with optional layer labels and a detail line.

An uptime / SLA card: an org lockup with a 'Last 90 days' eyebrow and an updated line, a huge accent uptime percentage beside a title and subtitle, a day-by-day uptime bar strip whose bar colors are derived from per-day state words, and up to three slot-driven stat pills.