ElevenLabs

Build the "ElevenLabs" kickstart — A quiet audio studio on warm paper, with sculptural sound studies you can play.

## Design
Build an editorial landing page for Cadence, a fictional audio sketchbook for independent makers. Keep the page almost monochrome: eggshell #FDFCFC canvas, warm taupe #F5F3F1 panels, #EBE8E4 dividers, black #000000 headings and primary buttons, eggshell button labels. Use #44403B for all supporting text so small copy remains readable; avoid pale helper text. Reserve #0447FF and #FF4704 exclusively for decorative sound artwork. No colored buttons, links, focus rings or status indicators. Use black for focus with a 3px offset. Panels are flat, with no drop shadow.

Use a locally hosted Inter variable font at weight 300 for display text and 400/500 for everything else, with the CSS family stack Inter, system-ui, sans-serif. Inter Light is an open substitute for the licensed display face. Use 48px/1.08, -0.02em tracking for the desktop h1; 36px/1.17 for section headings, 32px for card headings, 20px/1.35 for the lead, 16px/1.5 for body, 14px/1.5 for navigation and buttons, and 12px for captions. Keep +0.01em tracking on small body copy and use ui-monospace for technical labels. Use a 4px spacing unit, 1280px content maximum, 64–80px desktop gutters and roughly 96px between major sections. Cards use 20px corners, the main studio panel 24px, and all action buttons and option chips fully rounded corners. Interactive targets are at least 44px high. Do not synthesize bold display text.

At 1440×900, put a 72px navigation row within the centered column. An original three-arc sound mark accompanies the Cadence wordmark on the left. Studio, The process and Questions are visible center links; an outlined Say hello link sits on the right. Separate navigation from the page with a fine warm rule. Leave 72px above an asymmetric hero. Left: a small SOUND, GIVEN SHAPE label, then the two-line h1 A little sound. / A whole new feeling. Under it, one black Explore the studio anchor and one quiet How it works text link with a small arrow. Right: a 20px lead reading Start with a tone. Find a texture. Make room for the idea that comes next. Under that, use a short 14px paragraph explaining that the page is a local, interactive sound sketchbook, and a small 01 / AN OPEN STUDIO label. Align these columns through whitespace rather than boxes.

Below the hero, around y=390, place one wide taupe studio panel with 24px corners and 32px padding. Its header has Studio / Sound studies on the left and a monochrome label LOCAL SYNTH DEMO on the right. A thin divider separates the header from three equally sized sound-study columns. Each column contains a 12px sequence label, a 200px circular gradient sculpture, a thin SVG waveform, a 20px name, a short subtitle and an outlined pill playback button. The three studies are First light (a bright bell, violet and eggshell sphere), Soft current (a low hum, warm orange sphere), and After hours (a soft chord, violet and orange sphere). Create the sphere artwork with original CSS radial/conic gradients, subtle fine contour rings and a translucent highlight; it is decorative, never the page or interface drawn into an image. No source-brand assets or remote image URLs. Keep the waveform decorative and static. Use hairline vertical separators between the three studies. Playback buttons stay black/eggshell and sit beneath the text, not over the colorful sphere. Beneath all three, one polite status line starts with Choose a study to hear a short, quiet tone. A nearby note states Sounds are synthesized in your browser. Nothing is recorded or uploaded.

Continue below the first viewport with The room between idea and sound: a left heading and three numbered horizontal process rows, Listen / Notice the shape of a simple sound; Adjust / Use the volume control to find a comfortable level; Begin again / Replay a study or choose a different starting point. Include one labeled native volume slider from 0 to 30 percent, default 12, alongside the studio explanation. Then a quiet Questions section with three native details disclosures and a compact footer containing the original mark, a sample contact and a clear fictional-product notice. Do not add invented customers, usage metrics, pricing, downloads or accounts.

At 760px and below, use 20px outer gutters and 36px hero text. Wrap the visible navigation, stack hero columns and sound studies, replace vertical rules with horizontal ones, and let option labels wrap without clipping. Keep the page within a 360px viewport without horizontal scroll. One h1, semantic landmarks, skip link, visible focus, descriptive button names, labeled range control and polite status announcements are required. All artwork is aria-hidden. The page's copy, studies, process and FAQ render without JavaScript; show a noscript note that audio playback requires JavaScript. Only subtle 160ms color changes are allowed, disabled with reduced motion. No autoplay or endlessly animated artwork.

## Tech stack
Use Next.js App Router, React and TypeScript, with plain CSS custom properties and original inline SVG. Keep equivalent tools already in the host repository. Server-render the page, with one small client component for the studio's playback and volume. Use the browser Web Audio API only after an explicit button press. Inter may be self-hosted with its OFL license; use system-ui when it is unavailable. Never load fonts, icons or images from a remote host at runtime. No UI kit, external API, database, authentication, analytics or paid service is needed. Keep samples and state in memory. Provide dev, build and start scripts and capture the preview from a production build. Add a README explaining setup and customization.

Technology list:
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties
- Web Audio API
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 complete, rebrandable page for the fictional Cadence audio sketchbook. The name ElevenLabs identifies the gallery inspiration only; the rendered sample must use Cadence and original copy, not the source identity, URLs, logos or claims.

Navigation: Studio and Explore the studio point to #studio; The process and How it works point to #process; Questions points to #questions. Say hello and the footer contact use mailto:[email protected], labeled as a sample contact in the footer. Do not present account or signup actions.

The studio must actually play three short synthesized studies. First light: sine tones at 440 and 660 Hz with a soft bell envelope, lasting 2 seconds. Soft current: sine tones at 146.83 and 220 Hz with a slow 3-second fade. After hours: sine tones at 261.63, 329.63 and 392 Hz with a 3-second chord envelope. Default master volume is 12 percent, adjustable from 0 to 30 percent with a labeled native slider and a visible percent readout. Scale gain across voices to avoid clipping. Start audio only on a user click, resume a suspended AudioContext if necessary, and use gentle attack/release envelopes to prevent clicks. At most one study plays at a time. Its button changes from Play First light (or the relevant title) to Stop First light and exposes aria-pressed. Clicking it again stops; switching studies stops the old one first. Natural completion restores the Play label and announces Finished: First light. An unsupported or denied audio context produces a readable Audio is unavailable in this browser message and leaves the rest of the page usable. Disconnect oscillators and close the context on unmount; never ask for microphone access. State resets on reload. No AI generation, voice cloning, file uploads or recording functionality is implied.

FAQ disclosures: What am I hearing? explains the local oscillators and that these are original synthetic tones, not generated speech or music files. Is anything recorded? says no microphone, recording, uploads or persistence. Can I make this my own? explains that name, copy, colors, tones and original sphere art can be changed in local files. The footer says Cadence is a fictional product. This is a local sound demo. The contact address is a sample.

Write all page copy in a calm, precise studio voice. Supply original CSS sphere artwork and SVG waveforms, without stock imagery. Preserve the art's violet/orange separation from the monochrome interactive controls. Document the optional local font and where to change identity, anchors, frequency data, colors and demo volume. Deliver the working page, including narrow-screen stacking and keyboard operation, then take a real screenshot of the page.

Build a rebrandable audio-product landing page with three local synthesized sound studies. Preserve this page structure:
1. Minimal sound-mark navigation
2. Asymmetric two-column editorial hero
3. Three playable sound studies in one taupe studio panel
4. Numbered process and volume control
5. Native questions and fictional-product footer

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