Partiful

Build the "Partiful" kickstart — Confetti landing on white marble: a quiet black-and-white page, pink gradient washes and a scattered stack of tilted invitation cards.

## Design
Build a rebrandable party-invitation app landing page.

Create a complete landing page for Hullabaloo, a fictional app for sending party invitations and collecting RSVPs by text. Its core idea: confetti landing on white marble — the page itself stays quiet, white and black, while the invitation cards it shows explode with colour and celebration. This is a concept presentation, not a real product — no sign-up, accounts, prices, app-store badges, download counts, ratings, customer logos, testimonials or real people. Use original branding, artwork and copy throughout.

Color: Pure Canvas #FFFFFF is the page and every card. Midnight Ink #000000 is every heading, the logo, icons and the ONLY action colour: filled black buttons with white text, 1px black outlined buttons. There is no brand-coloured button — never purple, pink or blue. Graphite #333333 is secondary text and footer links; Slate #666666 is descriptive paragraphs and helper text; Ash #767676 is captions (darkened from the source's #999999 so small captions pass AA on white); Silver #CCCCCC is every hairline border. Warm Sand #D9C58B marks only the active item in the dark announcement nav, never anything else. Colour lives in surfaces and artwork only: Party Pink linear-gradient(#F8C4FF, #F0B6E0) washes the hero and the announcement strip; Sky Periwinkle linear-gradient(rgba(150, 196, 255, 0.1), #FFFFFF) washes alternating feature sections; Spearmint linear-gradient(130deg, #85DADC, #C0E2E2) and Midnight Blue #001666 appear inside invitation artwork. RSVP states use Leaf #31C431 for Going, Amber #FFAE00 for Maybe and Ember #E5484D for Can't go — only on RSVP pills and dots, never decoration.

Typography: display headlines in "Cabinet Grotesk", Satoshi, "Avenir Next", ui-sans-serif, system-ui, sans-serif at weight 500 with -0.02em tracking — 88px/0.95 for the hero, 48px/1 for section displays, 40px on the sample event card title — and never below 26px. Everything else in "Neue Haas Grotesk Text", Inter, "Helvetica Neue", Arial, sans-serif: 18px/1.4 weight 400 paragraphs at -0.02em, 14px weight 700 buttons at -0.04em, 24–36px weight 700 section headings at -0.04em, 12px weight 700 pill labels, and one oversized 112px weight 800 numeral at -0.03em and line-height 0.8. All faces installed locally, no remote font request. Shapes: 8px on buttons and inputs, 12px on cards and invitation tiles, 16px on the floating notification, 960px (full pill) on RSVP pills, badges and tab selectors, 4px on nav pills. Page content max-width 1200px, 80px between sections, 10px element gap. Elevation only on cards and floating widgets: rgba(0, 0, 0, 0.1) 0px 0px 6px 0px for standard cards, rgba(0, 0, 0, 0.1) 0px 0px 20px 0px for floating widgets, and a four-layer 0.05-alpha stack up to 0px 20px 60px -2.5px for the sample event card. No shadow on any full-bleed section.

Announcement strip: full width, 36px tall, the Party Pink gradient, centred 14px weight 550 black text Sample page · Hullabaloo is a design study, not an app with a small inline-SVG confetti mark at each end.

Top navigation: white, 72px tall, a 1px Silver bottom hairline, inside the 1200px column. Left: an original inline-SVG mark (a black party-popper burst of five short rays) beside Hullabaloo in the display face at 26px. Centre: Invites, RSVPs, Occasions, Fine print as 16px weight 550 black links. Right: an outlined 4px-radius Log in (sample) button with a 1px black border and a filled black 8px-radius Make an invite button. Every link is an anchor to a real section.

Pink hero with tilted invitation tiles: full-bleed Party Pink gradient, 640px tall, two columns inside 1200px. Left 50%: a 12px weight 700 black pill badge on rgba(0, 0, 0, 0.05) reading SAMPLE · FOR EVERY OCCASION, the h1 Parties start with a good invite. at 88px, an 18px Graphite paragraph (max 460px, left-aligned) Hullabaloo turns a date, a place and a vibe into an invitation people actually open — and keeps the guest list tidy by text., and two buttons: filled black Make an invite and outlined black See a sample invite. Right 50%: a scattered stack of five original portrait (3:4) invitation tiles, 12px radius, standard card shadow, rotated between -14deg and +12deg and overlapping — each full-bleed original artwork with its own display type: a Midnight Blue #001666 tile with a white serif Moon Party and scattered stars; a Spearmint gradient tile with a black Pool Day and a sun disc; a hot tomato #FF5A36 tile with a cream Taco Tuesday and a rounded taco glyph; a butter #FFE9A8 tile with a black Book Club and a stacked-books shape; a lilac #D9C2FF tile with a black 30 and confetti. A white floating notification card (240px, 16px radius, floating-widget shadow) overlaps the stack's lower left: a 32px black 8px-radius app square with the burst mark, a 12px weight 600 line Sam said Going to Moon Party, an 11px Slate line (sample) 2 min ago, and a black 40px-radius View button.

Sample event card section (id invites, Sky Periwinkle wash): two columns — left: a 48px display heading Your invite, your rules., an 18px Slate paragraph, a pill tab selector (rgba(0, 0, 0, 0.05) 960px container, active tab white with the standard card shadow) with Backgrounds, Fonts, Effects, Posters that swaps a one-line caption from local state and sends nothing. Right: the sample event card (white, 12px, the four-layer shadow, 480px wide): a Midnight Blue artwork header with the Moon Party title in the display face at 40px, Sat · 8:00 PM · Rooftop (sample) at 18px Graphite, a row of five overlapping 32px initial avatars with a +12 overflow pill, and three 56px round RSVP buttons (white, standard shadow) with an inline-SVG glyph each and a 12px Graphite label below: Going, Maybe, Can't go.

RSVP tally section (id rsvps, white): left, the oversized 112px weight 800 numeral 42 with a 14px Slate caption sample guests replied; right, a 36px weight 700 heading Everyone answers by text., an 18px Slate paragraph, and three RSVP pills — a Leaf #31C431 Going 28 pill, an Amber #FFAE00 Maybe 9 pill and an Ember #E5484D Can't go 5 pill, each 960px radius, 6px 12px padding, 12px weight 700 black text (white on Ember) — every figure labelled sample.

Occasions gallery (id occasions, Sky Periwinkle wash): a centred 48px display heading For every occasion. and a single row of eight 3:4 invitation tiles (Birthday, Dinner party, Game night, Housewarming, Karaoke, Picnic, Baby shower, Watch party), each an original flat-colour artwork with its own display word and no overlaid label, gently rotated between -4deg and +4deg; on narrow screens the row scrolls horizontally inside its own container, never the page.

Fine print with native questions (id fine-print, white): a 36px weight 700 heading Fine print, a 2–3 sentence Slate line, then details elements on 1px Silver rules with 18px weight 700 black summaries and a thin + that turns to − when open: Is Hullabaloo real? — no, it is a fictional app for this page. Are these guests real? — no; every name and count is a sample. Can I send an invite? — no; nothing is sent or stored. Below, a filled black Back to the top and an outlined See a sample invite.

Footer: white with a 1px Silver top rule, 80px vertical padding, the burst mark and Hullabaloo, a four-column grid — Invites, RSVPs, Occasions, Studio — with 12px uppercase weight 700 Ash titles and 14px Graphite links, each an anchor to a real section, then a 12px Ash line Hullabaloo is a fictional concept. Not a real product or service.

At 760px and below: 16px gutters, the navigation keeps only the mark and the filled button, a 48px hero h1, the tile stack shrinks below the text with smaller rotations, two-column sections stack, the RSVP numeral drops to 72px, the occasions row scrolls in its own container, and the footer goes to two columns. The page fits a 360px viewport with no horizontal page overflow. Use semantic landmarks, one h1, a skip link, visible 2px black focus rings offset 2px on every control, a text alternative for every invitation tile, the notification and the mark, and keyboard-operable tabs and disclosures.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
- Native HTML disclosures

Use Next.js App Router, React and TypeScript with plain CSS custom properties and original inline SVG or CSS for the burst mark, every invitation tile, the avatars and the RSVP glyphs. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the invite tab selector, which keeps local React state and sends nothing. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, photo, logo, icon, video or analytics host. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Hullabaloo clearly fictional and rebrandable: no source wordmark, photography or invitation artwork, no app-store badges, customer or partner logos, real company or person names, prices, ratings, download counts, testimonials or endorsements. Every guest, reply count and event is labelled sample. Black is the only action colour; the pink, periwinkle and spearmint gradients are surfaces and artwork only, never buttons, inputs or badges; Warm Sand marks only the active announcement item; Leaf, Amber and Ember mark only RSVP states. Shadows sit on cards and floating widgets, never on full-bleed sections. Body copy stays left-aligned even in centred sections. Every link leads to a real section on the page; nothing is sent or stored. Deliver initially visible content with no scroll reveals, confetti bursts, marquees, autoplay video or carousel; hover and focus are a 150ms colour, shadow or 2deg rotation change on tiles, all disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair, keyboard-operable tabs and disclosures, and a 360px layout without horizontal page overflow.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.