Liquid Death

Build the "Liquid Death" kickstart — A heavy-metal vending machine: stark black and white bands, zero radius, uppercase everything and one glint of gold.

## Design
Build a rebrandable direct-to-consumer canned-water storefront landing page.

Create a complete landing page for Coffin Creek, a fictional brand of still and sparkling mountain water sold in tall aluminium cans. Its core idea: a heavy-metal vending machine — a concert flyer turned into a shop, loud and deadpan, never soft or wholesome. This is a concept presentation, not a real store — no checkout, cart, accounts, prices, subscriptions, reviews or health claims. Use original branding, artwork and copy throughout.

Color: stark monochrome. Bone White #FFFFFF is the page background and the text on dark bands. Death Black #000000 is every dark band, the primary button and the full-width banner. Off-Black #151515 is body copy on light surfaces; Gravel Gray #727272 is secondary text, captions and placeholders; Ash Gray #E3E3E3 is the product-grid background and hairline dividers; Light Ash #F5F5F5 is the alternate light band; Charcoal #232323 is the hover state on dark elements; Input Border #999999 is the email field's border. Polished Gold #D2AC5A is the only warmth: the wordmark crest details, the announcement link and one small label per band; Antique Gold #8A6D35 is its hover and the gold text colour on light backgrounds. Gold is never a button, input or large fill. No gradients, no drop shadows, no other colours — depth comes only from black-on-white and white-on-black blocking. Every text pair meets WCAG AAA where it is body copy.

Typography: one clean geometric grotesk for everything — "Acumin Pro", Inter, Roboto, ui-sans-serif, system-ui, sans-serif — and a condensed companion for subtitles and can specs — "acumin-pro-condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, sans-serif — both installed locally, no remote font request. Weights 400, 500, 700. Every headline, button, navigation link and label is UPPERCASE at 700 with positive tracking: display 60px/1.0 at 0.02em (96px/0.95 for the hero), heading 45px/1.05 at 0.031em, heading-sm 36px/1.13, subheading 24px/1.2 at 0.056em, condensed subtitles 18–20px/1.2 at 0.056em, body 16px/1.67 in sentence case, body-sm 14px/1.5, captions 10px/1.0 at 0.063em. Never sentence-case a headline. Shapes: 0px radius on every button, input, card, tag, image and container — no rounded corner anywhere. Card padding 24px.

Black announcement strip: a full-width Death Black strip, 10px vertical padding, one centered 12px uppercase Bone White line COFFIN CREEK IS A DESIGN STUDY — NOTHING HERE IS FOR SALE. followed by a Polished Gold underlined READ THE FINE PRINT anchor to the questions.

Navigation bar with a coffin-crest wordmark: Bone White, 72px tall, a 1px Ash Gray bottom rule, content max 1280px with 32px gutters. Left: an original inline-SVG crest — a coffin silhouette in Death Black with a single water drop cut out and two thin Polished Gold rules — beside COFFIN CREEK in 22px weight 700 at 0.063em. Centre: WATER, SPARKLING, MERCH, THE WAKE, QUESTIONS in 14px weight 500 uppercase Off-Black, no underline or background on hover (a 150ms shift to Gravel Gray only). Right: the primary button SEE THE SHELF — Death Black, Bone White 14px weight 700 uppercase, 8px 16px padding, 0px radius, Charcoal on hover. Every link is an anchor to a real section.

Full-bleed black hero with an illustrated can: content max 1280px, two columns at 7/5. Left: a Polished Gold 12px caption SAMPLE NO. 000 / STILL MOUNTAIN WATER, then the h1 BURY YOUR THIRST. in 96px/0.95 weight 700 uppercase Bone White at 0.02em across two lines, a 20px condensed uppercase subtitle in #E3E3E3 FROM A COLD CREEK. IN A TALL CAN. NO PLASTIC COFFINS., then two buttons — a Bone White filled button with Death Black text SEE THE SHELF and a transparent outlined button (1px Bone White border, 13px padding) THE FINE PRINT. Right: a sharp-edged Ash Gray block, 520px tall, holding one large original inline-SVG tallboy can — Death Black body, a Bone White coffin crest with Polished Gold rules, the vertical condensed word CREEK and a small caption 500 ML · SAMPLE — standing on a flat black floor line. No photographs.

Four-column can grid with filters (id water, on Ash Gray #E3E3E3): 96px vertical padding. A left-aligned 45px heading THE SHELF. with a condensed Gravel Gray subtitle SIX CANS. ALL SAMPLES., then a rigid four-column grid, 2px gaps showing the Ash Gray behind, of product cards with 0px radius, no border, no shadow: each card Light Ash #F5F5F5, 24px padding, an original SVG can in the centre on a 320px image area, then the uppercase 700 Death Black title and a condensed 14px spec line in Gravel Gray — STILL (black can), SPARKLING (white can with black crest, id sparkling), GRIM LIME (black can, lime-free monochrome label), NIGHT BERRY, COLD ASH, MIDNIGHT MINT, BLACK CHERRY, WHITE NOISE — eight cards in two rows. Each card has a small uppercase 10px tag in the top-left, black on white, 4px 8px, 0 radius: STILL or SPARKLING. Above the grid, filter tags ALL / STILL / SPARKLING as real buttons with aria-pressed (active Death Black with Bone White text, inactive transparent with a 1px Death Black border); filtering hides non-matching cards locally and sends nothing.

Full-width black banner call to action (id the-wake): a full-width Death Black block link, 64px vertical padding, the centered 60px uppercase Bone White heading JOIN THE WAKE with a 40px white chevron to its right, and beneath it a 16px #E3E3E3 line A mailing list for people who take water too seriously. Sample only. Charcoal background on hover. It scrolls to the email row.

Merch row with spec disclosures (id merch, Bone White band): 96px padding. A 45px heading DEAD STOCK. and a three-column row of sharp product cards on Ash Gray image areas — an original SVG black tee with a white coffin crest, a white tote with a black crest, and a black enamel pin shaped like a coffin with a gold rim — each with an uppercase 700 title, a condensed Gravel Gray line SAMPLE — NOT FOR SALE, and a secondary outlined button LOOK CLOSER that opens a native details element with two lines of spec text.

Native questions (id questions, Light Ash band): a 45px heading THE FINE PRINT. and details elements separated by 1px Death Black rules, max 880px, 24px uppercase weight 700 summaries with a square + that becomes − when open, 16px Off-Black answers: IS COFFIN CREEK REAL? — no, a fictional brand for this page. CAN I BUY A CAN? — no; there is no shop, cart or checkout. IS IT GOOD FOR ME? — it is water in a can; this page makes no health claims.

Email capture row (id sign-up, Bone White): a centered 36px heading GET ON THE LIST. and an inline row — an email input (0px radius, 1px #999999 border, 8px 12px padding, placeholder [email protected]) beside the Death Black primary button SIGN ME UP — inside a form whose submit is prevented and shows the inline note Sample only — nothing was sent. in Gravel Gray. Stack on mobile.

Black footer link directory (Death Black): 64px top padding, the crest wordmark in Bone White and Polished Gold, a four-column grid of uppercase 700 12px Polished Gold headers (SHOP, THE WAKE, MERCH, HELP) with 14px uppercase Bone White links at 12px gaps, each an anchor to a real section; a 1px Charcoal rule, then 12px Gravel Gray COFFIN CREEK IS A FICTIONAL CONCEPT. NOT A REAL BRAND, PRODUCT OR STORE. and BACK TO TOP.

At 760px and below: 16px gutters, navigation links collapse leaving the crest and the black button, a 56px hero h1 with the can block below the text, 36px section heads, the product grid in two columns, merch in one column, the footer in two columns. The page fits a 360px viewport with no horizontal page overflow. Use semantic landmarks, one h1, a skip link, visible 3px Polished Gold focus outlines offset 2px on dark bands and Death Black on light bands, one short text alternative per can illustration with decorative crest rules hidden from assistive technology, and keyboard-operable filters, disclosures and questions.

## 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 for the coffin crest, every can, the merch pieces and the chevron. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client components are the product filter tags and the sample email form, which keep local React state and send nothing. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, logo, icon, audio, 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 Coffin Creek clearly fictional and rebrandable: no source wordmark, skull logotype, can artwork, photography, slogans or product names, no real brand, band, retailer or celebrity names, no prices, carts, subscriptions, reviews, testimonials, charity or sustainability claims, and no health or hydration claims. Every can and merch item is labelled sample. Gold marks details only, never a button or input; nothing is rounded, shadowed or gradient-filled. Every link leads to a real section on the page; nothing is sent or stored. Deliver initially visible content with no scroll reveals, autoplay, audio, video or carousel; hover and focus are a 150ms colour change, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair (AAA for body copy), keyboard-operable filters, disclosures and questions, 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.