## 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/inbox-zero/b0cafe73-0407-4545-be2a-48594add96a4-1792389695995.webp
- Design on Kage: https://kage.design/designs/inbox-zero-og-image

# Build a 1200×630 OG social card

## Before you start
Ask the user what product or feature this card announces, who the audience is, and what brand assets they already have (product name, wordmark styling, brand colours, typeface). Wait for the answers before generating anything. Everything below is applied to **their** product with placeholder branding and copy — the reference is only the composition template.

## Page structure
Produce one static image at exactly **1200×630** (HTML/CSS rendered to PNG at 2× scale for crispness, or a single SVG). Top to bottom:

1. **Background canvas** — full-bleed sky-blue gradient, lightest in the upper centre behind the text, deepening toward the corners and bottom edge, with faint concentric contour rings at very low opacity for depth.
2. **Wordmark lockup** — product name in small uppercase with wide letter-spacing, white, centered, sitting roughly 8% down from the top edge.
3. **Headline** — a two-line, centred benefit headline in large bold white type; exactly one word set in italic for emphasis.
4. **Before/After proof** — the lower two-thirds split into two labelled columns ("Before" and "After" as small white semibold labels; give the Before label a small red count badge). Before column: a chaotic cluster of UI cards, rotated and heavily overlapping. After column: the same cards neatly stacked in 2–3 groups, each group headed by a small rounded category pill, with ghosted cards behind the top card to suggest depth.
5. **Bottom bleed** — the card clusters are cropped by the bottom edge, implying the product continues beyond the frame.

## Design language
- **Canvas & safe area:** 1200×630 with ~48px margins; keep all text inside the central 1000×500 so X/Slack crops never clip it. Gradient from `#7EC2F2` (upper centre) to `#3E86DD` (edges/bottom); rings at ~4% white opacity.
- **Hierarchy:** three stops only — tiny wordmark, huge headline, big demo. Headline ~68px/1.15, bold; express emphasis with italic, never with colour. Wordmark ~20px with 0.3–0.35em tracking. Column labels ~18px semibold.
- **Colour:** all type and card surfaces are white; the blue gradient is the only environmental colour. Accents exist only inside the demo cards as avatar dots, category pills and one alert badge — lavender `#A78BFA`, pink `#F472B6`, amber `#FBBF24`, teal `#2DD4BF`, blue `#3B82F6`, alert red `#EF4444`. Never colour the headline.
- **Type:** a single geometric sans, hierarchy built from weight and size alone. Inside cards use a strict three-tier scale: subject ~15px semibold dark `#111827`, sender line ~13px medium, preview snippet ~13px muted `#6B7280`, date ~12px muted right-aligned.
- **Cards:** radius ~14px, background `#FFFFFF`, soft shadow `0 8px 24px rgba(20,70,150,0.25)`, leading circular avatar dot, trailing star outline. Cards read as one component repeated with varied data.
- **Storytelling through layout:** the argument is spatial, not verbal — chaos on the left (rotations between −12° and +10°, overlaps, cards spilling off-canvas), order on the right (aligned stacks, consistent spacing, pills labelling each group). Contrast between the two columns should be legible even at 300px wide.
- **Static output:** no motion or interaction; verify legibility of white type on the gradient over a dark background (dark-mode Slack/link previews).

## Never
- No reference product names, wordmarks, taglines, email subject lines or copy from the source card — invent placeholder brand and copy from the user's brief.
- No copied illustrations, avatars or icon sets; use generic geometric shapes and outline icons.
- Never present the result as the reference product or reuse its exact headline wording.