SurveyStream

SurveyStream · Social

Open Graph Card

1200 × 630, dual-audience, self-contained. The three webfonts are embedded as base64 so it renders identically anywhere — an OG card that falls back to Helvetica is a different design.

Canvas1200 × 630 · #0F172A
File291 KB HTML, fonts inlined
Exports1× 425 KB · 2× 1232 KB
AssetsReal lockup, real pattern

01 — The card

Exported from the HTML, not mocked up.

SurveyStream OG card: Turn Real-Time Feedback Into Instant Value

Every element is a real project asset: the interlock lockup from logo/interlock/, the seamless tile from pattern/ as the ground, and Archivo / Inter / JetBrains Mono per the type system. Numerals are tabular-nums, and the payout amount carries "zero" 0 — slashed zero off, because inside money it reads as a correction mark.

02 — At feed size

The only test that matters.

A timeline shows this at roughly 504 px wide — 42% of full size. Most OG cards fail here, not at full resolution.

OG card at 504px, feed size

What survives

  • The headline, at full force — it is doing the work.
  • 12,480 and $1,284.50, both still crisp.
  • The logo, as a legible S with the accent softened.

What thins out

  • The mono footer row reaches the edge of legibility — which is precisely why nothing load-bearing lives there.
  • The stream visualisation flattens into texture. Fine: it is atmosphere, not content.

03 — Exporting

Pixel-exact, from the command line.

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

# 1× — 1200 × 630, the canonical OG size
"$CHROME" --headless --disable-gpu --hide-scrollbars \
  --window-size=1200,630 \
  --screenshot=og-card.png \
  "file://$PWD/og-card.html"

# 2× — 2400 × 1260
"$CHROME" --headless --disable-gpu --hide-scrollbars \
  --window-size=1200,630 --force-device-scale-factor=2 \
  --screenshot=og-card@2x.png \
  "file://$PWD/og-card.html"

--hide-scrollbars is not optional

Without it Chrome reserves gutter width and the card is cropped a few pixels on the right. It is the kind of thing you only notice after the card is live.

<meta property="og:image" content="https://surveystream.com/og-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Serve the 1× PNG. Most platforms re-encode anyway, and several scrapers refuse images over 1 MB outright — the 2× file is 1.2 MB, so it is for previews and decks, not for og:image.

04 — Two honest caveats

Both worth knowing before it ships.

backdrop-filter dies in server-side OG rendering

The glass panel depends on it, and Satori / @vercel/og do not implement it. Generating this card at request time in that stack renders the panel as a flat translucent rectangle — the layout holds, the effect is gone.

Preferred fix: ship the exported PNG, which is what this folder does. If you genuinely need per-page dynamic cards, replace the glass with an explicit gradient fill that approximates the blur rather than hoping the filter lands.

The mark sits below its own size floor

The lockup renders at 44 px, putting the mark at about 33 px — under the 40 px floor I documented for the interlock variant, and well under it once a feed halves the card. It degrades gracefully, since the solid base still reads as an S and only the thin accent softens.

That is an acceptable trade for a card mostly seen large. To be strict, swap in lockup-horizontal-mono.svg (base only) tinted Mist — one line of markup.