email-design
App email design
Make the email help someone finish the action they started in the app. Preserve the app’s transport, authentication and consent rules. Use this skill for transactional email design and integration, rather than email service setup or campaign sending.
Inspect before changing
Trace each requested event from the app action to its template and sending client. Check locales, HTML and text parts, provider-managed templates, sender, reply address, expiry and destination handling. Keep tokens, addresses and captured messages private. Find the shared layout before adding another renderer. Do not replace a working delivery service to change its design.
Read the app’s visible theme and copy. Choose brand name, approved logo, page and surface backgrounds, body and muted text, primary action and its text color, font stack, corner radius and support address. Put these in one theme or layout, with message wording separate. Keep per-message content limited to subject, preview, heading, body, code or primary action, and necessary context. Use the app’s locale and runtime formatting for amounts and dates.
Design around the action
- Verification: show the code as selectable text, say where to enter it, and state the real expiry. Keep the code out of the subject and hidden preview. Do not make a link that only opens an unrelated homepage.
- Password reset: continue the app’s actual recovery flow. Do not invent links, token lifetimes or automatic sign-in. Say what to do if the recipient did not request it.
- Billing: show the amount, currency, period, renewal or cancellation date when relevant. Link to the exact plan or receipt. Do not shorten away billing terms or add upgrade pressure to a receipt.
- Notifications: name the event and link to the affected item. Include preferences where supported. Keep marketing consent separate from required account messages.
Use one main action. A code-entry email needs a readable code, rather than a competing button. Write direct headings such as “Verify your email” and “Reset your password”. Cut greetings, registration ceremony, congratulations and technical pipeline details when they do not help the next step.