plane.so
Design analysis
A 1200×630 social card built on a full-bleed, motion-blurred landscape of dark forest greens and golden ochres, diagonal streaks sweeping from lower-left to upper-right. All content sits on a single left-weighted baseline band at roughly 55% height: a white geometric logo mark plus wordmark at left, and a two-line tagline right of center where "Work infrastructure for" is set in a light weight and "humans and agents" bolds the two key nouns. The pure-white type pops against the mid-tone organic background, and the near-symmetrical logo/tagline pair gives the card a calm, editorial feel with no UI, gradients or decoration.
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/plane-agents/8d955219-e717-4163-90a1-08a67218ee47-1790143302440.webp - Design on Kage: https://kage.design/designs/plane-agents-og-image ## Before you start Ask the user what product the card is for, who it is for, and what brand assets they have (logo/wordmark, brand colours, typeface). Wait for the answers; everything below applies to their brand, not the reference. ## Goal Produce a single **1200×630 Open Graph social card** image — as HTML/CSS (e.g. a fixed 1200×630 container rendered to PNG with a headless browser, Playwright screenshot, or an SVG exported to PNG). Placeholders for all branding and copy are fine. ## Page structure 1. **Full-bleed background (1200×630)**: an abstract, organic texture — a heavily motion-blurred landscape-like image or a canvas/CSS gradient composition with diagonal soft streaks (warm olive/ochre tones in the reference) flowing from lower-left to upper-right. It should read as calm texture, not a photo of anything recognisable. 2. **Content band** (a single horizontal row, vertically centred around ~50–55% height, left-aligned starting ~17% from the left): - Left: white logo mark (simple geometric shape) + wordmark in white, ~44px, medium weight. - Right of center: the tagline in two lines, white, ~52–56px, line-height ~1.2 — first line light/regular weight, second line bolding only the two key nouns (e.g. "Work infrastructure for" / "**humans** and **agents**" pattern: lead word and key noun bold, connectors regular). 3. **No footer, no URL, no UI elements, no badges.** ## Design language - Exactly two content elements on one shared baseline; generous clear space on all edges (≥80px padding). - Type: a clean geometric sans (e.g. Inter/Manrope-style). Hierarchy from weight contrast (400 vs 700), not size or colour — both lines the same size. - Colour: pure white (#FFFFFF) type over mid-tone, low-contrast organic background so text stays legible without overlays; background palette warm earth/olive tones (#2f3a28 dark greens, #b98a3f–#d9b56a ochres in the reference). - Background motion blur: diagonal direction ~15–20° upward to the right; keep the central text band relatively smooth so glyphs stay crisp. - Slight horizontal gap (~90px) between logo lockup and tagline; keep the whole lockup optically centered-left, not dead-center. ## Never No logos, wordmarks, product names, copy, illustrations, photography or icon sets from the reference; never present the result as that product. Use placeholder branding and copy only.
kage