WHOOP

Build the "WHOOP" kickstart — A performance lab at midnight: black theatrical heroes, clinical white benches, carved 120px type and one violet pulse.

## Design
Build a rebrandable performance-wearable product landing page.

Create a complete landing page for Halden, a fictional screenless training band that turns a night of sleep and a day of effort into three sample numbers each morning. Its core idea: a performance laboratory at midnight — clinical white lab benches beneath a black theatrical void, one violet pulse of electricity. This is a concept presentation, not a real product — no checkout, cart, accounts, prices, subscriptions, reviews, testimonials, athlete endorsements or medical and health claims. Use original branding, artwork and copy throughout.

Color: achromatic plus one violet. Obsidian #000000 is every dark band, the hero and the closing call to action, and the primary text on light surfaces. Carbon #191919 is the secondary dark surface (the footer and one alternating dark band) and headline text on light surfaces. Paper White #FFFFFF is the light page canvas, card surfaces on dark bands, text on dark bands and the white pill button. Lab Mist #F3F5F9 is the soft elevated card fill on white sections. Hairline #E5E7EB is every border, divider, outlined-button stroke and input frame. Fog Gray #808080 is muted text on dark bands only; on light surfaces muted text is Fog Deep #5C5C5C so body copy keeps WCAG AA contrast, and Ash #999999 is the muted text on the Carbon footer and disabled labels. Pulse Violet #4A53FF is the only chromatic colour: the announcement bar, the navigation pill button, the one selected membership button and a 2px ring on the live dial — never a card fill, heading or second accent. No drop shadows on cards or buttons; elevation comes only from Lab Mist on white and white on black. The two decorative colour washes on the story cards are the only gradients.

Typography: a single geometric sans for everything — "Proxima Nova", Montserrat, "DM Sans", "Nunito Sans", ui-sans-serif, system-ui, sans-serif — installed locally, no remote font request. Weights 400, 500, 600, 700. Display 120px/0.8 weight 400 at -0.04em (the carved, tightly tracked hero headline — the brand's signature), heading-lg 50px/0.9 weight 400 at -0.04em, heading 35px/1.0 at -0.03em, heading-sm 32px/1.09, subheading 24px/1.13 weight 600 at -0.03em, body-lg 20px/1.3 at -0.03em, body 16px/1.5, captions 14px/1.59. Every 12–15px label in the navigation, on buttons and under metrics is UPPERCASE at 0.1em tracking. Body copy never drops below 16px and never centres in cards. Shapes: 300px (fully pill) radius on every button, tag and icon button; 24px radius on cards and artwork; 30px on the membership panel; 8px on small chips only. Page max-width 1200px, 80–120px between sections, 24–32px card padding, 15–24px element gaps.

Pulse Violet announcement bar: full-width, 44px tall, Pulse Violet, a centered 14px Paper White line HALDEN IS A DESIGN STUDY — EVERY READING ON THIS PAGE IS A SAMPLE. and a right-aligned underlined white link READ THE FINE PRINT to the questions.

Black navigation bar with a wordmark: full-bleed Obsidian, 88px tall, content max 1200px. Left: an original inline-SVG mark — a thin white ring broken by a single violet tick — beside HALDEN in 24px weight 700 Paper White at 0.1em. Centre: THE BAND, MORNINGS, STORIES, MEMBERSHIP, QUESTIONS in 15px weight 500 uppercase at 0.1em, spaced 32px apart, Fog Gray on hover. Right: the Pulse Violet pill button JOIN THE WAITLIST (Paper White 15px weight 600 uppercase at 0.1em, 12px 24px padding, 300px radius). Every link is an anchor to a real section.

Full-viewport black hero with the band: at least 760px tall, Obsidian, two columns at 7/5 inside the 1200px well. Left: a 14px Fog Gray caption SAMPLE NO. 000 / SCREENLESS TRAINING BAND, the h1 KNOW WHEN TO GO. at 120px/0.8 weight 400 Paper White at -0.04em across two or three lines, a 20px Fog Gray paragraph (max 520px) Halden reads your night and your effort, then hands you three numbers with your morning coffee. No screen, no buzzing, no streaks., and two pills — the Paper White button with Obsidian text SEE A MORNING (16px 32px padding, 15px weight 600 uppercase) and a transparent outlined pill with a 1.5px #333333 border and white text HOW IT WORKS. Right: a 24px-radius Carbon panel holding an original inline-SVG band — a soft black loop strap with a matte sensor pod, drawn in greys with one violet tick — and a floating metric overlay beneath it: a white 32px number 72 over a 12px uppercase 0.1em label READY · SAMPLE.

Three morning numbers (id mornings, Paper White): 96px vertical padding. A 50px heading THREE NUMBERS. NOTHING ELSE. in Carbon and a 20px Fog Deep line beneath, then a three-column grid of Lab Mist cards at 24px radius, 32px padding, no border or shadow: each card holds an inline-SVG ring dial (120px, a Hairline track and an Obsidian arc, the READY dial with a 2px Pulse Violet outer ring), a 50px weight 400 number, a 14px uppercase 0.1em label and a 16px Fog Deep sentence — READY 72, EFFORT 11.4, REST 7H 42M — each label followed by SAMPLE. Above the grid, three pill tags TODAY / THIS WEEK / THIS MONTH as real buttons with aria-pressed (active Obsidian with white text, inactive transparent with a 1.5px Hairline border) that swap the three numbers locally from a fixed sample table and send nothing.

Story cards (id stories, Carbon band): 96px padding. A 50px Paper White heading ONE BAND, THREE NIGHTS. and a three-column row of tall 4:5 cards at 24px radius, each an original inline-SVG scene in place of photography — a lap pool at dawn in deep blue-black washes, a night road with a single runner silhouette, a folded bed under a window — with a 24px weight 600 white heading top-left (THE EARLY LENGTHS, THE LONG WAY HOME, THE QUIET HOURS), a white 32px metric overlay and 12px uppercase label (e.g. 64 / EFFORT · SAMPLE), and a 40px white circular expand button with a 1px white border bottom-right that is the summary of a native details element revealing two white lines of story text. No carousel, no autoplay; the three cards sit side by side.

Lab Mist feature row (id the-band, Paper White): 96px padding. Two full-width Lab Mist cards stacked with 24px gap, 24px radius, 24px padding, each a row: a 200×140 24px-radius inline-SVG artwork left (the strap coiled; the sensor pod from below), a 24px weight 700 Obsidian heading and 16px Fog Deep body in the middle (A STRAP YOU FORGET — Knit, quick-dry, one size with a sliding clasp.; A POD WITH NO SCREEN — It collects quietly and says nothing until morning.), and an outlined pill on the right — transparent, 1.5px Hairline border, 12px 28px padding, 14px weight 500 — LOOK CLOSER, which opens a native details element with two spec lines.

Membership (id membership, Paper White): a 50px heading PICK A PACE. and a 30px-radius Lab Mist panel with three white tier cards at 24px radius, 1px Hairline border, 32px padding: tier name 24px weight 700 (BASE, BUILD, PEAK), the word SAMPLE where a price would be at 50px weight 400 -0.04em in Carbon, a 16px feature list with 15px row gaps and a thin check glyph, and an outlined pill CHOOSE at the bottom. Choosing a tier is local state: the chosen card's button becomes the one Pulse Violet pill reading CHOSEN, and a line below reads You picked BUILD. Nothing was sent. Nothing is billed.

Native questions (id questions, Paper White): a 35px heading THE FINE PRINT. and details elements separated by 1px Hairline rules, max 880px, 20px weight 600 summaries with a 32px circular pill + that turns to − when open, 16px Fog Deep answers: IS HALDEN REAL? — no, a fictional band for this page. ARE THE NUMBERS MEDICAL? — no; every reading is a sample and this page makes no health claims. CAN I BUY ONE? — no; there is no shop, price or checkout.

Dark call-to-action band with a waitlist (id waitlist, Obsidian): 120px vertical padding, a left-aligned 50px/0.9 weight 400 Paper White heading at -0.04em TRAIN TOMORROW. REST TONIGHT., a 20px Fog Gray line, then an inline form row — an email input with a 1.5px #333333 border, 300px radius, 14px 24px padding, white text and the placeholder [email protected], beside the Paper White pill JOIN THE WAITLIST. The form's submit is prevented and shows the inline note Sample only — nothing was sent. in Fog Gray. It stacks on mobile.

Carbon footer: 64px top padding, the ring mark and HALDEN in Paper White, a four-column grid of 12px uppercase 0.1em Ash #999999 headers (THE BAND, MORNINGS, MEMBERSHIP, HELP) with 16px Paper White links at 12px gaps, each an anchor to a real section, a 1px #333333 rule, then 14px Ash HALDEN IS A FICTIONAL CONCEPT. NOT A REAL PRODUCT, SERVICE OR MEDICAL DEVICE. and BACK TO TOP.

At 760px and below: 16px gutters, navigation links collapse leaving the mark and the violet pill, a 64px hero h1 with the band panel below the text, 36px section heads, dials, story cards and tiers in one column, the feature-row artwork above its text, 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 Pulse Violet focus outlines offset 2px on every surface, one short text alternative per illustration and dial with decorative washes hidden from assistive technology, and keyboard-operable tags, disclosures, tier buttons 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 ring mark, the band, the sensor pod, every dial, the three story scenes and the check glyphs. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client components are the period tags, the membership chooser and the sample waitlist 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 Halden clearly fictional and rebrandable: no source wordmark, strap or app artwork, photography, slogans, athlete or team names, no real brand, league, retailer or celebrity names, no prices, carts, subscriptions, reviews, testimonials or endorsements, and no health, medical, diagnostic, recovery-outcome or performance-improvement claims. Every reading, dial and story metric is labelled sample. Pulse Violet marks the announcement bar, the navigation pill, the one chosen tier and the live dial ring only; nothing takes a drop shadow, and gradients appear only as the story cards' decorative washes. 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, keyboard-operable tags, disclosures, tier buttons 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.