## 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/fish-audio-drama-3/d1447656-3315-4af2-865c-1b26bef7a63c-1792216962566.webp
- Design on Kage: https://kage.design/designs/fish-audio-drama-3-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have available, including the brand name, logo or wordmark, colours, and typefaces. Wait for their answers before proceeding. Apply everything below to that product, using placeholder branding and copy until those details are provided.

## Page structure
- **1200×630 social-card canvas:** Create a fixed-ratio Open Graph image, implemented as HTML/CSS rendered to PNG or as an SVG, with all content safely inside generous margins.
- **Upper-left brand lockup:** Place a small placeholder logo or abstract brand mark followed by the placeholder brand name, aligned horizontally near the top-left.
- **Atmospheric background field:** Fill the canvas with a very dark base and a subtle central-to-edge purple glow, leaving the corners comparatively quiet.
- **Decorative audio-inspired motif:** Run a low-contrast field of thin vertical bars or waveform-like lines through the center and toward the right side, partially fading into the background rather than competing with the text.
- **Lower-left content block:** Stack a small product/category label, a large one- or two-line headline, and a concise supporting description near the lower-left, with the headline as the primary focal point.
- **Bottom and right breathing room:** Keep the composition open around the text and artwork so the card remains legible when cropped or displayed at small sizes.

## Design language
- Build hierarchy through scale and placement: use a modest brand lockup, a compact label, an oversized headline, and a smaller supporting line; keep the lower-left block left-aligned.
- Treat the card as a quiet, premium dark composition rather than a busy poster. Use generous negative space and let typography carry the message.
- Use a near-black navy-purple base around `#100D1B` or `#151124`, with restrained violet atmosphere around `#28203D` and soft white type around `#F7F5FA`.
- Pair a clean contemporary sans-serif for every text element, using medium weight for the label and description and bold or semibold weight for the headline. Set the headline large enough to dominate the 1200×630 canvas, with tight but readable line-height.
- Keep text white or near-white with no bright accent colour; the waveform and glow should use desaturated purple-gray tones at low opacity, approximately `#5A4B76` at 10–25% opacity.
- Use texture sparingly: add a subtle noise or fine-grain overlay and a soft radial gradient, but avoid obvious patterns, hard vignettes, or glossy effects.
- Draw the waveform with thin vertical strokes or narrow rounded bars of varied height, clustered near the middle and right; fade opacity and blur slightly so it reads as atmosphere.
- Avoid visible cards, panels, heavy borders, drop shadows, and rounded containers. The canvas should feel flat, spacious, and editorial.
- Preserve safe margins of roughly 64–72px on the left and top, and ensure the description does not extend beyond the headline's readable width. Use ellipsis or a shorter placeholder if copy would be clipped.
- If adding motion during authoring, use only a slow, subtle glow or waveform opacity drift; the final deliverable must be a static 1200×630 PNG or SVG.

## Never
- Do not reuse the reference's logos, wordmarks, product names, copy, exact audio mark, or branded assets.
- Do not add illustrations, photography, or an icon set from the reference.
- Do not present the result as Fish Audio or Drama 3; use neutral placeholder branding and original copy for the user's product.
- Do not turn this into a responsive webpage, landing page, or full product interface; produce one 1200×630 social card image.