## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/partiful-com/97ae038c-0277-4e29-93fa-45b4a481f7ba-1789146205210-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/partiful-com/97ae038c-0277-4e29-93fa-45b4a481f7ba-1789146199112.webp
- Design on Kage: https://kage.design/designs/partiful-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, logo, colours, typefaces, product screenshots, photography). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product — not a template to fill with someone else's content.

## Page structure
Reproduce this section order and rhythm on the user's product:

1. **Announcement ticker** — slim full-width gradient bar at the very top with a marquee repeating a new-feature announcement; dismissible, always above the nav.
2. **Floating pill navigation** — white rounded bar: wordmark left, 5–6 category links centre (the active/seasonal one tinted in an accent colour), and two pills right: a solid dark "Login" and a white outlined "Create".
3. **Hero** — full-bleed gradient panel (deep purple into blue, with a pink bloom) occupying the viewport; left column holds a small rating pill (stars + count), a giant two-line display headline in white, one line of subcopy, and a white pill CTA; the right half is warm candid photography of real people, with one floating product mockup (an RSVP card) overlapping the photo edge.
4. **Product demo statement** — centred heading + one-line subcopy on the pastel canvas, a row of 4 segmented tab pills (e.g. Backgrounds / Fonts / Animations / Posters), then one large app-UI screenshot card showing a real invite: title, date, host, guest-list avatars, and reaction chips (Going / Maybe / Can't go).
5. **Press-quote marquee** — a single low-contrast row of three publication wordmarks, each with a one-line quote, edge-faded as if scrolling.
6. **Trending templates** — left-aligned heading + subcopy, then a row of three wide template cards: outer two dimmed/blurred, centre card sharp and saturated, implying a carousel.
7. **Occasion collage split** — left: heading ending in an emoji, one-liner, black pill CTA; right: a diagonal scatter of 8–10 rotated invite cards bleeding off the right edge, layered like dropped photos.
8. **Manifesto break** — one large centred statement heading ("We're not like other invites" energy) with generous whitespace above and below; no imagery.
9. **Alternating feature rows ×3** — each row pairs text (small bold heading with a "New!" chip where relevant, 1–2 lines of copy, pill CTA) with 1–2 floating product mockups rotated ±3–7°: ticketing with QR-code ticket cards; a guest-comment/chat UI; a text-blast iMessage mockup. Text and visual sides swap each row.
10. **Feature card grid** — centred heading, then three equal white cards: illustrated image top, bold title, one line of copy, and a "Try it ↗" text-button; equal heights, roomy padding.
11. **Platform split** — pastel illustration card left (soft hand-drawn style: envelope, hearts, doodles), heading + copy + CTA right.
12. **Album split** — copy left, right a photo grid with floating count badges (+20, 🔥13) and a playful cursor-annotation chip like "Add your photos to the album".
13. **Reviews** — left column: heading, aggregate rating pill (★ 5.0 · count), one line of copy, CTA; right: two staggered columns of short app-store-style review cards (stars, bold title, name/date, 2–4 lines).
14. **Full-bleed photo collage band** — edge-to-edge grid of candid photography, no text; a hard rhythm break before the close.
15. **Final CTA** — a playful graphic wordmark (balloon/lettering style), centred heading, one platform line, and Google Play + App Store badges.
16. **Blog teaser** — small centred eyebrow line with emoji, three article cards (image, title, dek, author avatar + name), and a centred "Read more" pill.
17. **Footer** — logo left, five link columns (Download, Company, Product, Socials, Support), generous top whitespace, near-white background.

## Design language
- **Canvas:** one continuous background that never snaps to flat white; it drifts through pastels as you scroll — hero deep purple→blue (#5a4fd8 → #8a63f2) with a pink bloom (#e77fd9), then lavender #ece6fb → blush #fbe7f2 → mint #e2f6ec → peach #fdecdf, ending near-white #faf9fc. Full-bleed photo bands act as hard hue resets.
- **Hierarchy:** headlines do the selling. Display type is enormous (clamp ~64–120px, tight line-height ~0.95–1.05) in a chunky rounded sans; section headings 44–56px; body 18–20px in muted grey. Ink is near-black indigo (#191933) on light, pure white only on the gradient/photo hero. Headings may end in a single emoji as punctuation — never more than one.
- **Rhythm:** alternate airy centred statements (huge whitespace, no imagery) with dense alternating split rows; after every 2–3 content sections insert a low-effort palate cleanser (press marquee or photo band) so density rises and falls down the page.
- **Buttons and chips:** fully-rounded pills everywhere. Primary = solid near-black (#141420) with white text; on dark hero use a white pill with dark text; tertiary actions are text links with ↗ arrows. Small status chips ("New!") in red/orange.
- **Cards and mockups:** 20–28px radius, white surfaces, soft wide shadows, hairline borders; product screenshots float at ±2–7° rotations and overlap each other like scattered photos, with occasional cursor-annotation chips for playful microcopy.
- **Photography:** warm, candid, flash-lit shots of real people — never stock-corporate — used emotionally at the hero and as full-bleed bands, not inside feature rows.
- **Motion:** announcement bar marquees; cards and pills lift/scale slightly on hover; carousel rows show dimmed/blurred off-centre cards to invite scrolling.

## Never
Do not reuse Partiful's name, wordmark, logo, headline copy, invite artwork, party photography, balloon-letter graphic, blog articles, or review text. Never present the output as Partiful or reference it. Build the same energy for the user's own product with their own assets.