Tailscale

An original Knotwork homepage: a 54px graphite announcement bar in uppercase mono; a 75px white header with a four-node knot mark, six 14px links with plus signs, Log in and a dark Get started button; a bone-white hero with a centred two-line 64px headline, a three-line 20px subline, a dark button and an underlined text link; a five-cell product row whose first cell is filled signal red; a white 32px-radius product panel with a red mono eyebrow, a 48px heading, a list led by small red shapes and a laptop drawn with a red screen and a floating status card; then three white customer-proof cards with big figures, a wall of invented wordmark tiles, a graphite closing band and a footer.

• Best forMesh VPNs, zero-trust access, infrastructure and network tooling, device fleets and any developer platform that wants a calm, document-like light page with a single red accent.
• 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; the only client code is the product row's cell selection and the header's scroll rule. Self-host Inter (variable) and JetBrains Mono 500, both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the knot mark, icons, laptop, app window and status card as 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 "Tailscale" kickstart — A warm bone-white canvas under a graphite mono announcement bar: a centred two-line 64px Inter headline in weight 500, one dark 8px-radius button beside an underlined link, a row of five feature cells with the first filled signal red, then a 32px-radius white product panel with a red-screened laptop and a floating status card.

## Design
Build a rebrandable landing page for a zero-trust private networking platform for teams. IT, security and platform engineers use it to put every laptop, server, CI runner, edge device and AI agent on one identity-based private network — sold on how quiet it is: minutes to install, no VPN concentrator, one policy file.

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

Color: warm paper, graphite ink and one red. Bone #F9F7F6 is the page canvas everywhere — never stark white for the page, and no dark/light band alternation until the closing band. Paper #FFFFFF is every lifted card, the header and the product panel. Ink #181717 is headings, nav and icons (never pure black). Graphite #2E2D2D is the hero headline colour, the announcement bar and the closing band. Charcoal #575555 is the subline, descriptions and list text. Ash #706E6D is captions. Hairline #EEEBEA is every border and the status table header. Button black #1F1E1E fills every primary button with white text. Signal red #C8433C is the only chromatic voice: the first product cell's fill (with #FFFFFF text), the panel eyebrow, the small bullet shapes and the red laptop screen — at most one red element per row, never a button, never a link. Network blue #5A82DE, violet #7A5BC9 and green #2E8A5B appear only as 1.5px line icons in the product row and inside the drawn app UI.

Typography: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif for everything except eyebrows; letter-spacing -0.01em at every size. Display text is weight 500 — never 600 or bold. Hero 64px/70.4px 500; panel headings 48px/52.8px 500; proof figures 64px/70.4px 500; subline 20px/24px 500; body and list 16px/24px 400; product-cell titles 16px/24px 600; descriptions 14px/21px 400; nav and the Log in link 14px/21px 500; buttons 16px/16px 500. Eyebrows and the announcement bar use "JetBrains Mono", ui-monospace, Menlo, monospace at 500, uppercase, +0.05em: 12px/18px in the bar, 14px/14px for eyebrows.

Layout: a 1440px viewport with 64px side margins, so content spans 1312px; inner sections narrow to 1248px. Radii: 8px buttons, 16px cells, cards and tiles, 32px for the product panel and closing band. The only elevation is rgba(24,23,23,0.02) 0px 4px 8px 0px. Sections sit 96px apart.

Announcement bar (id top): 54px tall, Graphite, 70px side padding. Left: a 14px lilac sparkle glyph, then CATCH UP ON EVERYTHING FROM KNOTWORK FIELD DAY. in white mono, then 18px later READ THE NOTES → at 70% opacity, underlined. Right, ending at x 1370: BLOG, DOCS, DOWNLOAD, CONTACT SALES at 70% opacity, 24px apart.

Header: 75px tall, Paper, 64px side padding. At x 64 a 30px knot mark — four Ink dots on the corners joined by an X, with one Signal red dot at the centre — then knotwork in 27px 500 lowercase at -0.035em. The links start at x 337: Platform +, Solutions +, Customers +, Community +, Partners +, Pricing, each 10px 12px padding with the plus sign lighter. Right-aligned to x 1376: a Log in text link, then the Get started — it's free primary button.

Hero: Bone, 72px top padding, centred. The headline top at y 201: The quiet private network for / every machine your team runs, in two lines, Graphite. 24px below, a 768px Charcoal subline in three lines: An identity-based mesh that retires your legacy VPN and bastion hosts, and links laptops, cloud servers, CI runners, edge devices and AI agents in minutes — with one policy file. 24px below, centred with an 8px gap: the primary button Start connecting machines and the underlined text link Talk to sales.

Product row (id platform): 64px below the buttons, a five-column grid, 8px gaps, each cell 256×150 with a 16px radius. Cells: Team VPN (globe icon) — Private access to apps and data from anywhere.; Privileged Access (violet sliders) — Logged sessions for SSH, clusters and databases.; Agent Guardrails (blue shield) — See and scope what every AI agent can reach.; Infra Access (green plug) — Reach every server directly. No jump boxes.; Zero Trust Mesh (violet pulse) — Least privilege, enforced by who you are. The first cell is the selected one: Signal red fill, white icon, white text. The others are transparent on Bone. Selecting a cell swaps the panel below.

Product panel (id product): 13px below the row, a Paper card spanning 1312px, 32px radius, 1px Hairline border, 99px top and 64px side padding, 640px tall. Left column 362px: the mono eyebrow PRODUCT in Signal red, 12px below a 48px Ink heading Team VPN, 32px below a list of five 16px Charcoal lines, each led by a 10px Signal red shape that rotates through triangle, circle and square: Remote access for a team on every continent; Replace the VPN concentrator nobody wants to patch; Reach clusters, databases and on-prem racks wherever they live; Connect SaaS and vendor apps without public exposure; Works across one cloud or five. 32px below, the primary button Connect your team. Right, from x 450 inside the panel: an 800px laptop drawn in CSS — a #1B1A1A bezel with 22px top corners, a screen washed in a diagonal deep-red gradient, and a white app window listing six machines (nora-mbp, ci-runner-04, pg-primary, edge-cluster, kiosk-pi-12, review-agent) with 100.x addresses and a detail pane of grey skeleton lines. Overlapping the laptop's top right, a 296px floating status card titled Knotwork Status with a dark knot glyph, a green Syncing groups from directory line with a blue Configure link, and a Metric / Status table: Connection Online, Latency 19ms, Device posture Passing, Address 100.84.12.7.

Customer proof (id customers): a centred two-line 64px heading — 12,000 teams / run on Knotwork, the first line in Ash — then three Paper cards with a 16px radius and 32px padding: an invented wordmark, a 64px figure (1,400+, 30x, 87%), a 20px/24px 500 Charcoal line (hours saved on connectivity tickets.; machines added without a new IT hire.; fewer access requests reaching the help desk.) and an underlined Read the story link.

Logo wall (id logos): 32px below, three centred rows of 192×72 Paper tiles with a 16px radius and 1px Hairline border, 12px apart, each holding an invented grey wordmark (Halvard, Northbeam, Quillon, Tessaract, Fernway, Marrow & Co, OBSIDIA, Kettle, Pinecrest, Lumen Rail, Orbitly, Sable, Corvid, Brightwater, Kestrel).

Closing band (id start): a Graphite band with a 32px radius inside the 64px margins, 64px padding, a 48px white heading Your network, in one afternoon., a 16px #D5D3D2 line Install on two machines, sign in, and they can already see each other., and a white button with Ink text Start connecting machines.

Footer: Bone, a Hairline top rule, 64px top padding, a six-column grid — the knot mark with © 2026 Knotwork, then Product, Solutions, Developers, Company and Legal columns with 14px 500 Ink titles and 14px Charcoal 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, shadow and spacing token. Render the page as a server component; the only client code is the product row's cell selection and the header's scroll rule. Self-host Inter (variable) and JetBrains Mono 500, both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the knot mark, icons, laptop, app window and status card as 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 Knotwork clearly fictional and rebrandable: no real company, customer, person, testimonial or logo, and no source screenshot, product name or copy. Signal red appears at most once per row and never on a button, link or body text on Bone; it carries white text only in the selected product cell (4.8:1). Text pairs clear WCAG AA: #181717 and #575555 on #F9F7F6 and #FFFFFF, #FFFFFF on #1F1E1E and #2E2D2D, #FFFFFF on #C8433C, #C8433C eyebrows on #FFFFFF. Shadows never exceed 2% opacity at rest. The laptop, app window and status card are decorative and hidden from assistive technology. 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 #181717 focus ring with a 2px offset (white on Graphite). At 360px the announcement bar keeps only its message, the header collapses to the mark, Get started and a Menu button, the headline drops to 40px/44px, the subline to 17px, the product row becomes a horizontal scroller of 240px cells, the product panel stacks with the laptop scaled below the list, proof cards stack, the logo wall becomes two columns, 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.