Email templates

Self-contained, table-based HTML emails built to the Figma design. Open any one to preview it alongside its source, ready to copy into Cognito or another sender.

Reference

Master template bodd-email-master.html

Every block and variant with all options turned on. Copy blocks out of this to assemble a new email.

Emails

Invitation invitation.html

"You have been invited to join {{company}} on BoddHub." Confirm-account button. Custom sender.

Verification code verification-code.html

One-time code in a highlighted box. Cognito {####} placeholder.

Account deletion account-deletion.html

Scheduled-deletion notice with scan history and a sign-in-to-cancel button. Custom sender.

Temp login temp-login.html

Username and temporary password. Cognito admin-created-user flow.

How these templates work

Every template is built 1:1 from the Figma "Emails" file. Sizes, colours, weights and spacing are measured from the design, not approximated from tokens.

Self-contained. Table-based layout, all CSS inline or in one <style>, no external stylesheet, no JavaScript, no build step. Paste a whole file into Cognito, SES, or any sender.
Master plus emails. bodd-email-master.html holds every block and variant. The four email files are assembled from it, so fixes flow from the master out to the emails.

Dark mode and its trade-offs

Dark mode is opted into with <meta name="color-scheme">. From there, clients split into two camps.

Clients we can target (Apple Mail, iOS Mail, Samsung Email, Thunderbird) get a proper theme via @media (prefers-color-scheme): dark page and card, lightened text, a tinted code box.
Clients that force their own dark mode (Gmail app, Outlook for Windows) ignore those queries, recolour text themselves, but leave images alone. To stay legible on any background, logos ship as layered variants:
- Header: an opaque cream chip is the default. It looks right on the cream page and survives a client-inverted background. Padded-transparent black and white swaps cover targetable clients, sized to the same footprint so nothing shifts.
- Inner logo (on the white card): a white chip default plus tight transparent swaps.
- Footer: a single transparent grey (#757575), subtle in both modes.

Known trade-off. The Gmail Android app force-inverts and recolours images unpredictably, and treats the wordmark and the blob differently. We chose not to fight it. The chip default is the most consistent result everywhere else; Gmail does its own thing and we accept it.

Two more defensive touches: pure #FFFFFF and #000000 are nudged to #FFFFFE and #000001 so Apple Mail does not auto-invert whole regions, and [data-ogsc]/[data-ogsb] hooks patch Outlook.com's partial invert as best-effort.

Buttons

Primary (solid blue) stays brand #0171D9 in both light and dark. It reads on every background.
Secondary (outline) lightens to #32A1FC in dark for targetable clients, so its border and text keep contrast.
Both are bulletproof: a VML <v:roundrect> for Outlook and a padded rounded <a> everywhere else. Full-width on mobile.

Other client fixes

Outlook for Windows centres the verification code with padding, not line-height. The mso-line-height-rule alone sat the code low in its box.
Footer text sets an explicit font-family per cell, because Outlook does not inherit it.

Placeholders

Cognito: {####} (code or temporary password, keep it exactly once), {username}.
Custom sender (Handlebars-style): {{company}}, {{confirmUrl}}, {{name}}, {{deletionDate}}, {{cancelUrl}}.

UTM tags

Every Bodd logo links to bodd.com with UTM parameters, so this traffic is attributable in analytics. If you add more links, tag them the same way. Keep source and medium fixed; that is what separates transactional email from marketing.

Parameter	Value	Notes
`utm_source`	`transactional`	Fixed. Marks it as a transactional, not marketing, send.
`utm_medium`	`email`	Fixed.
`utm_campaign`	the email's name	One value per template, kebab-case: `invitation`, `verification-code`, `account-deletion`, `temp-login`. The reference file uses `master`.
`utm_content`	the element	Which link was clicked. All logo links use `logo`; use distinct values if you add others, e.g. `header-cta` or `footer-privacy`.

So an invitation logo link looks like:

https://bodd.com/?utm_source=transactional&utm_medium=email&utm_campaign=invitation&utm_content=logo

Do not add UTM tags to in-product links (for example int-hub.bodd.io). UTM is for arrivals on bodd.com only; internal app links stay clean.

Assets and caching

All images are hosted at bodd-email-assets.s3.ap-southeast-1.amazonaws.com. Logos and the gradient bar are cached long, since they rarely change; the image placeholder and signature avatar are set to no-cache while we iterate.