Email Design That Doesn't Suck: A Non-Designer's Guide

Most marketing emails look the same. That's not a criticism — it's a design strategy. The emails that perform well share a handful of patterns, and once you learn them, you can stop overthinking layout and focus on what you're actually saying.

This guide covers the design fundamentals that matter for email. No jargon, no Figma tutorials, no "explore your brand's visual language." Just the stuff that works.

Why most marketing emails look the same

Because the constraints force it. Email HTML doesn't support CSS Grid, Flexbox (reliably), or most of the layout tools web designers take for granted. You're building with tables. In 2026.

The result: the emails that render correctly everywhere tend to follow the same structural patterns. That's not laziness — it's engineering. The smart move is to pick from layouts that are proven to work, not to invent something new that breaks in Outlook.

The goal isn't to make your email look different. It's to make it look intentional.

The only 5 layouts you need

Every effective marketing email you've ever received uses one of these structures:

1. Single column

One column, full width. Header at the top, content in the middle, CTA at the bottom. This is the default for a reason — it reads well on every screen size, doesn't require complex responsive handling, and forces you to prioritize your content.

Use it for: Announcements, welcome emails, simple promotions.

2. Hero + content

A big image or colored banner at the top, followed by text and a call-to-action. The hero grabs attention; the content below closes the deal.

Use it for: Product launches, event invitations, seasonal campaigns.

3. Two-column (split)

Content split into two columns — typically an image on one side and text on the other. On mobile, the columns stack vertically.

Use it for: Feature highlights, "what's new" updates, side-by-side comparisons.

4. Card-based

Multiple self-contained content blocks, each with its own image, headline, and link. Think of it as a mini-homepage in email form.

Use it for: Newsletters, weekly digests, product roundups.

5. Minimal

Almost no design at all. Plain text with maybe one link or button. Looks like a personal email, because that's the point.

Use it for: Follow-ups, survey requests, re-engagement. Any time you want the recipient to feel like a human wrote this specifically for them.

Color: pick two, maybe three, and stop

The number one design mistake in marketing emails is using too many colors. Here's the framework:

Primary color: Your brand color. Used for buttons, links, and accents. One color.
Text color: Dark gray or near-black. Not pure #000000 — something like #1e293b (slate-800) is easier on the eyes.
Background: White or very light gray. That's it.

If you need a third accent color, use it sparingly — maybe for a badge or a secondary button. But two colors plus white handles 90% of use cases.

What not to do: Don't use different colors for different sections "to make it interesting." Consistency signals professionalism. Variety signals a committee made decisions.

Typography: email-safe fonts that don't look like 2003

Email font support is limited. You can use web fonts in some clients (Apple Mail, iOS Mail, some Android clients), but Gmail and Outlook will fall back to system fonts. Plan for the fallback.

Safe choices that look good:

Arial / Helvetica — The universal default. Clean and boring in the best way.
Georgia — Serif option that renders well everywhere. Good for editorial-style emails.
Trebuchet MS — Slightly more personality than Arial without being distracting.

If you use web fonts, always set a fallback stack. 'Your Web Font', Arial, sans-serif. And test it — if the fallback looks bad, the web font isn't worth it.

Font sizes that work:

Headlines: 24-32px. Big enough to scan, not so big it feels like shouting.
Body text: 16px. Anything smaller is hard to read on mobile.
Fine print: 12-14px. For footers and legal text only.

Line height: 1.5 for body text. Emails with tight line spacing feel cramped, especially on mobile screens.

CTAs: one per email, make it obvious

Every email should have one primary action you want the reader to take. One. Not three. Not "here are some options." One thing.

Button design rules:

Make it look like a button. Rounded corners, solid background color, clear text.
Use action verbs: "Get Started," "Read More," "Claim Your Spot." Not "Click Here" — we all know it's clickable.
Size: at least 44px tall for mobile tap targets. At least 200px wide so it doesn't look like an afterthought.
Contrast: your primary brand color on white background, or white text on your brand color. Either works. Just make sure it's visually distinct from everything around it.

Where to put it: After you've made your case, not before. The CTA is the conclusion, not the introduction.

If you genuinely need a secondary action (like "Learn More" alongside "Buy Now"), make the secondary one a text link, not another button. Two buttons of equal visual weight means neither one wins.

Here's what this looks like in ModuLetter

Everything in this guide — the layouts, the color constraints, the typography defaults, the button best practices — is baked into ModuLetter's component system.

You pick a Section, a Heading, a Text block, a Button. Each one has sensible defaults. The spacing is handled. The responsive behavior is handled. The Outlook rendering is handled (through MJML compilation).

You don't design layout. You fill in fields and make decisions about content. That's the whole workflow.

Open ModuLetter and try it →