Zed

An original Lathe homepage: a 57px graph-paper header with a blue square mark, a quiet nav and keycap-labelled Search, Sign up and Download controls; an ice-tinted news strip; a ruled 1120px column with hatched margins and rail nodes, a centred italic 48px blue serif headline, a duospaced lede, Download now and Clone source buttons with keycaps and an availability line; a three-column Fast / Agentic / Shared row; a light three-pane editor window with agent threads, an agent conversation and code; then testimonials, a feature grid, an open-source band, an AI accordion, a plugin grid, a letter from the team, a closing call and a blue footer.

• Best forCode editors, IDEs, terminals, developer tools, desktop apps, open-source projects and any technical product that wants a calm, editorial, engineering-paper page with one blue.
• 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, rail position, radius and spacing token. Render the page as a server component; the only client code is the keyboard shortcuts behind the keycaps, the AI accordion and the editor's caret blink. Self-host IBM Plex Serif (300 italic, 300, 400), iA Writer Quattro (400) and IBM Plex Mono (400), all SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the mark, rails, hatching, grid, hero linework, editor window, avatars, wordmarks and icons in HTML, CSS and inline SVG — never a bitmap or screenshot. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Zed" kickstart — A graph-paper developer page with a whisper-light italic serif headline in ink blue, a duospaced body face, keycap-labelled buttons and a light editor window hanging from a ruled column.

## Design
Build a rebrandable landing page for a fast, minimal desktop code editor. Developers download it, open a project, and edit with teammates and AI agents in the same window — the page has to feel as quiet and precise as the tool.

Create a complete landing page for Lathe, a fictional code editor. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, illustration and copy throughout.

Color: a pale graph-paper page with one ink blue. Canvas #F4F4F2 is the page, the header and every section. Card #FFFFFF is testimonial cards, the letter card and editor panes. Rule #DADDE2 is every hairline: the header's bottom border, the vertical page rails, section dividers and the faint grid. Line #CCCFD3 is outline-button and keycap borders. Ink #3A3D43 is body text. Slate #5D636F is secondary text and keycap labels. Quiet #6A7282 is meta lines. Brand #1348DC is the headline, section titles, text links and the only filled button, with white #FFFFFF text and a 2px inset bottom edge in Deep #053794. Ice #E6EFFE tints the news bar and the editor stage; Frost #BEDBFF outlines blue tags. Inside the editor only: syntax colours #A626A4 keywords, #50A14F strings, #4078F2 functions, #C18401 types, #986801 numbers, #A0A1A7 comments. No gradients beyond that faint ice wash, no shadow except under the editor window.

Typography: three families. Headlines and section labels in IBM Plex Serif ("IBM Plex Serif", Georgia, serif); the hero headline is italic, weight 300 (the source runs a 340 variable cut), 48px/57.6px at -0.96px, Brand blue, centred on one line. Section headings 25.6px/32px Plex Serif 400 in near-black #16181D; feature titles 15px/22.5px Plex Serif. Body in the duospaced iA Writer Quattro ("iA Writer Quattro", "IBM Plex Sans", system-ui, sans-serif): lede 16px/24px at -0.4px, nav and buttons 14px/20px at -0.35px, feature descriptions and the availability line 13px/19.5px, editor chrome 10–12px. Keycaps and code in IBM Plex Mono 11–12px. Never set body text above 16px or below 13px outside the editor.

Layout: a 1440px viewport framed like engineering paper. A 1120px content column runs from x 160 to x 1280, bounded by 1px Rule rails, with outer rails at x 48 and x 1392; 32px bands of 45° hatching sit just outside the column in the hero, and the outer margins carry a faint 16px grid. Every horizontal section boundary is a full-width 1px Rule line, and each rail crossing gets a small 7px open circle node. Corners are 2–4px everywhere, 6px on the editor window — never rounder.

Header: 57px, Canvas, 1px Rule bottom border; content inside the 1120px column with 14px left padding. At x 174 a 24px square blue outline mark beside the Lathe wordmark (21px Quattro, near-black). Then 32px-tall nav items 9px apart: Product ⌄, Resources ⌄, Plugins, Docs, Pricing, a 16px divider, and a triangle-icon Relay link. At the right, ending at x 1268: a search icon with a keycap reading Ctrl + Shift + P, a Sign up link with an S keycap, and a 32px Brand Download button with a D keycap. Keycaps: 20px tall, IBM Plex Mono 11px, 1px #B2B5BB border, 2px radius, half-transparent white fill (on the blue button a 10% white fill and white border).

News bar: a 36px Ice-tinted strip inside the column under the header, centred 14px Plex Serif at +0.35px: Brand News: then near-black Relay is now in public beta. Try it today. and an arrow.

Hero: the column from y 94 to y 542 over the 16px graph grid, with a faint 8%-opacity blue linework figure (nested rotated hexagons, axes and dotted circles, 1139px, centred) behind it. Headline top at y 211 — Your quick, quiet editor. Lede at y 277, 512px wide, two lines: Lathe is a minimal code editor turned for speed and for pairing with people and AI. At y 357 two 36px buttons 8px apart: Brand Download now with a download icon and a D keycap, and a ghost Clone source (50% white fill, 1px Line border, branch icon, C keycap). At y 405 the 13px line Available for macOS, Linux, and Windows.

Feature row: y 542 to y 640, three columns of 373px split by 1px Rule lines, 24px padding, no icons, no cards: Fast, Agentic, Shared — each a 15px Plex Serif title over a two-line 13px Quattro description.

Editor preview: from y 640, a 116×27 Watch demo tab hangs from the line at the column's centre (1px Rule border, no top border, 0 0 4px 4px radius), and a 1088px light editor window starts at x 176, y 656 — #FAFAFA chrome, 1px #C9C9CA border, 6px radius, shadow 0 10px 15px -3px rgba(0,0,0,0.1). Inside, three panes drawn in HTML: a 255px thread sidebar (traffic lights, search, four agent threads with branch, diff counts and ages, the first selected), a 369px agent panel (breadcrumb, the thread title, a bordered prompt, three tool-call rows and a reply), and a code pane with tabs, a path bar and numbered TypeScript with a highlighted caret line.

Testimonials (id voices): the centred two-line heading Trusted by careful developers and serious teams, a row of six invented grey wordmarks, then a three-column masonry of white cards (1px Rule border, 2px radius, 24px padding, 15px Plex Serif quote, 32px avatar, 13px name, 12px Quiet role); the centre card is taller, with a Brand-highlighted sentence.

Features (id features): the heading Lathe just works with a 13px lede and two outline buttons (View roadmap ›, View releases ›), then a grid inside ruled cells: two large screenshot-style editor cards (Parallel agents, Debugger) and six small ones (Agentic editing, Native git, Edit prediction, Remote development, Multibuffers, Vim mode), each a dark #282C33 editor thumbnail over a 15px serif title and 13px description.

Open source (id community): a grid-paper band with a centred Brand Plex Serif heading Open source, a 13px line, two rows of small square contributor avatars drawn as coloured initials, and four 0-style counters in Plex Mono (Forks, Stars, Contributors, PRs merged last month).

AI (id ai): the heading AI that works the way you code, a Learn about AI in Lathe › button, and a split block: left an accordion (Agentic editing open with a 15px serif title, 13px text and a Brand Learn more › link; Edit prediction, Inline assist and Any agent, any tool collapsed with + toggles); right a framed dark editor window on a grid.

Extensions (id plugins): the heading Growing plugin ecosystem with Create plugin › and View all plugins › buttons, then a 4-column grid of white plugin cards (name, one-line description, author, download count with a download glyph) fading out at the bottom.

Closing (id download): the 2-line 'Built with care' block, a white letter card (A LETTER kicker, From the team in 25.6px serif, two paragraphs, a signature line), then a centred 96px dark rounded app icon with the blue mark, the Brand heading Daily drive with Lathe, a 13px line and the two hero buttons again.

Footer: a full-width Brand #1348DC band in white type: Lathe Labs © 2026 at the left, five link columns (Product, Resources, Company, Social) in 13px Quattro with Plex Serif 15px titles, and a large faint outlined repeat of the mark across the bottom.

## 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, rail position, radius and spacing token. Render the page as a server component; the only client code is the keyboard shortcuts behind the keycaps, the AI accordion and the editor's caret blink. Self-host IBM Plex Serif (300 italic, 300, 400), iA Writer Quattro (400) and IBM Plex Mono (400), all SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the mark, rails, hatching, grid, hero linework, editor window, avatars, wordmarks and icons in HTML, CSS and inline SVG — never a bitmap or screenshot. 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 Lathe clearly fictional and rebrandable: no real company, customer, person, testimonial or logo, and no source screenshot, product name or copy; editor contents, thread titles, plugin names and contributor avatars are all invented. Text pairs clear WCAG AA: #3A3D43, #5D636F and #6A7282 on #F4F4F2 and #FFFFFF; #1348DC on #F4F4F2 and #FFFFFF; #FFFFFF on #1348DC. Brand blue is the only saturated fill and never colours body text. The keycaps are real shortcuts: pressing D focuses the download button, C the clone link, S sign up, and Ctrl + Shift + P opens an in-page command palette listing the page's anchors; all ignore keystrokes inside inputs. Every link leads to a real anchor on the page; the page loads no analytics or tracking script and shows no cookie banner. Every control shows a 2px #1348DC focus ring with a 2px offset. Motion: the editor caret blinks, the agent's tool-call rows tick in one after another once on load, and buttons darken to #053794 on hover in 120ms — all of it stops under prefers-reduced-motion, and every word is visible without JavaScript. At 360px the rails collapse to 16px gutters, the header becomes the mark, Download and a Menu button, the headline drops to 34px/40px and may wrap, the buttons stack full width, the feature row and every grid stack to one column, the editor shows only its code pane, 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.