## 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/notion-com/02aeb14e-44a9-4aaf-ac1c-81085a2bef49-1789060009409.webp
- Design on Kage: https://kage.design/designs/notion-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (brand name, logo or wordmark, colours, and typefaces). Wait for their answers before designing. Apply the guidance below to their product, using placeholder branding and copy until those answers are provided.

## Page structure
- **1200×630 canvas:** Create a fixed Open Graph social card with a warm-white or pure-white background and generous outer margins.
- **Top brand anchor:** Place a small placeholder logo mark and wordmark centered near the top, with restrained black styling.
- **Primary headline:** Set a large, bold, centered two-line headline in the upper-middle of the card; use placeholder copy that communicates the product’s core idea rather than copying any reference wording.
- **Highlighted phrase:** Enclose one short phrase within a soft-blue rounded pill, optionally preceded by a simple blue dot, so the headline has one clear visual accent.
- **Illustrated people row:** Add a horizontal row of overlapping circular placeholder portraits or abstract character illustrations beneath the headline. Use varied thin outline colours and simple, friendly linework.
- **Product interface crop:** Anchor a cropped, mostly white product UI mockup along the bottom edge, with a subtle browser/app frame, light gray navigation, and a clear central content area. Let it extend beyond the canvas so the card feels like a slice of a larger product.

## Design language
- Build hierarchy with scale and alignment: a small brand marker, an exceptionally large headline, then a medium-detail illustration row and a low-contrast interface crop.
- Keep the composition centered and spacious in the upper half, then increase visual density toward the bottom with overlapping avatars and UI chrome.
- Use a mostly monochrome palette: white or #FFFFFF background, near-black #111111 type, pale blue #D8ECFF for the headline pill, vivid blue #2787D9, and small accents of red #EF5148, yellow #F2B928, and muted gray #E9E9E7.
- Pair a clean geometric or humanist sans-serif with heavy headline weight; use tight headline tracking and comfortable line height so the two-line block reads instantly at thumbnail size.
- Keep the wordmark small and secondary. Do not let the logo compete with the headline.
- Use thin black or coloured strokes around avatar circles, simple flat fills, and minimal facial or symbolic details. Avoid gradients, photographic realism, and excessive texture.
- Treat the UI crop as supporting evidence, not the focal point: use low-contrast gray controls and a few darker labels, with no tiny text that must be legible.
- Use rounded pills and circular artwork, but keep the overall card crisp and editorial. Avoid heavy shadows; if needed, use only a very soft gray shadow such as 0 4px 18px rgba(0,0,0,.08).
- Render the result as a 1200×630 image, using HTML/CSS captured to PNG or an SVG exported to PNG. Check that the logo, headline, accent pill, avatar row, and UI crop remain balanced when reduced to social-preview size.
- Keep the card static and deterministic; motion and hover interactions are unnecessary for an exported social image.

## Never
- Do not use the reference product’s logo, wordmark, product name, headline, copy, illustrations, avatar designs, UI screenshots, or icon set.
- Do not reproduce the reference brand identity. Use placeholder branding, original artwork, and copy tailored to the user’s product.
- Never present the result as Notion or imply affiliation with it.