# Relay — AI SaaS Landing Page Template

> For support-agent products that must show their work: an AI SaaS landing page template with four bounded billing workflows and a sample run. 7 routes.

- Price: $29, one-time
- License: Standard
- Version: 2.7.2
- Category: SaaS landing page
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15, React >=19, Tailwind CSS >=4
- Dependencies: `lucide-react`

## What's inside

- 7 pages
- 42 components
- 64 design tokens plus 64 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `agent-hero`, `outcome-band`, `how-it-works`, `boundary-grid`, `integrations`, `cta`, `site-footer` |
| `/product` | `site-header`, `conversation-thread`, `tool-timeline`, `agent-flow`, `handoff-panel`, `guardrails`, `cta`, `site-footer` |
| `/security` | `site-header`, `scope-ledger`, `guardrails`, `audit-record`, `cta`, `site-footer` |
| `/pricing` | `site-header`, `price-estimator`, `pricing-table`, `faq`, `cta`, `site-footer` |
| `/contact` | `site-header`, `support-desk`, `cta`, `site-footer` |
| `/templates` | `site-header`, `template-index`, `cta`, `site-footer` |
| `/components` | `site-header`, `ui/page-hero`, `agent-hero`, `outcome-band`, `how-it-works`, `boundary-grid`, `integrations`, `conversation-thread`, `tool-timeline`, `agent-flow`, `handoff-panel`, `guardrails`, `scope-ledger`, `audit-record`, `pricing-table`, `price-estimator`, `support-desk`, `template-index`, `faq`, `cta`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `site-header` | Sticky nav: wordmark, four destinations, sign-in and trial CTA, plus a JS-free <details> mobile menu |
| `agent-hero` | Headline, lede, two CTAs and three risk-reversal notes offset into columns 2-7 of a twelve-column grid, beside a sample ticket card that overhangs the container and shows a Stripe tool call fixture, over a routing-trace field masked out of a colourless PNG so the token inks it |
| `outcome-band` | Headline percentage at the page's one oversized step with the named customer quote that explains it, plus the run on this page reported as its own numbers |
| `how-it-works` | Three numbered steps — reads the account, drafts with a citation, stops at your line — in a hairline-split row |
| `boundary-grid` | Two honest columns weighted 7/5 like the claim they carry: eight ticket types the agent closes, six it always escalates, with the dollar thresholds stated |
| `integrations` | Six sample systems on the wide rail, each with a lucide glyph and its access level as a badge - read only, read plus write, write only |
| `conversation-thread` | The full transcript of one ticket: five turns across customer, agent and human, three tool calls with arithmetic that reconciles, a linked policy citation and the escalation that ends it - and in lead mode it opens /product with the page title set into the card's own header rail and the run's five-row ledger sticky beside it |
| `tool-timeline` | The same run as a timed log, broken out of the container so the offsets sit in the page margin - eight nodes on a hairline rail with offset, differentiated glyph, tool name, result, duration and what a person would have seen, ending on the amber handoff node |
| `agent-flow` | The agent's decision flow as a Wire Diagram figure rendered from src/assets/agent-loop.wire.json - eight nodes including the loop back to the start, down to one policy check that forks 2:1 into a cool resolve branch and an amber human branch, with a text alternative in a disclosure |
| `handoff-panel` | The escalation as the human sees it in an 8/4 split: who owns it, the four facts gathered, the drafted reply with approve and edit actions, the rule that stopped it, and a queue rail with a designed empty state |
| `guardrails` | Four named rules — refund ceiling, policy threshold, read-only credential, audit retention — stated as configuration rather than promises |
| `scope-ledger` | The write-path Wire figure, then eight named access scopes on the wide rail, each with the system it reaches, a read or write badge, the kind of credential it is held under and the objects it touches, closing on the note that no scope reaches the primary database - it opens /security, so the figure is the first thing a reviewer sees |
| `audit-record` | The retention period at the page's one oversized step beside one sample row of the audit log, the blocked call from the shipped run, printed field by field with a link to the other seven |
| `pricing-table` | Three plans priced per closed ticket with included volume and overage, one featured card emphasised by a filled neutral header rather than colour, and a full-bleed band giving the zero-cost escalation model a whole register |
| `price-estimator` | A range slider over monthly closed tickets that prices both metered plans from the rates on the plan cards, names the cheaper one with its effective per-ticket cost, and hands off to sales past ten thousand - it opens /pricing with the title folded into its control column, and it is one of the theme's three client islands |
| `support-desk` | Four addressed support desks on the wide rail, each with a named owner and a stated answer window, over a 5/7 block carrying the median first reply at the page's oversized step beside the registered entity, office, data region and controller - it opens /contact and carries its heading |
| `request-form` | A 4/8 request block whose submit is validated in the browser's own constraint gate, refuses with one sentence per field and a linked summary, and receipts the chosen desk's address, named owner and stated window while saying in words that nothing was transmitted |
| `template-index` | Local workflow library with labelled search, risk filters, polite result count, removable filters, selected evidence, an explicit no-result recovery and one justified client-state boundary |
| `faq` | Six JS-free <details> questions with an animation-free plus/minus swap |
| `cta` | Closing panel: one headline, one primary action and the trial terms |
| `site-footer` | Brand blurb, four link columns and a non-interactive status line |
| `ui/button` | Anchor or button in primary/secondary/ghost at three sizes, driven by the primary-hover and primary-active state ramp, with a motion-safe press, disabled and pending states — pending swaps the variant colour for the info surface, keeps its label, sets aria-busy and refuses a second press — and a visible focus outline |
| `ui/badge` | Monospace pill in neutral, accent, outline, info, positive, warning or critical tone for access and status labels |
| `ui/container` | The single content column: max-w-6xl with the shared gutter rhythm |
| `ui/logo` | The relay mark plus wordmark, and a mark-only export used as the agent's avatar — the only hand-drawn SVG in the theme |
| `ui/section-heading` | Eyebrow, heading and lede at the one shared type scale, left or centred, as an h2 or as the page's h1 one step up when the section opens a page |
| `ui/page-hero` | Masthead primitive: eyebrow, title and lede in columns 1-7 with the facts as a labelled column on the right - it opens the /components styleguide, and it is there for pages a buyer adds rather than a lid every marketing page wears |
| `ui/mode-toggle` | Light and dark toggle: a sun or moon stating the current mode with aria-pressed beside it, writing the mode class onto the nearest .tt-relay wrapper or onto the document when the theme runs standalone |
| `ui/chat-turn` | One transcript row — role avatar, author, timestamp, optional status chip, body — in customer, agent or human role, with the theme's single ambient streaming indicator and its visible label |
| `ui/tool-call` | One tool invocation: name, arguments, returned line and duration, in a scrollable monospace block one radius step inside its parent |
| `ui/wire-figure` | The Wire Diagram renderer: a top-down figure with weighted or equal forks, native multi-parent back edges, branch badges carrying their published share, amber on every human node, and a generated text alternative in a disclosure |
| `ui/template-summary` | Selected workflow identity, automated or human outcome, sample ticket, risk, amount, approver and terminal close condition |
| `ui/boundary-matrix` | Focusable semantic table of allowed, conditional and denied sample tools with exact rules and contained narrow-screen scrolling |
| `ui/example-run` | Ordered UTC sample events that distinguish success, policy denial, tool failure, approval timeout, voluntary escalation and handoff |
| `ui/handoff-contract` | Ready, complete, missing-context or retry handoff payload with named owner, destination, attached evidence and recovery |
| `ui/field` | The field shell on tt-ui: a mono label, an optional marker in words, the read-only sentence, and one message line whose id never changes as it carries the hint, the error or the receipt - around a native input, textarea or select the theme still styles itself, in rest, invalid, valid, read-only and disabled surfaces |
| `ui/template-checklist` | Sample, configured and frontend-only buyer setup states with the missing implementation boundary in text |
| `ui/accordion-disclosure` | A ruled FAQ row, a bordered card under a diagram and the header's mobile sheet, all closing on Escape with focus back on the summary |
| `ui/toggle-group` | The risk filter as a real radio group — one tab stop, arrow keys, selection following focus, and a selected surface rather than a tint |
| `ui/unavailable-action` | A depicted action the demo does not perform, drawn as a dashed aria-disabled non-control with the boundary named beneath it |
| `ui/form-error-summary` | The critical panel a refused submit lands on: one ordered row per failed field reading as that field's own sentence, each a real link to the control it names, inserted into the document rather than revealed so it is announced once and on the submit that matters |
| `ui/form` | The submit flow: constraint validation left to the browser and re-worded by the theme, one failure sent to its control and several to the summary, a fieldset that carries disabled and aria-busy together, and a receipt that exists before focus is moved to it |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#dfe7f2` | `#0d1117` |
| `--foreground` | `#121820` | `#e2eaf5` |
| `--card` | `#f5f9ff` | `#1b212a` |
| `--card-foreground` | `#121820` | `#e2eaf5` |
| `--primary` | `#b17000` | `#eba54c` |
| `--primary-foreground` | `#050301` | `#1a1103` |
| `--primary-hover` | `#c58220` | `#ffb862` |
| `--primary-active` | `#d99439` | `#ffd3a2` |
| `--secondary` | `#cdd8e7` | `#232b36` |
| `--secondary-foreground` | `#2a323d` | `#c4cfdd` |
| `--muted` | `#d6dfeb` | `#0f141b` |
| `--muted-foreground` | `#505c6b` | `#94a0b0` |
| `--accent` | `#f4e2c5` | `#3c2b1a` |
| `--accent-foreground` | `#8c5800` | `#f0b56f` |
| `--border` | `#becada` | `#2d3643` |
| `--ring` | `#805000` | `#eba54c` |
| `--field` | `#f5f9ff` | `#111820` |
| `--field-border` | `#68788c` | `#73839a` |
| `--control-border` | `#718196` | `#66778d` |
| `--control-hover` | `#d7e1ee` | `#26303d` |
| `--control-active` | `#c6d2e2` | `#303c4b` |
| `--selection` | `#c8d9ec` | `#23364a` |
| `--selection-foreground` | `#172536` | `#dbe9f7` |
| `--selection-border` | `#526f8e` | `#7699bd` |
| `--info` | `#295b74` | `#9bcfe4` |
| `--info-soft` | `#dcecf3` | `#1b2d35` |
| `--info-border` | `#5b8294` | `#5a91a8` |
| `--positive` | `#245c3e` | `#9fd9b7` |
| `--positive-soft` | `#dcefe4` | `#1c3026` |
| `--positive-border` | `#56816a` | `#5c9a78` |
| `--warning` | `#68448b` | `#d9b9f2` |
| `--warning-soft` | `#ece2f5` | `#2f2239` |
| `--warning-border` | `#8c70a8` | `#9670b2` |
| `--critical` | `#8a2b3e` | `#ff9cae` |
| `--critical-soft` | `#f6dde3` | `#38191f` |
| `--critical-border` | `#ad6170` | `#b75569` |
| `--shadow-color` | `#0d1623` | `#010611` |
| `--surface-tint` | `#d8dfe8` | `#22272e` |
| `--radius` | `0.625rem` | `0.625rem` |
| `--display-weight` | `600` | `500` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.25` | `1.25` |
| `--tracking-d1` | `-0.01em` | `-0.01em` |
| `--text-d2` | `clamp(1.5rem, 1.376rem + 0.53vw, 1.8rem)` | `clamp(1.5rem, 1.376rem + 0.53vw, 1.8rem)` |
| `--leading-d2` | `1.2` | `1.2` |
| `--tracking-d2` | `-0.01em` | `-0.01em` |
| `--text-d3` | `clamp(1.8rem, 1.651rem + 0.637vw, 2.16rem)` | `clamp(1.8rem, 1.651rem + 0.637vw, 2.16rem)` |
| `--leading-d3` | `1.15` | `1.15` |
| `--tracking-d3` | `-0.02em` | `-0.02em` |
| `--text-d4` | `clamp(2.16rem, 1.981rem + 0.764vw, 2.592rem)` | `clamp(2.16rem, 1.981rem + 0.764vw, 2.592rem)` |
| `--leading-d4` | `1.1` | `1.1` |
| `--tracking-d4` | `-0.025em` | `-0.025em` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--tracking-label` | `0.1em` | `0.1em` |
| `--font-text` | `var(--font-public-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` | `var(--font-public-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-jetbrains-mono), ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace` | `var(--font-jetbrains-mono), ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/relay.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/relay](https://tailthemes.com/api/download/relay)

## Links

- Product page: [https://tailthemes.com/themes/relay](https://tailthemes.com/themes/relay)
- Live preview: [https://tailthemes.com/preview/relay](https://tailthemes.com/preview/relay)
- Docs: [https://tailthemes.com/docs/relay](https://tailthemes.com/docs/relay)
- Manifest JSON: [https://tailthemes.com/api/themes/relay](https://tailthemes.com/api/themes/relay)
- Registry item: [https://tailthemes.com/r/relay.json](https://tailthemes.com/r/relay.json)