## 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/finalframe/7b73d2d9-6e0a-483a-930a-a54ec91534be-1790402603042.webp
- Design on Kage: https://kage.design/designs/finalframe-og-image

# Build a 1200×630 social card in this design language

## Before you start
Ask the user what product or page this card is for, who it is for, and what brand assets they already have (name, one accent colour, logomark if any, preferred typeface). Wait for the answers before designing. Everything below is applied to their product, not to the reference.

## Deliverable
Produce one Open Graph social card image at exactly 1200×630. Build it as a single self-contained HTML file sized 1200×630 and render it to PNG (headless browser or screenshot tool), or as a standalone SVG of the same dimensions. No scrolling, no responsive behaviour, no browser chrome mockups. Use the user's branding and placeholder copy based on their answers.

## Page structure
- **Background layer**: a full-bleed near-black canvas with a subtle gradient — slightly lighter and cooler in the top-left corner, falling off to near-black at the edges and bottom. No imagery, patterns, or texture beyond this soft light falloff.
- **Centered stack** on a single vertical axis, occupying roughly the middle 60% of the width and from about 25% down to 80% of the height, top to bottom:
  1. **Logo lockup**: a small geometric mark (~28px) with the single accent colour inside it, beside the product name in near-white at ~24px medium weight.
  2. **Two-line headline** at ~64px, line-height ~1.15, sentence case, each line ending in a period: line one at full brightness, line two at the same size but strongly dimmed so the pair reads as statement and echo.
  3. **Supporting paragraph**: at most three lines, ~24px, muted gray, line-height ~1.5, max-width ~720px, centered — plain sentences summarising what the product does.
- Everything outside this stack stays empty; keep the bottom ~15% of the canvas bare.

## Design language
- One vertical axis with optical centring: the stack sits slightly above true vertical centre, with generous equal side margins (~64px safe margins so platforms never crop type).
- Hierarchy comes from brightness, not weight or colour: full-white headline → ~55%-brightness echo line → ~45%-brightness body. The accent colour never touches text.
- Colour treatment: near-black background with a faint cool cast (e.g. `#0b0f0e` → `#121a18`, with the lighter corner around `#1a2224`); text white `#f4f7f6`; muted text around `#8b979b`; exactly one accent (the user's brand colour, e.g. teal `#34d399`) reserved for the logomark only.
- Typography: a single neutral grotesque sans throughout; scale steps of roughly 24 → 64px do the structuring, paired with the opacity steps above. Keep each headline line short enough to sit on one line at 64px.
- No borders, cards, shadows, buttons, badges, or gradients-on-text — flat type on a flat dark field.
- Punctuation as rhythm: complete sentences with terminal periods in both headline lines give the card a calm, deliberate voice.
- Static by nature: no motion; ensure crisp text rendering at 1:1 pixel dimensions.

## Never
Do not reuse the reference's product name, viewfinder/bracket logomark, headline copy, or body copy, and never present the result as that product. No photography, illustrations, stock imagery, or icon sets borrowed from the reference.