kage
contextengine.com
Design analysis
A 1200×630 social card built almost entirely from typography on white. A soft mint radial wash bleeds in from the top-right corner, while a strict left-aligned column carries the hierarchy: a small brand lockup (green app tile plus wordmark), a two-line near-black headline at roughly 90px with tight tracking, a two-line gray subline, then a hairline rule that anchors a footer meta row of four rounded integration chips and a right-aligned domain. The only colour beyond black/gray/white is the mint gradient and the small saturated chip tiles (green, orange, blue), which act as a quiet credibility strip without any product screenshot.
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/context-engine/e95f972d-bf80-46ee-b89d-1b6baf903f03-1792821824207.webp - Design on Kage: https://kage.design/designs/context-engine-og-image # Social card in the style of a minimal typographic OG image ## Before you start Ask the user what they are building, who it is for, and what brand assets they already have (product name, logo/app icon, brand colours, typeface, domain). Wait for the answers before writing any code. Everything below is applied to *their* product with placeholder branding and copy — never reproduce the reference product's name, logo or copy. ## Goal Produce a single 1200×630 social share card (Open Graph image). Render it as a self-contained HTML file sized exactly 1200×630 (screenshot to PNG with a headless browser) or as a standalone SVG. One frame, no scrolling. ## Page structure - **Canvas**: 1200×630, white background, generous safe margin of ~80px on the left and top. - **Brand lockup (top-left)**: a ~44px rounded-square app tile (radius ~12px) in the brand accent colour with a simple white glyph inside, next to the product name in bold black at ~30px. Keep it small — it stamps ownership, it does not compete with the headline. - **Headline (main focal block, upper-left)**: the value proposition in two lines, extremely large (~90–100px), heavy weight (700–800), tight letter-spacing (−0.02em), near-black, line-height ~1.05. This occupies the visual centre of the card. - **Subline (directly beneath)**: two short lines of supporting copy at ~30px in mid-gray (~#6B7280), regular weight, same left edge. It answers "what does it actually do" in plain language. - **Hairline divider**: a 1px light-gray rule spanning the content width, separating message from metadata. - **Footer meta row**: left side holds 3–4 small integration/feature chips — each a ~26px rounded square in a distinct saturated colour with a single letter or simple glyph, followed by a ~24px medium-gray label. Right side holds the domain in bold gray, right-aligned to the content edge. - **Background accent**: one soft radial gradient in a light tint of the brand colour, anchored to the top-right corner and fading to white by mid-card. No other decoration. ## Design language - Hierarchy is built by type scale alone: lockup ~30px → headline ~95px → subline ~30px → labels ~24px. One dominant element, everything else clearly subordinate. - Everything is left-aligned on a single vertical axis except the domain, which balances the footer row. No centring, no columns, no cards. - Whitespace does the separating: ~90–110px between lockup and headline, ~30px headline to subline, then the rule and footer sit as a compact bottom band. Density increases slightly at the bottom, giving the card a "document with a colophon" rhythm. - Colour discipline: white field, near-black type (#111), one gray for supporting text (#6B7280), one light brand tint only as a corner gradient (e.g. #D9F5E8 fading to #FFFFFF), and small saturated accents (green #10B981, orange #F59E0B, blue #3B82F6) confined to the chips. Chips are the only place pure saturation appears. - Borders and shadows: no card borders, no drop shadows. Depth comes from the gradient wash and one 1px hairline rule (#E5E7EB). Rounded corners only on the app tile and chips (radius 8–12px). - Type: one geometric/neo-grotesque sans for everything (Inter-like); contrast comes from weight (800 vs 400) and size, not from a second family. Use tight tracking on the headline only. - No imagery, screenshots, photography or illustration — the composition must survive as pure typography plus chips. - Ensure the headline never collides with the gradient's darkest area and all text stays ≥60px from canvas edges. ## Never - Do not use the reference product's name, wordmark, app icon, tagline or domain, and do not draw real third-party logos (ChatGPT, Claude, Cursor, etc.) — use single-letter or generic glyph placeholder chips instead. - Do not copy the reference copy verbatim; write equivalent placeholder copy for the user's product. - Do not present the output as the reference product.
