## 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/pine-computer/b05efb7c-c32c-4957-abe5-6162ec158dab-1791612242223.webp
- Design on Kage: https://kage.design/designs/pine-computer-og-image

# 1200×630 social card — bold strikethrough-headline poster style

Produce a single **1200×630 social share image** (an Open Graph / Twitter card) for the user's product. Build it as a self-contained HTML/CSS file sized exactly 1200×630 that can be rendered to PNG (e.g. headless Chrome), or as an equivalent SVG. Use placeholder branding and copy unless the user supplies real assets.

## Before you start
Ask the user: What product or company is this card for? Who is it for? What brand assets do you already have (name, logo, colours, typeface)? Is there a one-line value proposition or a wordplay you want the headline to make? **Wait for the answers.** Everything below is the composition language of the reference; apply it to the user's brand, not to the reference's.

## Card structure (top to bottom)
1. **Canvas** — full-bleed flat background, no texture, no gradient, no border.
2. **Logo lockup, top-left** — small geometric mark (~40px tall) beside the wordmark in a medium-weight sans, both in ink, sitting on the shared left margin about 70px from the top edge.
3. **Headline block** — the dominant element: three lines of all-caps, ultra-bold sans starting ~180px from the top, flush left, line-height ≈ 0.95–1.0, sized (~130–150px) so the block spans roughly the left two-thirds of the canvas. The final line carries the rhetorical twist: one word struck through in muted gray, immediately followed by the replacement word set in ink on a solid accent-coloured rectangle that hugs the letters with small padding.
4. **Footer, bottom-left** — the URL or handle in lowercase monospace (~28px), muted gray, on the same left margin, ~64px from the bottom edge.
5. **Right third** — deliberately empty negative space; nothing balances into it.

## Design language
- **Palette (approximate):** one warm off-white ground (#F2F1EA), one near-black ink (#111111), one muted gray (#8A8A85) used *only* for the cancelled word, one saturated accent (#34D97C) used *exactly once* as the solid highlight rectangle. Colour does the emphasising; nothing else is decorated.
- **Hierarchy:** only three type steps — huge headline ≫ small wordmark ≫ small mono footer. The focal point is created rhetorically (strikethrough → replacement on accent block), not with effects, so the joke is legible even at small feed sizes.
- **Type:** a single very heavy grotesque/geometric sans (Archivo Black / Inter Black class) for everything except the footer; monospace only for the URL. Keep tracking tight and leading under 1.0 so the caps stack reads as one solid mass. The scale contrast between headline and everything else should be extreme (5× or more).
- **Alignment & rhythm:** everything flush left on one shared margin (~70–80px); ragged right; vertical spacing comes from consistent line-height, not ad-hoc gaps.
- **Flatness:** solid fills only — no gradients, shadows, borders, radii, photography or illustration. The accent block is a plain rectangle behind the word.
- **Safety:** keep all content inside ~64px safe margins so Slack/X/iMessage crops never clip the headline or footer.

## Never
- Do not reuse the reference product's name, its bracket-and-dot logo mark, its exact headline copy, or its specific green.
- Never present the result as the reference product; use the user's own (or clearly placeholder) branding, copy and colours.
- Do not add imagery, icons or decorative effects — the composition works purely through type, flat colour and negative space.