## 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/bun-sh/74da770e-fff7-4821-ab22-bb8c1fa6b2cd-1789073657469.webp
- Design on Kage: https://kage.design/designs/bun-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the brand name, colours, typefaces, logo or mascot, and preferred copy. Wait for their answers before designing. Apply the reference's composition and visual principles to their product, not to the reference product.

## Page structure
- **Canvas:** Produce a 1200×630 social card image, suitable for sharing on X, Slack, LinkedIn, or iMessage, using HTML/CSS rendered to PNG or an SVG.
- **Top identity row:** Place a small placeholder mascot or simple brand mark toward the upper-left, with a large placeholder wordmark aligned horizontally beside it; keep generous white space around this row.
- **Primary headline:** Below the identity row, place a two-line oversized headline aligned to the left. Use mostly black text and colour one short, meaningful phrase in the brand accent colour.
- **Descriptor strip:** Along the bottom, add a compact uppercase list of three to five product capabilities separated by centered dots. Use it as a quiet structural footer rather than a second headline.

## Design language
- Build hierarchy through scale and weight: use a very large, heavy geometric sans-serif headline, a large bold wordmark, and a much smaller condensed or monospace descriptor line.
- Keep the composition editorial and asymmetrical: left-align the identity, headline, and footer on a shared margin while allowing the mascot and wordmark to form a distinct upper band.
- Use a mostly white canvas, near-black typography such as `#080808`, and one vivid accent similar to hot pink `#F20B86`; reserve the accent for one short headline phrase or another single focal detail.
- Keep type tightly tracked and closely line-spaced in the headline. Use uppercase lettering, wider tracking, and a monospace or condensed face for the capability strip.
- Treat the card as flat print-like artwork: no gradients, glass effects, heavy shadows, or complex panels. Use simple solid shapes and crisp edges, with only the mascot or brand mark introducing rounded organic geometry.
- Preserve generous negative space around the top row and card edges, but let the headline occupy most of the lower canvas. Ensure all text remains inside safe margins for social-card cropping.
- If using a mascot, make it a simple original placeholder character with a friendly, rounded silhouette; do not copy the reference character.
- Motion is not needed for a static OG image. Render at exactly 1200×630 and export a sharp PNG or SVG with text and shapes positioned deterministically.

## Never
- Do not use the reference product's name, wordmark, mascot, logo, headline, tagline, capability wording, or exact copy.
- Do not reproduce the reference mascot or any other distinctive illustration; use placeholder branding and original shapes instead.
- Do not present the result as the reference product. Use the user's own product name, brand assets, colours, and copy after receiving their answers.
- Do not add photography, generic icon sets, gradients, or decorative content that weakens the bold typographic composition.