saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub
Introduction
Sign In (Code)Sign Up (Code)Trial 1 Welcome (Day 1)Trial 4 Ending Soon (Day 11)Trial 5 Expired (Day 14)Converted From TrialWorkspace InvitePrepopulated Workspace InviteAccepted InviteProject InviteProject JoinPublic Project ViewFlow NotifyPayment Request ApprovedPayment Request RejectedPayment SentPayment ReturnedPayment FailedInsufficient Workspace FundsDeposit AvailableDeposit FundsWithdraw FundsVerify Bank AccountPayment ReceivedPayment CanceledPayment Sent (Public Link)Payment Request: ApproveExternal Payment Request: ApproveExternal Payment Request ApprovedExternal Payment Request RejectedCard CreatedCard Auth DeclinedCard InviteCard Invite (Workspace)Accepted Card InviteAccepted Card Invite (Workspace)Card Auth ReversedSaturation Pay: StartedSaturation Pay: SubmittedSaturation Pay: In ReviewSaturation Pay: ApprovedCredit Card: SubmittedCredit: Application ApprovedInvoiceInvoice With Line ItemsPurchase Order ApprovedPurchase Order Needs ApprovalPurchase Order RejectedVendor RequestVendor OnboardedBanking Owner InviteBanking Owner VerifiedComment PostedComment ResolvedComment MentionedFailed Receipt ProcessFailed Seat ChargeFailed Subscription Renewal (Internal)Downgrade Notification (Internal)Subscription CanceledSubscription PausedSubscription Restart ReminderSubscription Pause Could Not StartUsage Credits Running LowBilling Plan ChangedBilling Seats ChangedBilling Payment Method ChangedSat Pay NoticeSat Pay Price Change3.0 Migration: Upgrade Scheduled3.0 Migration: Upgrade CompleteMarketing AnnouncementProduct UpdatePress Release

Email templates

Saturation's transactional emails — payments, cards, auth, vendor onboarding, trial lifecycle, team invites, and purchase orders. Each template is authored with react-email as the single source of truth, rendered here exactly as it ships to Postmark, and previewed inside a realistic email-client shell.

Example

A non-shipping showcase of the layout elements — headline, body, detail rows, and primary / secondary actions.

Saturation
Saturationhello@saturation.io

Welcome to Saturation

Today at 1:08 PM
To:stephen@northstarpictures.example
Apple Mail

Full CSS support · Dark mode via @media prefers-color-scheme

Features

  • 74 production email templates — Covers every Saturation notification scenario: payments, cards, auth, vendor onboarding, banking owner verification, trial lifecycle, workspace invites, and purchase orders.
  • 14-day trial onboarding sequence — Three emails across the trial arc: welcome, ending-soon warning, and expired with upgrade prompt. A fourth confirms the conversion to a paid plan.
  • Email client preview shell — EmailClientShell wraps previews in a realistic client chrome (Apple Mail, Gmail, Outlook). The shell is for previewing only and never ships to production.
  • Postmark-ready — Single-column, mobile-safe layout built for Postmark. CSS is inlined automatically at send time and dark mode is handled via @media queries.
  • Auth and OTP emails — Magic link and 6-digit one-time-code templates, with the code formatted in a prominent block for one-tap autofill.
  • Financial workflow emails — Payment requests, approvals, ACH receipts, deposits, withdrawals, card issuance, and declined transactions. All include detail rows and status indicators.
  • Postmark variable mapping — Variables map directly to the Audience Segmentation spec: user.first_name to {{name}}, workspace.current_period_end to {{trial_end_date}}, workspace.plan to {{tier}}, and so on.
  • Composable body content — bodyChildren accepts any JSX for rich content. The details prop accepts React nodes including tables, avatars, and badges.