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:

| Element | Size | Weight | Use | |---------|------|--------|-----| | Hero Headline | 32-42px | 700 | One per email, the main message | | Section Header | 24-28px | 700 | Section introductions | | Subheader | 18-20px | 600 | Supporting headlines | | Body | 15-16px | 400 | Main content | | Small/Caption | 12-13px | 400 | Footer, legal, metadata |

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):

| Token | Value | Use | |-------|-------|-----| | xs | 8px | Inline spacing, tight elements | | sm | 16px | Paragraph spacing | | md | 24px | Between related elements | | lg | 40px | Section internal padding | | xl | 60px | Between major sections |

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:

Different background colors - alternate between white and light gray/brand tint
Adequate padding - minimum 40px padding-top on new sections
Clear content boundaries - hero content should NOT flow into feature section
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:

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