What is email-design-system?

This Claude skill automates the application of professional design system principles to HTML emails. It bridges the gap between creative vision and technical constraints by providing structured frameworks for typography hierarchy, color palettes, and layout patterns, ensuring every email is both visually stunning and functionally robust across all email clients.

When should I use email-design-system?

email-design-system is useful in the following scenarios: • 1. Newsletter Design: Create engaging marketing newsletters with clear visual hierarchy and professional typography to improve readability and click-through rates. • 2. Brand Consistency: Develop a unified visual language for transactional emails, ensuring order confirmations and system alerts match the core brand identity. • 3. Mobile Optimization: Implement responsive layout patterns and spacing systems that ensure emails look perfect on both desktop and mobile devices through table-based design. • 4. Rapid Prototyping: Quickly generate diverse email sections like feature grids, hero banners, or alternating media blocks using pre-defined aesthetic recipes and HTML-safe CSS.

name	email-design-system
description	Apply sophisticated design system principles to HTML emails including typography hierarchy, color palettes, spacing systems, and layout patterns. Use when creating email templates that need cohesive, intentional design within email HTML constraints. Covers section composition, visual rhythm, and brand application.

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)

email-design-system

When & Why to Use This Skill

Use Cases