An OG Card Drawn in JSX — No Design Tool

A graphic with no source file.

There is no Figma file behind this card. The source is a single 120-line TSX file — when a link gets shared to a chat app or social feed, next/og (Satori) renders the 1200×630 preview straight from JSX and inline styles into a PNG.

Why draw it in code.

Share cards go stale every time the product copy changes. With a design tool that means export-and-replace, again and again; in code, deploying is updating. Change the words and the image follows — and the colors are the same values the product itself uses (a #0B0F14 canvas, a restrained touch of brand green), so the brand never drifts.

The design is still design.

Only the tool is code; every decision is design. A type scale defined as constants (title1 at 80px down to h5 at 24px), deliberate spacing and alignment, information hierarchy on a dark canvas. A small experiment in what happens when a designer treats JSX as the canvas.