## 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/cal-com/7f980329-d357-4696-9372-1c7e3cb3fce5-1789060030751.webp
- Design on Kage: https://kage.design/designs/cal-og-image

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

## Task
Produce a single **1200×630 social card image** (e.g. an HTML/CSS file rendered to PNG at exactly 1200×630, or an SVG) inspired by this composition, with the user's branding and placeholder copy.

## Page structure
1. **Canvas**: flat light-grey background filling the whole 1200×630 frame.
2. **Wordmark**: brand name set bold in dark charcoal, right-aligned with ~40px top and side margins. No logo mark needed — the name alone carries the brand.
3. **Main panel**: one large white rounded card (radius ~24px), positioned left-of-centre, starting ~150px from the top, and deliberately **cropped by the bottom edge** of the canvas so it feels like a zoomed-in product shot.
4. **Headline** (inside the panel, top-left): a short product promise in a single heavy line or two tight lines, dark charcoal, occupying ~60% of the panel width.
5. **Product mockup** (below the headline): a two-pane UI snapshot with a thin light border:
   - Left pane: a wide gradient banner (soft lavender → saturated brand purple) with an angled sweep on the right end, a small avatar stack overlapping the banner's bottom-left, then the org name in small grey text, an event title in bold, a one-line description, and two meta rows with small line icons (duration, timezone) with a chevron on the last row.
   - Right pane: a month calendar — month name (year in lighter weight) with prev/next chevrons top-right, a weekday header row in small muted caps (weekend columns lighter), and a grid of day numbers where bookable days sit on soft grey rounded-square chips and adjacent-month days are muted grey.

## Design language
- **Focal hierarchy**: wordmark (top-right, quiet but bold) → headline (largest text on card) → UI mockup (proof). The mockup is the hero; the headline is the only marketing sentence allowed.
- **Colour**: ~70% neutrals — canvas #D9D9D9, panel #FFFFFF, text #292929/#374151, muted grey #9CA3AF; one saturated accent used only in the banner gradient and one deep purple moment (#4C1D95 → #6D28D9 range, or the brand's primary). Nothing else gets colour.
- **Type**: one geometric/grotesk sans family throughout. Wordmark and headline at heavy weight (~700–800); event title semi-bold; body, meta and calendar numbers regular; weekday labels small caps with letter-spacing. Clear scale jump between headline (~48–56px) and mockup text (~13–16px).
- **Shape**: rounded everything — card radius ~24px, day chips ~8px, banner ~12px; hairline #E5E7EB borders on the mockup panes; no shadows stronger than a very soft diffuse one, or none at all (flat layering).
- **Composition trick**: the cropped card bleeding off the bottom edge creates depth and implies a full product beyond the frame; keep generous grey margins on the top and right to balance it.
- **Motion**: none — it's a static image.

## Never
Never use the Cal.com name, wordmark, logo, avatars, screenshot content or its exact headline copy. Do not present the result as Cal.com. Use the user's brand name and placeholder copy throughout.