## 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/agent-craft/e7da2a71-5cc2-4a4e-ba53-46d086a7b84d-1791957722626.webp
- Design on Kage: https://kage.design/designs/agent-craft-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 wordmark, and the copy they want to feature. Wait for their answers before designing. Apply everything below to their product, not to the reference brand.

## Page structure
- **1200×630 social-card canvas:** Create a fixed 1200×630 OG image intended for sharing on X, Slack, LinkedIn, and iMessage; keep all essential content inside a comfortable inset margin.
- **Upper-left brand line:** Place a small placeholder wordmark or product label near the upper-left, with restrained scale and strong contrast.
- **Primary headline:** Set the main placeholder message beneath it in a large, lightweight sans-serif across two lines if needed; make this the dominant focal point.
- **Supporting descriptor:** Add one smaller line below the headline for a concise product explanation, URL, or qualifier.
- **Open field:** Leave the right side and lower areas mostly quiet so the typography remains the visual subject rather than filling the card with graphics.

## Design language
- Use a minimal, typography-led composition: one clear focal hierarchy rather than multiple cards, icons, or illustrations.
- Build hierarchy with scale and spacing: small brand line, very large headline, then a compact supporting line. Use generous vertical gaps and avoid cramped wrapping.
- Use a saturated emerald/green background, approximately `#0B9F63` to `#119B62`, with a barely perceptible darker or lighter tonal variation; adapt the hue to the user's brand if they provide one.
- Set all text in white or near-white, approximately `#F5F7F2`, for crisp contrast. Avoid gradients, shadows, outlines, and ornamental decoration unless the user's brand requires them.
- Pair a clean modern sans-serif throughout; use a light or regular weight for the headline, roughly 54–68px at 1200px width, with comfortable line-height around 1.05–1.15. Use approximately 27–32px for the brand line and 25–30px for supporting copy, adjusted to fit the user's copy.
- Keep the composition left-aligned with an inset of roughly 85–95px from the left edge and a similarly generous top margin. Use a wide text block, but preserve visible breathing room on the right.
- Treat the card as a flat image: no visible border, rounded corners, UI chrome, photo, or icon set. If a subtle background texture is used, keep its contrast extremely low.
- Produce the result as an actual 1200×630 image, using HTML/CSS rendered to PNG, SVG, or another reliable rasterization path. Verify that text remains sharp, legible, and within the safe area at social-preview size.
- Use placeholder branding and copy until the user supplies their own; do not copy the reference wording.

## Never
- Do not use the reference product's logo, wordmark, product name, tagline, URL, exact copy, or any other brand-specific asset.
- Do not reproduce the reference card as a branded imitation; transfer only the composition, spacing, typographic hierarchy, and restrained colour treatment.
- Do not add logos, wordmarks, product names, copy, illustrations, photography, or icon sets from the reference.
- Never present the result as the reference product or imply an affiliation with it.