## 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/cloudknife/0a06ce93-d630-43ca-bf4c-57537d4ebd75-1793080966844.webp
- Design on Kage: https://kage.design/designs/cloudknife-og-image

# Build a social card in this style

The reference is an Open Graph share card (1200×630) for a cloud cost-optimization product. Recreate its composition and atmosphere with the user's own brand.

## Before you start

Ask the user:
1. What product or company is this card for, and what single message should it carry (tagline, launch line, or feature callout)?
2. Who will see it — where will it be shared (X, Slack, LinkedIn, iMessage) and is there a URL it points to?
3. What brand assets exist: name, logo/mark, brand colours (hex values), and any preferred typeface?

Wait for the answers. Everything below is applied to *their* product; the reference is only the design language.

## Output format

Produce a single **1200×630** image. Best done as an HTML/CSS file sized exactly `1200×630` (`body { width: 1200px; height: 630px; margin: 0; overflow: hidden; }`) rendered to PNG with Playwright or Puppeteer, or as a standalone SVG with a `viewBox="0 0 1200 630"`. No interactivity, no scroll, no motion.

## Composition zones (top to bottom)

1. **Background — full-bleed gradient scene (entire canvas).** A deep indigo-to-dark-purple field, darkest near the top-right and centre. Over it, 3–5 diagonal translucent light shafts fall from the top edge, slightly rotated from vertical (roughly 10–20° off-axis), converging loosely toward the lower-left where the headline sits. Each shaft is a tall skewed element with heavy blur (40–80px) and low opacity so edges melt into the background. Two large soft radial glows — one bottom-left, one bottom-right — sit at the corners, blurred to nothing.
2. **Wordmark lockup — top-left corner.** A small mark (24–28px) plus the company name in one line, placed ~48–56px from the top and left edges. It is the quietest element on the canvas: modest size, full white, no background chip.
3. **Headline — bottom-left.** The tagline in two lines, left-aligned, starting ~64–80px from the left and ~70–90px from the bottom. This is the largest element by far and the visual destination of the whole card. If the user supplies a one-liner, break it into two balanced lines; if they supply a sentence and clause, put the punch clause last.

Nothing else. Two text elements total — resist adding buttons, URLs, badges, or feature lists.

## Design language

- **Bottom-weighted hierarchy.** The top ~60% of the canvas is pure atmosphere with no content; the message sits in the lower-left quadrant. The wordmark top-left balances the headline bottom-left on a diagonal.
- **Colour.** Base: deep indigo/night purple (`#150b3d` → `#2a1660` radial or diagonal blend). Shafts: violet-blue (`#5b48d6`, `#7a5cff`) at 10–25% opacity. Corner glows: warm pink/red (`#e86aa0`, `#ff5f6d`) as heavily blurred blobs. Text: pure white `#ffffff`. If the user's brand colours differ, map: darkest brand tone → base, mid brand tone → shafts, accent tone → glows.
- **Type.** One geometric sans throughout. Wordmark ~28px, weight 500. Headline ~92–100px, weight 300–400, line-height ~1.15, sentence case, left-aligned, with a terminal period. On the second line, drop alternate words to `rgba(255,255,255,0.6–0.7)` so the line has rhythm and the key words read brightest.
- **Light as the only shading.** No borders, no drop shadows, no cards, no panels. Depth comes entirely from blurred gradients and overlapping translucent beams.
- **Atmosphere techniques.** Use `filter: blur()`, `mix-blend-mode: screen` on glows, and optionally a faint noise/grain overlay (2–4% opacity) to keep large gradients from banding.
- **Legibility check.** The card will often render at ~500px wide in feeds: verify the headline is still readable and the wordmark is not swallowed — darken the area behind the headline if needed with an extra shadow-like gradient.

## Never

- Do not use the reference product's name, wordmark, cloud-with-blade logo, or its tagline wording ("Cut your cloud bill…" or variants).
- Do not copy the exact gradient palette or shaft arrangement pixel-for-pixel; rebuild the motif with the user's own colours.
- Do not add stock illustrations, photography, icons, or UI mockups — the reference is type and light only.
- Never present the result as the reference product; it is the user's brand rendered in this composition.