06-Apr-2026 — make all Brevo templates fluid, consistent, and Ramblers-aligned #223
build 579 — commit 8811ac3
Introduce a shared Ramblers-aligned email base layout that all NGX transactional templates inherit from, matching the Ramblers MailChimp national campaign design system.
Layout builder (ramblers-email-layout.ts) now generates complete HTML
- Several recent Ramblers national campaigns were used as the structural reference point for the Brevo email redesign. The implementation started from those campaigns, but a few details were intentionally refined during development so the final Brevo output rendered more consistently across desktop, mobile, Outlook and the in-app preview.
| Element | Value |
|---|---|
| Container max-width | 600px fixed desktop, responsive at 768px and 480px breakpoints |
| Page background | #f4f4f4 |
| Content background | #ffffff |
| Body font | Helvetica, Arial, sans-serif, 16px, #222222, 150% line-height |
| H1 | Helvetica 40px bold #222222, centered, 125% line-height |
| H2 | Helvetica 34px bold #222222, left-aligned |
| H3 | Helvetica 22px bold #444444, left-aligned |
| H4 | Helvetica 20px bold #444444, left-aligned |
| Body links | #c05711 (burnt orange) with underline |
| Header treatment | White content container with linked banner image and no extra internal banner padding |
| Footer background | #404141 (charcoal) with white 12px centred text |
| Footer social row | Centred social icons in an email-safe table layout with vertical padding |
| Image treatment | border: 0; height: auto; outline: none; plus -ms-interpolation-mode: bicubic for Outlook |
| Outlook compat | mso-table-lspace: 0pt and mso-table-rspace: 0pt, plus related Outlook-safe table/image handling |
| CTA style | Rectangular full-width button, accent background, bold dark text (#222222), centred, 20px vertical padding, no rounded corners, no border |
| Section divider | Accent-coloured horizontal rule, 6px thick, inset to align with the body-content column rather than full edge-to-edge container width |
Accent colour — named palette with three known values
The only token that varies by email context is the accent colour, used for CTA button backgrounds and divider rules. The shared footer/background typography does not vary by accent in the shipped implementation.
| Brand name | Hex | Usage |
|---|---|---|
| Sunrise | #F9B104 |
Default primary accent, CTA buttons and divider rules |
| Rosie cheeks | #F6B09D |
Optional accent for divider/button variants |
| Mint cake | #9BC8AB |
Optional accent for divider/button variants |
Notes on the final implementation
- The Brevo templates were rebuilt around a shared Ramblers-aligned layout rather than separate per-template wrappers.
- Transactional and campaign templates now share the same header, divider, spacing, typography and footer system.
- The greeting/salutation position was standardised via
messageMergeFields.ADDRESS_LINE.
Improved WYSIWYG Preview on email send dialog
- The preview experience was also updated so the rendered output more closely matches the sent email styling.
- Add backend Brevo template rendering for realistic preview output and update committee/group-event notification preview tabs to use isolated iframe rendering rather than Angular DOM injection
- Normalise salutation handling around ADDRESS_LINE so templates and Angular notification bodies no longer duplicate greetings
- Align Ramblers-fed event contact links and CTA labels in notification previews with real event-type and remote-contact behaviour
- Centralise default email link styling in render-time substitution so Angular-generated body links inherit the Ramblers email treatment more consistently
- Refine shared layout spacing, divider alignment, mobile heading styling, footer icon layout, per-event separators, and preview scrolling based on live rendering checks
- Update StringUtilsService.asTitle to normalise tokenised values through asWords first, with unit coverage for kebab-case and camelCase inputs
- This is the preview tab of the notification page, showing all links and text correctly formatted as it will be seen in the recipients email:
Data Migration
- New migration (20260406000000) reseeds all templates on deploy.
- All 8 Brevo HTML templates converted to body-content-only snippets wrapped by the shared layout at seed time. Welcome template "your your" typo fixed. Committee notification component colours aligned with design system.
- repair Brevo template reseeding to search all templates, preserve canonical IDs, archive or remove broken duplicates, and rewire stale notification config template references during the April migration
- harden sender handling and logging for Brevo template create/update flows, including clearer template-specific failures and sender-aware recovery for invalid remote template state