Theme, phones & dark mode

An email's look comes from its theme, so a change in one place restyles every block that uses it. This page covers the theme, your brand kit and fonts, how the email changes on a phone, and dark mode.

The theme

Open the Theme panel from the left rail. Its sections:

Colors: brand, accent (text on brand), text, muted text, background and card background. A block's color field can point at one of these instead of its own color, so it changes when the theme does.
Typography: the email's font, and a size, weight, line height, letter spacing and phone size for Heading 1–4, Body and Small. Headings use these sizes, and so do text blocks unless they set their own.
Buttons: three styles, Primary, Secondary and Outline, each with its background, text, border, corners and padding. A button picks its style and can still set its own colors.
Links: link color and whether links are underlined.
Layout: page background, email width (560–720 px on desktop; on phones the email always fits the screen), card padding and corners, block gap and text direction.
Dark mode: see below.

Unthemed emails render as they always have: every default is the old look.

Brand kit

Set up your brand kit once in Settings › Brand kit: logos (light and dark), colors, fonts, button styles, social links and your footer details, including the postal address many countries require in marketing email. Import from your website reads your homepage for a logo, colors, fonts and social links, and you choose what to keep.

New emails start from the kit. Apply brand kit in the Theme panel copies it into an existing email (Undo puts back what was there), and the header and footer sections read the kit's logo, links and address. Mia AI writes in your kit's look and your brand voice.

Fonts

Every font picker lists Web-safe fonts, a curated set of Google Fonts, and Your fonts: WOFF2 files your account uploaded (up to 20 fonts, each up to 2 MB a file). Every web font has a web-safe font it falls back to, and the picker says which email apps show the web font and which show the fallback. See Email client support for the full list.

Phone settings

The email adapts to a phone screen by itself: columns stack, images fit, and the type scale's phone sizes apply. Each block can also be tuned for phones in the Inspector's Mobile section:

Show on: All screens, Phones only or Desktop only.
Padding on phones, Font size on phones (text, headings, lists and buttons) and Alignment on phones. Left at Same as desktop, a block keeps its desktop value.
Columns choose whether they stack on phones, stack in reverse order, or stay side by side with a phone width per column.

Phone settings apply on screens up to 620 px wide. Classic Outlook and other desktop apps keep the desktop layout. Switch the canvas to Mobile to see them, and while it's on, padding, font size and alignment changes in the Inspector apply to phones only.

Dark mode

The Theme panel's Dark mode has three settings:

Auto: dark-mode apps recolor neutral text and white backgrounds with standard dark colors. Brand colors stay as designed.
Custom: the same recoloring with your own dark palette (text, muted text, card background, page background, links), derived from your light colors and editable. Each block can also set Text in dark mode and Background in dark mode, and an image can swap to a dark-mode version.
Off: no dark-mode styles are mailed. Apple Mail and Outlook show the email as designed, though Gmail's apps may still invert it.

Only some apps apply your own dark colors; others recolor the email themselves. The Clients preview shows each app's dark mode as measured.

Show in: interactive or fallback

Every block has a Show in setting: Every app, Only where interactive email runs, or Only where it falls back. Use a fallback-only text block for words like "Tap to vote on the web" that only make sense where a block falls back, or an interactive-only hint for "Tap a card to flip it". The canvas outlines blocks that are hidden in the version you're previewing.