## 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/coldiq-x-slack/0a3aa80c-e52d-4857-b7b4-bff7e9ff20ea-1790748038133.webp
- Design on Kage: https://kage.design/designs/coldiq-x-slack-og-image

## Before you start
Ask the user what product or link the social card is for, who will see it when shared (X, LinkedIn, Slack, iMessage), what the single headline message should be, and which brand assets they already have (name, logo mark, colours, fonts). Wait for the answers before designing — the recipe below is applied to *their* brand, not to the reference.

## Page structure
Produce one fixed 1200×630 canvas (HTML/CSS sized for PNG export, or a single SVG), top to bottom:

1. **Background field** — full-bleed warm cream with generous breathing room; nothing touches the canvas edges except two deliberately overlapping icons.
2. **Wordmark row** — top centre, roughly 60px from the top edge: a small logo mark plus the product name at ~28–32px, the only branding on the card.
3. **Headline block** — the focal point, optically centred in the upper half: two lines, horizontally centred, serif display type at ~90–100px with tight leading (~1.05) and no bold weight.
4. **Icon collage** — five to eight rounded-square app/integration icons scattered around the headline's lower flanks and sides, each rotated between −15° and +15°, a couple breaking the canvas edge; they add colour and energy without competing with the headline.
5. **Screenshot band** — the bottom ~28% of the canvas: a cropped mock of the destination web page, inset ~70px from the left and right, with rounded top corners (~16px). Inside it, top to bottom: a black announcement strip with uppercase monospace text and a small outlined button; a white header row (small logo left, three nav links and a dark rectangular button right); then a sliver of the hero headline, deliberately cut off by the bottom edge of the canvas.

## Design language
- **Palette**: cream `#EDEAE3` background; near-black `#1A1814` for headline text, banner strip and buttons; one warm orange accent `#E8992F` reserved for the logo mark and a single highlighted word. The icon collage may introduce saturated blue `#2563EB`, yellow `#D9E021`, red `#E03E2D` and green `#0E9F6E`, but only inside those small chips.
- **Type pairing**: one high-contrast editorial serif for the display headline; a clean geometric sans for the wordmark, nav links and button labels; a monospace face for utilitarian text (banner strip, eyebrow) set in uppercase with wide letter-spacing. Three roles, nothing more.
- **Hierarchy by scale**: the headline is the only large element — the wordmark is roughly a third of its size, the monospace banner text about a tenth. Contrast in size, not in weight or decoration, creates the reading order.
- **Depth without gradients**: the field stays flat; depth comes only from soft icon shadows (~8px blur, low opacity) and the shadow/edge of the screenshot card.
- **Corners and buttons**: icons are squircles at ~22% radius; the screenshot card has rounded top corners only; the outlined button is a sharp rectangle with a 1px border on the black strip.
- **Composition rules**: strict horizontal centring for wordmark and headline; asymmetry comes exclusively from the rotated icons. Keep ~100px side padding on the headline so text survives aggressive social-crop previews.
- **No motion**: this is a static image — no animation, no hover states.

## Never
Never use the ColdIQ name, wordmark, logo or any of its copy; never reproduce the reference headline text — write fresh copy for the user's product. Do not include real third-party app logos (Salesforce, Apollo, etc.) from the reference collage — use abstract placeholder glyphs, or the user's own integration logos only if explicitly provided. Never present the result as the reference product's card.