Bevel

Build the "Bevel" kickstart — Morning metrics in cloudlight: a sky-to-paper hero, tight system headlines, capsule buttons and a softly glowing phone-and-watch dashboard.

## Design
Build a rebrandable health-app landing page for a wearable recovery coach.

Create a complete landing page for Tidewell, a fictional iPhone and watch app that gathers sleep, strain and recovery from the wearables someone already owns and turns them into one quiet morning summary. Its core idea: morning metrics in cloudlight — a bright white health journal punctuated by a softly glowing wearable dashboard. This is a concept presentation, not a real product — no app-store listing, sign-up, pricing, real ratings or reviews, awards, partner or device brand logos, or real people. Use original branding, UI and copy throughout.

Color: a monochrome shell with colour kept for data. Paper White #FFFFFF is the page canvas, the navigation capsule and the footer. Ink #222326 sets every headline and primary text. Body Gray #747679 sets supporting copy, muted navigation links and helper labels — on Paper White only at small sizes; on Cloud Card and the Hero Sky field it is used only at 24px and above, so small text there is Ink. Charcoal #1F2025 fills the download pills, the watch body and the dark QR card, with Cloud Card #EBF0F8 as the text and icon colour on it. Cloud Card #EBF0F8 is the surface of every feature card and of light icon fills. Mist Line #DDE4EF is the one hairline colour, for dividers and the phone's inner card edges. The hero field is Hero Sky, a vertical linear-gradient(#D2E5FF, #FFF9EE) from cool daylight into warm paper, with soft white cloud shapes at its top corners and a low, blurred spectral arc above its lower edge. The health colours — Recovery Green #31CE01, Metric Blue #415EEE, Sleep Lilac #B9A6FF, Coral Signal #FFAB94 and Signal Gold #FFCA00 — appear only inside product visuals: metric rings, sparklines, small indicator dots and soft washes. Never use them as a page background or a filled button.

Typography: one system grotesque for everything — -apple-system, BlinkMacSystemFont, Inter, Geist, "Segoe UI", sans-serif — at weights 400, 500 and 600 only. Display headings are weight 600 with -0.03em tracking at line-height 1.0: 80px at -2.4px for the hero, 64px at -1.92px for section statements, 40px at -1.2px for card titles. Section labels are 24px/21.6px weight 600 at -0.24px. Body is 24px/31.2px weight 400 in Body Gray for lead copy and 18px/1.4 for smaller copy; navigation and buttons 16px/22.4px weight 500; the brand wordmark 18px weight 500 at +0.16px; captions 12px/1.1. Never set a heading above 600, never drop its negative tracking, never add a second family. Locally installed fonts only, no remote font request. Shapes: 128px radius on every button (capsules, never rectangles), 32px on the navigation capsule and the hero field, 24px on feature cards, 16px on media tiles. Spacing: 16px element gap, 32px card padding, 80px between sections, content centred in a 1200px column with 32px side padding. Elevation is rare: rgba(0, 0, 0, 0.25) 0px 0px 16px -8px only on floating media tiles and rgba(0, 0, 0, 0.15) 0px 2px 16px 0px only on the QR card; feature cards have no border and no shadow.

Navigation: a Floating Capsule Navigation centred 16px below the top of the hero field — a Paper White #FFFFFF capsule, 32px radius, 8px padding, 16px gaps, translucent white with a 16px backdrop blur once the page scrolls. Inside: an original wordmark (a small Charcoal tide-mark glyph — two stacked rounded strokes — and Tidewell in Ink 18px weight 500), the Body Gray links How it works and Questions, and a Charcoal Download Pill, Get the sample app: #1F2025 fill, Cloud Card #EBF0F8 text and a small original phone glyph, 8px 16px padding, 128px radius.

Hero (id top): the Cloudlight Device Hero — a full-width Hero Sky field inset 8px from the viewport edges with a 32px radius, at least 900px tall. Centred, 56px below the navigation: an 80px Ink headline on two lines, A calmer read / on how you slept.; a 24px/31.2px Body Gray subhead, max 600px, Tidewell gathers sleep, strain and recovery from the wearables you already own and turns them into one quiet morning summary.; a Charcoal Download Pill, Get the sample app; and a Hero Proof Strip 16px below it — five small Signal Gold #FFCA00 dots followed by 12px weight-500 Ink text, Sample morning score 82 / 100 · labelled sample. Below, overlapping and centred, the product composition drawn in HTML and CSS, never an image: a 300px-wide phone with a 48px-radius light titanium frame and a Dynamic Island, tilted -4deg, whose white screen shows Today, Oct 3, two small status chips (Rested and 64°F), a row of three metric rings — Recovery 82% in Recovery Green, Strain 9.4 in Coral Signal, Sleep 7h 48m in Sleep Lilac — and a Resting heart rate card, 52 bpm, Normal, with a Metric Blue sparkline; and in front of it, offset to the lower right, a watch with a Charcoal #1F2025 band and a black face showing 7:02, Fri 3, and three small rings in the same colours. Let the phone's lower edge fade into the field.

Works with (id works-with): Paper White, 80px below the hero. A centred 24px Ink section label, Reads from what you already wear, above one row of six monochrome Charcoal text wordmarks in 18px weight 600, 24px apart — Any ring, Any watch, Any strap, Smart scale, Lab PDF, Manual log — generic placeholders, never real brand marks, and no enclosing cards.

Statement (id how-it-works): a centred 64px Ink statement on two lines, Three numbers, / one honest morning., a 24px Body Gray paragraph beneath it, then the Morning Strip: a horizontal row of seven 220px × 300px portrait tiles with 16px radius and the media-tile shadow, each a CSS-drawn sample morning card (a date, one large metric, a one-line note) on a pale tint from one data colour, with the outer tiles fading into the page edge through a horizontal mask.

Feature cards (id features): three Cloud Feature Cards in a row, Cloud Card #EBF0F8, 24px radius, 32px padding, no border, no shadow. Titles in Ink 40px weight 600 at -1.2px — Recovery, Strain, Sleep — with 24px Body Gray copy and an Inset Metric Visualization in each: a single large ring for Recovery, a seven-day bar row for Strain and a stacked sleep-stage bar for Sleep, using that card's data colour on a white inset panel.

Try a morning (id try): a centred section with a segmented control of three sample days — Rested, Busy, Short night — as Cloud Card capsules with the active one Charcoal. Choosing a day updates the three ring values and a one-sentence morning summary from local data.

Questions (id questions): four native disclosures on Mist Line hairlines — Which devices does it read from? Where does my data live? Do I need a subscription? What is a recovery score? — answered as concept copy.

Footer: Paper White, the wordmark, a 12px Body Gray line, Tidewell is a fictional concept — every figure is sample data, and anchor links back to each section. A fixed QR card sits at the lower right of the viewport: Charcoal, 16px radius, the QR shadow, a CSS-drawn square-module pattern (decorative, encodes nothing) beside Scan for the sample in Cloud Card 16px weight 600 and a 12px line, Opens this page on your phone.

## 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 Tidewell glyph, the phone glyph and the metric rings. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the Try a morning day picker, which keeps local React state. Draw the phone, the watch, the rings, the morning tiles and the QR pattern in HTML, CSS and SVG — no device render, screenshot or photo. Native details and anchors need no JavaScript. Use local font stacks only — no remote font, image, logo, analytics or health-data 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 Tidewell clearly fictional and rebrandable: no Bevel wordmark, copy or product UI, no app-store badges or real ratings, no device or partner brand logos, awards, reviews, statistics presented as real, or real people. Every score, chart and morning is labelled sample. The shell stays monochrome — Paper White #FFFFFF, Ink #222326, Body Gray #747679, Charcoal #1F2025, Cloud Card #EBF0F8 and Mist Line #DDE4EF; Recovery Green #31CE01, Metric Blue #415EEE, Sleep Lilac #B9A6FF, Coral Signal #FFAB94 and Signal Gold #FFCA00 stay inside product visuals. Buttons are 128px capsules, headings never pass weight 600, feature cards never take a border or shadow. Every link leads to a real section on the page; nothing is downloaded, sent or stored. Content is initially visible — no scroll reveals, typewriter effects, marquees or parallax; hover and focus are a 150ms change of background or opacity and ring values change with a 300ms stroke transition, all disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair, a keyboard-operable day picker and disclosures with visible focus rings, and a 360px layout without horizontal page overflow, where the hero headline steps down to 44px and the cards stack.

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