modeinspect.com
Design analysis
A typography-only social card at roughly 1200×630 built on a single centered axis. A soft vertical gradient — pale lime at the top fading to muted lavender-taupe at the bottom — carries a three-line headline in deep indigo, set very large in a geometric grotesque with tight leading, with the word 'code' swapped into a chunky pixel-style face as the conceptual punchline. The only other element is a small bottom-centered lockup of a cursor glyph with a lime sparkle behind it beside the wordmark, so the headline does all the communicating and the brand stays a quiet footnote.
Prompt preview
## Reference images Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language. - Screenshot: https://kage-design-assets.t3.tigrisfiles.io/screenshots/modeinspect/0a9bb1e8-234f-4268-8595-1036794bc838-1789106453685.webp - Design on Kage: https://kage.design/designs/modeinspect-og-image ## Before you start Ask the user what product the card is for, who it is for, and what brand assets they already have (name, colours, typefaces, tagline). Wait for the answers before designing. Everything below is applied to that product, not to the reference. ## Page structure Produce a single static image at exactly 1200×630 — either an SVG or HTML/CSS sized to the canvas and rendered to PNG. One composition, top to bottom: 1. **Background field (full bleed):** a soft vertical gradient, light end to end — a pale lime/chartreuse at the top easing into a muted lavender-grey at the bottom. No pattern, no texture, no image. 2. **Headline block (centre, vertically dominant):** a two- to three-line statement headline, horizontally and vertically centred, occupying roughly the middle 60% of the canvas. Break lines for rhythm, not grammar — each line should read as a phrase. 3. **Signature word swap:** one keyword inside the headline — the word that names the user's craft or output — is set in a contrasting display treatment (a chunky pixel/bitmap-style face), while every other word stays in the main grotesque. This one swap is the card's idea. 4. **Footer lockup (bottom centre):** a small mark-and-wordmark row pinned near the bottom edge: a simple line-drawn glyph (cursor, pointer, or a tool silhouette) with one small sparkle/starburst accent tucked behind it, followed by the product name in near-black medium weight at roughly a third of the headline size. ## Design language - One axis: everything sits centred on a single vertical axis — no columns, no corner-pinned logo, no split layout. Keep all content inside an ~80px safe margin so link-preview crops never clip it. - Hierarchy by size alone: the headline is the card (~110–130px, line-height ~1.0, medium-weight geometric grotesque, single dark ink). The brand lockup is tiny by comparison and reads last. - Two type voices, used once each: a clean geometric grotesque carries the statement; a contrasting pixel/display face is used for exactly one keyword, never more. - Colour: a small, strict palette — light two-stop gradient background (pale lime ~#d9f2a3 → muted lavender-grey ~#cbc3d1), one deep ink for the headline (deep indigo ~#2b2367), near-black ~#111 for the wordmark, and one accent (~#e8ff5a) used a single time behind the mark. Flat fills throughout: no shadows, no borders, no rounded panels. - No imagery: no product screenshot, illustration or photography — typography and negative space are the entire visual. - Keep total copy under ~12 words. The card must stay legible as a 40px-tall strip in a chat preview, so the headline alone carries the message and the wordmark is a footnote. - Static asset: no animation. If built in HTML/CSS, render at 2× for crisp export. ## Never - Never reuse the reference's name, its headline copy, its cursor-with-sparkle mark, or its typefaces. - Never copy the reference's exact wording or keyword choice — write new copy for the user's product and pick a different word for the display treatment. - Never present the result as the reference product or include its branding.
kage