Transactional Email

A mail-client-safe digital letterhead pattern for confirmations, reminders, follow-ups, basic announcements, and practical organisation correspondence that does not require an email campaign platform. This is a digital component: Interface parts for websites, apps, online forms, documentation sites, and Opries-style repositories.

Purpose

The Transactional Email component gives Landcare groups a repeatable way to solve this communication problem without rebuilding the layout from scratch. It should inherit approved colour, typography, spacing, grid, accessibility, and logo guidance from the design system.

When To Use

Use	Avoid
Use when the content or interaction matches the component purpose and benefits from a familiar pattern.	Avoid inventing a one-off layout when this component already solves the job.
Use the component with clear hierarchy, generous spacing, and one obvious first-read message or action.	Avoid adding extra borders, colours, icons, or type styles just to make the component feel more designed.
Use approved Landcare tokens so group forks can inherit brand updates cleanly.	Avoid local colour, typography, or logo changes that break brand consistency.

Web Guidance

Use email components for messages and signatures that need to survive Outlook, Apple Mail, Gmail, mobile mail apps, forwarded replies, dark mode, blocked images, and plain-text fallbacks. Do not rely on the normal website CSS being loaded inside the recipient's email client.

Structure: use semantic HTML, predictable reading order, and responsive sizing.
Accessibility: support keyboard access, visible focus, meaningful labels, sufficient contrast, and colour-independent meaning.
Layout: align the component to the page grid where it is a major element; use local spacing inside the component.
State: document default, hover, focus, active, disabled, loading, error, and success states where relevant.

Transactional Email Pattern Guidance

Use Transactional Email for confirmations, reminders, follow-ups, meeting notes, basic announcements, and practical organisation correspondence. It is the right pattern when a person or organisation is sending practical email from Outlook, Apple Mail, Gmail, or a simple system notification rather than building a newsletter or marketing campaign. Treat it as a digital letterhead: the message should have a clear sender, useful content, and restrained organisational information at the bottom.

Email is a constrained digital environment. A Landcare email should feel consistent with the design system, but the implementation must account for Outlook, Apple Mail, Gmail, mobile clients, forwarded messages, blocked images, and dark-mode adjustments.

Area	Use	Avoid
Typography	Use Open Sans where available, with a strong fallback stack of Calibri, Arial, and sans-serif. Keep body copy around 15-16px, captions around 12-13px, and line height generous.	Avoid relying on webfont loading, display-scale type, tight leading, or CSS that may be stripped by the email client.
Layout	Use a narrow content measure, simple one-column layouts, inline styles, and predictable spacing.	Avoid complex grids, background images, scripts, embedded forms, hover-only interactions, or stylesheet-only presentation.
Links	Use descriptive link text, visible underlines, and complete fallback information where needed.	Avoid colour-only links, bare tracking URLs, or calls to action that disappear when images are blocked.
Footer	Include the group or organisation name, general contact email, website, postal or office details where relevant, and a short practical note about why the email was sent.	Avoid campaign-style unsubscribe footers unless the email is being sent through a campaign platform or legal context requires it.
Printed email	Keep the message narrow, text-based, and readable if printed. Some clients may honour simple inline styles, but print output is controlled by the recipient's email app and browser.	Avoid relying on a full PrintView CSS layer inside email. Most email clients will not preserve it reliably.
Boundary	Use this pattern for lightweight organisation correspondence, notifications, and operational updates.	Avoid using this pattern for newsletters, news flashes, supporter updates, or campaign-platform emails. Use Email Campaign instead.
Testing	Send test emails to Outlook desktop, Outlook web, Apple Mail on macOS and iOS, Gmail, and at least one mobile viewport.	Avoid approving an email only from the composer preview, because the recipient view may render differently.

Digital Example

Use this as a conservative digital letterhead structure for confirmations, reminders, follow-ups, and practical organisation correspondence. It uses inline styles because many email clients remove external stylesheets, scripts, forms, and advanced layout CSS.

Your Name Landcare

Community planting day update

Thank you for registering. Please bring enclosed shoes, sun protection, water, and weather-appropriate clothing.

Open event details

Your Name Landcare
PO Box 000, Local Town NSW 0000
[email protected] | example.org
This email was sent for practical organisation correspondence. Please contact the sender organisation if you received it in error.

Implementation

Email components should be generated from the design system source, but the final email or signature should use email-safe inline styling. Normal website classes such as .lds-type-body or .lds-button are useful references, but many mail clients will not load external CSS reliably.

Output	Use
Rendered preview	Use for people installing signatures. Copy the rendered, formatted block so spacing and links come across.
HTML source	Use for maintainers, automated generators, or managed email-signature tools.
Plain text fallback	Use where a client strips rich HTML, or for accessibility and archiving requirements.

Starter Markup

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background:#ffffff;color:#2a2d28;font-family:'Open Sans',Calibri,Arial,sans-serif;">
  <tr>
    <td style="padding:24px 20px;">
      <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;max-width:600px;">
        <tr>
          <td style="border-top:6px solid #82A523;padding-top:18px;">
            <p style="margin:0 0 10px 0;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f675b;">Your Name Landcare</p>
            <h1 style="margin:0 0 14px 0;font-size:28px;line-height:1.14;font-weight:800;color:#1f261f;">Community planting day update</h1>
            <p style="margin:0 0 16px 0;font-size:16px;line-height:1.55;color:#3f463f;">Thank you for registering. Please bring enclosed shoes, sun protection, water, and weather-appropriate clothing.</p>
            <p style="margin:0 0 24px 0;font-size:15px;line-height:1.55;color:#3f463f;"><a href="https://landcare.dev" style="color:#2f5d48;text-decoration:underline;font-weight:700;">Open event details</a></p>
            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-top:1px solid #d7dbd2;">
              <tr>
                <td style="padding-top:14px;font-size:12px;line-height:1.55;color:#5f675b;">
                  <strong style="color:#2a2d28;">Your Name Landcare</strong><br>
                  PO Box 000, Local Town NSW 0000<br>
                  <a href="mailto:[email protected]" style="color:#2f5d48;text-decoration:underline;">[email protected]</a> | <a href="https://example.org" style="color:#2f5d48;text-decoration:underline;">example.org</a><br>
                  This email was sent for practical organisation correspondence. Please contact the sender organisation if you received it in error.
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Print Guidance

Emails are not print-first artefacts, but they should print legibly when someone prints a message thread. Keep content narrow, text-based, and readable without background images.

Format: size the component for the final artefact, viewing distance, paper stock, and reproduction method.
Legibility: use Open Sans, strong contrast, and line lengths that suit the medium.
Production: preserve margins, trim safety, logo clear space, and enough room for handwriting where required.
Translation: when the web component becomes print, replace interaction states with clear instructions, labels, QR codes, or contact details.

States And Variants

Document new message, reply, forwarded message, desktop received, mobile received, image-blocked, dark-mode, plain-text, and copied-into-client variants.

Variant	Use
Default	The standard form used across normal web and print contexts.
Emphasis	A higher-weight version for primary messages, urgent information, or first-read actions.
Compact	A denser version for tables, sidebars, forms, footers, and constrained print areas.
Example	A filled version for documentation, templates, learning resources, and production references.

Anatomy

Part	Guidance
Container	Use only when grouping helps. Prefer quiet rules and spacing over heavy boxes.
Title or label	Make the component purpose clear in plain language.
Body content	Keep copy short, scannable, and aligned to the typography hierarchy.
Action or outcome	Make the next step visible, especially in forms, posters, signs, and templates.

Review Checklist

Brand: approved colour, typography, logo clear space, and tone.
Hierarchy: one clear first read, then supporting information.
Grid: major edges align to the page, print, or component grid.
Accessibility: contrast, labels, focus, reading order, and colour-independent meaning are covered.
Output: the component survives the final medium: mobile, desktop, A4, poster, signage, social, or presentation.