Riverside

An original Oxbow page: a transparent 64px navigation over a full-bleed hero drawn in SVG — a warm recording desk with a boom-arm microphone, a pendant lamp glow, a plant, a keyboard and headphones under a dark scrim; a centred two-line 70px wide-grotesk headline, an 18px lead, seven smoked-glass topic pills with checkboxes in rows of four and three, one violet Start for Free pill and a Trusted by strip of invented wordmarks; then a #111111 band with 60px rounded top corners that rises over the hero, holding a workflow list and a drawn recording-room window; a scrolling strip of drawn show covers; Fog and white feature bands; a near-black assistant band; a hosting band; a webinar card grid; a closing call and a light footer.

• Best forPodcast and video recording tools, creator platforms, webinar and livestream products, and other media software that sells studio quality to people working from home.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius, spacing and shadow token. Render the page as server components; only the topic pills (a toggle each), the workflow labels, the Made with Oxbow strip arrows and the mobile menu need small client islands holding state in memory. Self-host Archivo (SIL Open Font License), Instrument Sans (SIL Open Font License) and IBM Plex Sans 600 (SIL Open Font License) as woff2 files through next/font/local — no remote font request; use Sharp Grotesk only if the project holds a licence. Draw the hero studio scene, the Oxbow mark, every icon, the recording-room window, the waveforms and every show cover as inline SVG and HTML built from committed sample arrays, never bitmap screenshots, video or stock photos, so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Riverside" kickstart — A cinematic creator-studio homepage: a warm drawn recording desk behind a wide grotesk headline, smoked-glass topic pills, one violet button, then near-black bands with 60px rounded shoulders.

## Design
Build a rebrandable landing page for a remote podcast and video recording studio, where hosts record guests in full quality from anywhere, edit by transcript and cut clips.

Create a complete landing page for Oxbow, a fictional remote recording studio. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, artwork and copy throughout.

Color: a grayscale studio with one violet switch. Carbon #1D1D1D is primary text on white, the hero base under its artwork and the dark feature cards. Midnight #111111 is every full-bleed dark band. Pure White #FFFFFF is the light canvas, text on dark bands and the outline pill. Fog #F6F6F6 is the Studio quality band and quiet card fills. Graphite #383838 is secondary text on white and the idle workflow labels on Midnight. Smoke #969696 is metadata and captions. Ash #D2D2D2 is every hairline, input outline and card border. Studio Violet #9671FF fills exactly one primary pill per screen, the active waveform and selected states — never a band, a heading or body text. Iris Light #AD98FA is its hover and decorative strokes; Lavender Mist #F2EEFF is a soft wash behind selected chips on white. No other hue belongs to the site: the warm wood and lamp colours exist only inside the drawn hero scene.

Typography: display headings use "Sharp Grotesk", "Archivo", "Helvetica Neue", Arial, sans-serif — Sharp Grotesk is commercial, so a build without a licence uses Archivo (SIL OFL, variable) at font-stretch 116% and weight 400, which matches its wide, light build. Body and controls use "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif with 0.16px tracking. Hero display 70px/87.5px weight 400, 0 tracking, white. Band headings 50px/62.5px weight 400. Small headings 30px/37.5px weight 400; feature titles Instrument Sans 24px/30px weight 500. The hero lead is Instrument Sans 18px/27.9px white; body 16px/24.8px; descriptions 14px/21.5px. Navigation 14px weight 500; buttons 16px weight 500 (600 inside the hero pill). Workflow labels are IBM Plex Sans (SIL OFL) 600 at 30px/37.5px. Never bold a display heading.

Layout: a 1440px canvas with an 80px side margin (a 1280px content width) and 30px band gutters. Bands alternate dark and light; every dark band has 60px top-left and top-right radii and rises 62px over the band above it. Band padding 80–84px top, 70–104px bottom. Radii: 100px or 300px pills, 36px topic pills, 8px cards, 4px images and covers, 60px band shoulders.

Navigation: transparent over the hero, 64px tall. At x 20, y 20 the 135×24px logo — a 24px white rounded square holding a carbon wave line, 10px gap, OXBOW in Archivo at font-stretch 125%, 15px weight 600, 2.6px tracking. From x 189: Product, Use cases and Learn with 10px chevrons, then For Teams and Pricing, 14px weight 500 at 80% white with 8px 10px padding. Right side: Talk to Sales and Log in as plain 14px links with 9px side padding, then the 128×40px white-outline Start for Free pill ending 12px from the right edge.

Hero (id top): 850px tall, #1D1D1D under a full-bleed SVG scene drawn 30px above the top edge: a warm taupe wall lit from the centre, a pendant lamp at the top right throwing an amber glow, a dark plant on the right, a wood desk from y 600 with faint grain, and on it a water glass, a notebook and pen, a pale keyboard and mouse, a phone and headphones; a matte black boom-arm microphone hangs in from the left edge with a brass ring. A vertical scrim (38% black at top, 18% in the middle, 62% at the bottom) keeps white text legible. Centred, with 129px top padding: the two-line headline Make shows that / sound like a studio; at y 306 the 660px lead Oxbow is the remote studio that records every guest in full quality, trims the edit and cuts the clips, so a two-person show sounds like it had a crew.; 30px below, seven topic pills in a 700px wrap with 16px row and 10px column gaps — Interviews, Panels, Audio dramas, Livestreams / Short clips, Product demos, Captions; 32px below, the 210×52px Studio Violet Start for Free pill. At y 655 and x 80, Trusted by: in 16px 85% white, and 20px below a 1280px row of eight invented white wordmarks spread with space-between, each 18–32px tall and in its own style: larkspur, Northfield, a boxed QUARRY, The Weekly Lamp in italic serif, a tracked HALDEN, Saltmarsh Gazette, Pinewire with a triangle mark and a stacked Copper Line.

Workflow (id workflow): a Midnight band with 60px shoulders starting at y 788. Centred white 50px heading One recording. Every format / it needs, in one pass. Then a 200px label column and a 1064px window: Record, Edit, Clip, Stream and Publish as IBM Plex Sans labels (Record active in white, the rest Graphite) each over a 14px Graphite line, and a Studio Violet pill under them; the window is a drawn recording room — a dark top bar with the OXBOW mark, the episode name Field Notes Hour, a REC chip and an uploading-progress chip, two drawn host tiles for Maren and Tobias, and a control bar with Record, Mic, Cam, Sound, Share and Leave.

Made with Oxbow (id made): still Midnight, a centred 30px heading Made with Oxbow over a horizontally scrolling strip of drawn show covers in squares, 16:9 frames and tall 9:16 frames, 216px apart, one framed by a 4px white border; covers are drawn typographic posters for invented shows, never photographs.

Studio quality (id quality): a Fog band. Left, the 50px heading Studio-level sound. / No studio needed.; right, a small black REC badge, the 24px/500 title Every guest recorded on their own device and a 16px Graphite paragraph. Below, a drawn laptop edge with a dark Download separate tracks panel: three rows (Maren, Tobias, All speakers) with 3840 × 2160 and WAV and MP4 chips.

Sound cleanup (id cleanup): on Fog, a small AI badge, the 24px title Let the assistant fix the room and a 16px line, over a 1280×300px #1D1D1D panel split in two: on the left a smooth Studio Violet waveform labelled With Oxbow, on the right a noisy grey waveform labelled Other tools, with a white Listen pill on the seam.

Testimonial (id voices): centred, a 14px line Ada Brennick | Host of Second Draft over a 30px/40.5px quote in Instrument Sans weight 500, then a Studio Violet Start for Free pill.

Assistant (id assistant): a Midnight band with 60px shoulders: the 50px heading Short on time? Hand it to the assistant., two 30px white sub-heads Your episode is ready and Clips, titles, thumbnails and show notes, done., and a full-width drawn strip of clip cards.

Hosting (id hosting): Midnight, two columns: a drawn phone with an episode player on the left; on the right the 50px heading Hosting built right in and three 24px/500 white sub-heads, each over a 14px #D2D2D2 paragraph — Reach every major podcast app, Read what your audience does, Ship with titles, chapters and transcripts — then a Studio Violet pill.

Webinars (id webinars): Midnight, the 50px heading Run webinars and live events like a pro. over a three-column grid of #1D1D1D 8px cards with 24px padding: Stream everywhere at once, Take questions from the audience, Add your own branding, Turn one event into weeks of clips, Sync with your CRM, Fill the room — each a 20px white title with a small drawn icon and a 14px #D2D2D2 line.

Closing call (id start): a white band with the centred 50px heading Your next episode starts here., a 18px Graphite line and the Studio Violet Start for Free pill.

Footer: white, a 1px Ash rule, five 14px link columns in #383838 (Product, Use cases, Resources, Company, Legal) with 14px/600 #1D1D1D headings, the OXBOW wordmark in Carbon and the line © Oxbow sample · a fictional recording studio. Not a real company. in Smoke.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius, spacing and shadow token. Render the page as server components; only the topic pills (a toggle each), the workflow labels, the Made with Oxbow strip arrows and the mobile menu need small client islands holding state in memory. Self-host Archivo (SIL Open Font License), Instrument Sans (SIL Open Font License) and IBM Plex Sans 600 (SIL Open Font License) as woff2 files through next/font/local — no remote font request; use Sharp Grotesk only if the project holds a licence. Draw the hero studio scene, the Oxbow mark, every icon, the recording-room window, the waveforms and every show cover as inline SVG and HTML built from committed sample arrays, never bitmap screenshots, video or stock photos, so the markup is identical on every render. 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 Oxbow clearly fictional and rebrandable: no real company, product, customer, person, show or photograph — the hosts, shows and studios are invented. Studio Violet #9671FF fills one primary pill per screen and the active waveform; never two violet pills side by side and never a second accent hue. Display headings stay in the wide face at weight 400; never bold them and never set them in the body sans. Every button and topic pill stays a pill; cards stay 8px and images 4px. Text pairs clear WCAG AA: #1D1D1D and #383838 on #FFFFFF and #F6F6F6, #FFFFFF on #111111 and #1D1D1D, #D2D2D2 on #111111, and white hero text over the scrim at 7:1 or better; white on Studio Violet measures 3.4:1, so pill labels stay 16px weight 600 or larger, as the reference does — idle #383838 workflow labels on #111111 are decorative state, so the active label and every description stay readable. Every link leads to a real section on the page; nothing submits. The page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no autoplay video, typing effects, counters, parallax or scroll reveal; hovers take 150ms and every transition stops for prefers-reduced-motion. Every control shows a 2px #9671FF focus ring with a 2px offset. The hero scene, covers and windows are labelled figures; decorative glyphs are hidden from assistive technology. At 360px the navigation collapses to the logo, Log in and a Menu button, the headline drops to 40px/48px and wraps, the lead to 16px/24px, topic pills wrap two to a row, the violet pill goes full-width, the Trusted by row becomes a two-row grid, dark-band shoulders shrink to 32px, band headings drop to 32px/40px, the workflow window stacks under its labels, the webinar grid becomes one column, and the page never overflows horizontally.

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