## 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/open-for-sales/832e2aad-ecb8-4996-a7e3-3a43b2138bdb-1793253734827.webp
- Design on Kage: https://kage.design/designs/open-for-sales-og-image

# 1200×630 social share card — miniature hero composition

## Before you start
Ask the user what product or feature the card announces, who it is for, and which brand assets they already have (name, one or two brand colours, typeface preference). Wait for the answers before designing. Everything below is a design language to apply to *their* brand, not a template to clone.

## Goal
Produce one 1200×630 OG image — as a self-contained HTML file styled for rendering to PNG, or as an SVG. The card should read like a miniature hero section of a real page, not a flat banner: text stacks on top, one large visual mass anchors and crops at the bottom.

## Canvas structure (top → bottom)
1. **Header strip** (~60px, full width): small wordmark top-left, three or four tiny nav labels optically centred, one small pill button plus a plain text link top-right. All on one baseline.
2. **Headline block** (starts ~20% down, centred): two-line display headline, ~64–72px, medium weight, tight leading (~1.1), near-black. Keep it under ~60% of canvas width so the sides breathe.
3. **Supporting line**: one short grey sentence, ~24px, centred, max ~45 characters per line, ~24px below the headline.
4. **CTA row** (~24px below): solid dark pill + outlined pill with a small play triangle, side by side with ~16px gap, both fully rounded.
5. **Media panel** (bottom ~40% of canvas): one large block with 20–24px rounded top corners that bleeds off the bottom edge — an abstract gradient, product-UI mock or pattern built from placeholders. Overlay a small pill badge at its top-left: white dot + bold label + separator + muted date-like text.

## Design language
- **Canvas and colour**: warm off-white background (#FAF9F7); foreground near-black (#111213); secondary text mid-grey (#8A8A8A); hairline borders (#E3E1DC). No accent colour unless the user's brand requires one — then restrict it to the badge dot or one button.
- **Type**: a single neo-grotesque sans throughout (Inter/Geist-like). Hierarchy is scale only: nav ~15px medium, headline 64–72px medium (not bold), support ~24px regular, buttons ~16px medium. Never use weight contrast heavier than medium vs regular.
- **Alignment and rhythm**: one centre axis for everything below the header; header is justified edge-to-edge. Generous vertical gaps (~40–64px) between blocks; sparse typographic top two-thirds against one dense visual mass at the bottom — that contrast is what keeps the card legible as a thumbnail.
- **Controls**: flat pills, no shadows or gradients. Primary = solid near-black fill, white label; secondary = 1px hairline border, transparent fill, small glyph before the label.
- **Media panel**: flat, no drop shadow, treated as a window cropped by the frame; badge chip has a solid light background with fully rounded ends and ~12px type.
- Keep total copy under ~30 words; the headline must be readable when the card is displayed at 400px wide. Verify the exact 1200×630 output size before delivering.

## Never
- Do not use the reference product's name, wordmark, logo shape, nav labels, headline copy, badge text or photography.
- Do not present the result as the reference product; build it entirely from the user's placeholder branding and copy.
- Do not introduce stock imagery, decorative illustrations, heavy gradients or colours the user did not sanction.