## 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/google-flow-for-ios-android/70e77792-0d1e-4d72-873b-c93b130a9577-1790056848602.webp
- Design on Kage: https://kage.design/designs/google-flow-for-ios-android-og-image

# 1200×630 social card — dark full-bleed image collage with a centred wordmark stack

## Before you start
Ask the user what product the card is for, who it is for, and what brand assets they already have (brand name, tagline, logo/wordmark, brand colours, typeface). Wait for their answers. Everything below is applied to *their* product with placeholder branding and copy — never the reference product's.

## Deliverable
Produce ONE static image at exactly **1200×630 px** (the 1.91:1 Open Graph ratio). Recommended approach: a single self-contained HTML file with a fixed 1200×630 stage, all text as real markup text (not baked into images), screenshot to PNG via Playwright/Puppeteer; alternatively a standalone SVG of the same dimensions. Placeholder imagery may be abstract CSS/SVG gradient tiles — no need for real photos.

## Canvas structure (layers, back to front)
1. **Background fill**: near-black base (#0a0a0a) covering the whole canvas.
2. **Collage layer**: three horizontal rows of rounded-corner landscape "stills" running edge to edge. Top and bottom rows are cropped by the canvas edges (tiles bleed off); the middle row is the largest, roughly 1.3–1.5× the height of the outer rows, and is centred vertically. Tiles ~16:9, corner radius ~12–16px, gaps ~8–12px, with neighbouring rows offset so tile seams never align vertically. Use the user's product imagery, or 12–18 distinct placeholder gradient tiles (varied hues — greens, blues, warm ambers — so the collage reads as diverse content).
3. **Darkening overlay**: a flat black overlay at ~40–50% opacity across the entire collage so it reads as one dark ground, not a bright grid.
4. **Vignette + glow**: a radial gradient that is transparent at the centre and fades to near-opaque black at the corners and mid-edges; plus one soft warm bloom (e.g. #ff6a3d at ~20% opacity, heavily blurred, ~500px diameter) directly behind the centre tiles for depth.
5. **Type stack**, everything centre-aligned on one vertical axis:
   - **Top (~60–70px from the top edge)**: small brand wordmark, white, ~28–32px, medium weight.
   - **Centre (optically centred on the canvas)**: hero wordmark, white, ~180–220px, tight tracking, medium weight, overlapping the middle collage row. Add a subtle soft white glow or blur halo behind it so it lifts off the imagery.
   - **Bottom (~50–60px from the bottom edge)**: one-line tagline, white at ~85% opacity, ~24–26px, slightly generous letter-spacing.

## Design language
- Focal hierarchy is strictly three-tier and centre-aligned: small wordmark → giant wordmark → small tagline, each tier roughly 6–8× the size of the adjacent one. Nothing else competes for attention.
- The imagery does all the colour work; the type is monochrome white (#ffffff) in a single weight. Never colour the type.
- Contrast comes from the darkening overlay, not from scrim boxes or outlined text — no containers around any text.
- Tiles have rounded corners but no borders, no shadows, no captions; the grid should feel like a wall of moments, not a UI.
- The vignette must keep the centre third legible behind the hero wordmark while letting the corners fall to black, which also protects against social-platform UI overlays.
- Downward rhythm: the eye lands centre first (hero wordmark + warm bloom), then reads up to the brand and down to the tagline — build the composition around that single vertical read.
- Keep total text to three lines or fewer; an OG card is read at thumbnail size, so the hero wordmark must stay legible at ~300px wide.

## Never
- No Google wordmark, no "Flow" name, no copy or tagline from the reference.
- No AI-generated video stills, photographs or imagery lifted from the reference; use placeholder gradients or the user's own assets only.
- No Google Sans or other reference typefaces — use the user's brand face or a neutral geometric sans.
- Never present the result as Google's product or imply any affiliation.