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:

code

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

Modern Friendly:

code

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

Tech/Minimal:

code

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:

css

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

Mixed weight headlines:

html

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

code

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

Warm Minimal (Wellness/Lifestyle):

code

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

Bold Editorial (Media/Fashion):

code

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

Professional Clean (Finance/B2B):

code

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

Playful Bright (Consumer/Entertainment):

code

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

html

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

code

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

2. Split Asymmetric:

code

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

3. Image-First:

code

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

Content Section Variations

1. Feature Grid (2-column):

code

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

2. Alternating Media:

code

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

3. Feature List (Icon + Text):

code

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

Footer Patterns

Minimal:

code

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

Structured:

code

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

html

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

css

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

3. Spacer Rows

Create intentional breathing room:

html

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

4. Image Styling

Make images feel intentional:

html

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

html

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