## 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/granola-ai/d4db2a95-b2c2-49b3-9ad8-c1367dbeb578-1789060742531.webp
- Design on Kage: https://kage.design/designs/granola-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, colours, typefaces, logo or other visual assets). Wait for their answers before proceeding. Apply the design direction below to their product, using placeholder branding and copy until they provide real assets.

## Page structure
- Create a single 1200×630 social card image intended for link previews on X, Slack, LinkedIn and iMessage; keep all important content inside a safe central margin.
- Use a full-bleed tactile collage background, with contrasting cropped visual fields on the left and right rather than a flat solid backdrop.
- Place a large warm-white rounded rectangular browser/window panel across most of the canvas, slightly inset from the edges, so it becomes the primary reading surface.
- Add three small coloured window-control dots near the panel’s upper-left corner as a subtle browser reference.
- Put a compact placeholder wordmark or brand lockup near the upper-left inside the panel, combining a simple abstract symbol with a bold sans-serif name.
- Below it, set the placeholder headline in a very large serif face across several short lines, occupying most of the panel and carrying the main focal weight.
- Add one small, dark rounded utility badge near the lower-right of the panel, with a minimal placeholder symbol or accent mark.
- Render the result to PNG, using HTML/CSS with a screenshot step or an SVG-to-PNG workflow; do not build a functional webpage.

## Design language
- Treat the card as an editorial cover composed inside a software-window frame: a tactile outer collage contrasts with a calm, highly legible inner surface.
- Build hierarchy with scale and placement: a small wordmark first, an oversized headline second, and only tiny interface details last. Keep the headline dominant even at thumbnail size.
- Use a warm ivory panel around #F7F7F2, near-black typography around #171717, a lime/chartreuse background accent around #B7D64A, and saturated textile accents around #E77C85, #4B668F and #D99A8E.
- Pair a heavy geometric or rounded sans-serif for the placeholder wordmark with a high-contrast editorial serif for the headline. Use generous line-height control, tight but readable tracking, and four or fewer lines with a ragged or naturally varied line break.
- Make the outer background feel printed and physical: use abstract crop marks, paper-like shapes, halftone texture, woven grain or roughened colour edges. Keep these elements decorative and subordinate to the inner panel.
- Use a large soft corner radius on the panel, approximately 24–30px at 1200×630, with little or no drop shadow; the contrast between the collage and ivory surface should define the edge.
- Keep the composition asymmetrical but balanced: the left lime field should feel graphic and diagrammatic while the right field should feel dense and textile-like, allowing the panel to unify both sides.
- Include only restrained UI cues—small window dots and one compact dark badge. Avoid extra cards, buttons, navigation, icons or dense interface chrome.
- Preserve strong contrast and legibility after downscaling. If adding motion during authoring, limit it to subtle texture or parallax previews; the exported PNG itself must be static.

## Never
- Do not copy the reference product’s logo, spiral mark, wordmark, product name, tagline, headline, exact copy, or proprietary iconography.
- Do not use the reference brand’s exact assets or present the result as Granola or as that product.
- Do not add photography, stock imagery, extra illustrations, or an icon set; use abstract placeholder collage textures and shapes instead.
- Do not turn this into a landing page or functional browser mockup: deliver one polished 1200×630 social card image with placeholder branding and copy.