## 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/voiskey/e6d17783-8f50-453f-83c5-31d11799b895-1789538439759.webp
- Design on Kage: https://kage.design/designs/voiskey-og-image

# Product social share card (Open Graph image)

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, logo mark, wordmark, colours, typeface, one-line promise). Wait for the answers. Everything below is applied to *their* product as placeholder branding — never to the reference product.

## Goal
Produce one 1200×630 social share card (Open Graph / Slack / iMessage preview). Deliver it as a self-contained HTML file with a body fixed to exactly 1200×630 (render to PNG with a headless-browser screenshot) or as a standalone SVG of the same dimensions.

## Canvas structure (top to bottom)
1. **Sky background (full bleed):** vertical gradient, deep navy-blue (~`#1e3a5c`) at the top through steel blue (~`#3c6f9e`) to pale ice blue (~`#bfdcea`) in the lower third.
2. **Starfield:** 30–50 tiny white dots (1–3px, opacity 0.2–0.7) scattered across the upper half, denser toward the top-right.
3. **Light beams:** 2–4 vertical translucent columns (60–140px wide) rising from the horizon; white→transparent linear gradients, low opacity, slight blur. One tall beam near the right edge, shorter ones passing behind the headline block. Optionally tint one beam faintly iridescent (pink/amber).
4. **Foreground hills:** bottom ~20% of the canvas, 2–3 overlapping rolling hill silhouettes in warm sage and ochre (~`#8f9a66`, `#c9a45e`, `#5c7050`), soft painterly texture, darkest at the base.
5. **Lockup (top-left, ~64px margin):** small logo mark (24–32px glyph evoking the product's function) plus the product name/descriptor on one line, white, semibold, ~32–36px.
6. **Headline block (left-aligned, starting ~38% down):** two lines, ~120–132px, rounded geometric sans, line-height ~1.05, tracking slightly tight. Line 1: light weight (~300) in translucent pale blue-white, carrying the "before" state of the promise. Line 2: bold (700–800) in solid white, carrying the "after" state. The two lines must read as one sentence split across the two states.

## Design language
- One idea per card: lockup → headline → atmosphere. No badges, buttons, cards, borders or UI screenshots.
- Weight contrast as narrative: express the transformation in type itself (light/dim old way, heavy/solid white new way) instead of adding graphics.
- Cool-to-warm palette: cool blues dominate ~70% of the canvas, white for all type, warm hills as a ~20% counterpoint along the bottom edge only.
- Single typeface family throughout (rounded geometric sans); scale jump from ~34px lockup to ~130px headline does all the hierarchy work.
- Keep all text inside ~64–80px safe margins; left-aligned text column at ~60–65% width so the right side stays open for beams and stars.
- Thumbnail test: the headline and lockup must stay legible when the card is previewed at ~300px wide — check by scaling the render down.
- Motion: none. This is a static raster/SVG asset.

## Never
- Do not reuse the reference product's name, wordmark, logo, tagline copy, or its illustrated landscape; substitute the user's branding and an original scene treatment in the same composition language.
- Never present the finished card as the reference product's asset.