sent here for Relay
ai saas landing page template · React and HTML source
RelayAI SaaS landing page template
An AI SaaS landing page template for support-agent products.
- 64 / 64
- 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 21 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
Templates for bounded billing workflows/templates- site-header
- template-index
- cta
- site-footer
The parts — living styleguide/components- site-header
- ui/page-hero
- agent-hero
- outcome-band
- how-it-works
- +16
Relay ships seven frontend routes, four bounded billing workflow fixtures, a five-turn sample transcript, an ordered sample run log, explicit tool and policy boundaries, researched human handoff states, two canonical Wire Diagram graphs, a local price calculator and a living component styleguide. The templates route distinguishes automated success, policy denial, tool failure, approval timeout and voluntary escalation without implying a ticket backend or policy engine. Self-hosted Public Sans and JetBrains Mono, a 1.200 type scale, semantic Tailwind v4 tokens, one amber human-action mark, and complete light and dark modes verified against WCAG AA by computation. A framework-free HTML template edition ships the same seven routes as compiled documents with local fonts and vanilla JavaScript, plus the Nunjucks source that produced them.
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. 27 frames cover them, with 17 primitives sharing the ui/* frame.
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
An AI SaaS landing page template for support-agent products.
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.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdCompose 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-section/SKILL.mdAdd 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-quality/SKILL.mdRun Relay's own gate locally
- rebrand/SKILL.mdApply a buyer's brand to Relay
- src/
- theme.css64 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/7 files
- components/21 files
- ui/23 files
- assets/2 files, 1 markdown file, 1 image
- fonts/2 font files, 2 licenses
- app/7 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/7 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
Your key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
42 components, 7 pages and 64 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
A SaaS is two builds, not one.
Relay is the site that sells the product. Appetite is the thing people log into once they have paid — same Tailwind version, same token architecture, so the two halves can be made to look like one company.
activity
- v2.7.2: Light mode's button is a true amber, the product page opens on the transcript beside the run's numbers, and the pricing card, footer and template checklist stop stretching.
- v2.7.1: The boundary table and tool results fit every width, the hero reply has its missing space, and the header's trial button is quiet so each page has one fill.
- v2.7.0: The form layer arrives — field, form and error summary from the library, and the HTML edition's inversion ends
- v2.6.0: Disclosure heights, a mobile menu that opens and closes, and a focus ring that stops fading
- v2.5.1: The add-page skill can no longer walk an agent into the parity gate; the HTML edition is documented across the doc set
- v2.5: A field family with invalid, read-only and submitting states, and a busy button
- v2.4: Separate Nunjucks source and framework-free HTML output for every route
- v2.3: Bounded billing workflow fixtures, exact tool rules and researched handoff states
- v2.2 — canonical Wire figures, /contact, the closed-tickets calculator
- v2.1 — /security: scopes, guardrails, the audit record
- v2.0 — Public Sans/JetBrains type, deep-paper sheet, four tellings of one ticket
- v1.2 — generated routing field behind the hero, token-inked
- v1.1 — agent decision flow from Wire Diagram JSON
- v1.0.0 — agent UI sections: thread, run log, handoff
- connect sample workflow fixtures to a buyer support backendplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
