Slush

Build the "Slush" kickstart — A colorful creative-club page with oversized type, playful stickers and sessions to explore.

## Design
Build a playful landing page for Mingle, a fictional creative club. Treat it as a sequence of large printed posters: broad flat color bands, oversized black typography, an original electric-blue looping ribbon and scattered colorful stickers. Use #DCEEFF for the hero, #FFFFFF for the sessions and questions, #CCCCCC for the story band, #E9E9E9 for quiet control fills, #000000 for text and 1px outlines, and #414141 for secondary copy. Share six decorative colors across the page: #4DA2FF blue, #55DB9C mint, #E9CCFF lavender, #FB4903 orange, #FFD731 yellow and #5C4ADE violet. Keep these colors in artwork and card fills; primary actions are black with white text, secondary actions are white with black text. Small text on colored cards is black, except white on violet. Yellow is reserved for unlettered decorative shapes. No gradients, box shadows, photos, source logos or remote images.

Use self-hosted, open-license Bowlby One at its native 400 weight as the heavy display substitute, with Impact and sans-serif fallbacks. Its deliberately chunky shape replaces a licensed 800-weight display face; do not synthesize another weight. Set the main club name at clamp(70px, 16vw, 240px), 0.80 line-height and normal tracking. Set other poster headlines at 80–110px/0.80 when space allows. Inter, system-ui, Arial, sans-serif serves body and controls: 16px/1.5 body, 24–30px/1.2 supporting hero copy, 48–64px/1 section titles and bold 12–14px navigation with 0.032em tracking. Body tracking is -0.01em. Use a 4px spacing unit, 24px card padding, 48px section gaps, a 1440px maximum content width and 48px desktop gutters. All buttons and navigation links have black 1px outlines and fully rounded 1600px ends; cards use 20–40px radii. No sharp-cornered control or small-radius card.

At 1440×900, begin with a 28px black announcement strip reading A little curiosity goes a long way, with small decorative stars between repeats. Keep the first message accessible and repeated copies aria-hidden. Leave the strip static in the initial view. The sky-blue navigation is 88px tall: an original circular M badge and Mingle wordmark at left, Sessions, Our story and Questions in white pills at center, View sessions in black at right. It scrolls with the page.

The sky-blue hero fills the next roughly 580px. Center a small uppercase line A CLUB FOR THE CREATIVELY CURIOUS, followed by the single enormous h1 MINGLE. Behind the right half, place an original looping blue tubular ribbon, keeping the black letters readable. Make the ribbon with layered flat SVG strokes, not gradients or a borrowed render; this is an explicit vector adaptation of an inflated sculptural motif. Around the headline, scatter an orange star, a mint smiley circle, a violet lightning sticker, a tiny yellow sparkle and a rotated lavender lozenge reading MAKE / MEET / REPEAT. Keep every sticker within the viewport and use black outlines; do not align them into an illustration grid. Decorative SVGs are aria-hidden. Center the two-line supporting copy Good people. Odd ideas. / A little room to make something. beneath the name, then a black Find your next session link. A small left-side note says No skills required. Just a little curiosity. Stickers and ribbon stay static.

Start the white sessions band around y=700 so the next section is visible in the initial desktop frame. Pair a small ON THE TABLE label with a 48px heading A small plan. A good time. and an outlined Meet the club link. Below it, show three equal native disclosure cards with 20px corners, 24px padding and lavender, mint and blue fills. Each collapsed summary shows a number, an original simple SVG mark, session title, duration and an explicit View details label. Use Paper playground / 90 minutes / collage and folded-paper experiments; Shape & share / 60 minutes / drawing everyday objects; Tiny print club / 2 hours / hand-cut stamps and small printed patterns. Expanded content includes the materials, what happens and a real Ask about this session mailto link. Do not claim live dates, ticket inventory or completed bookings.

Follow with a full-width gray story band under #story. Use an oversized MAKE ROOM. heading beside a sticker cluster and the 30px subheading For an idea. For a friend. For yourself. Explain in two short paragraphs that Mingle makes space for low-pressure creative practice and conversation, with beginners welcome. Keep the text readable and separate from decoration. Finish on white with three native FAQ disclosures under #questions and a compact footer with the fictional-club notice and a contact link.

At widths below 900px, reduce gutters to 24px, wrap navigation, reduce the main name with the fluid size rule and stack session cards and story columns. At 600px and below, use 20px gutters, 32px section titles, 20px hero copy and display headings sized to fit; move the side note into normal flow. Give the hero flexible height and reserve space for the name instead of clipping letters. Support 320px without horizontal scrolling, and 200% zoom with no obscured text or controls. Decorative art scales down and never covers links or meaningful copy. All targets are at least 44px, with visible focus, semantic landmarks, a skip link, one h1 and native keyboard-operable disclosures. Content is visible without JavaScript. Use only 150ms color transitions, disabled by prefers-reduced-motion; no entrance effects, floating animations or parallax.

Font stack: Bowlby One, Impact, sans-serif.

Page structure, in order:
1. Announcement strip and pill navigation
2. Oversized club-name hero with blue ribbon and original stickers
3. Three expandable creative-session cards
4. Gray club-story band with a sticker cluster
5. Native questions and fictional-club footer

## Tech stack
Use Next.js App Router, React, TypeScript and plain CSS custom properties, preserving equivalent tools already installed in the destination repository. Server-render the entire page; use native details/summary for session descriptions and FAQ so no client component is needed. Keep session content in a typed local array. Draw the original ribbon and stickers as inline SVG with flat fills and strokes. Host Bowlby One and Inter locally with their open licenses, or use the documented system fallbacks; no runtime font or image host requests. No database, account system, payment service, booking integration, analytics or paid dependency. Use fragment links for sections and next/link for any internal routes. Document local development, production build/start and how to replace club copy, contact address, session data, palette and artwork.

Named technologies:
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
- Local SVG artwork
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
Build a rebrandable creative-club landing page with original fictional content. The gallery reference name is separate from the sample identity: the rendered site is Mingle. Use the exact headline, support copy and session titles from the Design prompt. Sessions, View sessions and Find your next session link to #sessions; Our story and Meet the club link to #story; Questions links to #questions. The M badge links to #top. All controls must have real destinations.

Paper playground asks guests to bring scrap paper and a favorite magazine; they cut, fold and assemble a small collage, then share one unexpected detail. Shape & share needs a pencil, paper and any small object; guests draw it three ways and compare interpretations. Tiny print club uses a soft carving block, a blunt embossing tool and washable ink; explain that the host supplies these materials in the fictional example. Each session disclosure uses a visible duration, a short materials list, one descriptive paragraph and a mailto to [email protected] with that session's title URL-encoded in the subject. Label the address as a sample contact to replace before publishing. These are illustrative formats, not scheduled real-world events, and clicking an email link never claims a reservation.

The story explains that making something small is a good reason to get together, and that there is no polished result to aim for. FAQ: Do I need experience? — No; the example sessions are designed for beginners. Can I book a place here? — This is a fictional club page; it shows session ideas and email links, with no booking or payment system. What should I bring? — Open a session card for its materials. Finish with Mingle is a fictional creative club. Sessions are illustrative. Replace the sample contact before publishing. Do not invent endorsements, attendance numbers, available seats, scarcity or testimonials. Build every section, including those below the screenshot.

### 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.