## 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/gojo/b8bdefc3-72ca-40c4-856d-cd1d7c8a47a7-1789106501135.webp
- Design on Kage: https://kage.design/designs/gojo-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, and type). Wait for their answers before proceeding. Apply everything below to that product, using placeholder branding and copy until the user provides their own details.

## Page structure
- **Full-bleed background:** Create a 1200×630 social card image with an edge-to-edge, heavily blurred atmospheric background; use an abstract gradient or blurred product-relevant scene rather than a literal reference image.
- **Centered brand mark:** Place a simple placeholder symbol in the upper-middle of the canvas, centered horizontally and rendered in solid light text or white.
- **Wordmark:** Set the placeholder product name directly below the mark in a large, bold, rounded or softly geometric sans-serif, centered on the same axis.
- **Supporting headline:** Add a short placeholder tagline beneath the wordmark in a smaller regular-weight sans-serif, centered and spaced clearly from the title.
- **Export:** Produce the result as a 1200×630 PNG, using HTML/CSS rendered to PNG or an SVG that can be rasterized; ensure the final composition remains readable in social previews.

## Design language
- **Build hierarchy through a single centered stack:** Make the brand symbol the visual entry point, the wordmark the largest text element, and the supporting line the quietest element.
- **Use generous negative space:** Keep the stack compact but surrounded by ample breathing room; avoid extra badges, buttons, borders, or decorative UI.
- **Use a soft, warm atmospheric field:** Combine approximate tones such as muted amber `#B58A5E`, terracotta `#A85C45`, dusty olive `#8D8B64`, beige `#B9A98A`, and charcoal `#343036`, then apply strong blur and low-frequency blending so no hard photographic detail competes with the text.
- **Keep the foreground monochrome:** Use warm white or near-white `#FFFDF8` for the mark, wordmark, and tagline. Maintain high contrast without adding multiple text colours.
- **Pair type by weight rather than ornament:** Use a rounded or humanist sans-serif for the large placeholder wordmark at bold weight, with a clean regular sans-serif for the tagline. Use a clear scale contrast, roughly 68–82px for the wordmark and 30–38px for the supporting line at 1200×630, adjusted to fit the copy.
- **Treat the mark as a simple geometric silhouette:** Use a restrained abstract placeholder icon with smooth curves and a few solid shapes; do not introduce an icon library or detailed illustration.
- **Keep edges soft and the composition calm:** The background should feel diffused and cinematic, while the foreground stays crisp. Do not use cards, shadows, gradients inside the text, or visible outlines.
- **Design for static sharing:** Motion is not part of the deliverable; if generating through HTML/CSS, use deterministic positioning and render only the final static frame.

## Never
- Do not use the reference product’s logo, wordmark, product name, tagline, copy, or exact brand assets.
- Do not copy the reference image or present the result as Gojo.
- Do not add logos, wordmarks, product names, copy, illustrations, photography, or icon sets from the reference; use placeholder branding and newly written placeholder text instead.
- Do not produce a webpage mockup; produce a single 1200×630 social card image suitable for Open Graph metadata.