## 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/sineframe-m3/c934ec07-df67-47da-a5cb-0829bb1fa3c9-1791525775431.webp
- Design on Kage: https://kage.design/designs/sineframe-m3-og-image

## Before you start
Ask the user what product the social card is for, who it is for, and what brand assets they already have (name, wordmark, logo mark, colours, typeface, domain). Wait for the answers before building. Everything below is applied to *their* product, not to the reference.

## Deliverable
Produce a single **1200×630** social/OG card image — e.g. an HTML/CSS file sized exactly 1200×630 (render to PNG with a headless browser or screenshot tool) or a standalone SVG. One frame, no scrolling, no responsive variants. Use placeholder branding and placeholder copy throughout.

## Page structure (canvas top → bottom)
1. **Canvas**: a flat off-white field (~#F2F2F0) with a generous safe margin of ~64px on all sides. No borders, no texture, no gradient.
2. **Logo lockup (top-left)**: a small rounded-corner tile (~44px, near-black) containing a simple abstract mark, sitting beside a bold sans wordmark (~28px). This is the smallest text on the card.
3. **Headline (upper-middle)**: a two-line benefit statement in a heavy grotesque sans at ~90px, line-height ~0.95, near-black, slightly tight tracking. It spans most of the canvas width and is the focal point.
4. **Subhead**: one line below the headline, ~34px regular weight, mid gray (~#6E6E6E), describing what the product does in plain words.
5. **Wave strata (bottom third)**: three full-width flat wave bands that echo the logo mark at large scale — light gray (~#9C9C9C), a thin off-white gap, darker gray (~#7B7B7B), another gap, then a near-black band (~#1A1A1A). Waves are smooth cubic curves with gently opposing crests so the bands read as layered strata.
6. **Footer text (inside the black band, bottom-left)**: the product's domain (or equivalent short identifier) in a monospace face, white, ~22px, baseline ~40px above the bottom edge.

## Design language
- **Focal hierarchy by scale alone**: small lockup → huge headline → mid subhead → tiny monospace URL. No colour contrast is used for emphasis; size and weight do everything.
- **Colour discipline**: strictly monochrome. Off-white ground #F2F2F0, ink #111111, subhead gray #6E6E6E, wave grays #9C9C9C and #7B7B7B, black band #1A1A1A. One accent colour only if the user's brand demands it — otherwise none.
- **Type pairing**: a single grotesque sans (Helvetica/Inter/Neue Haas class) for lockup, headline and subhead; a monospace face reserved exclusively for the URL/identifier in the footer. Never mix the two roles.
- **Headline rules**: max two lines, sentence case with a short punchy clause, leading ≤1.0 so the lines stack as a solid block. The headline should fit within the top ~55% of the canvas so the waves are never covered.
- **Logo-as-motif**: whatever mark the user has, reduce it to 2–3 flat shapes and repeat those shapes at large scale as the bottom decoration. The decoration must come from the brand, not from a stock pattern.
- **Flatness**: no shadows, no gradients, no strokes, no rounded anything except the small logo tile. Hard-edged flat fills throughout.
- **Legibility**: keep all text ≥64px from every edge; never let waves intersect text except the monospace URL, which sits only on the black band.

## Never
- No SineFrame or M3 branding, no wave-logo copies, no "Catch broken MCP behavior…" copy, no m3.sineframe.com URL. Do not present the result as that product.
- No photography, illustration, emoji, badge/stars, or multi-colour decoration.
- No content outside the 1200×630 frame — it must crop cleanly in Slack/X/LinkedIn previews.