// Respoken — landing v8: mint editorial, sommelier voice, refit per brief. // Sequence: case → voice-as-voice → many rooms → the compact (privacy fused with corpus learning) // → four passages → manifesto teaser (links to /manifesto.html) // → voices → invitation. No SaaS pill band, no manifesto-less dead links. const Landing = () => { // ── palette — mint paper × navy ink × deep petrol ───────────── const mint = '#dbe8d6'; const mintSoft = '#e4ecde'; const mintDeep = '#c6d8c2'; const ink = '#1a2747'; const muted = 'rgba(26,39,71,0.62)'; const subtle = 'rgba(26,39,71,0.42)'; const mutedDk = 'rgba(211,231,214,0.66)'; const subtleDk = 'rgba(211,231,214,0.42)'; const gold = 'oklch(0.40 0.075 205)'; const goldSft = 'oklch(0.66 0.085 205)'; const rule = 'rgba(26,39,71,0.13)'; const ruleDk = 'rgba(211,231,214,0.18)'; // ── type primitives ────────────────────────────────────────── const Display = ({ children, style, ...rest }) => ( {children} ); const Body = ({ children, style, ...rest }) => ( {children} ); // Eyebrow / label primitive. Previously JetBrains Mono — which // read tech-product rather than editorial-magazine. Now a // tracked-out Inter in caps; same "this is a label" affordance, // closer to how literary magazines treat small headers. // (Name kept as `Mono` to avoid a wide rename — it's now a // misnomer in spirit, accurate in role.) const Mono = ({ children, style, ...rest }) => ( {children} ); // UI primitive — buttons, microcopy, anywhere a sans is the right // call. Inter for the same reason as above: modern, restrained, no // serif-on-a-button awkwardness. Body prose stays Source Serif 4. const UI = ({ children, style, ...rest }) => ( {children} ); // ── rotating personas + verbs ──────────────────────────────── // Personas interleave categories so the initial-render // index 0 leads with a universal framing ('creators') rather // than defaulting to literary-coded 'writers'. The breadth // IS the message (per project iteration history) — don't // shorten this list. Swapped from the earlier version: // dropped 'authors' (synonymous with 'writers') and 'media // creators' (vague); added 'video creators' and // 'consultants' (two real segments missing before). const personas = [ 'creators', 'founders', 'newsletter authors', 'podcasters', 'writers', 'marketers', 'video creators', 'essayists', 'consultants', 'storytellers', 'comedians', 'journalists', 'screenwriters', 'researchers', 'ghostwriters', ]; const verbs = ['find', 'grow', 'protect', 'curate', 'nurture', 'evolve']; const pickNext = (list, curr) => { if (list.length < 2) return 0; let n = curr; while (n === curr) n = Math.floor(Math.random() * list.length); return n; }; const [pIdx, setPIdx] = React.useState(0); const [vIdx, setVIdx] = React.useState(0); const [growInit, setGrowInit] = React.useState(true); React.useEffect(() => { const t = setInterval(() => setPIdx(i => pickNext(personas, i)), 1900); const tv = setInterval(() => setVIdx(i => pickNext(verbs, i)), 1900); const r = requestAnimationFrame(() => requestAnimationFrame(() => setGrowInit(false))); return () => { clearInterval(t); clearInterval(tv); cancelAnimationFrame(r); }; }, []); // ── waitlist field ─────────────────────────────────────────── const [email, setEmail] = React.useState(''); const [sent, setSent] = React.useState(false); const submit = (e) => { e.preventDefault?.(); if (email.includes('@')) setSent(true); }; // ── primitives ─────────────────────────────────────────────── const Rule = ({ ornament = '✦', dark = false }) => (
{ornament}
); const SectionMark = ({ n, label, color }) => (
{n}
{label}
); const WaitlistField = ({ dark = false }) => (
setEmail(e.target.value)} placeholder={sent ? 'Thank you. We’ll write when there’s a seat.' : 'your@email.com'} disabled={sent} style={{ flex: 1, padding: '18px 24px', background: 'transparent', border: 'none', outline: 'none', color: dark ? mint : ink, // Was Source Serif 4 — serif on form fields read too // novelist; Inter feels right for UI. fontFamily: '"Inter", system-ui, sans-serif', fontSize: 16, fontWeight: 400, fontStyle: sent ? 'italic' : 'normal', }} />
); return (
{/* ── NAV ─────────────────────────────────────────────── */} {/* ── HERO ────────────────────────────────────────────── */}
An AI-powered studio for — {personas[pIdx]}
who want to{' '} {verbs[vIdx]}
their unique voice.
Your AI — trained on you, kept private, made for the writing. The studio that helps you augment the work without sanding it down.
The waitlist We’re letting people in slowly, on purpose.
{/* ── i. THE CASE ─────────────────────────────────────── */}
Most AI was built for everyone.
This one, you build for yourself. The AI creators write with today is a foundation model serving two hundred million people identically — trained on the internet, paid for by attention, returning the median. It works. It also doesn’t know you. Respoken is the other thing: a studio wrapped around an AI that’s only yours, that learns only from your writing, that you own and take with you when you go.
{/* ── ii. THE PACT — TRUST pillar (foundation) ─────────── */}
Trust comes first.
The rest depends on it.
Your work, your archive, your account. Held privately under your name, visible only to you. Never pooled with anyone else’s writing. Never used to train a model someone else gets to use. The AI that learns you is yours alone. Never shared with another user. Never absorbed into a common corpus. Never reused for someone else’s experience. An AI you can’t trust isn’t worth pouring yourself into; this is the prerequisite for everything that follows. Should you decide to leave, you take everything with you. The drafts, the references, the AI that learned you — yours to keep, yours to take. We close the account on your word alone.
{/* ── iii. THE VOICE — VOICE pillar (personalization) ──── */}
{/* Kitchen-line headline (substituted from "An AI trained on you, by you, for you"). The longer two-clause line doesn't fit the narrow 1fr column at 76px — dropped to 52px / lineHeight 1.05 to land both clauses on their own line. Italic on "tastes" parallels the gold-italic "you" treatment of the previous headline. */} The prompt is
grandma’s recipe.
Your voice is how the meal tastes.
We watch you cook — the social posts you’ve offered up, the newsletters you’ve sent, the podcasts you’ve recorded, the videos you’ve scripted, the chapters you’ve drafted in the dark. We learn your moves, your tricks, the things you don’t even notice you do. When you bring us a new recipe, we gather the best ingredients and cook them like you would. Most AI is shaped by the internet; yours is shaped by your writing. As customized as AI gets. The contractions you favor, the slang you earned, the em dash mid-thought, the run-on because the thought wasn’t finished — they stay on the page. Not preserved. Reproduced.
{/* ── iv. MANY VOICES, WHEN YOU NEED THEM ──────────────── */}
One voice today.
More when the work calls for them.
Some creators write in a single voice. Others have several — a public voice for the platforms, a looser one for the newsletter, the wry one in the script, the considered one for the long essay. The studio is built for both, and grows with the work. Each voice keeps its own audience, its own register, its own habits — the way it opens a sentence, the way it lands one. Switch rooms; switch voices; you stay yourself, speaking where you mean to.
{/* ── v. THE STUDIO — 3 ROOMS ─────────────────────────── */}
Three arcs,
same plot.
{[ { kind: 'create', eyebrow: 'i — to create', title: <>A place to create, refine, and augment., body: 'A working surface where your voice and your ideas meet. Drafting, polishing, shaping the companion pieces around a central one — all of it inside the same calm space, none of it losing the feel of you on the page.', }, { kind: 'know', eyebrow: 'ii — to know', title: <>The materials your writing draws from., body: <>Research notes. Interview transcripts. Source documents. The books you’ve underlined and the briefs you’ve kept. The studio holds them all, ready the moment the writing reaches for them.

The studio sounds like you. It also knows what you’ve read., }, { kind: 'grow', eyebrow: 'iii — to grow', title: <>A learning system that nurtures your voice., body: 'A patient companion that reads what you’ve already written and learns by attention, not by survey. The more it reads, the more the new work sounds like you wrote it on a good day — even on the days you didn’t.', }, ].map((v, i) => (
{/* Eyebrow only — geometric SVG icons removed. The gold italic verb in the headline + the fingerprint watermark behind the card are doing the visual work; small SVG marks were redundant on top and pulled the page toward a SaaS feature-grid feel. */} {v.eyebrow} {/* Reserve two lines of headline height so all three card titles end at the same y-coordinate, even if a wrap break happens to land differently per card. ~38px font × ~1.05 line-height × 2 lines = ~80px. */} {v.title} {v.body}
))}
{/* ── vi. THE CRAFT — kits + format + learning loop ──── */}
Write one piece,
let the studio multiply it. You wrote your thought piece. You also need the LinkedIn post that pulls readers in, the newsletter intro that earns the open, the thread that fans the argument out, the script outline if it’s going to a podcast. The companion pieces are the work that gets the work read.
Each companion is shaped for its room. LinkedIn rewards a different opening than a newsletter; a thread holds tension differently than an essay; a podcast outline reads aloud, not on the page. The studio knows each room’s conventions and applies them — quietly, in the background, while your voice carries through every piece. Then you tell the studio how each piece landed. What got opened, what got shared, what fell flat. The studio learns what works for you — your voice, your audience, this platform, this kind of piece — and the next kit gets sharper.
{/* ── vii. MANIFESTO TEASER ───────────────────────────── */}
We built the AI
we wanted to write with. Respoken was made by creators who wanted an AI built around them — one they could trust, that sounded like them, that helped them augment the work without sanding it down. Read the manifesto →
{/* ── viii. VOICE SAMPLES — pull-quotes ───────────────── */}
Voices in their
own voice. {/* Citations: the literary sense first (a citation makes the subject credible), then the testimonial sense the reader meets right below. The pun lands without being explained. */} Citations make the subject credible.
{[ { quote: <>I sat down to write a cold email I would have regretted by Friday. I sent something better instead., who: 'L.B.', meta: 'founder' }, { quote: <>It writes the way I talk to my older brother. It figured that out faster than my last editor did., who: 'R.S.', meta: 'essayist' }, { quote: <>I dropped my whole archive in. Knowing it stays mine is half the reason I write into it now., who: 'N.K.', meta: 'journalist' }, { quote: <>The drafts come faster, but they sound more like me. I didn’t expect both at once., who: 'A.M.', meta: 'podcaster' }, { quote: <>It reads me back to me. Not flattened, not sanded — just sharper than I was on Tuesday., who: 'L.S.', meta: 'novelist' }, { quote: <>Three pieces a week, none of which sound like the others I’ve seen this morning. That is the whole product, and it works., who: 'J.P.', meta: 'content lead' }, ].map((v, i) => (
“{v.quote}”
— {v.who} {v.meta}
))}
{/* ── ix. THE INVITATION ──────────────────────────────── */}
Pour yourself
a draft. We’re letting people in slowly, on purpose. Leave your name; we’ll write when there’s a seat.
{/* ── FOOTER ──────────────────────────────────────────── */}
); }; window.Landing = Landing;