## 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/tonebird/db975612-d4e1-48b8-b90e-f0e4268d4601-1790229759245.webp
- Design on Kage: https://kage.design/designs/tonebird-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for their answers before proceeding. Apply everything below to that product, using placeholder branding and copy until the user provides their details.

## Page structure
- **1200×630 social-card canvas:** Create a fixed-ratio Open Graph image, rendered as HTML/CSS to PNG or SVG, with generous off-white negative space.
- **Upper-left brand lockup:** Place a small placeholder symbol and wordmark near the top-left with a compact horizontal arrangement.
- **Primary headline:** Set a large, heavy two-line headline in the left half, aligned to the same inset as the wordmark; keep the line length broad but leave clear space around the visual.
- **Supporting statement:** Add one shorter sentence below the headline in a smaller regular weight to clarify the product's role.
- **Right-side focal image:** Reserve the right half for one oversized, friendly abstract or product-related 3D object; use a clean silhouette, glossy material, and a soft grounding shadow.
- **Footer URL or metadata:** Add a small muted placeholder URL at the lower-left, separated from the headline by ample vertical space.

## Design language
- Use a calm, nearly white background around `#FAFBF5` and near-black text around `#171A22`; keep the canvas visually light and uncluttered.
- Build hierarchy with a compact brand mark, a dominant bold headline roughly 64–76px at 1200px width, a 30–36px supporting line, and a 22–26px muted footer label.
- Keep the composition asymmetrical: text occupies roughly 55–60% of the width and the focal object occupies the right 40–45%, with generous left and top insets.
- Use one vivid accent family for the object, moving from emerald green around `#00C878` into electric lime around `#78FF36`, with subtle translucent highlights and darker green edge shading.
- Treat the focal artwork as a polished 3D illustration: rounded contours, glassy or gel-like material, gentle highlights, slight perspective, and a diffuse pale gray-green floor shadow. If 3D rendering is unavailable, approximate it with layered SVG paths, gradients, blur, and highlights rather than adding multiple unrelated illustrations.
- Pair a geometric or modern sans-serif for all text; use a heavy weight for the headline, medium weight for the wordmark, and regular weight for the subtitle and footer. Keep tracking close to neutral and line height tight in the headline.
- Avoid visible cards, panels, borders, or strong drop shadows around the text. Reserve shadow and depth for the right-side artwork and its grounding reflection.
- Keep motion out of the final PNG/SVG; if producing an HTML source, use no interaction and ensure the exported image is crisp at exactly 1200×630.
- Check the final crop at social-preview size: the wordmark, both headline lines, subtitle, focal artwork, and footer must remain legible and balanced without touching the edges.

## Never
- Do not use the reference product's logo, wordmark, product name, exact copy, mascot, or artwork.
- Do not copy the reference's bird silhouette or recreate its distinctive identity; invent a different abstract/product-relevant focal object for the user's product.
- Do not use the reference URL, illustrations, photography, or icon set.
- Never present the result as ToneBird or imply affiliation with the reference product.