Kage Design logo kage
promptic.eu
Promptic · OG images · Dark · Minimal · Gradient screenshot

Design analysis

A dark launch card built around a diagonal split: a left-aligned type stack (orange monospace eyebrow, two-line white headline, gray subline, pill CTA) occupies the upper-left while a perspective-tilted dashboard mockup rises out of the bottom-right corner and dissolves into a warm dark glow. Orange is rationed to the eyebrow and logo mark, green appears only as tiny metric chips inside the mockup, and the upper-right stays deliberately empty so the copy never competes with the product shot.

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/promptic/e1285eef-38a2-4597-afab-1fb141455dd1-1790402501382.webp
- Design on Kage: https://kage.design/designs/promptic-og-image

# Build a 1200×630 social share card (OG image)

## Before you start
Ask the user what they are building, who it is for, what the card should announce (launch, waitlist, feature), and what brand assets they already have (name, logo mark, colours, typeface, one-line value proposition and desired call to action). Wait for the answers before designing. Everything below is applied to **their** product with placeholder branding and copy — never to the reference product.

**Deliverable:** a single self-contained HTML file with a fixed 1200×630 body (no scrollbars), rendered to a PNG at exactly 1200×630 (screenshot at deviceScaleFactor 2 then downscale, or export an SVG). Use placeholder brand name, copy and metrics throughout.

## Page structure
1. **Canvas** — 1200×630, near-black base with a faint warm radial glow rising from the lower-right; upper-right corner stays almost empty.
2. **Eyebrow badge** — top-left (~35px from top, ~200px left margin): a small pill or plain line of monospace, uppercase, letterspaced micro-copy in the accent orange.
3. **Headline** — directly below: a two-line white headline, the largest element on the canvas (~56–64px), left-aligned, tight leading, ending on a strong second line.
4. **Subline** — a two-line muted gray supporting sentence (~20px), same left edge.
5. **CTA pill** — one dark pill button with a hairline border, short label plus a ↗ arrow, ~40px tall.
6. **Product mockup** — bottom-right quadrant only: a dark app dashboard (sidebar, 2–3 stat cards with big numerals and green delta chips, one code/prompt panel in monospace) drawn with a 3D perspective tilt so it recedes toward the upper right, clipped by the right and bottom canvas edges, its far edges fading into the background with a gradient mask.

## Design language
- **Composition:** one diagonal axis — copy block anchored upper-left filling ~60% of the width, product visual anchored lower-right; nothing centred, no symmetric split. Leave breathing room top and left.
- **Hierarchy:** eyebrow → headline → subline → CTA, each step roughly half the visual weight of the one above; exactly one large typographic element and one large visual element on the whole canvas.
- **Colour:** base near-black `#0B0B0B`; text white `#F5F5F5`, secondary gray `#8F8F8F`; one warm accent (e.g. `#F97316`) reserved for the eyebrow and the logo mark only; green `#4ADE80` appears exclusively as tiny "delta/completed" chips inside the mockup. No other hues.
- **Depth:** a subtle dark-orange-to-black radial glow behind the mockup plus a soft vignette; all transitions are gradients, no hard edges or drop shadows with visible offsets.
- **Type:** geometric grotesque sans for headline and UI text (regular-to-medium weight, 1.05–1.1 line-height); monospace for the eyebrow, small labels and code text; uppercase micro-labels with +0.1em tracking. Hierarchy is built from size and colour, not from bolding.
- **Mockup styling:** dark surfaces `#141414` with `#232323` 1px borders and 8–12px radius; large white numerals over small gray labels; monospace prompt/JSON text; apply `perspective(2000px) rotateX(~55deg) rotateZ(~-12deg)` (tune until it recedes convincingly) and mask the top/left edges into the background.
- **CTA:** dark fill, 1px `#333` border, fully-rounded ends, 14px white label, ↗ arrow; the only interactive-looking element.

## Never
- Do not use the reference product's name, logo, headline copy, subline or the "GPT-4o Mini" model name — invent neutral placeholders or use the user's own brand.
- Do not reproduce the reference dashboard's project names, metrics or menu items verbatim.
- Do not present the result as the reference product; it is a composition study applied to the user's brand.

Related designs