Email Design System

Email Design System

Transform emails from functional to beautiful while respecting technical constraints. This skill provides the design thinking layer.

Typography System

Hierarchy (Required)

Every email needs clear typographic hierarchy:

Key Rule: Minimum 2x ratio between headline and body. If body is 16px, headline should be 32px+.

Font Pairing Strategies

Within email-safe constraints, create character:

Elegant Business:

Headlines: Georgia, 'Times New Roman', serif (32px, normal weight)
Body: Arial, Helvetica, sans-serif (15px)

Modern Friendly:

Headlines: 'Trebuchet MS', 'Lucida Sans', sans-serif (36px, bold)
Body: Verdana, Geneva, sans-serif (14px)

Tech/Minimal:

Headlines: Arial Black, Arial, sans-serif (28px, bold)
Body: Arial, Helvetica, sans-serif (15px)
Accents: 'Courier New', monospace (for codes)

Typography Tricks

Letterspacing for elegance:

letter-spacing: 2px; text-transform: uppercase; font-size: 12px;
/* Great for category labels */

Mixed weight headlines:

<span style="font-weight: 300;">Your order</span>
<span style="font-weight: 700;">is confirmed</span>

Color System

Palette Structure

Every email needs exactly:

• 1 Background color
• 1 Surface/card color (if different)
• 1 Primary text color
• 1 Muted/secondary text color
• 1 Accent/CTA color
• Optional: 1 section divider color

Palette Recipes by Aesthetic

Dark Elegant (Tech/SaaS):

Background: #0f172a
Surface: #1e293b
Primary text: #f8fafc
Muted text: #94a3b8
Accent: #3b82f6

Warm Minimal (Wellness/Lifestyle):

Background: #fef7ed
Surface: #ffffff
Primary text: #1c1917
Muted text: #78716c
Accent: #ea580c

Bold Editorial (Media/Fashion):

Background: #ffffff
Surface: #f5f5f4
Primary text: #0a0a0a
Muted text: #525252
Accent: #dc2626

Professional Clean (Finance/B2B):

Background: #f8fafc
Surface: #ffffff
Primary text: #0f172a
Muted text: #64748b
Accent: #0d9488

Playful Bright (Consumer/Entertainment):

Background: #fef08a
Surface: #ffffff
Primary text: #1e1e1e
Muted text: #525252
Accent: #7c3aed

Spacing System

Vertical Rhythm

Use consistent spacing scale (in px):

Key Rule: Either generous (lg/xl) OR tight (xs/sm)—never medium-everything.

Section Padding Pattern

<!-- Major section with generous spacing -->
<td style="padding: 60px 40px;">

<!-- Compact content block -->
<td style="padding: 24px 20px;">

<!-- Mobile-friendly (less horizontal) -->
<td style="padding: 40px 20px;">

Layout Patterns

Hero Variations

1. Bold Centered:

[Full-width background color]
     [Centered headline 32-42px]
     [Subtext 16px, muted color]
     [CTA Button]
[End background]

2. Split Asymmetric:

[60% Text] [40% Image]
  Headline   Product/
  Subtext    Visual
  CTA

3. Image-First:

[Full-width hero image]
[Text block below with clear separation]
  Headline
  Subtext
  CTA

Content Section Variations

1. Feature Grid (2-column):

[Icon/Image] [Icon/Image]
[Title]      [Title]
[Description][Description]

2. Alternating Media:

[Image LEFT] [Text RIGHT]
[Text LEFT]  [Image RIGHT]

3. Feature List (Icon + Text):

[Icon] [Title + Description]
[Icon] [Title + Description]
[Icon] [Title + Description]

Footer Patterns

Minimal:

[Logo/Name centered]
[Unsubscribe link]
[Address (if required)]

Structured:

[Logo] [Social icons]
[Links row: Help | Privacy | Preferences]
[Unsubscribe | Company address]

Visual Interest Techniques

Within email constraints, create visual interest:

1. Background Color Blocking

Alternate section backgrounds:

<td style="background-color: #ffffff; padding: 40px 20px;">
  <!-- White section -->
</td>
...
<td style="background-color: #f8fafc; padding: 40px 20px;">
  <!-- Light gray section -->
</td>

2. Border Accents

Use borders for definition:

border-left: 4px solid #3b82f6; /* Quote/highlight accent */
border-top: 1px solid #e5e7eb; /* Subtle divider */

3. Spacer Rows

Create intentional breathing room:

<tr>
  <td height="40" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
</tr>

4. Image Styling

Make images feel intentional:

<!-- Contained with padding -->
<td style="padding: 20px;">
  <img src="..." style="display: block; max-width: 100%;">
</td>

<!-- Full-bleed -->
<td style="padding: 0;">
  <img src="..." width="600" style="display: block; width: 100%;">
</td>

Section Separation (CRITICAL)

ALWAYS ensure clear visual separation between sections:

1. Different background colors - alternate between white and light gray/brand tint
2. Adequate padding - minimum 40px padding-top on new sections
3. Clear content boundaries - hero content should NOT flow into feature section
4. Visual breaks - use spacer rows or border-top between major sections

Icon + Text Feature Lists

CORRECT pattern (icons aligned with text):

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td width="64" valign="top" style="padding-right: 16px;">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td width="48" height="48" style="background-color: #2563eb; text-align: center; vertical-align: middle;">
            <span style="font-size: 24px;">🏆</span>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top">
      <h4 style="margin: 0 0 8px;">Title</h4>
      <p style="margin: 0;">Description</p>
    </td>
  </tr>
</table>

WRONG patterns to AVOID:

• Using <div style="display: flex;"> for icon containers
• Missing valign="top" causing vertical misalignment
• No padding-right on icon cell causing text to touch icon
• Using margin instead of padding for spacing

Pre-Output Design Checklist

Before generating email:

1. Choose aesthetic direction (from palette recipes)
2. Define typography scale (hero, section, body sizes)
3. Plan section flow (which backgrounds, what padding)
4. Verify icon patterns (table-based, valign="top", proper gaps)
5. Check vertical rhythm (consistent spacing scale)
6. Ensure section separation (no overlapping content)