## 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/illusions/69520fb7-72da-4d05-be45-cb1097fe433b-1789797631120.webp
- Design on Kage: https://kage.design/designs/illusions-og-image

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, logomark or glyph, colours, typefaces). Wait for the answers before writing any code. Everything below is applied to *their* brand — a placeholder mark and placeholder copy stand in until they supply the real ones.

Deliver the result as a **1200×630 social card image** (Open Graph / Twitter summary_large_image size). Good implementation paths: (a) a standalone SVG exported to PNG, (b) an HTML/CSS file sized exactly 1200×630 screenshotted to PNG with Playwright or Puppeteer, or (c) Satori/resvg. Render at 2× (2400×1260) and downscale for crisp edges.

## Canvas composition
- **Single frame, no sections.** The whole card is one centred composition; resist adding rows, columns or panels.
- **Background:** near-black base (`#0b0b0b`) with a large soft radial glow (`#3a3a3a` fading to transparent) centred on the focal element, so the canvas centre reads charcoal and the corners fall to true black. Implement as a `radial-gradient` roughly 70% of canvas width, positioned at the focal mark.
- **Focal element:** one oversized brand glyph — the user's logomark, monogram, or a single significant character from their name — rendered in off-white (`#f5f5f5`), occupying 50–65% of the canvas height and optically centred a touch above true centre. The mark is the only mandatory element.
- **Optional footer line:** at most one small supporting line (product name or domain) in muted gray (`#8a8a8a`), ~24–28px, wide letter-spacing, centred, sitting at least 60px from the bottom edge. Omit it entirely if the mark reads clearly on its own.

## Design language
- **One-idea rule:** exactly one focal element per card. Hierarchy is built purely with scale and contrast — no boxes, borders, badges or shadows.
- **Texture over precision:** give the focal mark organic, rough or torn edges rather than crisp vector outlines. In SVG, use an `feTurbulence` + `feDisplacementMap` filter on the glyph; in CSS, use a brush/ink display typeface or a subtly grained mask. The imperfection is what stops the card looking like a default template.
- **Glow as depth:** the light behind the mark does the work a gradient banner normally does — keep it soft (large blur radius, low peak brightness) so the black corners stay black.
- **Type (only if text is added):** a single weight, no bold/light pairing tricks; letterspace small caps or lowercase generously; never let supporting text compete with the mark for contrast.
- **Safe margins:** keep all ink at least 60px from every edge; link previews crop unpredictably.
- **Motion:** none — this is a static export; ensure the design works without animation.

## Never
- Do not reuse the kanji 幻, the brush artwork, or the "illusions" name and tagline from the reference — substitute the user's own mark and copy (placeholders until they answer).
- Do not present the result as the reference product or include its branding in any form.
- Do not add stock illustrations, photography or icon sets; the composition is mark + glow + black, nothing else.