framerusercontent.com
Design analysis
A 1200×630 social card built around a fanned cluster of three tilted invitation cards floating over a dark aubergine gradient. Each card follows the same anatomy — big date headline at the top, a photo or motif panel in the middle, event title in large type at the bottom — while their distinct palettes (icy blue, pixel-sprinkled indigo, peach-to-pink gradient) create variety within repetition. Glossy translucent bubbles, soft bokeh circles and two magenta glow orbs add depth around the edges, keeping the dark background atmospheric without competing with the cards.
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/partiful-com/cb133596-3834-4ccf-b102-7785581e98fa-1789146203980.webp - Design on Kage: https://kage.design/designs/partiful-og-image ## Before you start Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, typeface). Wait for the answers before designing. Everything below is applied to their product — placeholder branding and copy throughout, never the reference brand. ## Page structure Produce a single **1200×630 social card image** (HTML/CSS sized exactly 1200×630 and rendered to PNG, or an equivalent SVG). Composition, top to bottom: - **Background layer**: full-bleed dark aubergine gradient (near-black purple, ~#160a1a to ~#2b1038) with a radial vignette so corners fall darker; a few very faint distant bokeh circles for depth. - **Ambient orbs**: 2–3 large glowing magenta/pink orbs (~#ff4fd8) with heavy blur, one at the right edge mid-height and one lower-left, plus 6–10 translucent glossy bubbles of varied size with white rim highlights and tiny specular dots, scattered around the cluster. - **Focal cluster (center ~60% of canvas)**: three invitation-style cards, each rotated and slightly perspective-tilted (roughly −8°, +4°, +10°), fanned so they overlap — one back/top, one left, one front/right. Soft, wide, low-opacity drop shadows beneath each card lift them off the background. - **Card anatomy (identical on all three)**: full-width date headline across the top (e.g. "Friday · Jun 14"), a central photo or motif panel, and the event title in large type at the bottom. Card backgrounds differ: one light icy blue, one deep indigo decorated with a sparse pixel-art motif sprinkle, one warm peach-to-pink gradient with a subtle lightning/energy accent. - **Overlap handling**: the front cards partially cover the back card's photo and lower text, but every card's date headline and title stay legible. Keep all text inside a safe area (~60px from canvas edges). ## Design language - **Focal hierarchy**: one centered cluster is the hero; background stays dark and quiet so the saturated cards carry all the colour and contrast. - **Colour system**: background ~#1a0c20 purple-black; glow accents ~#e879f9 / #ff4fd8 magenta; card palettes in opposition — icy blue ~#cfe9f2 with dark ~#1f2430 text, indigo ~#3b2a8f with white text, peach ~#f5c0a0 fading to ~#f2a9c9 with dark text. Light cards on dark ground do all the pop; no outlines needed. - **Type**: geometric grotesque sans, medium weight, slightly tight tracking, sentence case. Date headlines ~60–72px on a card, event titles ~56–64px, both near the top and bottom edges of the card so the photo panel sits framed between them. - **Texture and motifs**: photos get a warm/retro filter treatment; the dark card uses small scattered pixel-art glyphs as a repeating texture; translucent bubbles may overlap photo edges for a layered, sticker-like feel. - **Depth treatment**: layered stacking (back → mid → front) plus soft blurred shadows and glossy bubble highlights create 3D depth without gradients on text — text stays flat and solid. - **Motion**: none — this is a static share image; ensure legibility at thumbnail size, so no thin weights and nothing critical in extreme corners (crop risk on some platforms). ## Never No wordmarks, logos, product names, copy, photos, or icon/motif sets from the reference; do not reuse the specific event names or the pixel-art sprite designs verbatim. Use the user's placeholder brand, generic event copy, and imagery they have rights to. Never present the result as the reference product.
kage