Templates
About
Email is primarily used for transactional messages such as submission confirmations, status changes, and account updates. It may also be used for informational purposes.
This page documents the supported visual styles for email notifications along with guidelines on how to best use them within the template.
Because of limited support by email clients for custom typefaces, typography within emails uses system fonts and may differ from the type styles defined in the design system. The text styles are the same on mobile.
Guidance
When to use
This email template is a supplementary tool that can be used to mock up emails in Figma before creating them in VA Notify.
Content guidance
For guidance on how content should be written, use the Email Content and Style Guide.
Implementation guidance
Emails that are sent from the VA are written and launched via VA Notify, a centralized email and SMS creation and management portal. VA Notify supports a Self Service Portal where users can draft and preview emails using markdown.
To onboard to VA Notify, visit the VA Notify Github.
Example
Mobile
Desktop
Structure
Header
- The header includes the VA logo with appropriate alt text.
- No changes should be made to the header to ensure consistency across emails sent by VA.
- The header is responsive and has a breakpoint at 600px. Widths 600px and below have the VA seal centered in the header, whereas at widths above 600px, the VA seal is left-aligned. Visit the Figma template to learn more.
Heading
- A Heading 1 is required to convey the purpose of the email and should repeat the subject line exactly or use a slightly more detailed version.
- Use only one Heading 1 per email.
- For additional content guidance on headings, use the Email Content and Style Guide.
Salutation
- Personalize the email with the Veteran’s first name in the salutation as “Dear ((first_name)),” —but never include both first and last name, because this counts as PII.
Body Content
- The body content contains the details of your message.
-
Within the body content, the following are supported:
- Paragraph text, bold text, italic text, and bulleted lists
- Headings level 2, 3, and 4
- Blockquotes (no more than one)
- Action Links (no more than one)
- Links (no more than three)
- Dividers
- For additional content and usage guidance, use the Email Content and Style Guide.
- Don’t include a closing or sign the email as “VA.gov” or “VA”.
Contact Section
- Include a contact section so users can reach out if they have questions.
- By default, “Have questions?” heads the contact section with an appropriate heading level (2 or 3, typically), uses “Visit https://va.gov or call 800-827-1000 (TTY: 711). We're here Monday through Friday, 8:00 a.m. to 9:00 p.m. ET.” as the content, and is preceded by a divider.
- Contact details can be adjusted as needed.
- If the user is recommended or required to reach out to the VA in the body content, the contact section can be removed to reduce redundancy.
Footer
- Use the footer to explain why we sent this email and tell people not to reply—modify the reason as necessary.
- Example: “You are receiving this email because you filed an application on VA.gov. Please do not reply to this email.”
- Example: “You are receiving this email because you made a change to your information on VA.gov. Please do not reply to this email.”
- The footer is noted with the use of a divider above it.