OG cards, as a design discipline
Designing OG cards forces 1200x630 negative-space rules, brand-mark legibility at thumbnail size, and a separate set of constraints from the gallery work itself.
Every page on meltenx.com produces an OG card.
The OG card — Open Graph image, 1200x630 — is what gets pasted into X, Slack, Discord, Telegram, iMessage previews. It is the most-seen image any page produces, because most readers see the preview five or ten times before they ever click through. The preview is the brand contact point that matters most.
The catalog now ships three kinds of OG cards. This is a note on the discipline that holds them together.
Three kinds, three rules
Art pieces — the OG card is the piece itself. The original artwork, scaled to fit 1200x630. Full resolution, no logo overlay, no chrome. The piece is the message.
Tag and year pages — the OG card is the most recent piece tagged with that tag, or published in that year. Same image as a piece OG card, drawn dynamically. The page itself is a collection, so its preview is the freshest entry.
Home, about, blog, and fallback pages — the OG card is branded. Generated background art (via Higgsfield), MELTEN wordmark composited on top in white, magenta tagline beneath. These are static images in /public. They identify the page as the gallery, not as a piece.
The three rules are: piece pages get the piece. Collection pages get the freshest piece. Brand pages get the brand. No exceptions.
What makes a good branded OG card
Three things, ranked.
One: thumbnail legibility. OG cards appear in chat threads at sizes smaller than a coaster. The wordmark has to be readable at 300 pixels wide. Any element that is illegible at thumbnail is a wasted element.
Two: negative space on one side. The composition needs an unbusy half — usually the left — where the wordmark and tagline can sit cleanly. A full-bleed image fills 1200x630 with detail; the eye has nowhere to land. A composition with one empty side lets the wordmark be the focal point.
Three: palette discipline. Black ground, violet/magenta accents. No deviation. The brand magenta #FF00E5 appears on the tagline. The wordmark is white for contrast. The background is dark enough that the wordmark reads without an overlay scrim. Every brand OG card uses the same palette so the cards register as a set.
Why the wordmark is white, not magenta
The brand magenta #FF00E5 is the accent color, not the wordmark color. Reserving the magenta for the tagline keeps the accent rare. A magenta wordmark would compete with the magenta accent and dilute both.
White wordmark on a dark violet field also has higher legibility at thumbnail size than magenta on the same field. The contrast ratio is more aggressive — and OG cards are seen, primarily, by people glancing at a chat preview. Aggressive contrast wins.
The 16:9 vs 1.91:1 problem
OG cards are 1200x630, which is roughly 1.91:1. Most AI image models produce 1:1 or 16:9 (1.78:1) outputs. The aspect-ratio mismatch is real — the generated background is always slightly wrong-shape for the target.
The fix is to generate at the nearest available aspect ratio and crop to 1200x630, biasing the crop toward the side with the most usable negative space. For the brand OG cards on this site, that means generating at 16:9 and cropping the long side — 1376 down to 1200 — to leave the negative-space half untouched.
The compositing is done with sharp. The wordmark and tagline are composited as PNGs (recolored from #FF00E5 to white for the wordmark) on top of the cropped background. Hand work, scripted, repeatable.
Where the discipline pays off
In how the site looks when shared. A link to the home page, a link to the about page, a link to a blog post, a link to a piece — every one of those produces a coherent preview that registers as MELTEN before the title text resolves. The viewer who has seen one preview registers the next one.
That registration is the catalog's most efficient brand-recognition surface. The gallery itself is too long, too varied, too dense to be the brand. The OG card is the brand at thumbnail size.
The single rule the OG discipline honors
A page's preview is part of the page. Designing a page without designing its preview is shipping half the page. Every page on the catalog produces a preview that is either the piece itself, the freshest piece in the collection, or the brand. No exceptions, no blanks.