Component catalog · Email

Mode

Every transactional and lifecycle email SageOx sends, grouped by where it fires in a customer's lifetime. Each card carries a trigger pill — when and how often it flows — and renders the real cross-client HTML a recipient receives, at desktop and mobile widths. Source of truth: React Email files in apps/web/src/emails/, catalogued in email-registry.tsx.

23 templates 9 lifecycle lanes 12 components 1 tokens Generated · 2026-06-14

Surfaces · email templates

The real artifacts, grouped by lifecycle. Each iframe pair shows the email at desktop width (Gmail/Apple Mail) and mobile width (iOS Mail/Gmail mobile). Outlook (Word renderer) drops most CSS but receives the bulletproof VML CTAs.

New-user journey
Day 0Welcome1st recordingRecording startedprocessedFirst recording3 min+First real recordingDay 5 · idleNo-recording nudgeDay 7No-voiceprint nudge

Onboarding 4

The sequence a brand-new user receives.

Welcome

once

Welcome to SageOx, Maya

Account-onboarding welcome — the first email a new user receives after signup.

apps/web/src/emails/WelcomeEmail.tsx
previewYour account is ready — three steps to get your team set up.
when sentOnce, when the provision-user workflow finishes a new signup.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • Replaces a hand-rolled HTML string (purple #8B5CF6 button, no wordmark, no container) that bypassed the design system entirely.
  • Steps render through the StepList component with SAGE number badges — copper stays reserved for the single "Open SageOx" CTA (one-Copper-element rule).
  • Preview text is distinct from the H1 so the inbox snippet adds information instead of repeating the heading.
  • Footer is transactional (no unsubscribe) — a welcome is an account-tier message, not opt-in marketing.

First recording

once

Your first Discussion is captured

Milestone celebration — your team's first Discussion was captured and processed.

apps/web/src/emails/FirstRecordingEmail.tsx
previewKickoff — what we're building — transcribed, summarized, and searchable.
when sentOnce, when a team's first recording finishes processing.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Recording started

on event

Your recording is live — here is what happens next

Sent the moment a user starts their first recording — even a short in-room test. Tells them what SageOx is doing with their words right now and primes them for the Discussion that follows.

apps/web/src/emails/RecordingStartedEmail.tsx
previewSageOx is capturing your Discussion — it will be searchable, summarized, and ready for your AI coworkers.
when sentImmediately when a user starts their first recording (any duration). Transactional — no unsubscribe.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • No unsubscribe — this is a transactional confirmation triggered by a user action, not a marketing email.
  • Copy is deliberately short and punchy: a casual tester should immediately understand what SageOx does with their words.
  • The "still counts" footnote addresses the in-room tester who started a 10-second session just to see what happens.

First real recording

once

Your Discussion is ready: Q3 planning sync

Sent after a user's first Discussion longer than 3 minutes finishes processing. The "what's next" email — guides them to connect the SageOx MCP server so their coding agent can query the Discussion immediately.

apps/web/src/emails/FirstRealRecordingEmail.tsx
previewQ3 planning sync — transcript, decisions, and action items are ready. Here is how to get the most out of it immediately.
when sentOnce, when a user's first recording longer than 3 minutes finishes processing. Transactional — no unsubscribe.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • Uses StepList (numbered SAGE badges) for the three-step MCP onboarding flow — copper stays reserved for the single "Open your recording" CTA.
  • CodeBlock renders the MCP JSON config snippet so the recipient can copy it directly from email into their editor.
  • The secondary links (MCP docs, Ledger) are muted text links — the primary action is opening the recording.

Auth & security 4

Sign-in links and account-security receipts.

Password reset

on request

Reset your SageOx password

Password reset CTA after a user requested a reset.

apps/web/src/emails/PasswordResetEmail.tsx
previewA password reset was requested for your account.
when sentWhen a user clicks 'Forgot password' on the sign-in page.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

PAT created

on event

New Personal Access Token created: "Claude Code Cloud"

Security receipt — a new Personal Access Token was minted on your account.

apps/web/src/emails/PatCreatedEmail.tsx
previewRecognize this token? Revoke it in one click if not.
when sentImmediately after a Personal Access Token is created.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

PAT revoked

on event

Personal Access Token revoked: "Claude Code Cloud"

Security receipt — a Personal Access Token on your account was revoked.

apps/web/src/emails/PatRevokedEmail.tsx
previewDidn't expect this? The security escape hatch is in the body.
when sentImmediately after a Personal Access Token is revoked.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Team & membership 4

Invitations and access-request decisions.

Team invite

on event

Alex Chen invited you to join SageOx Engineering

Invitation to join a team, sent by an existing team member.

apps/web/src/emails/TeamInviteEmail.tsx
previewAccept your invitation to SageOx Engineering.
when sentWhen a team admin invites someone via Settings → Members.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • Actor row (Alex Chen avatar + name + email) anchors the body so the recipient sees the inviter at a glance.
  • CTA "Accept invitation" — copper-600 bulletproof button.

Team access request (new)

on event

Maya Chen requested access to Acme Robotics

Someone asked to join your team — review the request in settings.

apps/web/src/emails/TeamAccessRequestNewEmail.tsx
previewReview the request in your team settings inbox.
when sentWhen someone requests access to a team — sent to every owner/admin.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Team access request (approved)

on event

You now have access to Acme Robotics

Your request to join a team was approved.

apps/web/src/emails/TeamAccessRequestApprovedEmail.tsx
previewYou're in — open the team to get started.
when sentWhen an owner/admin approves an access request — sent to the requester.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Team access request (declined)

on event

Your request to join Acme Robotics was not approved

Your request to join a team was not approved.

apps/web/src/emails/TeamAccessRequestDeclinedEmail.tsx
previewThe team reviewed your request.
when sentWhen an owner/admin declines an access request — sent to the requester.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Recording lifecycle 2

Recaps sent after a Discussion finishes processing.

Recording recap

on event · opt-in

Recap: Sprint planning — Q3 roadmap

Recap of a finished Discussion — decisions, action items, and chapters.

apps/web/src/emails/RecordingRecapEmail.tsx
preview3 takeaways from your Discussion · captured by SageOx.
when sentAfter each recording finishes processing, for members with Discussion recaps enabled.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Discussion admin recap

on event · opt-in

Admin recap: Q3 roadmap kickoff

Distribution + curation recap for context admins — leads with sharing and visibility controls before the standard recap body.

apps/web/src/emails/DiscussionAdminRecapEmail.tsx
previewShare it, route it to the right bubble, and act on the decisions.
when sentAfter a discussion finishes processing, to context admins who attended (distribution + curation variant of the recap).
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • Leads with distribution intent (share CTA + manage-visibility link) before the recap body — admins act on it, participants just read it.
  • ONE copper CTA: "Share this discussion". Secondary actions (manage visibility, open recording, ledger search) use outline button and muted text links.
  • Preheader is distinct from the H1 ("Share it, route it to the right bubble…") so the inbox snippet carries the call-to-action intent.
  • A dividing rule separates the distribution section from the recap content so the visual hierarchy maps to the admin's two tasks.

Device 2

Hardware pairing receipts and ops support.

Device support

on event

[ops] Scribe spk_abc123 · firmware update available

Internal-facing ops notification when a Scribe device hits a support state.

apps/web/src/emails/DeviceSupportEmail.tsx
previewAction recommended — review device state.
when sentWhen a device crash report or stale-firmware alert fires.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • Ops register — denser KeyValueRow grid, no marketing chrome. Internal-only.

Device paired

once

Oxy is paired and ready

Receipt that a hardware device finished pairing to your team.

apps/web/src/emails/DevicePairedEmail.tsx
previewYour device is connected and capturing for Acme Robotics.
when sentOnce, when a hardware device finishes pairing to a team.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px

Engagement nudges 4

Opt-in nudges from the nightly user-watchman pass.

Engagement · no recording yet

nightly · opt-in

Your team's Discussions can power your AI coworkers

Nudge to record a first Discussion so AI coworkers get team context.

apps/web/src/emails/NoRecordingInviteEmail.tsx
previewOne recorded Discussion gives every AI coworker on your team durable context.
when sentOnce, ≥5 days after signup when the user has authored zero recordings; nightly user-watchman pass; 14-day cross-campaign cooldown; skipped if opted out.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • DRAFT copy — pending Milkana review.

Engagement · no voiceprint

nightly · opt-in

Set up your voiceprint — speaker names in every Discussion

Nudge to set up a voiceprint so Discussions attribute your words to you automatically.

apps/web/src/emails/NoVoiceprintEmail.tsx
previewAutomatic speaker identification, set up in about two minutes.
when sentOnce, ≥7 days after signup when the user has ≥1 recording but no voiceprint; nightly user-watchman pass; 14-day cross-campaign cooldown; skipped if opted out.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • DRAFT copy — pending Milkana review.

Engagement · seed your Knowledge Bubble

nightly · opt-in

Put Maya's Knowledge to work

Nudge to seed the auto-provisioned Knowledge Bubble with first sources.

apps/web/src/emails/BubbleValueEmail.tsx
previewA few seeded sources turn it into answers from your team's actual knowledge.
when sentOnce, ≥7 days after signup when the user has only the auto-provisioned personal Knowledge Bubble; nightly user-watchman pass; 14-day cross-campaign cooldown; skipped if opted out.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • DRAFT copy — pending Milkana review.

Engagement · meeting-room device

nightly · opt-in

Hands-free capture for Acme Robotics's meetings

Nudge a collaborative team toward hands-free capture + casting in the meeting room.

apps/web/src/emails/DeviceIdleEmail.tsx
previewHands-free capture of every team Discussion, cast to the room screen.
when sentOnce, ≥30 days after signup when the team has ≥2 members but no paired device and has never cast; nightly user-watchman pass; 14-day cross-campaign cooldown; skipped if opted out.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • DRAFT copy — pending Milkana review.

Digest 1

Recurring opt-in summaries.

Recommendation

scheduled · opt-in

Your SageOx week · 3 recommendations

AI-curated recommendation summary — weekly highlights digest.

apps/web/src/emails/RecommendationEmail.tsx
preview3 things worth your attention this week.
when sentWeekly on Mondays 8am local, opt-in.
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • DigestList compositions — each item with a kind icon, title, description, and a link arrow.
  • Footer mode "marketing" — adds the unsubscribe + frequency-tuning links per CAN-SPAM.

System 1

Generic severity-based system notifications.

Notification

on event

SageOx · Recording completed

System notifications — info / warning / error severity.

apps/web/src/emails/NotificationEmail.tsx
previewYour Friday standup recording finished processing.
when sentWhen system events fire (recording done, share link claimed, billing event).
Web client · Gmail / Apple Mail · 768px
Mobile client · iOS Mail / Gmail mobile · 390px
Implementor notes
  • Severity surfaces as a colored Callout strip — info (sage), warning (copper), error (signal.danger). One per email.
No emails match that search.

Components

Reusable building blocks composed by the surfaces above. Every entry shows the real rendered component in isolation — same React Email pipeline as the templates, wrapped in a minimal preview shell.

BaseEmail pattern

Shared layout shell for every transactional / marketing email. Header band (charcoal-900 with wordmark + label), body, footer with mode-specific compliance text (transactional / marketing / ops). Visible in every template iframe above.

apps/web/src/emails/BaseEmail.tsx
Rendered preview · real component, real fixtures

Actor pattern

Person row — gravatar + display name + email. Anchors invite-style emails so the recipient sees who triggered the message.

apps/web/src/emails/components/Actor.tsx
Rendered preview · real component, real fixtures

ButtonSecondary primitive

Outline-style CTA for secondary actions where Copper-600 (the primary CTA color) would over-emphasize. Same bulletproof VML wrapper for Outlook compatibility.

apps/web/src/emails/components/ButtonSecondary.tsx
Rendered preview · real component, real fixtures

Callout pattern

Colored severity strip — info (sage), warning (copper), success (forest), danger (signal-red). One per email max.

apps/web/src/emails/components/Callout.tsx
Rendered preview · real component, real fixtures

CodeBlock pattern

Monospace block for code, IDs, or tokens that need to be copy-pasted. Light gray background, charcoal-900 text.

apps/web/src/emails/components/CodeBlock.tsx
Rendered preview · real component, real fixtures

DigestList pattern

Vertical list of items with kind icon + title + description + link arrow. Used in weekly recommendation digests.

apps/web/src/emails/components/DigestList.tsx
Rendered preview · real component, real fixtures

StepList pattern

Numbered onboarding steps — a sage number badge + bold title + optional description per row. Used by the welcome email for "what to do next". Distinct from DigestList (a timestamped activity timeline): StepList is an ordered set of instructions.

apps/web/src/emails/components/StepList.tsx
Rendered preview · real component, real fixtures

TakeawaysBlock pattern

Recap body block: title + summary + a DigestList of Discussion takeaways, each labelled DECISION / TO DO / CHAPTER with an optional muted attribution. Used by recording-recap and first-recording emails.

apps/web/src/emails/components/TakeawaysBlock.tsx
Rendered preview · real component, real fixtures

KeyValueRow primitive

Label/value pair laid out as a borderless table row. Used in receipts, device-support emails, and any structured metadata block.

apps/web/src/emails/components/KeyValueRow.tsx
Rendered preview · real component, real fixtures

OtpCode pattern

Big monospace code with letter-spacing and expiry caption — used for OTP fallback in magic-link emails and 2FA codes.

apps/web/src/emails/components/OtpCode.tsx
Rendered preview · real component, real fixtures

Receipt pattern

Itemized line items + total — billing receipts and per-event cost summaries. Right-aligned numerics with tabular-nums.

apps/web/src/emails/components/Receipt.tsx
Rendered preview · real component, real fixtures

Sparkbar pattern

Inline horizontal bar chart for usage / quota visualizations in email. Tufte-y: max ink-to-data ratio, no chart chrome.

apps/web/src/emails/components/Sparkbar.tsx
Rendered preview · real component, real fixtures

Tokens

The raw values underneath — palettes, type ramp. Mirrored from packages/ui/styles/tokens.css into apps/web/src/emails/brand.ts as plain objects because React Email needs inline styles (most clients strip <style>).

brand.ts (tokens + helpers) primitive

Mirrored design tokens for email — sage/copper/charcoal palettes, type scale, line-height, bulletproof-CTA HTML generator. React Email needs inline styles, so tokens live as plain objects here (parallel to tokens.css).

apps/web/src/emails/brand.ts
Rendered preview · real component, real fixtures