kage
ancher.ai
Design analysis
A wordmark-free launch card: a single white squircle app icon carrying the black petal glyph floats dead-centre over a full-bleed, motion-blurred macro photograph of petals in peach, coral red and cream, sliced by one olive-green diagonal. Hierarchy is achieved purely through contrast — the crisp, cool, flat icon against the warmest, softest field on the canvas — so the mark still reads at Slack-thumbnail size. No headline or URL appears; the 1200×630 crop keeps roughly even breathing room around the icon on all four sides.
Prompt preview
## 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/ancher-2-0/45541426-81ad-4b75-84e3-0ade0d22eab0-1791871351159.webp - Design on Kage: https://kage.design/designs/ancher-2-0-og-image ## Before you start Ask the user what they are building, who it is for, and what brand assets they already have: product name, logo or app icon, brand colours, typeface, and whether they own any photography. Also ask whether they want an icon-only launch card (like this composition) or one with a short tagline. Wait for the answers before writing any code — everything below is applied to *their* product, not the reference. ## Page structure Produce a single **1200×630** social card (og:image ratio) as HTML/CSS rendered to PNG (e.g. a fixed-size body captured with Playwright/Puppeteer) or as a standalone SVG. Build it in three layers: 1. **Full-bleed background (entire canvas):** a soft, motion-blurred warm field — abstract petal-like streaks sweeping diagonally from lower-left to upper-right. No hard shapes, no borders, no vignette card-in-card. 2. **Focal lockup (optical centre):** one white squircle app icon, ~250px on the 630px-tall canvas (≈40% of the height), dead centre both axes. The product glyph sits inside in near-black. 3. **Optional micro-copy:** the reference card carries no text at all. If the user wants copy, allow at most one short line — a small wordmark or a ≤6-word tagline — set small below the icon or pinned to a corner with generous margins. Never both. ## Design language - **One focal element only.** Hierarchy comes from contrast, not layout: the icon is the coolest, flattest, sharpest thing on the canvas; the background is the warmest, softest. Everything else stays quiet. - **Background treatment:** simulate the photographic blur with layered CSS radial-gradients on oversized divs passed through `filter: blur(60–80px)`, or SVG shapes with `feGaussianBlur`. Palette: peach `#EFA05C`, coral red `#E24A1E`, cream `#F4E4C6`, pale yellow `#F0D9A0`, plus **one** olive-green diagonal streak `#6C7A35` cutting through the middle as the only cool note. If the user has real photography, use it blurred instead — but never a sharp photo. - **Icon geometry:** squircle with a continuous corner radius of ~24% of the icon size, pure `#FFFFFF` fill, one soft ambient shadow (`0 12px 40px rgba(20,10,0,0.25)`) and nothing else. Glyph in near-black `#171310`, inset with ~26–30% padding, drawn from thick organic curved strokes — never thin-line, never geometric-corporate. - **Type (only if the user wants copy):** a single neutral grotesk, one size step only; a small letter-spaced caps label or a compact tagline in white or near-black. Keep text off the green streak and away from the icon's shadow. - **Flat export:** no gradients, glass or inner glow on the icon itself; the render must read at 200px wide in a Slack preview, so keep edges crisp and the glyph bold. ## Never - Never reproduce the reference's petal/flower glyph, the Ancher name, its tagline, or the exact petal-photo composition — use the user's own mark and either their photography or an abstract gradient blur. - Never add stock floral illustrations or photography chosen to mimic the reference subject. - Never present the result as Ancher or imply any connection to it.
