kage
fplxi.com
Design analysis
A 1200×630 social card that splits the canvas into a text column on the left and a floating product mockup collage on the right. The left column stacks the mascot wordmark, a very large two-line headline in near-black, a gray subhead, and three small icon+label feature chips. The right side layers two tilted app screenshots — a hero panel with a mini leaderboard and a player projection card plus a pitch-style "best XI" panel — over soft lavender-to-blue gradient blobs with a faded mascot peeking from the bottom. The palette is almost entirely white, near-black and pastel purple/violet, letting the blue accent bars inside the screenshots be the only saturated hit.
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/fplxi-com/17890ee4-e346-4612-bc06-4941f3161360-1789073005928.webp - Design on Kage: https://kage.design/designs/fplxi-og-image # 1200×630 Open Graph social card ## Before you start Ask the user what product they are building, who it is for, and what brand assets they have (name, logo/mascot, colours, typeface). Wait for the answers; everything below is applied to their brand, not the reference. ## Goal Produce a single 1200×630 social card image (HTML/CSS rendered to PNG, or SVG) showing their product name, headline, subhead and a product-preview mockup collage. ## Page structure - **Canvas**: 1200×630, white base with soft lavender→blue gradient blobs bleeding in from the right and bottom edges (approx #EDE9FE, #C7B8F5, #A5B4FC), subtle sparkle shapes. - **Left column (~55% width, vertically centred)**: 1. Brand lockup: small mascot/icon mark + bold wordmark, with the second half of the name tinted in the brand gradient (violet→blue, #8B5CF6→#3B82F6). 2. Headline: two short lines, ~72–80px extra-bold, near-black (#111), tight leading, sentence case with a period for confidence. 3. Subhead: one or two lines, ~26px, gray (#6B7280), regular weight. 4. Feature row: three items side by side, each a small rounded-square icon tile (~40px, pale tinted background, brand-purple glyph) above a two-word label in dark text. - **Right side**: a collage of 2–3 floating app UI mockups, white cards with large radius (~16–20px) and soft shadows, slightly rotated/overlapping. Include a hero card with a headline, small paragraph, pill button and a compact ranked leaderboard (numbered rows, name + position tag, metric right-aligned), a player card with big blue stat numbers and a mini bar chart of blue columns, and a "best XI" panel with a pale green pitch and small white stat chips. Keep all mockup text tiny, legible-in-shape but not fully readable. ## Design language - Hierarchy is strictly top-down: brand → huge headline → muted subhead → small feature chips; mockups stay subordinate to the headline. - Palette: white canvas, near-black type (#111), neutral gray subhead, pastel purple/blue gradient for accent and mascot tints; saturated blue (#4F46E5-ish) reserved for chart bars and key stats. - Type: one geometric grotesque family; weight contrast (900 headline vs 400 subhead) does the hierarchy work — no thin/light weights. - Softness everywhere: rounded corners on every card and icon tile, blurred gradient blobs instead of hard shapes, drop shadows low-opacity and wide. - No borders; depth comes from shadow and layering. ## Never No real player names, club abbreviations, mascot artwork, wordmark or copy from the reference. Use placeholder brand and fictional stats. Never present the card as the reference product.
