Foundation

Your brand, locked into reusable modules

The Email Design System is where designers and developers define your brand once: layouts, modules, rules, and guardrails. Everyone else builds on-brand campaigns on top of it, without ever breaking anything.

Designers get a system. Developers get real code. Editors get creative freedom within guardrails.

Request a demoExplore all features
↩ Repeat this for every new email, every rebrand, every ESP switch

This is not a template gallery

Traditional email templates are built inside the constraints of a specific ESP, hand-coded by a specialist working around whatever that platform's editor allows, then handed off with a list of dos and don'ts for anyone who touches it after. The result is a compromise nobody's fully happy with, and a set of unwritten rules editors have to remember.

A design system removes the ESP from that equation entirely. The whole campaign is built and governed inside Better Email: layouts, modules, and rules, independent of any platform's restrictions. The ESP only enters at the very end, as an export target.

That's what makes it a system, not a template: modules carry rules, not just structure. Switch a brand and colors, logos, and copy update everywhere. A template can't do that — it's static.

Structure

Content zones define where modules belong

Every module has a zone: navigation stays in the header, CTAs live in the body, app store badges go to the footer. The system knows— so editors don't have to remember.

👆Drag a module into the email
Summer Campaign — inbox preview
Header zone
Body zone
Footer zone

Module library

Navigation
Header zone only
CTA
Body zone only
Shop now
App store badges
Footer zone only
🍎App Store
▶Google Play
Building blocks

A library of reusable modules

Headers, heroes, product grids, CTAs: build each module once and use it in every campaign. Each module exposes exactly the settings you decide, with typed inputs so editors can only enter valid content.

Module: Hero BannerText

22 characters

Guardrails

Freedom within guardrails

Guardrails are what make a design system safe to hand to the whole team. Every input type carries its own validation options: set the rules per field, and Better Email enforces them while people work, not after the campaign has shipped.

Mandatory fields: a campaign can’t ship with an empty headline or a missing link.

Must-change defaults: placeholder text has to be replaced: no “Lorem ipsum” reaching real inboxes.

Pattern rules: regex on text and URL fields: tracking parameters, naming conventions, link formats.

Character limits: min and max lengths per field: emoji and special characters count correctly.

Value ranges: numbers respect minimum, maximum, and step: typed in or dragged on a slider.

Image dimension rules: min and max pixel dimensions enforced on upload, with retina-ready sizing.

Safe links only: require https, and decide per field whether mailto:, tel:, and sms: are allowed.

Required alt text: accessibility enforced at the source: per image field, not patched later.

Palette-locked colors: named brand swatches only, unless you explicitly allow free color input.

Repeatable limits: min and max items per group: a product grid always has two to six products.

Conditional visibility: show a field only when relevant, driven by a Liquid expression like a toggle being on.

Custom error messages: every rule explains itself in your words: “Add the campaign UTM tag”, not “regex failed”.

For developers

Designers get a system, developers get real code

Under the hood, every module is HTML with full Liquid templating support. Build programmable modules: brand-switch dropdowns, conditional layouts, loops over repeatable content: in a dedicated code editor made for email development.

Preview

Summer Sale starts now

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod.

Full Liquid templating

Conditionals, loops, variables, filters: build programmable modules like brand-switch dropdowns and conditional layouts that adapt to editor input.

Liquid linter built in

Catch syntax errors and undefined variables as you type, before an editor ever opens the module.

Assets panel

Upload your images and files on the world's fastest server.

Co-author with Betty

Betty, our AI assistant, can write and refine module code alongside you. Learn more about Betty.

Image pipeline

Skip the image production line

The small image jobs that pile up in a designer's queue: putting the campaign badge on a banner, a logo on a photo, rounding corners, layering a collage: repeat on every single campaign. They don't have to. Build the recipe into the module once, and Better Email's image pipeline applies it to whatever editors upload.

Coffee banner without a badgeCoffee banner with a yellow -20% badge composited onto the top right corner
Server-side overlays
{{ hero.image | imgTag: width: 640, draw1_url: badge.url, draw1_top: 36, draw1_right: 36 }}

The badge is composited into the image itself, server-side — no designer opening Photoshop. Up to five layers: badges, logos, rounded-corner frames, collages.

The original square upload, letterboxed — it does not fill the 2:1 slotSquare photo cropped to a 2:1 hero with the coffee cup kept in frame
Cropping with a brain
{{ hero.background | imgTag: width: 640, fit: 'cover', gravity: 'auto' }}

Fills the 2:1 hero exactly; saliency-based cropping keeps the subject in frame — whatever editors upload.

The photo with square corners, straight from the uploadThe same photo with rounded corners applied by a corner-frame overlay
Rounded corners, no Photoshop
{{ hero.image | imgTag: width: 640, draw1_url: corners.frame, draw1_width: 640 }}

A corner-frame overlay is stretched across the image and composited in — rounded corners on whatever gets uploaded, rendering in every client. Define the frame once in the design system.

The same logo cover-cropped — the antlers are cut offDeer line-art logo padded onto a white 2:1 canvas without cropping
Logos, never cropped
{{ banner.logo | imgTag: width: 600, height: 300, fit: 'pad', background: '#ffffff' }}

Pads instead of crops — the logo always fits, on the background you choose.

…and imgTag writes the whole tag for you

You write

{{​

The email gets

  • The height is measured, not guessed. imgTag reads the upload's real aspect ratio and calculates the height for you: nobody hand-measures an image again.
  • Fixed dimensions keep email layouts stable. Clients reserve the exact space before images load: or when they're blocked: so nothing jumps, stretches, or collapses in Outlook.
  • Alt text rides along automatically. The value from the image input is written into the tag: accessibility without anyone remembering it.
No designer bottleneck
The designer defines the recipe once: badge position, crop, corners, sizing. After that, no campaign waits in a design queue for image edits again.
Email-safe on upload
SVGs are rasterized to PNG automatically. Email clients can't be trusted with them, and formats clients can't render are kept out.
Signed and edge-cached
Every variant is a signed URL cached on Cloudflare's edge: fast in every inbox, and nobody else can use your pipeline.
Read the image docs
DRY by design
Define it once, use it everywhere
A design system only stays maintainable if nothing is repeated. Better Email gives you two tools for that: a system-wide Global Script for brand tokens, and shared inputs that every module can reference.
  • Brand tokens in the Global Script
    A Liquid script that runs once before every email renders. Set your brand values with set_global — every module reads global.brand_primary. A rebrand is a one-line edit.
  • Shared inputs across modules
    Build an input once and reference it from any module. Definition and validation stay in one place.
  • Change once, updates everywhere
    When the brand changes, you change it in one place. No hunting through forty modules for hardcoded hex values.
Global Script — switch brand
global-script.liquidruns for every email
{% set_global brand_name = "Acme Living" %}
{% set_global brand_primary = "#0F62FE" %}
{% set_global brand_secondary = "#FFCC15" %}
↑ One edit here updates every module instantly
Global Script docsShared inputs docs
Email preview — all modules update
Summer Newsletter
AL
Shop the collection
All modules read from global.brand_primary
Revision historyHero Banner
Click any revision to preview it →
Version control
Iterate on the system without fear
A design system is never done. Better Email keeps a full revision history of your work, so you can evolve modules and layouts confidently and roll back when an experiment does not pan out.
Spring launch update · 2 hours ago
Spring Sale — up to 40% off
Shop the new collection before it sells out.
Shop now
  • Auto-saves as you work
    Every change is captured automatically. Nothing is ever lost.
  • Named versions
    Give meaningful milestones a name, so the history reads like a changelog.
  • Publish deliberately
    Work in progress stays private. Editors only see a module change when you publish it.
  • Restore any revision
    Roll back to any previous state in one click — auto-save or named version.
Scale
One design system, every brand
Running multiple brands or serving multiple clients? Share your Email Design System across organizations. Sister brands and teams get read-only access: they build campaigns on your system, but only the owning organization can change it.
Need a starting point for a new brand instead? Clone the design system and adapt it independently.
  • Share read-only with sister brands and teams
  • The owning organization stays in control of every module
  • Clone a design system as the starting point for a new brand
Sharing
MB
Master Brand
Design system owner
Owner
NO
Nordics Team
Builds on the shared system
Read-only
DE
DACH Team
Builds on the shared system
Read-only
Clone for a new brand
Copy and adapt independently
The foundation for everything else
The Email Design System is where it starts. Here is where it goes.
Visual Editor
Your modules power the visual editor. Editors drag them into place, fill in the fields, and ship on-brand campaigns.
Betty AI
Betty builds campaigns with your design system: and co-authors module code with your developers.
All features
Collaboration, feedback and approvals, translation, ESP integrations, and everything else in Better Email.
Ready to build your Email Design System?
Define your brand once: and let your whole team create better emails on top of it.
Request a demo