Headspace

Build the "Headspace" kickstart — A sunlit wellness retreat on warm paper: cream canvas, a yellow banner, huggable pills and headlines tracked tight.

## Design
Build a rebrandable meditation and wellbeing app landing page.

Create a complete landing page for Lullwater, a fictional app of short guided sessions for sleep, focus and unwinding. Its core idea: a sunlit wellness retreat on warm paper — calm and optimistic, never clinical. This is a concept presentation, not a real product — no sign-up, no accounts, no app download, no prices, plans, reviews, therapists or medical claims. Use original branding, artwork and copy throughout.

Color: warm and mostly achromatic. Page Cream #F9F4F2 is the canvas and stays continuous behind the navigation, every section and the footer — never substitute white or grey as the page background. Pure White #FFFFFF is for cards, the navigation bar and inputs. Charcoal Ink #2D2C2B is body text and every dark pill; never use #000000 for body copy. Graphite #44423F is secondary text and navigation, Stone #63605D footer links and helper copy, Linen #E2DED9 every card and navigation border, Driftwood #C6C1B9 the hairline rules between questions, Ash #D0D0D0 the input border. Brand Orange #F47D31 is only the logo dot. Mindful Blue #0061EF is the single highest-priority action and appears once per view — the navigation pill Try the sample; never on any other button. Sunbeam Yellow #FFCE00 is emotional punctuation: the announcement banner and the one full-width content card, never a default surface. Deep Indigo #3B197F and Twilight Violet #281466 are the contemplative night surface of one hero card; Plum #5F2B89, Mauve #8144A8, Celeste #00A4FF and Blush #FFA1CC are decorative badge and blob fills only. No other saturated colours.

Typography: one friendly geometric sans for everything — Apercu, "Apercu Pro", Inter, "DM Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif — installed locally, no remote font request, with font-feature-settings "ss01", "cv11". Weights 400 body, 500 navigation and tile labels, 700 headings and buttons. Tracking tightens as size grows and headings are never at zero or positive tracking: hero h1 72px/1.1 at -0.03em, section heads 52px/1.13 at -0.03em, card heads 40px/1.29 at -0.025em, 32px/1.3 at -0.025em for the yellow card, 24px/1.33 at -0.025em for question summaries, 20px subheads, body 16px/1.5 at -0.01em, 14px secondary, 12px captions. Centre only short headlines and single statements; left-align any paragraph. Shapes: 9999px for every button, pill, badge and avatar; 32px for hero and yellow cards; 16px for category tiles and the chat bubble; 8px for inputs. No drop shadows except the flat sticker shadow on dark pills, rgba(65,61,69,0.2) 0 2px 0 0, and a soft 0 8px 24px rgba(45,44,43,0.08) on the floating chat bubble only.

Yellow announcement banner: a full-width Sunbeam Yellow strip, 14px vertical padding, one centered 15px Charcoal line Lullwater is a design study — every session on this page is a sample. with an underlined weight-700 Read the questions anchor. No close button.

Navigation bar with an orange dot wordmark: white, 72px tall, 1px Linen bottom border, content max 1200px with 32px gutters. Left: a 22px Brand Orange circle beside lullwater in 26px weight 700 at -0.03em Charcoal. Centre: links Sleep, Focus, Unwind, Sessions, Questions in 16px weight 500 Graphite. Right: an underlined Help text link and the Mindful Blue pill Try the sample (12px 24px padding, 16px weight 700 white). Every link is an anchor to a real section.

Centered hero with two feature cards: 64px top padding. A centered h1 Be kind to your mind, one breath at a time. in 72px weight 700 Charcoal, max 880px, then a centered 20px Graphite line Short guided sessions for sleep, focus and the moments in between. Below, 48px down, two cards side by side with a 24px gap, each 32px radius, 48px padding, about 460px tall, content centered at the top: the left Pure White with a 40px heading Unwind before bed, a charcoal sticker pill Hear a sample and, rising from the bottom edge, an HTML phone mockup (white screen, 36px radius, 8px Charcoal bezel) showing a sample session list — Wind down, 10 min; Body scan, 8 min; Soft rain, 20 min — each row with a small filled colour dot; soft Blush and Sunbeam blob shapes sit behind the phone. The right card is Deep Indigo with white text: 40px heading Sleep, sorted., a white pill with Charcoal text Explore sleep, and a phone showing a Twilight Violet screen with a crescent moon, a slim progress bar and the caption Night sounds · sample, with Plum and Mauve blobs and a few small white star dots. Blobs and phones are original inline SVG and HTML, never photos or real app screens.

Filter pills and category tiles (id sessions): 64px section gap. A centered row of filter pills — All, Sleep, Focus, Unwind — as real buttons with aria-pressed; active Charcoal with white 14px weight 500 text and a small white dot, inactive white with Charcoal text and a 1px Linen border, 12px 20px padding. Then a centered 52px heading Find what helps today. and a three-column grid, 24px gaps, of six white category tiles (16px radius, 1px Linen border, 22px 24px padding): a 16px weight 500 Charcoal label on the left, a 44px filled round badge centre-right holding a filled white glyph, and a Graphite chevron on the right — Stress less (yellow badge, lightning), Sleep deeply (indigo, crescent moon), Find focus (celeste, spiral), Feel lighter (blush, smile), Move gently (orange, circle), Talk it through (mauve, speech bubble). Filtering hides non-matching tiles locally and sends nothing. Icons are filled and rounded, never outline-only.

Yellow content card with a chat bubble (id focus): a full-width Sunbeam Yellow card, 32px radius, 64px padding, two columns. Left: a floating white chat bubble (16px radius) with a small Plum dot avatar, You in 14px weight 700 and I have ten minutes before my meeting. in 15px Graphite, then a second bubble offset right with an orange dot, Lullwater, and Try Clear Head — a 10-minute sample focus session. Right: a 48px weight 700 Charcoal heading at -0.025em A little calm, whenever you need it. and a left-aligned 16px paragraph about short sessions that fit between things, then a charcoal sticker pill See focus sessions.

Native questions (id questions): a centered 52px heading Questions. and details elements separated by 1px Driftwood rules, max 800px, 24px weight 700 summaries with a round + badge that turns into − when open, 16px Graphite answers: Is Lullwater a real app? — no, a fictional study for this page. Can I download it or sign up? — no; there is no app, account or checkout. Is this medical advice? — no; nothing here is a treatment or a clinical claim.

Email subscribe row (id unwind): a centered 32px heading A calmer inbox. and an inline row — an email input (8px radius, 1px Ash border, white, placeholder [email protected]) taking about 60% of the width beside a charcoal sticker pill Subscribe — inside a form whose submit is prevented and shows the inline note Sample only — nothing was sent. Stack on mobile.

Cream footer link directory: on Page Cream, 64px top padding, the orange dot wordmark, then a six-column grid of headers in 16px weight 700 Charcoal (Sleep, Focus, Unwind, Sessions, Studio, Help) with 14px Stone links at 12px row gaps, each an anchor to a real section. Beneath, a thin Charcoal strip with 13px white text Lullwater is a fictional concept. Not a real app, service or medical product. and Back to top.

At 760px and below: 16px gutters, navigation links collapse leaving the wordmark and the blue pill, a 44px hero h1, 36px section heads, the two hero cards stacked, the category grid in one column, the yellow card stacked with the bubbles first, 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 Mindful Blue focus rings, the phone mockups each with one short text alternative and decorative blobs and badges hidden from assistive technology, WCAG AA contrast on every text pair, and keyboard-operable filters 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, HTML phone mockups and original inline SVG for the blobs, the moon, the stars, the category glyphs and the wordmark dot. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client components are the filter pills and the sample subscribe 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 Lullwater clearly fictional and rebrandable: no source wordmark, app screens, illustrations, characters, copy or session names, no real brand, therapist, clinic or publication names, no app-store badges, testimonials, prices, plans, trials or medical, clinical or outcome claims. Every session length and figure is labelled sample. Mindful Blue appears on one action only; Sunbeam Yellow only on the banner and one content card. 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 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 filters 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.