Relay — AI Agent Product Landing
A landing page for an AI agent product that ships the agent UI with it.
- 44 / 44
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 19 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Relay — the billing agent that hands off/
- site-header
- agent-hero
- outcome-band
- how-it-works
- boundary-grid
- +3
Product — inside one agent run/product- site-header
- conversation-thread
- tool-timeline
- agent-flow
- handoff-panel
- +3
Security — every scope, every record/security- site-header
- scope-ledger
- guardrails
- audit-record
- cta
- +1
Pricing — billed on tickets it closes/pricing- site-header
- price-estimator
- pricing-table
- faq
- cta
- +1
Contact — who answers, and when/contact- site-header
- support-desk
- cta
- site-footer
The parts — living styleguide/components- site-header
- ui/page-hero
- agent-hero
- outcome-band
- how-it-works
- +15
One support ticket is told four ways: a live card in the hero, a full five-turn transcript with real Stripe tool calls and a policy citation, a timed run log of every call, and a Wire Diagram decision flow that forks where the agent stops. Two Wire Diagram graphs ship as canonical JSON in Wire's own schema, so a buyer's agent edits the diagrams the way it edits everything else. Plus a handoff panel showing what a human receives, a contact page with named desks and the registered entity, a working light and dark toggle in the navbar, and a price calculator that does the real arithmetic on closed tickets. A cool blue-grey system at OKLCH hue 256 with one amber accent that marks every place a person acts and nowhere else — no purple, no gradients. Every interior page opens on its own instrument rather than a shared masthead: the transcript card on product, the write-path diagram on security, the calculator on pricing, the desk grid on contact. Self-hosted Public Sans and JetBrains Mono, a 1.200 modular type scale on two token ladders, home, product, security, pricing, contact and a living /components styleguide, Tailwind v4 semantic tokens, and complete light and dark modes verified against WCAG AA by computation.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.
agent-hero
src/components/agent-hero.tsx
Headline, lede, two CTAs and three risk-reversal notes offset into columns 2-7 of a twelve-column grid, beside a live ticket card that overhangs the container and runs a Stripe tool call, over a routing-trace field masked out of a colourless PNG so the token inks it
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.2.
Relay
A landing page for an AI agent product that ships the agent UI with it.
const { open, close } = useLedger("2026-03") // 0123456789
- text
- Public Sans
- mono
- JetBrains Mono
No separate display face: the headings are set in the text face.
- d1Ag
- d2Ag
- d3Ag
- d4Ag
- leadAg
- bodyAg
- smallAg
- captionAg
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
agent files in the zip
Unzip it and run it, or install it into a project you already have. Either way the theme arrives with the instructions an agent needs to extend it without guessing at your conventions.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills
- add-pageCompose a new Relay route out of its existing sections, matching the page shell, the background rhythm and the manifest entries of home/product/pricing
- add-sectionAdd a new self-contained section to Relay that matches its existing file, token, rhythm and motion patterns, then wire it into a page, the manifest and the /components styleguide
- check-qualityRun Relay's own gate locally
- rebrandApply a buyer's brand to Relay
- theme.jsontokens, pages and components, machine readable
- src/components/19 sections, 10 primitives
- src/app/6 pages, styleguide included
activity
- v2.2 — canonical Wire figures, /contact, the closed-tickets calculatortoday
- v2.1 — /security: scopes, guardrails, the audit recordtoday
- v2.0 — Public Sans/JetBrains type, deep-paper sheet, four tellings of one tickettoday
- v1.2 — generated routing field behind the hero, token-inkedtoday
- v1.1 — agent decision flow from Wire Diagram JSONtoday
- v1.0 — agent UI sections: thread, run log, handofftoday
- preview screenshots + component capturesin progress
- security page + audit-log sectionplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent files are on the plate above.
comments
Ask about the theme before you buy, or say what you did with it after.
