Modular Email Design System Built for Scale

Travel & Hospitality
HTML
Liquid
Figma

We replaced Blade’s single static email template with a Modular Design Kit, HTML modules with Liquid logic that the marketing team snaps into on-brand, accessible, dark-mode-ready emails. Then we trained the team to run it without us.

static template before, updated weekly: 1
from design sign-off to every module: 1 week
lifecycle series relaunched first: 2

01The ask

One template, updated by hand, every single week.

The Braze Playbook we wrote for Blade came with a clear recommendation. Modernize email. Blade sent everything from one static template that someone updated by hand each week, inside a drag-and-drop editor that limited custom design and personalization.

Without standard components, emails looked different from campaign to campaign and from one mailbox provider to the next. The design didn’t meet accessibility standards or render properly in dark mode, and the weekly rebuild ate time the team didn’t have.

02The audit

Start with the parts Blade already used most.

We audited Blade’s existing campaigns to find the components they leaned on most, then mapped new modules for the use cases coming next.

With Blade, we set the standards every module follows for typography, colors, imagery, and accessibility, with full dark mode support written in from the start.

03The kit

Snap the modules together, send the email.

The Modular Design Kit is fully HTML and built from reusable modules that assemble into templates. Liquid logic tailors the content to each audience, so the same modules serve different groups of fliers.

Within a week of design approval we had built every module and template in HTML. Blade’s team assembles branded emails with copy and paste, and every campaign takes less design and build time.

Three tilted phones on a navy background showing parts of one Blade email, a Special Ops commuter module with a helicopter over a river, a Hudson Yards shopping module, and an app download module — One email, three modules deep. Commuter route, Black Friday shopping flight, app download.

04The rollout

Welcome series first, passholders next.

We picked the lifecycle campaigns to relaunch on the new system. The Welcome Series went first because it is the first thing a new customer receives. A series tailored to passholders followed.

We trained Blade’s team on the system in Figma and HTML sessions and left written documentation, so the marketers can keep building without us.

05What changed

Blade’s team builds the emails now.

Speed

Assemble instead of rebuild.

Reusable modules replace the weekly manual update and cut design and build time for every campaign.
Brand

The same look in every inbox.

Shared standards for type, color, and imagery hold across mailbox providers, with accessibility and dark mode support.
Personal

Liquid picks the content.

Each audience gets content tailored to it from the same set of modules.
Independence

Trained and documented.

Hands-on sessions and written docs mean Blade adapts the system to new campaigns on its own.

06If you’re next

What we’d tell a team in Blade’s seat.

01
Audit the emails you already send before you design a single module. The components you use most tell you what to build first.
02
Put accessibility and dark mode in the standards, before anyone codes a module.
03
Relaunch the first touchpoint first. Blade started with the Welcome Series because every new customer sees it.
04
Budget for training and docs. A system the team can’t run on its own turns back into one static template.

Roll credits.

Who did what, and with which tools.

Client: Blade
Our part: Email auditDesign standardsHTML module buildLiquid personalizationTraining and documentation
Built with: HTMLLiquidFigma
Timeline: All modules built within a week of design approval