Email design system

A Better Way to Build Emails
With An Email Design System

Email templates don’t work at scale. As teams and campaigns grow, copying monolithic HTML and rigid layouts causes email breakage and brand chaos. Alpaco delivers a true email design system: modular components, strictly typed inputs, neighbor-aware intelligence, and enterprise guardrails that keep your brand unbreakable.

See how it works
BASE
BLOCK
BLOCK
BLOCK
BLOCK Hero Banner
INPUT GROUP
Image
Select
INPUT GROUP
Text
Text Area
INPUT GROUP repeatable
Text
Boolean
Color
EMAIL ARCHITECTURE COMPARISON Rigid File vs Modular System
Email Template Rigid
1 rigid layout. Hardcoded HTML that breaks when you try to change modules.
Email Design System Modular
⋮⋮
BASE
⋮⋮ BLOCK
⋮⋮ BLOCK
+ Add Block
BASE
Independent blocks. Reorder and assemble custom emails with zero broken code.
Source of truth

Why You Need An Email Design System And Not Just An Email Template

Traditional email templates are monolithic: you copy 2,000 lines of table HTML, change the copy, and pray Outlook doesn't tear your columns apart. Alpaco decouples the code from the content, giving developers centralized code governance and marketers drag-and-drop freedom.

Centralized brand governance

Templates duplicate styles across hundreds of static files. In an email design system, global design tokens, fonts, CSS resets, and legal footers live in a single Base file that updates across every campaign automatically.

Autonomous modular components

Templates tightly couple layout code to copy, making simple edits fragile. A design system provides client-tested, reusable blocks with strictly typed inputs, allowing marketers to assemble campaigns without breaking layout tables.

Synchronize across templates and campaigns

Update a shared block, design token, or global base in one place and synchronize the changes across all connected templates and campaigns directly in the platform. Propagate updates safely with complete revision control and zero manual copy-pasting.

BRAND GUARDRAILS

Unbreakable brand guardrails

Marketers need creative agility without the danger of breaking Outlook tables or guessing brand hex codes. Alpaco replaces raw code with strictly typed inputs—character limits, locked color palettes, aspect ratios, and dynamic repeatables.

Character & text bounds

Set min/max character thresholds on headlines and buttons to prevent messy line-wrapping and multi-line button overflow across mobile screens.

Locked brand color swatches

Eliminate rogue colors. Content authors can only select from your brand's approved primary, secondary, and neutral color swatches.

Computable repeatables

Product lists that dynamically calculate column layout based on item count: 1 item = hero spotlight, 2 items = 50/50, 3 items = 3-column desktop grid.

SCHEMA GUARDRAILS

Typed Module Inspector

Strictly Enforced
Headline Max Length 38 / 50 Chars (Compliant)
Approved Color Palette 4 Approved Tokens
Custom Hex Disabled
Computable Repeatables Auto-Balanced
Grid recalculates from 1-column hero spotlight to 50/50 or 3-column layout without breaking email tables.
<!-- Programmable module with full Liquid support -->
{% if block.discount_active %}
  <table class="badge" bgcolor="{{ base.brand_primary }}">
    <tr><td>
      {{ block.promo_text | default: "SPECIAL OFFER" | upcase }}
    </td></tr>
  </table>
{% endif %}

{% for item in block.products limit: 3 %}
  <div class="col-{{ forloop.length }}">
    <h4>{{ item.title }}</h4>
    <p>{{ item.price | money }}</p>
  </div>
{% endfor %}
LIMITED AUTUMN SALE
Nordic Parka
$189.00
Wool Knit
$94.00
Trek Boot
$145.00
Liquid: Validated · 0 Errors Built-in error handling
templating language

Your code, your rules

Your email modules don't have to be static HTML fragments. Alpaco gives developers native Liquid templating. Write expressive conditional branches, iterate dynamically over repeatables, and apply formatting filters—empowering marketers with flexible inputs while keeping code structure bulletproof.

Conditionals, loops & filters

Build self-adapting components. Use Liquid’s complete standard library to swap layouts based on toggle states, calculate responsive grid columns based on item quantities, or format currencies and dates on the fly.

Built-in error handling

Catch mistakes before they reach customer inboxes. Alpaco features built-in Liquid error handling that surfaces syntax issues and broken tags with clear feedback, making it easy to troubleshoot and keep your templates running smoothly.

Raw syntax & ESP tag protection

Wrap complex merge tags in {% raw %} blocks. Alpaco passes through personalized ESP tags (Klaviyo, Braze, Iterable, Salesforce) untouched, guaranteeing your dynamic subscriber feeds and event payloads never get stripped or mangled.

Image optimization

Image optimization built directly into your template

Eliminate design bottlenecks and repetitive export workflows. Alpaco executes image transformations directly inside your component architecture—calculating exact aspect dimensions, framing focal crops, applying promotional overlays, and serving edge-cached formats built for flawless rendering across all inboxes.

Images that fit your intention

Define how images must fit your container by setting a target width or height. Depending on the photo uploaded, Alpaco automatically detects its aspect ratio, computes the missing dimension, and exposes both in Liquid (image.width, image.height). Your layout can adapt seamlessly to any uploaded asset without squishing or stretching, leaving you with an email that flawlessly matches your intended design.

No design tools required

Visual styling rules—including focal cropping, promotional badges, letterbox padding, and contrast scrims—are defined directly inside your component architecture. Content teams upload standard imagery, and the template transforms it automatically with zero design backlog.

Optimized format

Assets adapt dynamically to subscriber client capabilities: modern inboxes receive crisp, lightweight WebP, while older desktop Outlook clients seamlessly receive optimized JPEG or PNG fallbacks.

Lightening fast

Optimized variants are signed, compressed, and delivered globally across edge servers for instantaneous display. Intelligent compression reduces asset weight by up to 80%—resulting in lightening fast delivery.

IMAGE OPTIMIZER
Product image transformed on-the-fly with Cloudflare worker badges and cropping
SAVE 30%
Measured: 600 × 338px WebP (38 KB) · Fallback JPG
Aspect & Measured Geometry
Dynamic Run-time Badges
Input types

Build design systems with robust input types

Inputs are the finest details of your email design system. You configure every component with strictly typed fields: character-limited text, rich formatting controls, predetermined dropdowns, boolean switches, locked aspect ratios, brand color pickers, raw code, and live catalog feeds. Editors get intuitive controls to customize content while the structural integrity of your code remains untouched.

text
✓ Within limits
39 / 55 characters Enforced: Min 10, Max 55
Validation

Total creative autonomy with zero broken emails

Move fast without risking brand reputation or broken layouts. Alpaco's inline validation engine catches missing CTAs, text overflows, placeholder copy, and broken links in real time before campaigns ever reach your ESP.

Required field enforcement: Block saving when critical inputs are missing—CTAs, hero images, subject lines, preheaders, territory dropdowns, or required legal copy.

Stale placeholder detection: "Must Not Be Default" flags untouched starter content—dummy headlines, FPO banners, sample URLs like example.com, and unconfigured toggles.

Adaptive character budgets: Min & Max length limits prevent subject line overflows, button text wrapping, and accidental single-character copy on headlines or CTAs.

Automated UTM & URL syntax: Regex rules enforce https:// protocols, required UTM tokens, phone/postal formats, and discount coupon patterns.

Brand-governed color swatches: Lock Color Picker and Select inputs to approved design tokens—no rogue hex codes, no off-brand accents.

Image dimensions: Enforce exact pixel dimensions on image inputs to guarantee consistent rendering across clients—block uploads that don't match the required width or aspect ratio for a given slot.

Repeatable count limits: Cap how many rows an editor can add to a repeatable block—set a minimum and maximum count to prevent sparse single-item lists or runaway product grids that break layout.

Contextual field dependency: Show or hide inputs dynamically with Liquid if / unless conditions—reveal a link field only when button text is filled, or show promo inputs when a toggle is on.

Actionable error feedback: Every rule carries a custom error message. When validation fails, Alpaco jumps directly to the field, highlights it, and blocks saving until fixed.

GLOBAL CONTROLS

One To Rule Them All

Design systems shouldn't force you to choose between rigid monolithic templates or dumb, siloed components. Alpaco provides a unified hierarchical control plane: govern macro brand themes and layout presets top-down at the Base template level, while empowering inputs to traverse freely up and down the hierarchy—letting block-level decisions seamlessly influence the master canvas and neighboring modules.

Template-wide changes

Manage macro-level rules from a single cockpit. Define global layout presets, container widths, brand typography, and theme tokens at the Base template level that instantly cascade across every block.

Traverse the hierarchy

Inputs aren't trapped in siloed components. Inputs can traverse freely up and down the hierarchy. (e.g. A dropdown input for a theme in Base can traverse down and adapt styling across every Block, while inputs inside an individual Block can traverse up to inject custom styling and rules directly into Base.)

Drop area
Content Aware

Self-aware blocks that know what's next to them

In traditional email tools, components are completely blind to their surroundings—forcing developers to code and maintain four separate variants of every component ("Card-Top", "Card-Middle", "Card-Bottom", "Card-Isolated"), or leaving marketers to manually tweak spacing sliders. Alpaco lets you implement neighbor-aware logic directly in your design system.

Programmatic adjacency rules

Define intentional rules directly in your component code. Using built-in neighbor attributes developers can program an article block to round its facing corners and inject spacing when another article is dropped below it.

Effortless layout for marketers

Marketers simply drag and drop blocks into the canvas. They don't have to fiddle with manual padding overrides, hunt for margin settings, or pick between card variants—the blocks adapt on their own based on the rules you engineered.

Zero variant clutter

Maintain one pristine, intelligent component template instead of bloating your library with redundant edge-case clones. One smart block handles isolated, stacked, top, and bottom placements effortlessly.

VERSION CONTROL

Evolve your design system without breaking past campaigns

Updating a master header or button style shouldn't risk breaking live journeys or scheduled sends. In Alpaco, template evolution is non-destructive: existing emails remain locked to the layout snapshot they were created with. When you're ready to modernize an email, a single click on “Update Layout” pulls in your latest framework without touching your content.

Past emails stay untouched

Modifying a Base layout or Block never mutates existing campaigns. Every email stays pinned to its creation snapshot, keeping active journeys and past sends safe.

Modernize with "Update Layout"

Bring evergreen journeys or seasonal drafts up to your latest design system with one click. Inherit updated headers, footers, and styles while preserving 100% of your copy, links, and images.

Full revision history & rollback

Every template iteration is saved as an immutable revision with author attribution. Preview past snapshots and roll back with a single click.

Alpaco Email Platform Emails Templates Merge Tags Asset Manager
Autumn Product Launch #48
Template v2.4 available. Existing email layout is preserved.
NEW APPAREL SALE
AUTUMN LAUNCH
Nordic Minimalist Collection
Shop Collection →
$149
$98
Version History
3 Releases
v2.4 (Latest) RELEASE
Updated CTA border-radius & spacing
12m ago by Sarah M.
v2.2 PINNED IN EMAIL
Baseline layout snapshot
4d ago by Alex K.
v2.0 ARCHIVE
Initial system setup
Non-destructive by design
Headline
Playfair Display
Headline
Inter
Multi-brand

One Email Design System, Multiple Brands

Running multiple brands, regional subsidiaries, or managing dozens of agency clients? Stop rebuilding templates from scratch every time. Share your master Email Design System across organizations with strict governance, or clone it in one click as a springboard for a new brand.

1-Click design system cloning

Need a starting point for a new brand or client? Clone your complete design system—including base canvases, modular blocks, Liquid logic, and guardrail rules—and adapt it independently.

Cross-organization sharing

When a template is copied, you get an exact 1:1 version with all layout architecture, modular blocks, and structural guardrails completely intact.

Tailor fonts, colors & identity

Once copied, the new organization simply swaps in their brand font family, color scheme, and logos. Each organization works autonomously while sharing the same proven structural baseline.

WHY an EDS

Stop scaling chaos. Start scaling quality.

Building your email design system in Alpaco changes how your whole team works — not just how templates look.

Ship Campaigns Faster

Reusable blocks replace copy-paste HTML. On-brand emails assembled in minutes, not days.

Brand That Never Breaks

Typed inputs and validation guardrails keep every editor inside approved brand boundaries.

One Source of Truth

Update a Base or block once and it propagates everywhere — no more hunting down stale variants.

Built to Scale

From 1 template to 10. Add brands, markets, and teams without rebuilding from scratch.

Clone Across Brands

Copy a master template to a new brand or market in one click. Same structure, different tokens and fonts.

Dev & Marketing Aligned

Developers define what's possible; marketers execute within those boundaries. No more one-off layout requests.

Build Your Email Design System Today

Empower your marketing and engineering teams with modular components, unbreakable guardrails, and autonomous neighbor intelligence.