Six templates, one voice.

Cover note

Six standalone HTML emails in email-templates/. Each renders the EUR variant for preview, with HTML comments marking the £/€/$ localisation point. All six follow the same skeleton: 600 px body, table layout, inline styles on every text element, bulletproof VML+HTML CTA, light-mode meta tags, 480 px mobile media query. Headers, footers, trust strips and footer-link sets are identical across the suite — change them once, change them everywhere.

Tokens used most

Almost every pixel reduces to a small handful of brand values:

--rs-navy #0D2B42 --rs-cyan #32CCCC --rs-deep-teal #057E9F --rs-bg-soft #F2F4F8 --rs-divider #D9D8D8 --rs-warning-bg #FFF4D6 --rs-warning-deep #A76212 --rs-warning #FFB800 --rs-radius-md 10px --rs-radius-lg 16px --rs-radius-pill 999px Open Sans 700/600/400

The cyan/navy CTA pairing is on every template; navy hero blocks and the soft-grey trust strip carry every email's bottom half.

WCAG AA — pairings audited

• Navy on cyan (CTA): contrast 8.6 — passes AAA.
• White on navy (hero, footer): contrast 13.0 — passes AAA.
• Navy on white / soft-grey (body): contrast ≥ 14 — passes AAA.
• Warning-deep #A76212 on warning-bg #FFF4D6 (drop-off banner): contrast 5.4 — passes AA for normal text. Used on bold ≥13 px only.
• White on cyan avoided — the in-line trust strip on confirmation uses navy on cyan, not white.

Decisions not explicit in DESIGN.md

• Star tap-targets on post-stay rendered as 64 px circular pill links with the warning-bg fill and warning yellow ★. The brief says "rendered as styled spans, never the unicode glyph in production"; for an email where each star must be a clickable URL with no JS, we keep the unicode ★ inside an anchor and treat each anchor as a styled token (this is the §16 documentation exception in practice). Flagging for review.
• Drop-off-reminder banner uses warning-bg #FFF4D6 with warning-deep #A76212 text. The system has these tokens but no canonical "reminder banner" component — proposing one for the kit (see additions below).
• Booking-confirmation uses two banners stacked: a slim cyan "✓ Booking confirmed" strip plus the navy hero. This reads more decisive than a single banner and reuses the cyan-success token without colliding with the CTA.
• Trust strip wording hard-coded to the EUR variant per the brief, with an HTML comment immediately above marking it as the £/€/$ localisation point. The 15,000+ Angels figure is stable across locales as instructed.
• Mustache section block on winback uses {{#promo_code}}…{{/promo_code}} so the dashed-border promo card renders only when the variable is set. ESPs that pre-process Mustache will strip the wrapper; ones that don't (rare) will pass it through harmlessly as inert markup.
• VML CTA has the HTML <a> wrapped in <!--[if !mso]><!--> … <!--<![endif]--> with mso-hide:all as belt-and-braces — Outlook 2016+ on Windows always renders the VML roundrect; everyone else gets the modern button.
• Logo URL. Used radical-storage-network-default.svg from the production CDN, matching the email kit demo. The downloadable zip's radical-storage.svg is the website primary; the network variant is the canonical email lockup.

Recommendations for the design system

• Add a §13 "EmailReminderBanner" component. Warning-yellow strip used here on drop-off-reminder and potentially on booking-change/cancellation flows. Token pairing: --rs-warning-bg ground, --rs-warning-deep text, 1 px #F5E2A8 bottom border.
• Codify a "Mini Angel card" for email. Web's AngelCard.jsx is too tall for stacked 600 px layouts. Spec a compact horizontal variant: 110 px image, name, distance, rating, price-per-bag — used here on abandon-browse (3-up) and winback (2-up).
• Document the email QR component. The kit demo uses a CSS pattern as placeholder; real templates need a 220×220 px server-rendered img referencing {{qr_code_url}}. Worth a §12 entry on minimum size, on-white background, and the booking ID caption underneath.
• Tap-target ratings. Add a sanctioned "5-star tap row" pattern to §13 with clickable per-score URLs and minimum 56 px circular targets — every brand needs one and right now the spec is silent.
• Localised currency partials. The £/€/$ guarantee line appears in every email's trust strip and at least one CTA-adjacent line. Worth a Mustache snippet (e.g. {{> guarantee_line}}) so locale logic lives in one place.
• City photo URL convention. The hashed-slug pattern is unpredictable for new cities. Consider exposing a deterministic redirect (/luggage-storage/{city}/hero.jpg → latest hash) so templates and decks don't break when an asset is rev'd.
• "Two-banner" hero pattern. Cyan strip + navy hero (used on confirmation) is striking and worth formalising. Without a spec, individual templates will drift in banner heights and copy structure.