## 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/public-com/a403b7ca-65de-44e7-b971-637003438474-1789146489419.webp
- Design on Kage: https://kage.design/designs/public-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (brand name, colours, typefaces, logo or mark). Wait for their answers before proceeding. Apply everything below to their product, not to the reference brand.

## Page structure
- **1200×630 social-card canvas:** Create a fixed-ratio Open Graph image intended for sharing on X, Slack, LinkedIn, or iMessage; keep all essential content comfortably inside the edges.
- **Left editorial copy field:** Reserve roughly the left half for a short, two-to-three-line headline with a generous margin and strong line breaks; use placeholder branding and copy supplied by the user.
- **Right product-image panel:** Place a large rounded-corner rectangle in the right half, using a dark background and a product UI screenshot, device mockup, or abstract product visual selected for the user’s product.
- **Layered product focal point:** Let the main visual overlap or sit above a darker foreground shape so the panel feels dimensional without becoming busy.
- **Bottom-left brand lockup:** Add the user’s placeholder logo/mark and brand name beneath or near the headline, aligned to the same left margin.

## Design language
- Build hierarchy through a strong asymmetrical split: mostly white space and typography on the left, one high-contrast image panel on the right.
- Use an editorial serif for the headline, with a large display scale, tight but readable line-height, and intentional line breaks. Pair it with a neutral sans-serif for the wordmark, metadata, and any supporting text.
- Keep the base palette restrained: warm or neutral white around `#FFFFFF` to `#F8F8F6`, near-black text and panel around `#050505`, and one brand accent such as cobalt blue around `#1554B8` or the user’s supplied colour.
- Treat the social card as a still composition rather than a webpage: no scrolling, hover states, or UI chrome. If implemented in HTML/CSS, render the final result to an exact 1200×630 PNG; SVG is also acceptable if exported at that size.
- Use a rounded panel radius around 12–18px, no visible border, and minimal shadow. The panel should feel like a contained image rather than a card grid.
- Make the product visual legible but secondary to the headline: use a clean dashboard screenshot, device screen, or abstract interface image with restrained detail and a subtle cool-toned glow or gradient in the lower foreground.
- Keep the composition calm and premium: generous margins, no decorative icon set, no extra badges, and no dense supporting copy. Ensure the headline and brand lockup remain readable when the image is displayed as a small link preview.
- Preserve safe zones of approximately 48–56px on all sides, and check contrast and cropping at thumbnail scale.

## Never
- Do not use the reference brand’s logo, wordmark, product name, headline, dashboard, device imagery, copy, or exact visual assets.
- Do not reproduce the reference card verbatim; create an original composition using placeholder branding, placeholder headline text, and visuals appropriate to the user’s product.
- Do not add logos, wordmarks, copy, illustrations, photography, or icon sets from the reference.
- Never present the result as Public or imply affiliation with it.