## 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/busabase/664c2ec8-572d-480a-b2fd-a1b29874e721-1791612033621.webp
- Design on Kage: https://kage.design/designs/busabase-og-image

# 1200×630 social card in a framed editorial style

Produce a **1200×630 Open Graph social card image** (for example: a single HTML file at exactly 1200×630 screenshotted to PNG with Playwright/Puppeteer at deviceScaleFactor 2, or a standalone SVG with the font embedded). All branding and copy must be **placeholders** based on the user's own product, not the reference product.

## Before you start
Ask the user, and wait for the answers before building:
- What product or announcement is the card for (launch, feature, changelog, general brand card)?
- Who will see it and on which platforms (X, Slack, LinkedIn, iMessage)?
- What brand assets exist: name, logo glyph or wordmark, colours, and a typeface they already use? If none, propose one heavy serif (e.g. Source Serif 4, Lora, Playfair Display) and one warm neutral background before proceeding.

Everything below is applied to *their* product, never to the reference product.

## Page structure
1. **Canvas**: exactly 1200×630, flat warm off-white background filling the whole area.
2. **Inset frame**: a thin (≈2px) black rounded-rectangle border inset ≈72px from every edge, radius ≈48px — a card within the card, with all content inside it. This frame is the only decoration.
3. **Header row** (top-left inside the frame): a solid black rounded-square logo tile (~88px, radius ~22px) containing a simple white glyph, with the brand wordmark in bold serif (~56px) beside it.
4. **Headline block**: a 3–4 line bold serif headline (~72px, line-height ~1.1, black) describing what the product does, left-aligned, spanning about two-thirds of the frame width.
5. **Support copy**: one or two lines of gray serif (~30px) summarising the value proposition, directly under the headline.
6. **Footer row** (pinned near the bottom of the frame): a short bold serif tagline (~24px) bottom-left and the domain (e.g. `example.com`) bottom-right, justified apart with space-between.

## Design language
- **Framed composition**: the inset rounded border turns a flat image into an object; keep a consistent ≈72px safe margin so nothing clips when platforms crop.
- **Monochrome palette**: near-black `#1a1915` text on warm off-white `#f6f3ec`; secondary copy in muted warm gray `#77746b`. No accent colour, no gradients, no shadows.
- **Type does all the work**: one serif family at three weights/sizes — bold wordmark, very large bold headline, small bold footer — plus regular gray support copy. Hierarchy comes from scale and weight contrast only.
- **Left-aligned single column**: text occupies ~65–70% of the frame width; the right third stays empty so the dense left side reads as deliberate, not cramped.
- **Rounded geometry echoed once**: the logo tile's radius (~22px) is roughly half the frame radius (~48px), tying the glyph to the border.
- **Vertical rhythm**: header → ~40px gap → headline → ~48px gap → support copy → flexible space → footer row anchored at the bottom edge, so the composition feels bottom-weighted and stable.
- **No imagery**: no illustration, photography, screenshots or icon sets — whitespace and type weight are the entire visual argument.

## Never
- Never use the reference product's name, wordmark, logo glyph (black tile with three white bars), headline copy, tagline or domain anywhere in the result.
- Never present the card as belonging to the reference product; use the user's brand or clearly generic placeholders (e.g. "Yourbrand", "example.com").
- Never add stock illustration, stock photography or decorative gradients to fill the empty right third — leave it empty.