Production layout system
SaaS Welcome System
Welcome email recipe for SaaS products, combining an onboarding hero, step card, app-download route, and onboarding footer.
5 production blocksPart of the SaaS lifecycle systemSource, output, and handoff contextBuilt from the public production email system
Rendered email preview
System sequence
Message structure in order
- Brand header. Introduces the sender and sets a familiar frame.
- Welcome hero. Frames the promise of the product and the first action.
- Onboarding step. Explains the first concrete setup step for the user.
- App follow-through. Keeps the product close to hand on mobile and desktop.
- Onboarding footer. Carries lifecycle-specific support and preference copy.
Production guidance
How this moves into delivery
- Edit the MJML recipe when you want to adjust structure, copy order, imagery, or CTA destinations.
- Use the compiled HTML when your ESP, QA handoff, or review process needs final delivery markup.
- Review the system order below before customising so the message hierarchy stays intact across clients.
Stack map
Production stack
Each layout is assembled from reusable production blocks. Inspect the system as a whole here, then open individual blocks only when you need source-level changes.
Creates immediate sender recognition.
Leads with the welcome message and product promise.
Turns onboarding into one explicit next step.
Keeps the product accessible after the first login or setup step.
Finishes with lifecycle-appropriate support language.