GitButler

An original Hitchrail page on warm Paper: a 100px navigation with a serif wordmark and rail mark, six Inter links and two small buttons (outlined Sign up, teal Log in); a two-line 82px serif headline whose italic last word sits on an aqua brush stroke; a pill CLI/App toggle beside a warm-gray paragraph; a graphite install panel with a curl command and an outlined docs tile; a full-width charcoal terminal showing invented branch lanes; then a contiguous feature tab row, a hairline feature grid, an aqua comparison table, a teal call-to-action band, quotes and a footer.

• Best forDeveloper tools, CLIs, Git clients and agent infrastructure that want to read as editorial and crafted rather than neon — products whose terminal session is the best hero image.
• 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 and spacing token. Render the page as server components; only the CLI / App toggle and the feature tabs need client state, and both work without JavaScript as static markup. Self-host Instrument Serif (regular and italic), Inter (variable) and Geist Mono (variable) as woff2 through next/font/local — no remote font request. Draw the rail mark, nav glyphs, line icons, brush highlight and the whole terminal session as HTML, CSS and inline SVG with fixed data committed in the source, so the markup is deterministic between renders. Provide page metadata. Build and run the production page before capturing its preview.

Build the "GitButler" kickstart — A paper-and-ink developer-tool landing page: an 82px editorial serif headline with one italic word over an aqua brush stroke, a pill CLI/App toggle, a graphite install panel and a charcoal terminal demo on a warm off-white canvas.

## Design
Build a rebrandable landing page for a version-control tool built for AI coding agents.

Create a complete landing page for Hitchrail, a fictional Git client that gives every coding agent its own branch lane: stacked and parallel lanes in one working copy, endless undo, and a CLI called hr. This is a concept presentation, not a real company — no real customers, people, metrics or awards. Use original branding, artwork and copy throughout.

Color: Paper #F3F2F1 is the page canvas — never pure white. White #FFFFFF is terminal chrome, cards, the docs tile and table rows. Ink #1C1917 is headings, navigation, body text, icons and outlined borders. Warm Gray #7C716A is explanatory copy and secondary links. Rule Gray #CAC6C3 is every 1px border and grid divider; Steel #AAA29D is inactive icons. Butler Teal #25B1B1 fills the Log in button and the call-to-action panel, with White #FFFFFF labels; Deep Teal #1D8A8A is pill text and check marks; Aqua Mist #D3F3F3 is the comparison wash; Outline Aqua #9FE4E4 is the brush highlight behind the italic headline word and terminal command accents. Charcoal #272321 is the terminal screen and Deep Graphite #3A3532 the install panel and the active toggle segment. Teal is punctuation, never a universal fill; no gradients beyond the terminal title bar, no semantic red or green.

Typography: headings in "Instrument Serif", "Times New Roman", serif at weight 400 only (a free stand-in for a narrow, high-contrast editorial serif), with its italic for one emphasised word per heading; everything else in Inter, system-ui, sans-serif; commands in "Geist Mono", ui-monospace, monospace at 14px/21px. Hero headline 82px/82px, -0.01em; section headings 60px/60px; install-panel title 48px/48px; toggle labels 40px/40px; wordmark 44px/60px, -0.02em. Navigation Inter 500 14px/16.8px; body 400 16px/24px; feature titles 600 18px/21.6px; header buttons 500 12px/14.4px.

Layout: a 955px header column and an 847px content column starting at the same left edge (x 297 at 1440px); feature grid, comparison and call-to-action bands widen to 1280px with 80px page gutters. Radii: 6px header buttons, 20px panels and grids, 16px table, 100px toggle and pills, 8px terminal top.

Navigation: 100px tall with 40px top padding, no rule. Left: the wordmark Hitchrail in the serif beside a 30px Ink rail mark (two posts joined by a crossed hitch). Right, 20px apart: Docs, Source with a branch glyph, Community with a chat glyph, Downloads, Changelog and Blog; then two 28px buttons 8px apart — Sign up outlined in 1px Warm Gray at 40% with Charcoal text, and Log in in Butler Teal with White text and a small enter arrow.

Hero (id top): 52px below the navigation, a two-line 82px headline — Every change kept / on its own Lane, with Lane in italic over a skewed Outline Aqua brush stroke. 32px below, a row: a pill toggle (1px Rule Gray, 8px padding) with CLI active in Deep Graphite and App inactive, both 40px serif; then a 500px Warm Gray paragraph: Hitchrail gives every agent its own branch lane, so parallel edits land without merge conflicts. Works with any Git repository and your existing review flow. Sample figures at lanebench.example (underlined).

Install row (id docs): 60px below, a 467×150px Deep Graphite panel (20px radius, 24px 40px 24px 24px padding, a soft inset shadow at its bottom) titled Get the hr CLI in 48px White serif, a White Geist Mono line curl -fsSL https://hitchrail.example/i | sh, an Outline Aqua line or Download the binary with a dotted underline and a down arrow, and a terminal glyph top right; 12px beside it, a 180×150px outlined docs tile with an open-book line icon and View docs with a long arrow at the bottom.

Terminal demo: 32px below, the full 847px column, a Charcoal window with an 8px top radius, a 36px graphite title bar reading Hitchrail CLI in Inter 600 14px with minimise, maximise and an orange close dot, and the shadow 0 1px 6px rgba(0,0,0,.1), 0 24px 44px 3px rgba(0,0,0,.2). Inside, 24px padding of Geist Mono: a White comment # Ask your agent to split, fold, reword or simply land a lane; a teal $ prompt running hr lanes with three aligned rows of invented lane names in Outline Aqua and muted commit counts, authors and times; hr fold a41c into invoice-pdf with its result; and a block cursor.

Feature tabs: a contiguous row of six tabs — Agent Recipes (selected: White fill, a 4px Butler Teal top rule), Stacked Lanes, Parallel Lanes, Endless Undo, Easy Rewording, Scriptable — on Paper with 1px Rule Gray borders, 20px outer corners, a Steel line icon over an Inter 600 14px label.

Feature grid (id features): a 120px gap, then the 60px heading Everything your history always needed with always needed in italic, and a 1280px two-row, three-column grid with 1px Rule Gray dividers and 20px outer corners: Stacked Lanes, Parallel Lanes, Endless Undo, Readable Lanelog, Gentle history edits, Agent-ready — each with a Warm Gray line icon, an Inter 600 18px title, 15px/22.5px copy and a tiny [↗] at the top right.

Comparison (id compare): an Aqua Mist band (20px radius, 58px 32px padding) headed What Hitchrail adds to Git with Hitchrail in italic, over an 847px White table (16px radius, Rule Gray rows, a Paper header row) comparing Git and Hitchrail with Deep Teal check marks and Steel dashes.

Call to action (id start): a Butler Teal band with a 60px White heading Give every agent a lane, an Aqua Mist line of copy and a White pill button with Deep Teal text, Read the guide.

Quotes (id quotes): two invented quotes in Inter 16px/24px Ink, 32px apart, each with a Warm Gray name and sample company.

Footer: a 1px Rule Gray rule, Hitchrail — a fictional sample company. in Warm Gray, and a short row of links.

## 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 and spacing token. Render the page as server components; only the CLI / App toggle and the feature tabs need client state, and both work without JavaScript as static markup. Self-host Instrument Serif (regular and italic), Inter (variable) and Geist Mono (variable) as woff2 through next/font/local — no remote font request. Draw the rail mark, nav glyphs, line icons, brush highlight and the whole terminal session as HTML, CSS and inline SVG with fixed data committed in the source, so the markup is deterministic between renders. 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 Hitchrail clearly fictional and rebrandable: no real company, logo, CLI name, customer, person, benchmark or copy; every lane name, commit, author, quote and figure is invented, the benchmark link points at an example domain, and the terminal carries an aria-label saying it is sample data. Butler Teal is used only for the Log in button, the call-to-action band and small accents; never on every card. Serif headings stay at weight 400. Every link leads to a real section on the page; the install command, buttons and toggle do not download, submit or store anything. Content is initially visible — no typing animation, autoplay, counters, parallax or scroll reveal. Every control shows a 2px Ink focus ring with a 2px offset; the toggle and tabs expose aria-pressed / aria-selected. Body text pairs clear WCAG AA; decorative glyphs are hidden from assistive technology. At 360px the navigation collapses to the wordmark, a Menu button and Log in, the headline drops to 48px/48px on three lines, the toggle and paragraph stack, the install panel and docs tile stack full width with the command wrapping, the terminal scrolls horizontally inside itself, the tabs become a horizontal scroller, the 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.