Resend

Build the "Resend" kickstart — Black velvet with violet neon: a pure black canvas, hairline graphite borders, a white serif headline and code that reads like a terminal in a luxury interface.

## Design
Build a rebrandable developer-tool landing page for a transactional email API.

Create a complete landing page for Inkwire, a fictional email API that developers call from their own code to send receipts, sign-in links and alerts, then watch each message land through delivery events. Its core idea: black velvet with violet neon — a pure black canvas, hairline graphite borders and white serif type, read like a terminal wrapped in a luxury interface. This is a concept presentation, not a real product — no sign-up, pricing, customer logos, awards, real people or real reviews. Use original branding, UI and copy throughout.

Color: near-total darkness. Void Black #000000 is the whole page canvas and every card surface — never off-black, never a tinted gray background. Graphite Hairline #292D30 is the 1px border on every card, button, input, code window and divider; layers separate by that border, never by shadows. White #FFFFFF is for headings and button labels; Bone White #F0F0F0 is body text and the primary reading colour; Ash Gray #A1A4A5 is muted body text, captions and badge labels. Surface Lift #0B0E14 is used only for the selected tab and the code window's header row. Iris Violet #9281F7 is the only brand colour, and it behaves like syntax highlighting: email addresses, string literals, developer identifiers and the active-tab underline — never a button fill, never a large heading. Status colours belong to data only: Delivered green #3AD389, Clicked blue #3B9EFF, Bounced coral #FF9592, Deferred amber #FFC53D, each as a small dot beside a monospaced label. No gradients, glows or chromatic washes on any section background — the canvas is flat black.

Typography: display headlines in a sharp high-contrast serif at weight 400 — "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif — standing in for the source's Domaine: 96px/1.0 at -0.01em (-0.96px) for the hero, 56px/1.2 at -0.05em (-2.8px) for section headings. Everything functional in one grotesque, Inter, Geist, system-ui, -apple-system, "Segoe UI", sans-serif: 18px/1.5 subheads in Ash Gray, 16px/1.5 body, 14px nav and buttons, 14px weight-500 names, 12px captions. Code, email addresses, event names and status labels in a monospace, "Commit Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace, standing in for Commit Mono: 14px in code windows, 12px for badges and labels. Never bold a serif headline; never use a fourth family. Locally hosted fonts only, no remote font request. Shapes: exactly two radii — 6px for buttons, badges, tabs and inputs, 16px for cards and code windows; the hero announcement pill is the single 9999px exception. Spacing: 8px base, 32px card padding, 96px between sections, content in a 1200px column with 48px side padding.

Navigation: transparent on Void Black, no separator, 64px tall. Left: an original wordmark — a small 18px glyph of a nib drawn as two 1.5px White strokes meeting at a point, and inkwire in the grotesque at 18px weight 600, lowercase. Centre: 14px Bone White links — Product, Integrate, Events, Questions — that shift to White on hover. Right: a Log in text link and a ghost Get started button — transparent fill, 1px Graphite Hairline #292D30 border, White text, 6px radius, 8px 16px padding, the border turning White on hover.

Hero (id product): a two-column hero, 560px tall. Left column: a 9999px announcement pill — transparent, 1px Graphite Hairline border, 6px 12px padding, 14px Bone White text Sample · Inkwire Events, now streaming followed by a small Iris Violet chevron; 24px below, the 96px White serif headline on two lines, Mail that / actually arrives.; then an 18px Ash Gray subhead, max 460px, The quiet way to send receipts, sign-in links and alerts from your own code — and see each one land.; then two actions 16px apart: a ghost Get started button (12px 16px padding) and a text link Read the docs with a trailing chevron. Right column: an original isometric parcel drawn in inline SVG — a 360px cube whose three faces are Void Black, Surface Lift #0B0E14 and a slightly lighter #15181D, edged in 1px #6E727A strokes, its top face carrying a thin folded-envelope line and one Iris Violet #9281F7 edge highlight; three small monospaced event tags float around it on 6px-radius hairline badges — email.sent, email.delivered with a Delivered green dot, email.opened. Below the hero, a 1px Graphite Hairline rule and a three-column row of sample figures in 12px uppercase Ash Gray labels over 32px White grotesque numbers — 42 ms sample median send, 99.9% sample delivered, 6 SDKs in the sample — each labelled sample.

Integrate (id integrate): centred, eyebrow INTEGRATE in 12px monospace Ash Gray, a 56px serif heading A few lines, then it ships., an 18px Ash Gray line. Below, a 960px code window — Void Black, 1px Graphite Hairline border, 16px radius — with a Surface Lift header row holding three 8px #292D30 dots and a row of working 6px-radius language tabs (Node.js, Python, Go, Ruby, cURL); the active tab is White on Surface Lift with a 1px Iris Violet underline. The body shows a short numbered send call for the chosen language in 14px monospace: keywords in Bone White, string literals and email addresses in Iris Violet, line numbers in Ash Gray. A footer row reads View the sample · Copy, in 12px Ash Gray. Switching tabs swaps the snippet from local data only.

Events (id events): a 56px serif heading Watch every message land., then a two-column grid of 16px-radius hairline cards with 32px padding. Left card, Test mode: a small inline control showing a Delivered badge, the address [email protected] in Iris Violet and a ghost Send button, above a 16px White title and a 14px Ash Gray description. Right card, Live events: a vertical event log of five rows, each a 6px status dot and a 12px monospace label — email.sent, email.delivered, email.opened, email.clicked, email.bounced — with Ash Gray timestamps, coloured by the status palette. Below, a full-width card with a 16px quote in Bone White, a 32px circular monogram avatar drawn in CSS, a 14px weight-500 name and an Ash Gray role — attributed to a fictional sample persona, labelled sample.

Questions (id questions): a 56px serif heading Questions and native details rows divided by 1px Graphite Hairline rules, 18px White summaries and a thin plus that becomes a minus: Is Inkwire real? — no, it is a fictional concept. Does the code send anything? — no; every snippet and event is sample data. Can I change the languages? — yes, in your own build.

Footer: Void Black, a 1px Graphite Hairline top border, 64px padding, the wordmark, a 14px Ash Gray line Inkwire is a fictional concept. Every address, figure and event is sample content., and 14px Bone White anchor links to Product, Integrate, Events and Questions.

At 760px and below: 16px page padding, the navigation keeps the wordmark and Get started while the links move into a horizontally scrolling row, the hero stacks with the parcel shrinking to 240px under the text, the hero headline drops to 56px and section headings to 40px, the figures row and event cards stack, and the language tabs scroll horizontally inside the code window. The page fits a 360px viewport with no horizontal page overflow. Use semantic landmarks, one h1, a skip link, visible 2px White focus outlines offset 2px on every control, a tablist with arrow-key support for the language tabs, and keyboard-operable disclosures.

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

Use Next.js App Router, React and TypeScript with plain CSS custom properties and original inline SVG for the nib wordmark, the isometric parcel and the chevrons. Preserve equivalent tools already installed in the host project. Render the page as a server component; the only client component is the language tablist in the Integrate code window, which swaps snippets from a local array and sends nothing. Draw the code window, event log and test-mode control in HTML and CSS — no product screenshot image. Native details and anchors need no JavaScript. Self-host the font files — no remote font, image, logo, email backend 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 Inkwire clearly fictional and rebrandable: no Resend wordmark, cube artwork or product UI, no customer or company logos, pricing, awards, review quotes, statistics presented as real, or real people. Every address, snippet, figure and event is labelled sample, and every address uses the reserved sample.dev placeholder domain. Colour stays monochrome with one violet: Void Black #000000 is the canvas and every card; Graphite Hairline #292D30 is every border; White #FFFFFF and Bone White #F0F0F0 carry type; Ash Gray #A1A4A5 is muted text; Surface Lift #0B0E14 is only the active tab and the code header; Iris Violet #9281F7 marks code strings, addresses and the active tab underline only. Buttons stay ghost — never a filled colourful primary. No box-shadows and no gradients on any background. Every link leads to a real section on the page; nothing is sent or stored. Content is initially visible — no scroll reveals, typewriter effects, marquees or parallax; hover and focus are a 150ms ease-out change of border or text colour, disabled for prefers-reduced-motion. WCAG AA contrast on every text/background pair, keyboard-operable tabs and disclosures, and a 360px layout without horizontal page overflow.

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