kage
cdn.sanity.io
Design analysis
This social card splits the canvas in two: a solid black left half that carries the wordmark at the top, a bold white headline in the middle, and a quiet URL lockup at the bottom, and a light right half that shows a product video frame with teal UI accents. The 50/50 split creates instant readability at thumbnail size, while the asymmetric placement of the headline keeps the text block feeling editorial rather than boxed. Colour is used sparingly — black, white, and a single teal accent — so the card reads clearly even at very small share sizes.
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/loom-com/6abb0949-23da-412f-ae85-a063809b1fc5-1789067061973.webp - Design on Kage: https://kage.design/designs/loom-og-image ## Before you start Ask the user what product this social card is for, who it is for, and what brand assets they have (name, colours, type). Wait for the answers. Everything below is a composition to apply to *their* product, not a recreation of the reference. ## Page structure Produce a **1200×630 social card image** (HTML/CSS rendered to PNG, or an SVG exported to PNG) split vertically in half: 1. **Left panel (600px, solid dark background)** — a small wordmark or logo lockup sits top-left; the main headline sits mid-left in large bold type, breaking across 2–3 lines with asymmetric line lengths; a small quiet URL or tagline lockup sits bottom-left. 2. **Right panel (600px, light background)** — a product visual: a screenshot, video frame, or UI mock rendered inside a soft rounded shape, with one accent-coloured UI element to add life. The visual bleeds to the panel edges. ## Design language - 50/50 vertical split: dark text side, light product side. Nothing overlaps the divide. - Left side: generous top and bottom margins (roughly 64px), headline in the vertical centre-left, sized so it dominates the half (100–120px bold sans-serif), left-aligned, tight leading (about 1.05). - Right side: product imagery fills most of the half with 48–64px padding, one accent colour used on a single UI element to tie the two halves together. - Colour: one very dark neutral (e.g. #0F1417), one off-white (#F5F7FA), and a single saturated accent (teal-ish, e.g. #2BB3A3) used only on the small UI detail. No gradients. - Type: one bold geometric sans for the headline, one light sans for the URL lockup. No serif. - No borders, no shadows, no rounded cards on the split — the two flat colour fields carry the whole composition. - Any small UI detail on the right (button, badge, play icon) should be flat, rounded, and accent-coloured, not skeuomorphic. ## Never Do not use the reference product's name, wordmark, logo, copy, illustrations, photography, or icon set. Do not present the card as if it belongs to the reference product — apply the composition to the user's own brand.
