Tuple

Build the "Tuple" kickstart — A pair-programming devtool page: a Zinc-50 canvas, one centred 60px headline, a single Iris button and a macOS window of shared code on a pastel gradient wallpaper.

## Design
Build a rebrandable landing page for a remote pair-programming app.

Create a complete landing page for Pairloop, a fictional desktop app for Mac and Linux that lets two engineers share one screen, one keyboard and one conversation with almost no lag. Its core idea: a tidy engineer's workshop in daylight — a white, grey, precise page where the only colour is the one button that means act and the product window itself. This is a concept presentation, not a real company — no real customers, people, investors or awards. Use original branding, artwork and copy throughout.

Color: a light zinc system with one action colour. Zinc 50 #FAFAFA is the page canvas; White #FFFFFF is cards, the navigation and the product window frame; Zinc 100 #F4F4F5 is the feature-card surface and the footer; Zinc 200 #E4E4E7 is every hairline, card outline and input border — the structural backbone. Text: Zinc 800 #27272A for headings, navigation and primary copy; Zinc 500 #71717A for subtitles, card copy and micro-copy; Zinc 400 #A1A1AA for the logo-strip eyebrow and placeholders. Iris #6A5ED9 is the single primary action — the hero button and the closing button only — with White #FFFFFF text; never use it for icons, headings or decoration. Three decorative accents, never button fills: Emerald #16A34A and Sprout #1BB152 for green eyebrows and card titles, Coral #DB5434 for the testimonials eyebrow, Cobalt #3F71D4 for the footprint eyebrow, card titles and icons. Mint Wash #DCFCE7 backs the announcement pill. Zinc 900 #18181B is the single dark band, with Zinc 800 #27272A cards inside it. Shadows stay soft: cards take 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); the product window alone takes 0 25px 50px -12px rgba(0,0,0,0.25).

Typography: one family for everything — "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif with font-feature-settings "cv05", "cv06", "ss01". Hero headline 60px, line-height 72px, weight 600, Zinc 800, centred, max 1024px wide so it breaks into two lines. Section headings 48px, line-height 48px, weight 600. Hero subtitle 18px, line-height 1.625, weight 400, Zinc 500, max 760px. Navigation 16px weight 500; the wordmark 20px weight 700. Hero button 18px weight 500. Card titles 16px, line-height 1.625, weight 600 in the section's accent; card copy 16px/1.625 Zinc 500. Micro-copy 14px/20px. Eyebrows and code use "DM Mono", ui-monospace, "SF Mono", Menlo, monospace: eyebrows 16px weight 500, uppercase, letter-spacing 0.1em, centred above their heading; code 13px, line-height 1.63. Never mix the two families inside one sentence. Locally installed fonts only, no remote font request.

Shapes and spacing: buttons and cards 12px radius; the Sign up button and inputs 8px; navigation links 6px; the announcement pill 9999px; the product window frame 16px with a 12px inner screen. A 1232px centred column with 32px side padding (a 1168px content width), 96–128px between sections, 24px card padding, 8–16px element gaps. Spacious: sections never crowd each other and need no dividers.

Navigation: a 64px bar, 24px from the top of the page, on the canvas with no border at the top of the page. Left: the logo — two overlapping rounded squares, the back one Zinc 300 #D4D4D8 and the front one Iris, 22px — beside the wordmark Pairloop at 20px weight 700; then, 24px later, Pricing, Learn ▾, Integrations ▾ and Jobs as 16px weight-500 Zinc 800 links with 8px by 12px padding and a 6px-radius Zinc 100 hover. Right: Download and Log in as plain links, 24px apart, then Sign up — a White button with a 1px Zinc 200 border, 8px radius, 8px by 20px padding.

Announcement (id top): 84px under the navigation, centred: a 9999px Mint Wash #DCFCE7 pill, 6px by 14px padding, holding Pairloop for Linux is in beta! › in 14px weight 600 Emerald #16A34A, flanked left and right by two original 36px line-art mascots in Zinc 800 strokes — a round kettle with dot eyes and a small leaf on top, and a little cloud with a scarf — each overlapping the pill's end by a few pixels.

Hero: 52px under the pill row, the two-line headline Remote pair programming that feels like one shared desk, 60px/72px weight 600. 32px below, the 18px Zinc 500 subtitle Pairloop streams your screen in full resolution with crisp audio and instant remote control, so you and a teammate can stay in flow and ship real work together. 32px below, the Iris button Start your free trial (16px by 32px, 60px tall, 12px radius). 32px below, the micro-copy Free for 14 days. in Zinc 800 weight 600 followed by Cancel anytime. in Zinc 500.

Product window (id product): 72px below the micro-copy, a 1140px-wide White window frame, 16px radius, a 1px Zinc 200 border and the 0 25px 50px -12px shadow. Its 56px top bar holds three grey 10px traffic-light dots on the left and, centred, a 9999px Zinc 100 toolbar pill of six 22px grey line icons (share screen, pointer, draw — on a white active tab — text, wave, settings). Inside, a 4px gap from the frame, the 12px-radius screen: a macOS-style desktop whose wallpaper is a soft diagonal gradient from #F0A6A6 through #D7ADDA and #B5B8F4 to #698AFE, a 28px translucent white menu bar (Code, File, Edit, View, Go, Window, Help on the left; a clock reading Sat Oct 3 9:41 AM on the right, in 14px weight 600 White), and centred on it a 760px White code editor window with three coloured dots, the tab sync-cursors.ts in 13px DM Mono Zinc 500, and twenty-two numbered lines of TypeScript in 13px DM Mono — keywords Coral #DB5434, types Iris #6A5ED9, strings Emerald #16A34A, names Zinc 800, line numbers Zinc 400. Two teammates' cursors sit in the code: an I-beam with a 9999px Iris name tag Mara at one line and a Cobalt tag Theo two lines below. A dock at the bottom of the screen shows three rounded app icons on a frosted 12px-radius tray.

Logo strip (id customers): 128px under the window, the eyebrow Trusted by teams who ship daily · sample in 16px DM Mono uppercase Zinc 400 and, 32px below, six original fictional wordmarks in Zinc 500 spaced 64px apart, each in a different weight or case — brindle (lowercase heavy), Quarry (light), OSTRAVA LABS (spaced capitals), Fieldnote (serif italic), kestrel/ (mono) and Lumen & Co (medium).

Features (id features): the green eyebrow Built for pairing in Sprout #1BB152, the 48px heading Engineers deserve sharp tools and a 16px Zinc 500 two-line intro, then a three-column grid of Zinc 100 #F4F4F5 cards with a 1px Zinc 200 border, 12px radius and 24px padding: Crisp 5K screen sharing, End-to-end encryption, Seamless remote control — each with an Emerald #16A34A 16px weight-600 title, two lines of Zinc 500 copy and a small grey line illustration (two monitors joined by a padlock; a mouse pointer handing over to another).

Testimonials (id testimonials): the Coral #DB5434 eyebrow Testimonials, the heading Don't take our word for it, and a three-column masonry of White cards (12px radius, 24px padding, the soft card shadow) with sample quotes in 16px Zinc 800 with bold phrases, and a 32px grey initials avatar, name and role in 14px — every card labelled sample.

Footprint (id footprint): the Cobalt #3F71D4 eyebrow Small footprint, the two-line heading Respectful of your CPU and your screen, and three left-aligned columns, each a 24px Cobalt line icon, a 16px weight-600 Cobalt title — Native where it counts, Obsessed with speed, Lives in your menu bar — and three lines of Zinc 500 copy.

Workflow band (id workflow): the page's only dark section, full-bleed Zinc 900 #18181B, 128px by 32px padding: the eyebrow Workflow in Sprout, the White 48px heading Built for developers, by developers, a 16px Zinc 400 line, and a wide 16px-radius Zinc 800 #27272A card holding a small dark window titled hooks with a mono file tree (hooks › pause-music › call-started, call-ended; add-coauthor › teammate-joined, teammate-left) over faint concentric circles, and below it an Emerald title Automate your workflow with hooks, two lines of Zinc 400 copy and a Learn more › link. Then a centred 48px closing heading Pair like you are in the same room with the Iris Start your free trial button.

Footer (id footer): Zinc 100 #F4F4F5 with a 1px Zinc 200 top border; the centred logo, then a four-column link grid (Product, Learn, Company, Legal) in 14px Zinc 500, and a last row © Pairloop · a fictional sample.

## 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, shadow and spacing token. Render the page as a server component — it needs no client state. Draw the logo, the two mascots, the toolbar and feature icons, the cursors and the dock as inline SVG; render the code editor as real text in a <pre> with spans for syntax colours, so it stays crisp at every zoom and the markup is deterministic between renders. The wallpaper is a CSS linear-gradient, not an image. Use local font stacks only — no remote font, image, logo 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 Pairloop clearly fictional and rebrandable: no Tuple wordmark, logo, mascots, copy, customer logos, product names or real people. Every quote, name and wordmark is labelled sample. The canvas is Zinc 50 #FAFAFA with White #FFFFFF cards and Zinc 200 #E4E4E7 hairlines; text is Zinc 800 #27272A or Zinc 500 #71717A; Iris #6A5ED9 with White #FFFFFF text is the only filled button and appears nowhere else except the logo, code types and one cursor tag; Emerald, Sprout, Coral and Cobalt stay on eyebrows, card titles, icons and code — never as fills; Zinc 900 #18181B appears in exactly one band. One gradient per section at most — the wallpaper is the page's only illustration. Headlines and section intros are centred; card copy and body text are left-aligned. Every link leads to a real section on the page; nothing submits or stores data. Content is initially visible — no scroll reveals, typing code or moving cursors; hover and focus are a 150ms change, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair, a visible 2px Iris focus ring with a 2px offset, and a 360px layout without horizontal overflow, where the navigation collapses to the logo and Sign up, the headline drops to 36px, the product window scales down with its editor cropped, and every grid becomes one column.

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