# RelayCTX — Design Spec v3.5 (CONCEPT)

> **Status: concept / for review.** v3.4 is the current shipped system; nothing here supersedes it until EC signs off. v3.5 lives entirely under `prototype.relayctx.com/web/v35/` and is linked from the prototype gallery ("v3.5 Concepts"). Promote per-surface only on OK, or fold winning pieces back into 3.4.

_Last updated: 2026-06-08_

---

## What v3.5 Is

v3.5 = **v3.4's editorial bones, amplified.** Same design system (tokens, fonts, locked vocab); a bolder, more alive expression. The thesis: v3.4 reads restrained and correct; v3.5 gives the brand a pulse without changing its identity.

The five amplifiers (the v3.5 fingerprint):

1. **Deep accent surfaces.** A rich teal-black gradient `linear-gradient(165deg,#0c1413,#0d2b27 55%,#0d3530)` carries the hero and one or two "drenched" section moments per page. White text, teal-bright `#5eead4` accents. (v3.4 was all-light; v3.5 earns contrast with dark moments.)
2. **The Code as a living object.** Animated Code lifecycle (amber "Awaiting receipt" → green "Received"), traveling packets along the loop / chain, drifting Codes as ambient texture, glow on receipt. Motion is a material, not a decoration.
3. **Bolder type.** Larger Cormorant italic display via `clamp()`, more dramatic scale jumps.
4. **Texture.** Radial teal glows, dashed orbital arcs, mono micro-labels, glass cards on dark.
5. **Warmer voice.** "Pull up a chair. You're early." Punchier, while keeping locked vocab.

**Hard rules carried from v3.4:** locked vocab (Code / Receive(d) / transfer / relay / Item; never "beta"); Early Access = phase, the Loop = 12-month founding membership at sign-up; activation-code access model; honest compliance (no fabricated SOC 2). Every animation has a `prefers-reduced-motion` fallback. Asset paths absolute; pages reuse `/web/marketing/marketing.css` + the `marketing-nav.js` injector.

---

## Tokens & type (unchanged from v3.4 + v3.5 additions)

```
NEUTRAL (base, reused):  bg #ffffff · surface #f7f7f7 · panel #f0f0f0 · border #e4e4e4
                         border-hi #cccccc · text #111 · text-2 #555 · text-muted #999
ACCENT:                  teal #0d9488 · teal-dim rgba(13,148,136,.08) · indigo #6366f1
v3.5 DEEP (new):         gradient #0c1413 → #0d2b27 → #0d3530 · teal-bright #5eead4 · amber #f3b04e
FONTS (unchanged):       Cormorant Garamond italic (display) · Outfit (UI) · JetBrains Mono (Codes/labels)
RIBBON:                  every concept page carries a fixed "v3.5 · CONCEPT" ribbon (indigo, top-right)
```

---

## Surface status

| Surface | Path | Status | Notes |
|---|---|---|---|
| Home | `/web/v35/` | ✅ built | Deep hero + live Code + drifting Codes, tool strip, animated 4-step loop, platform strip (Pulses heartbeat), drenched continuity moment, 3 use-case cards, security strip + shield, deep CTA close. |
| Product | `/web/v35/product/` | ✅ built | Deep hero + live Code card, animated 4-step loop journey (traveling packet + node pulses), drenched "the receipt" moment, MCP integration (client chips + config block), deep CTA. |
| Platform | `/web/v35/platform/` | ✅ built | Deep hero (primitive → platform card), capabilities showcase (Pulses heartbeat, Handoffs span, Provenance span, MCP capstone with tool cloud), drenched MCP integration, CTA. |
| Use cases | `/web/v35/use-cases/` | ✅ built | Deep hero, Create→Relay→Receive flow strip (packet), six characterful scenarios (top-border hover), drenched "same Code moving" + live Code card, CTA. |
| Security | `/web/v35/security/` | ✅ built | Dramatic dark shield hero + cipher shimmer, four pillars, dark animated chain-of-custody timeline, trust grid, honest in-progress compliance. |
| Pricing | `/web/v35/pricing/` | ✅ built (PR #27–#29) | Billing toggle, "Most popular" Team card, full feature-comparison table with explainer tooltips, sticky header, mobile-fit. (Lighter palette so far — could take a deep accent moment.) |
| Register | `/web/v35/register/` | ✅ built (PR #27) | Dark teal brand panel, animated Code lifecycle, "what you unlock", live activation-code hint, warmer voice. |
| Login | `/web/v35/login/` | ✅ built | Deep-accent backdrop, glowing pulsing mark + halo, drifting Codes, glass sign-in card. |
| Loop | `/web/v35/loop/` | ☐ todo | Carry the deep-accent treatment + the founding-membership story. |
| Contact / Docs / Legal | — | ☐ todo | Lower priority; can inherit the chrome. |

---

## Content-feed alignment

These concepts are wired to evolving content. Keep them in sync as feeds firm up:

- **Copy** is the canonical source: `relay-creative/copy/relay-web-copy.md`. v3.5 copy should track it; the warmer voice is a v3.5 layer on top, not a rewrite of the message.
- **Vocab + access model + URL canon:** Relay Creative pulse item `FFFC90` (locked v6). Do not diverge.
- **Pricing data** (tiers, feature matrix) should track the real plan definitions; the feature table + tooltips are the single place to update when pricing firms up.
- **Use cases** track the six canonical scenarios; if the product adds a capability, add a scenario + a Platform capability card together.
- **Animation** beats are specced in `briefs/BRIEF.animations.md` ("Use-cases full spread"); the in-code motion here is the live placeholder for produced assets.

---

## Assets to produce (Figma + media)

For the Figma file (see Relay Creative pulse for the link) and the motion pipeline:

- [ ] **Real product screenshots** — replace the `QNHC2C` Code-figure mockups + the `.ph` "product screenshot" slots (Relay running in Claude Desktop / Cursor).
- [ ] **Full-spread use-cases motion** — produced Lottie/MP4 per `BRIEF.animations.md`; drops into the `.ph` slot on the use-cases page.
- [ ] **Social-proof** — real logos + a testimonial (currently placeholder slots).
- [ ] **v3.5 token additions in Figma** — the deep gradient + `#5eead4` teal-bright + `#f3b04e` amber as variables, so design + code stay aligned.
- [ ] **Shield + Code-lifecycle marks** — vectorize the shield and the awaiting→received states as Figma components for reuse (deck, app, console).

---

## Open decisions (need EC steer)

- **Dark accent panels** — v3.5 introduces dark/drenched moments (a departure from all-light v3.4). On-brand, or keep it lighter?
- **Pricing layout** — keep cards + table, or go table-first?
- **Promotion path** — branch v3.5 across the whole site, or cherry-pick (e.g., the live Code, the loop animation, the dark hero) back into 3.4?

---

## Related

- v3.4 spec: `briefs/SPEC.design-v34.md` (current shipped system)
- Animation brief: `briefs/BRIEF.animations.md`
- Marketing canon: Relay Creative pulse, item `FFFC90` (locked v6)
- Concepts live: `prototype.relayctx.com/web/v35/` · gallery "v3.5 Concepts"

---

## Messaging idea — "Speak your own language" (strategy + use-case resource)

The `relay_*` MCP tool names are for the **agent, not the user.** The real sell: you talk in plain English and **your agent already knows how to use Relay.** "Give me a handoff" -> the agent calls `relay_session_package`; "send this to Ben" -> `relay_transfer_create`; "pick up where I left off" -> `relay_transfer_claim`. There are no commands to learn.

- **Built:** a "Speak your own language" phrasebook section on the v3.5 platform page (natural phrase -> the tool the agent calls), reframing the MCP tool cloud from a dev API into proof that there's nothing to learn.
- **To develop (use-case resource / case study):** "Your agent already speaks Relay." Show a real transcript: a user types natural phrases, the agent transparently calls the right tools, context moves. Add to the use-case resources + marketing strategy. This is the answer to "but I don't want to learn a tool" objection.