Transactional email

The newsletter double-opt-in and welcome emails, built for Brevo. Email is the one surface where none of this design system's components can be used — so these templates reimplement the foundations by hand, in the only subset of HTML that email clients agree on.

This is a documented gap, not a one-off. Email clients have no flexbox, no grid, no external stylesheets, no webfonts worth relying on, and Outlook renders through Word. Nothing in Components survives that. These files exist so the next OCL email starts from something considered rather than from Brevo's drag-and-drop defaults. Filed as ocl_online#155.

Previews

Rendered in an iframe, which is a browser — not a mail client. Outlook is the one that will differ; seed-test before any real send.

Double opt-in confirmation. The first email a subscriber ever gets from OCL. Carries {{ doubleoptin }} — Brevo will not accept it as the DOI template without it. No unsubscribe link, on purpose: see Merge tags and footer links.
Open · plain text

Welcome. Sent by the sign-up form as its final confirmation email, once the subscriber clicks the confirm link. Invites a reply, so it must send from a monitored address.
Open · plain text

How the foundations translate

Foundation	In email	Why
Primary `#4836ff`	Literal hex, inline on every element	No custom properties, no stylesheet. The token's value is copied, not referenced — if the token changes, these files must be edited by hand.
Roboto	`Roboto, Arial, Helvetica, sans-serif`	Roboto is self-hosted for the site and won't load in mail. Arial is the real render in Outlook, so the stack is a fallback plan, not a preference.
Logo	PNG at an absolute HTTPS URL	SVG does not render in Outlook or Gmail. Matted onto white: the `#232323` wordmark would vanish against a dark-mode client's forced background.
Elevation	Not used	`box-shadow` is unreliable across clients. A 6px radius on a white card over `#f4f3f8` carries the separation instead.
Layout	Nested `<table>`, fixed 600px	The only layout primitive every client agrees on.
Button	Anchor + VML fallback	Outlook ignores padding on an anchor, so the button needs a `v:roundrect` behind an `[if mso]` conditional or it collapses to a bare link.

Merge tags and footer links

Verify these against your own Brevo account before sending. Brevo's tag names vary by account age and editor version. The templates use the names below; if Brevo's editor shows different ones, its names win — these are placeholders in a file, and a wrong tag ships a dead link in the one email a subscriber is most likely to click.

Tag	Where	Purpose
`{{ doubleoptin }}`	DOI email only	The confirmation link. Required — Brevo rejects a DOI template without it.
Unsubscribe form URL	Welcome only, footer	A plain `https://…sibforms.com/serve/…` link to the hosted OCL Newsletter unsubscribe form, not a merge tag. The subscriber confirms their address and is unsubscribed from newsletter email. The URL is on the form's Share step, and changes if the form is ever recreated.
`{{ update_profile }}`	Welcome only, footer	Brevo's hosted update-preferences form. In a transactional email Brevo hides that form's own Unsubscribe link, so it cannot stand in for the one above.

Neither email uses {{ unsubscribe }}. Both are Brevo transactional sends, the sign-up form's DOI email and its final confirmation. In a transactional email {{ unsubscribe }} unsubscribes the address from transactional email only: the subscriber stays on the newsletter list, and Brevo then blocks every later confirmation email to that address, so they cannot re-subscribe either. Brevo has no merge tag for a newsletter unsubscribe inside a transactional template, hence the form URL. The DOI email has no footer links at all: the reader is not subscribed yet, and "ignore this email" already covers it. Newsletter campaigns are marketing sends, where {{ unsubscribe }} is correct. See ocl_online#214.

Using these

Open the file, copy the whole thing, and paste it into Brevo's HTML editor — not the drag-and-drop editor, which will rewrite it.
Confirm the merge tags resolve in Brevo's own preview before saving.
Seed-test to Gmail, Outlook and Yahoo. Check dkim=pass and spf=pass in the raw headers, and that the welcome email's footer links resolve.

There is no plain-text paste. Brevo's template editor has no plain-text field, and Brevo builds the text part from the HTML when it sends. The .txt files are reference copies of what that part should say: compare them with a seed test's plain-text view.

The URLs point at openconceptlab.org. The logo is served by the community site at /images/email/ocl-logo.png, so moving or renaming that file there breaks the image in every email, including ones already sent. The switch from preview.openconceptlab.org was step 4 of ocl-community-site/docs/CUTOVER.md.

Not covered here

Brevo's hosted unsubscribe and update-preferences pages accept custom CSS but not arbitrary HTML. They can be brought onto OCL's colours and type, but they cannot be rebuilt — so they will read as OCL-coloured rather than OCL-designed. That is a limit of the vendor, and worth knowing before anyone files a bug against it.