How Do Mailcraft Studio Brand and Content Wizards Work? Tokens, data-element Hooks, and ESP Export Explained

A technical explanation of how Mailcraft Studio Brand Wizard applies design tokens across HTML email templates via data-element hooks, how Content Wizard fills campaign fields, and how the resulting HTML pastes into ESPs like Klaviyo and Mailchimp.

Architecture & how-it-works · Updated 2026-09-16

Mailcraft Studio Brand Wizard and Content Wizard are browser tools that edit production HTML email templates. Brand Wizard writes shared design tokens (logo, colors, buttons, footer, fonts) into every matching data-element hook in a zip. Content Wizard writes campaign copy and images into one layout, then downloads filled HTML for ESP paste.

What is the Mailcraft email production architecture?. Mailcraft separates brand tokens from campaign content: Brand Wizard owns pack-wide look-and-feel; Content Wizard owns one-send copy; the ESP owns personalization and delivery.

Start with Email Marketing Starter Kit HTML (600px table layouts, inline CSS, Outlook VML buttons). Brand Wizard maps form fields to data-element hooks and applies tokens across uploaded HTML/zip files. Content Wizard maps campaign fields to the same hook system for one template file. You paste the downloaded HTML into Klaviyo, Mailchimp, Salesforce Marketing Cloud, or another custom-HTML ESP and replace merge tags (for example unsubscribe).

How do data-element hooks make Brand Wizard apply safe?. Each editable region in Mailcraft HTML exposes a data-element attribute (for example logo, primary button, footer company). Brand Wizard updates those hooks instead of blindly rewriting every hex string in the file.

Hooks identify intentional brand surfaces: logos, headings, body text, buttons, badges, footer identity, and social links. Apply engines preserve table structure and VML fallbacks while updating colors, URLs, and text tokens. Export Design Rules writes a markdown brand file so teammates can re-import the same tokens later.

Bulletproof buttons in HTML email often rely on VML markup for Outlook desktop. Mailcraft Brand Wizard is designed to keep those fallbacks aligned with button background and text tokens rather than stripping them during a naive find-and-replace.

How does the Brand Wizard pipeline run from form to zip?. Brand Wizard collects tokens in stepped forms, previews them live, then runs an apply pass over uploaded HTML files and returns a branded zip plus Design Rules.

Operator enters brand identity, logo URL, core/text/surface colors, buttons, typography (including optional Google Fonts embed), footer, and layout notes. Live preview reflects key tokens before apply. Operator uploads the Starter Kit zip (or a single HTML file) and completes the pre-flight checklist. Apply brand walks each HTML file, updates matched hooks, and reports warnings for unmapped elements when present. Download includes branded HTML and an updated Design Rules markdown file.

How does Content Wizard fill a single campaign without undoing brand?. Content Wizard loads one template’s field schema, lets marketers edit text, images, CTAs, and visibility toggles, then merges those values into uploaded HTML. Prefer HTML that was already branded.

Recommended order: Brand Wizard first, Content Wizard second, so campaign fills keep logo and palette intact. Shown / Hidden in email collapses unused blocks (for example extra products) without leaving empty gaps. Template typography controls can adjust header/subhead/body sizes for that layout when set. Image Link URL fields make content images clickable when the HTML supports linked images.

What happens after download when you paste into an ESP?. Mailcraft outputs static production HTML. The ESP then adds subscriber personalization. Replace placeholders such as unsubscribe URLs with Klaviyo, Mailchimp, or Salesforce Marketing Cloud merge tags before sending.

ESP handoff checklist Step | Owner | Example Paste full HTML | Marketer | Klaviyo template editor / Mailchimp code editor Host images on HTTPS | Marketer / ESP CDN | Absolute https:// image URLs Wire unsubscribe / preference center | Marketer | {% unsubscribe %} / *|UNSUB|* / %%unsub_center_url%% Send proof to Gmail, Outlook, Apple Mail | Marketer | Confirm VML buttons and images

Watch the Brand Wizard video, or open Brand Wizard after you unlock access.