## 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/fastrouter-ai/a192b035-fc5c-46cc-81a4-6bea5b3ddaed-1791266437692.webp
- Design on Kage: https://kage.design/designs/fastrouter-og-image

## Before you start
Ask the user what product or page the social card is for, who the audience is, and what brand assets they already have (name or wordmark, brand mark/glyph, brand colours, and typeface if any). Wait for the answers. Everything below is applied to their brand and copy — the reference card's name, copy and bolt glyph must not be reused.

## Output
Produce a **1200×630 social card image** (Open Graph / Twitter summary_large_image). Deliver it either as a standalone HTML/CSS file sized exactly 1200×630 (intended to be rendered to PNG, e.g. via Playwright/Puppeteer screenshot) or as a single SVG of the same dimensions. No scrolling, no responsive behaviour, fixed canvas.

## Page structure
Work in a fixed 1200×630 canvas with a content column anchored to the left and a decorative zone on the right:

1. **Canvas** — full-bleed deep navy background with a very subtle darkening toward the top-left so the text zone sits on the darkest area.
2. **Logo lockup, top-left** (~72px from left, ~60px from top) — a small brand glyph (~28px) beside the wordmark in bold white type at ~26–28px. Keep the lockup compact; it is a label, not a hero.
3. **Headline block, left-centre** — the main value proposition set on two lines, bold white, ~88–96px, tight leading (~1.05), slightly negative letter-spacing. Cap the block at roughly 65% of canvas width so it never collides with the watermark.
4. **Subhead** — two lines directly under the headline at ~28px in a desaturated blue-grey, line-height ~1.4, max-width ~520px. It carries one supporting sentence only.
5. **Footer domain** — bottom-left (~40px from bottom) the bare domain at ~22px in the same muted blue-grey. No CTA, no button.
6. **Watermark graphic, right third** — one large brand-relevant shape (an abstract glyph or geometric form derived from the user's brand, NOT the reference bolt) in a fill only a few steps lighter than the background, oversized so it crops off the right edge and bleeds toward top and bottom. Behind its lower half, add a soft radial glow of the brand's accent blue at low opacity.

## Design language
- **Hierarchy by scale, not by boxes**: four levels only — lockup, headline, subhead, domain. No cards, borders, dividers or panels anywhere; separation comes purely from size, weight and colour value.
- **Left-weighted composition**: all text hangs on one left column with consistent ~72px side margin; the right third stays wordless so the watermark can breathe. Vertical rhythm: lockup at top, headline block starting near vertical centre, subhead ~24–32px below it, domain pinned to the bottom edge.
- **Colour, three tones**: background deep navy ≈ `#0A1224`; headline and wordmark pure white `#FFFFFF`; subhead and domain a desaturated slate-blue ≈ `#64748B–#7C8CA6`. Watermark fill ≈ `#15244A` (background + one step); glow uses brand blue ≈ `#1D4ED8` at 15–25% opacity, feathered widely. No pure black, no gradients on text.
- **Type**: one bold geometric grotesque for everything; hierarchy is achieved by scale jump (26 → 92 → 28 → 22px) and colour, not by switching typefaces. Headline in sentence case, two balanced lines, tight leading.
- **Contrast for small contexts**: the card must read when shrunk to a link-preview thumbnail — keep headline size extreme, keep the subhead short, and never let the watermark's fill come within ~30% contrast of the text column.
- **Motion**: none — this is a static image; suppress shadows, rounded containers and any UI chrome.

## Never
Never reuse the FastRouter name, its "FastRouter" wordmark, the lightning-bolt glyph, the exact headline or subhead copy, or the fastrouter.ai domain. Never present the output as FastRouter's card — it is a new card for the user's own product using their branding and copy.