Email Marketing Design Prompts¶

Comprehensive prompt templates for email campaigns, newsletters, and automated sequences

Created: February 2026 Tool: Nano Banana Pro / Email Design Related: Framework Overview | Campaign Orchestration

Design System Configuration¶

# EMAIL MARKETING DESIGN SYSTEM CONFIGURATION
# Inherits from: ./readme.md (SBK Generative Prompts Framework v2.0)
# Schema version: 2.0

email_design_config:
  parent_config: "./readme.md"
  schema_version: "2.0"

  # Default email variant (override per campaign)
  default_variant: "trusted_advisor"

  # Email-specific constraints
  email_constraints:
    max_width: "600px"
    min_touch_target: "44px"
    min_body_font_size: "16px"
    image_blocking_consideration: true
    dark_mode_optimization: true

  # Typography tokens (email-safe)
  typography:
    font_primary: "Arial, Helvetica, sans-serif"
    font_display: "'Trebuchet MS', 'Lucida Grande', Arial, sans-serif"
    font_mono: "'Courier New', Courier, monospace"
    heading_size_h1: "28px"
    heading_size_h2: "24px"
    heading_size_h3: "20px"
    body_size: "16px"
    caption_size: "14px"
    footer_size: "12px"
    line_height_heading: "1.3"
    line_height_body: "1.6"

  # Spacing tokens
  spacing:
    content_padding: "20px"
    content_padding_mobile: "16px"
    section_gap: "32px"
    element_gap: "16px"
    button_padding_v: "16px"
    button_padding_h: "32px"

Variant-Specific Email Styling¶

Variant Color Reference (Email-Safe Values)¶

email_color_tokens:
  # VARIANT: TRUSTED ADVISOR (Default)
  trusted_advisor:
    # Primary palette
    primary: "#2563eb"
    primary_dark: "#0f172a"
    primary_light: "#3b82f6"
    # Backgrounds
    bg_primary: "#ffffff"
    bg_secondary: "#f8fafc"
    bg_accent: "#eff6ff"
    # Text colors
    text_primary: "#0f172a"
    text_secondary: "#475569"
    text_muted: "#94a3b8"
    text_inverse: "#ffffff"
    # UI elements
    border: "#e2e8f0"
    divider: "#e2e8f0"
    # Status colors
    success: "#16a34a"
    warning: "#f59e0b"
    error: "#dc2626"
    # Button styles
    button_primary_bg: "#2563eb"
    button_primary_text: "#ffffff"
    button_secondary_bg: "#ffffff"
    button_secondary_text: "#2563eb"
    button_secondary_border: "#2563eb"
    # Footer
    footer_bg: "#f8fafc"
    footer_text: "#64748b"

  # VARIANT: MODERN PARTNER
  modern_partner:
    primary: "#0d9488"
    primary_dark: "#0f766e"
    primary_light: "#14b8a6"
    bg_primary: "#ffffff"
    bg_secondary: "#faf5f0"
    bg_accent: "#f0fdfa"
    text_primary: "#1e293b"
    text_secondary: "#475569"
    text_muted: "#94a3b8"
    text_inverse: "#ffffff"
    border: "#e2e8f0"
    divider: "#e2e8f0"
    success: "#16a34a"
    warning: "#f59e0b"
    error: "#dc2626"
    button_primary_bg: "#0d9488"
    button_primary_text: "#ffffff"
    button_secondary_bg: "#ffffff"
    button_secondary_text: "#0d9488"
    button_secondary_border: "#0d9488"
    footer_bg: "#faf5f0"
    footer_text: "#64748b"

  # VARIANT: BOLD CHALLENGER
  bold_challenger:
    primary: "#0f172a"
    primary_dark: "#020617"
    primary_light: "#1e293b"
    accent: "#ea580c"
    accent_bright: "#f97316"
    bg_primary: "#ffffff"
    bg_secondary: "#f8fafc"
    bg_accent: "#fff7ed"
    text_primary: "#0f172a"
    text_secondary: "#475569"
    text_muted: "#94a3b8"
    text_inverse: "#ffffff"
    border: "#e2e8f0"
    divider: "#e2e8f0"
    success: "#16a34a"
    warning: "#f59e0b"
    error: "#dc2626"
    button_primary_bg: "#0f172a"
    button_primary_text: "#ffffff"
    button_secondary_bg: "#ffffff"
    button_secondary_text: "#0f172a"
    button_secondary_border: "#0f172a"
    button_accent_bg: "#ea580c"
    button_accent_text: "#ffffff"
    footer_bg: "#f8fafc"
    footer_text: "#64748b"

  # VARIANT: CYBER SHIELD (Dark Mode Default)
  cyber_shield:
    primary: "#dc2626"
    primary_dark: "#7f1d1d"
    primary_light: "#ef4444"
    bg_primary: "#0a0a0b"
    bg_secondary: "#111113"
    bg_surface: "#1c1c1f"
    bg_accent: "#1a0505"
    text_primary: "#fafafa"
    text_secondary: "#a1a1aa"
    text_muted: "#71717a"
    text_accent: "#ef4444"
    border: "#27272a"
    divider: "#27272a"
    success: "#22c55e"
    warning: "#f59e0b"
    error: "#ef4444"
    button_primary_bg: "#dc2626"
    button_primary_text: "#ffffff"
    button_secondary_bg: "transparent"
    button_secondary_text: "#dc2626"
    button_secondary_border: "#dc2626"
    footer_bg: "#111113"
    footer_text: "#71717a"
    glow_color: "#dc262640"

  # VARIANT: SENTINEL GUARD (Dark Mode Default)
  sentinel_guard:
    primary: "#9333ea"
    primary_dark: "#7e22ce"
    primary_light: "#a855f7"
    secondary: "#7c3aed"
    accent: "#d946ef"
    bg_primary: "#0a0a0b"
    bg_secondary: "#111113"
    bg_surface: "#1c1c1f"
    bg_accent: "#0f051a"
    text_primary: "#fafafa"
    text_secondary: "#a1a1aa"
    text_muted: "#71717a"
    text_accent: "#c084fc"
    border: "#27272a"
    divider: "#27272a"
    success: "#22c55e"
    warning: "#f59e0b"
    error: "#ef4444"
    button_primary_bg: "#9333ea"
    button_primary_text: "#ffffff"
    button_secondary_bg: "transparent"
    button_secondary_text: "#9333ea"
    button_secondary_border: "#9333ea"
    footer_bg: "#111113"
    footer_text: "#71717a"
    glow_color: "#9333ea40"

  # VARIANT: CLEAN DEVELOPER
  clean_developer:
    primary: "#4f46e5"
    primary_dark: "#4338ca"
    primary_light: "#6366f1"
    secondary: "#7c3aed"
    accent: "#06b6d4"
    bg_primary: "#ffffff"
    bg_secondary: "#f8fafc"
    bg_code: "#f1f5f9"
    bg_accent: "#eef2ff"
    text_primary: "#0f172a"
    text_secondary: "#475569"
    text_muted: "#94a3b8"
    text_code: "#1e293b"
    text_inverse: "#ffffff"
    border: "#e2e8f0"
    divider: "#e2e8f0"
    success: "#16a34a"
    warning: "#f59e0b"
    error: "#dc2626"
    button_primary_bg: "#4f46e5"
    button_primary_text: "#ffffff"
    button_secondary_bg: "#ffffff"
    button_secondary_text: "#4f46e5"
    button_secondary_border: "#4f46e5"
    footer_bg: "#f8fafc"
    footer_text: "#64748b"

  # VARIANT: CREATIVE CLAY
  creative_clay:
    primary: "#0f172a"
    primary_dark: "#020617"
    accent: "#f97316"
    accent_secondary: "#f59e0b"
    accent_cool: "#0ea5e9"
    bg_primary: "#ffffff"
    bg_secondary: "#f8fafc"
    bg_warm: "#faf5f0"
    bg_accent: "#fff7ed"
    text_primary: "#0f172a"
    text_secondary: "#475569"
    text_muted: "#94a3b8"
    text_inverse: "#ffffff"
    border: "#e2e8f0"
    divider: "#e2e8f0"
    success: "#16a34a"
    warning: "#f59e0b"
    error: "#dc2626"
    button_primary_bg: "#0f172a"
    button_primary_text: "#ffffff"
    button_accent_bg: "#f97316"
    button_accent_text: "#ffffff"
    button_secondary_bg: "#ffffff"
    button_secondary_text: "#0f172a"
    button_secondary_border: "#0f172a"
    footer_bg: "#f8fafc"
    footer_text: "#64748b"

Email Type to Variant Mapping¶

email_variant_mapping:
  # Primary mappings - which variant best suits each email type

  newsletters:
    recommended_variant: "trusted_advisor"
    rationale: "Professional stability for regular communications"
    alternatives: ["modern_partner", "clean_developer"]

  security_alerts:
    recommended_variant: "cyber_shield"
    rationale: "Urgent, security-focused aesthetic for threat notifications"
    alternatives: ["sentinel_guard", "bold_challenger"]
    force_dark_mode: true

  threat_intelligence:
    recommended_variant: "cyber_shield"
    rationale: "SOC/operations aesthetic for technical security content"
    alternatives: ["sentinel_guard"]
    force_dark_mode: true

  promotional:
    recommended_variant: "bold_challenger"
    rationale: "High-impact, memorable for campaigns and offers"
    alternatives: ["creative_clay", "modern_partner"]

  webinar_invites:
    recommended_variant: "modern_partner"
    rationale: "Collaborative, approachable for educational events"
    alternatives: ["trusted_advisor", "creative_clay"]

  product_updates:
    recommended_variant: "clean_developer"
    rationale: "Technical clarity for feature announcements"
    alternatives: ["trusted_advisor", "sentinel_guard"]

  nurture_sequences:
    recommended_variant: "trusted_advisor"
    rationale: "Trust-building, professional relationship development"
    alternatives: ["modern_partner"]

  transactional:
    recommended_variant: "trusted_advisor"
    rationale: "Clear, professional for confirmations and receipts"
    alternatives: ["clean_developer"]

  compliance_notifications:
    recommended_variant: "trusted_advisor"
    rationale: "Authoritative, trustworthy for regulatory communications"
    alternatives: ["clean_developer"]

  event_announcements:
    recommended_variant: "creative_clay"
    rationale: "Distinctive, memorable for event marketing"
    alternatives: ["bold_challenger", "modern_partner"]

  partner_communications:
    recommended_variant: "modern_partner"
    rationale: "Collaborative warmth for partner relationships"
    alternatives: ["trusted_advisor"]

  executive_briefings:
    recommended_variant: "trusted_advisor"
    rationale: "Professional gravitas for C-suite communications"
    alternatives: ["bold_challenger"]

  developer_updates:
    recommended_variant: "clean_developer"
    rationale: "Technical precision for developer audience"
    alternatives: ["sentinel_guard"]
    force_code_blocks: true

  incident_reports:
    recommended_variant: "cyber_shield"
    rationale: "Urgent, technical for security incident communications"
    alternatives: ["sentinel_guard"]
    force_dark_mode: true

Template Recommendations by Variant¶

template_recommendations:
  trusted_advisor:
    recommended_templates:
      - "monthly-update"
      - "security-insights"
      - "welcome-series"
      - "post-download"
      - "confirmation"
    design_notes:
      - "Use subtle blue accents, never overwhelming"
      - "Maintain generous whitespace"
      - "Professional header with centered logo"
      - "Clear content hierarchy"
    button_style: "rounded-lg (8px radius)"
    image_treatment: "Subtle shadow, professional photography"

  modern_partner:
    recommended_templates:
      - "webinar-invite"
      - "partner-update"
      - "collaboration-request"
      - "feedback-request"
    design_notes:
      - "Warm cream backgrounds in secondary sections"
      - "Teal accents for CTAs"
      - "Friendly, conversational tone"
      - "Organic layout flow"
    button_style: "rounded-xl (12px radius)"
    image_treatment: "Soft edges, warm color grading"

  bold_challenger:
    recommended_templates:
      - "ebook-download"
      - "service-announcement"
      - "limited-offer"
      - "re-engagement"
    design_notes:
      - "High contrast black/white with orange accents"
      - "Bold typography hierarchy"
      - "Strategic use of dark sections"
      - "Impactful hero imagery"
    button_style: "slightly-rounded (6px radius)"
    image_treatment: "High contrast, bold compositions"

  cyber_shield:
    recommended_templates:
      - "security-alert"
      - "threat-report"
      - "incident-notification"
      - "vulnerability-advisory"
    design_notes:
      - "Always dark mode"
      - "Red accent glows for urgency"
      - "Technical grid overlays"
      - "Monospace for data/codes"
    button_style: "sharp (2px radius)"
    image_treatment: "Dark theme graphics, glow effects"
    preheader_prefix: "[SECURITY ALERT]"

  sentinel_guard:
    recommended_templates:
      - "ai-security-update"
      - "threat-prevention-report"
      - "autonomous-protection-brief"
    design_notes:
      - "Purple gradient accents"
      - "Neural network pattern subtlety"
      - "AI/automation messaging"
      - "Flowing tech aesthetic"
    button_style: "rounded-lg (8px radius) with gradient"
    image_treatment: "Purple-tinted, futuristic"

  clean_developer:
    recommended_templates:
      - "api-update"
      - "developer-newsletter"
      - "documentation-release"
      - "integration-guide"
    design_notes:
      - "Generous whitespace"
      - "Code blocks with syntax styling"
      - "Indigo accent links"
      - "Clean, minimal header"
    button_style: "rounded-lg (8px radius)"
    image_treatment: "Minimal, clean diagrams"
    code_block_style:
      bg: "#f1f5f9"
      text: "#1e293b"
      border: "#e2e8f0"
      font: "'Courier New', monospace"

  creative_clay:
    recommended_templates:
      - "brand-announcement"
      - "creative-campaign"
      - "event-invitation"
      - "milestone-celebration"
    design_notes:
      - "Bold, oversized headlines"
      - "Alternating light/dark sections"
      - "Orange/amber warm accents"
      - "Distinctive, memorable design"
    button_style: "pill (24px+ radius)"
    image_treatment: "Bold colors, 3D elements if applicable"

Email Design Philosophy¶

SBK email assets must: - Render consistently across all clients - Drive action with clear CTAs - Respect inboxes with value-focused content - Maintain brand while optimizing deliverability - Work mobile-first (60%+ opens on mobile)

Email-Specific Constraints¶

600px max width for compatibility
System font fallbacks required
Image blocking consideration
Dark mode optimization
Accessibility requirements

Email Templates¶

[SBK BRAND DNA]
Professional technology consulting. Valuable content, trusted sender.

[DESIGN SYSTEM: {{active_variant}}]
Inherits: ./readme.md tokens
Colors: {{email_color_tokens[active_variant]}}
Typography: {{email_design_config.typography}}

[ASSET: EMAIL - NEWSLETTER]
Regular newsletter template.

[SPECIFICATIONS]
Width: 600px.
Background: {{bg_primary}}.
Padding: {{content_padding}} sides.
Mobile: Responsive single-column.

[STRUCTURE]
Header (100px): Logo centered or left, preheader link.
Hero (200-300px): Featured content or visual.
Content blocks: 2-4 article summaries.
Secondary: Events, resources, etc.
Footer: Unsubscribe, address, social.

[HEADER DESIGN]
Logo: 150-200px wide.
Background: {{bg_primary}} or {{primary}}.
Navigation: Optional, minimal.

[CONTENT BLOCKS]
Image: 600px wide or 50% with text.
Headline: {{heading_size_h2}}, {{weight_semibold}}.
Body: {{body_size}}, {{weight_regular}}.
CTA: Button styled per variant.
Divider: {{divider}} between sections.

[FOOTER]
Background: {{footer_bg}}.
Text color: {{footer_text}}.
Unsubscribe: Required, prominent.
Address: Physical address required.
Social icons: Optional.
Preferences: Link to manage.

[MOBILE OPTIMIZATION]
Single column: Always.
Touch targets: {{min_touch_target}} minimum.
Font size: {{min_body_font_size}} minimum body.
CTA buttons: Full width.

[AVOID]
Complex layouts (break in clients).
Background images (poor support).
Tiny touch targets.
Missing unsubscribe.

Promotional Email¶

[DESIGN SYSTEM: {{active_variant}}]
Recommended variants: bold_challenger, creative_clay, modern_partner

[ASSET: EMAIL - PROMOTIONAL]
Campaign or offer email.

[SPECIFICATIONS]
Same base specs as newsletter.
More visual, less text.
Single focus/offer.

[STRUCTURE]
Header: Minimal, logo only.
Hero: Strong visual + headline.
Value prop: 2-3 key points.
CTA: Primary, prominent.
Secondary: Supporting info.
Footer: Standard compliance.

[CTA DESIGN]
Primary button: {{button_primary_bg}}, {{button_primary_text}}.
Size: {{min_touch_target}} height minimum.
Width: 200-300px or full on mobile.
Text: Action-oriented verb.
Border-radius: Per variant button_style.

[URGENCY ELEMENTS]
Deadline: If applicable.
Limited: Scarcity if genuine.
Countdown: Timer graphic (careful with support).

[AVOID]
Multiple competing CTAs.
Wall of text.
Excessive urgency (spam triggers).
Misleading subject lines.

Security Alert Email¶

[DESIGN SYSTEM: cyber_shield]
Force dark mode: true

[ASSET: EMAIL - SECURITY ALERT]
Threat notification or security advisory.

[SPECIFICATIONS]
Dark background: {{bg_primary}} (#0a0a0b).
Accent glow: {{glow_color}}.
High contrast text: {{text_primary}}.
Urgent visual hierarchy.

[STRUCTURE]
Header: Logo on dark, alert indicator.
Alert banner: {{primary}} background, white text.
Threat details: Structured, scannable.
Action required: Clear, numbered steps.
Resources: Links to more info.
Footer: Dark theme compliant.

[ALERT LEVELS]
Critical: {{primary}} (#dc2626) background banner.
High: {{warning}} (#f59e0b) accent.
Medium: {{secondary}} with {{primary}} text.
Low: Subtle {{border}} treatment.

[TYPOGRAPHY]
Headlines: Bold, high contrast.
Data/codes: Monospace font.
Body: Clear, scannable paragraphs.

[BUTTON STYLE]
Background: {{button_primary_bg}}.
Text: {{button_primary_text}}.
Border-radius: 2px (sharp).
Optional glow: {{glow_color}}.

[AVOID]
Light backgrounds.
Casual tone.
Decorative elements.
Delayed CTAs.

Transactional Email¶

[DESIGN SYSTEM: {{active_variant}}]
Recommended variants: trusted_advisor, clean_developer

[ASSET: EMAIL - TRANSACTIONAL]
System/triggered emails.

[SPECIFICATIONS]
Simpler design.
Clear information hierarchy.
Minimal marketing.

[TYPES]
Welcome: New subscriber/client.
Confirmation: Action confirmed.
Notification: Updates, alerts.
Receipt: Purchase/invoice.
Reminder: Upcoming event/action.

[DESIGN PRINCIPLES]
Clear purpose: Immediately obvious.
Essential info: Prominent.
Action needed: Clear if applicable.
Brand consistent: But subtle.

[STRUCTURE]
Header: Logo, context.
Main content: The information.
Next steps: If applicable.
Support: How to get help.
Footer: Minimal, compliant.

Nurture Sequence Email¶

[DESIGN SYSTEM: trusted_advisor]
Alternative: modern_partner for warmer tone

[ASSET: EMAIL - NURTURE]
Automated drip campaign emails.

[SPECIFICATIONS]
Educational focus.
Relationship building.
Progressive value delivery.

[SEQUENCE STRUCTURE]
Email 1: Welcome, expectation setting.
Email 2-4: Value delivery, education.
Email 5-6: Case studies, proof.
Email 7+: Soft offers, engagement.

[DESIGN NOTES]
Personal feel: Less designed, more letter-like.
Consistent: Template recognizable.
Mobile-friendly: Always.
Plain text option: Consider for nurture.

[CONTENT APPROACH]
Lead with value.
Build trust progressively.
Soft CTAs early, stronger later.
Personalization where possible.

Developer Update Email¶

[DESIGN SYSTEM: clean_developer]
Alternative: sentinel_guard for AI/automation focus

[ASSET: EMAIL - DEVELOPER UPDATE]
Technical updates, API changes, documentation.

[SPECIFICATIONS]
Clean, minimal design.
Prominent code blocks.
Technical precision.

[CODE BLOCK STYLING]
Background: {{bg_code}} (#f1f5f9).
Text: {{text_code}} (#1e293b).
Border: 1px solid {{border}}.
Font: {{font_mono}}.
Padding: 16px.
Border-radius: 6px.

[STRUCTURE]
Header: Minimal logo, version/date.
Summary: TL;DR of changes.
Details: Structured changelog.
Code examples: Syntax highlighted.
Migration notes: If breaking changes.
Resources: Docs, support links.
Footer: Standard.

[TYPOGRAPHY]
Use monospace for:
- Code snippets
- API endpoints
- Version numbers
- Command examples

[AVOID]
Marketing fluff.
Excessive graphics.
Buried technical details.

Email Components¶

Email Headers¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - HEADER]
Email header/banner component.

[SPECIFICATIONS]
Width: 600px.
Height: 80-150px.
File size: Under 100KB.

[VARIANTS]
Logo only: Centered or left logo.
Logo + nav: Logo with text links.
Campaign header: Logo + campaign visual.

[DESIGN]
Background: {{bg_primary}} or {{primary}}.
Logo: On contrasting background.
Simple: Email-safe.
Legible: High contrast.
Lightweight: Quick loading.

[DARK MODE]
Logo: Transparent PNG or dark mode version.
Background: Consider inversion.

Call-to-Action Buttons¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - CTA BUTTON]
Clickable button component.

[SPECIFICATIONS]
Height: 44-56px.
Width: 200-300px (or fluid).
Border-radius: Per variant button_style.
Font: System font, 16-18px bold.

[CODING]
HTML table-based: For reliability.
Bulletproof buttons: VML for Outlook.
Fallback: Link text if images off.

[STYLING BY VARIANT]
trusted_advisor:
  Background: #2563eb
  Text: #ffffff
  Border-radius: 8px

modern_partner:
  Background: #0d9488
  Text: #ffffff
  Border-radius: 12px

bold_challenger:
  Background: #0f172a
  Text: #ffffff
  Border-radius: 6px

cyber_shield:
  Background: #dc2626
  Text: #ffffff
  Border-radius: 2px
  Optional: Box-shadow glow

sentinel_guard:
  Background: linear-gradient(135deg, #9333ea, #7c3aed)
  Text: #ffffff
  Border-radius: 8px

clean_developer:
  Background: #4f46e5
  Text: #ffffff
  Border-radius: 8px

creative_clay:
  Background: #0f172a or #f97316
  Text: #ffffff
  Border-radius: 24px (pill)

[STATES]
Default: Per variant color.
Hover: Slightly darker (where supported).

[MOBILE]
Full width: Easier to tap.
Stacked: If multiple CTAs.

Email Footers¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - FOOTER]
Email footer component.

[SPECIFICATIONS]
Width: 600px.
Background: {{footer_bg}}.
Typography: {{footer_size}} (12-14px).
Text color: {{footer_text}}.

[REQUIRED ELEMENTS]
Unsubscribe link: Prominent, working.
Physical address: CAN-SPAM requirement.
Company name: Sender identification.

[OPTIONAL ELEMENTS]
Manage preferences: Update options.
Social links: Icon links to profiles.
Forward link: Share with colleague.
Support contact: Help resources.

[DESIGN]
Subdued: Less visual emphasis.
Organized: Clear groupings.
Legible: Despite smaller text.

[DARK MODE VARIANTS]
cyber_shield / sentinel_guard:
  Background: {{bg_secondary}} (#111113).
  Text: {{footer_text}} (#71717a).
  Links: {{text_accent}}.

Dividers¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - DIVIDER]
Section separator component.

[TYPES]
Line: 1px horizontal rule.
Space: Empty row (20-40px).
Pattern: Subtle brand pattern.
Gradient: Soft color transition.

[SPECIFICATIONS]
Width: 80-100% of content area.
Color: {{divider}}.
Height: 1-2px for lines.

[VARIANT-SPECIFIC]
trusted_advisor: Solid #e2e8f0
modern_partner: Solid #e2e8f0
bold_challenger: Solid #e2e8f0 or #0f172a
cyber_shield: Solid #27272a with optional glow
sentinel_guard: Gradient purple to violet
clean_developer: Solid #e2e8f0
creative_clay: Solid #e2e8f0 or alternating section

[USAGE]
Between articles.
Before footer.
After hero.

Email Modules¶

Article Card¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - ARTICLE CARD]
Blog/article preview module.

[LAYOUT]
Image: 600px wide or 50% with text.
Headline: {{heading_size_h3}}, {{weight_semibold}}.
Summary: 2-3 lines, {{body_size}}.
CTA: "Read More" link or button.

[VARIANTS]
Full width: Image above text.
Side by side: Image left, text right.
Text only: No image.

[MOBILE]
Stack: Image above text.
Full width: Both elements.

Event Block¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - EVENT BLOCK]
Event promotion module.

[LAYOUT]
Event name: Prominent headline.
Date/time: Clear formatting.
Location: Venue or "Virtual".
Description: Brief summary.
CTA: "Register" or "Learn More".

[DESIGN]
Calendar icon: Visual date indicator.
Clear hierarchy: What, when, where, why.
Urgency: If limited seats.

Testimonial Block¶

[DESIGN SYSTEM: {{active_variant}}]

[ASSET: EMAIL - TESTIMONIAL]
Customer quote module.

[LAYOUT]
Quote: Prominent, possibly italicized.
Attribution: Name, title, company.
Photo: Optional headshot.

[DESIGN]
Quotation marks: Visual cue.
Highlight: {{bg_accent}} background.
Concise: Key quote, not full story.

Dark Mode Optimization¶

Dark Mode Strategy¶

dark_mode:
  detection: "prefers-color-scheme: dark"

  # Variants with native dark mode
  native_dark_variants:
    - "cyber_shield"
    - "sentinel_guard"

  image_handling:
    logos: "Provide transparent PNG"
    backgrounds: "Use CSS where possible"
    fallback: "Add white outline/bg to logos"

  color_adjustments:
    background: "Allow client inversion"
    text: "Will invert automatically"
    buttons: "May need !important"

  testing:
    clients: ["Apple Mail", "Gmail", "Outlook"]
    modes: ["Light", "Dark", "Auto"]

Color Mapping¶

color_mapping:
  # Light mode variants (trusted_advisor, modern_partner, bold_challenger, clean_developer, creative_clay)
  light_mode:
    background: "#ffffff"
    text: "#1f2937"
    accent: "{{primary}}"

  dark_mode_inversion:
    background: "#1f2937"
    text: "#f9fafb"
    accent: "{{primary_light}}"  # Lighter for contrast

  # Native dark mode variants (cyber_shield, sentinel_guard)
  dark_native:
    background: "#0a0a0b"
    text: "#fafafa"
    accent: "{{primary}}"

Accessibility¶

Email Accessibility Requirements¶

accessibility:
  alt_text: "All images must have alt text"
  semantic: "Use proper HTML hierarchy"
  link_text: "Descriptive, not 'click here'"
  contrast: "4.5:1 minimum for text"
  font_size: "{{min_body_font_size}} minimum for body"

  screen_readers:
    role_presentation: "On layout tables"
    hidden_preheader: "aria-hidden for visual text"
    meaningful_links: "Context in link text"

  variant_contrast_check:
    trusted_advisor: "PASS - #0f172a on #ffffff = 15.1:1"
    modern_partner: "PASS - #1e293b on #ffffff = 13.5:1"
    bold_challenger: "PASS - #0f172a on #ffffff = 15.1:1"
    cyber_shield: "PASS - #fafafa on #0a0a0b = 19.4:1"
    sentinel_guard: "PASS - #fafafa on #0a0a0b = 19.4:1"
    clean_developer: "PASS - #0f172a on #ffffff = 15.1:1"
    creative_clay: "PASS - #0f172a on #ffffff = 15.1:1"

Text Alternatives¶

text_alternatives:
  images_off:
    logo: "SBK Consulting"
    hero: "Descriptive alt of message"
    icons: "Meaningful or decorative null"

  plain_text:
    always_include: true
    format: "Clean, readable"
    links: "Full URLs or descriptive"

Email Client Compatibility¶

Client-Specific Considerations¶

client_support:
  gmail:
    issues: ["No media queries", "CSS stripping"]
    solutions: ["Inline styles", "Mobile-first"]

  outlook:
    issues: ["Word rendering engine", "No CSS3"]
    solutions: ["VML for buttons", "Table layouts"]
    dark_mode_note: "Limited dark mode support"

  apple_mail:
    issues: ["Few issues"]
    solutions: ["Good CSS support"]

  yahoo:
    issues: ["Some CSS stripping"]
    solutions: ["Inline styles", "!important"]

Testing Matrix¶

testing_required:
  desktop:
    - "Outlook 2016/2019/365"
    - "Apple Mail"
    - "Gmail web"
    - "Yahoo web"

  mobile:
    - "Gmail iOS/Android"
    - "Apple Mail iOS"
    - "Outlook iOS/Android"

  webmail:
    - "Gmail"
    - "Outlook.com"
    - "Yahoo Mail"

  dark_mode_testing:
    - "Apple Mail (macOS/iOS) dark mode"
    - "Gmail app dark mode"
    - "Outlook app dark mode"

Performance Optimization¶

File Size Limits¶

file_sizes:
  total_email: "Under 100KB HTML"
  hero_image: "Under 200KB"
  other_images: "Under 50KB each"
  total_images: "Under 500KB"

  optimization:
    compression: "TinyPNG or similar"
    format: "JPEG for photos, PNG for graphics"
    dimensions: "Exact size needed, not larger"

Loading Strategy¶

loading:
  above_fold: "Key content without scroll"
  progressive: "Critical content first"
  fallback: "Alt text if images blocked"
  preheader: "Compelling snippet text"

Template Library¶

Template Naming¶

sbk-email-{variant}-{type}-{purpose}-v{version}.html

Examples:
sbk-email-trusted_advisor-newsletter-monthly-v2.html
sbk-email-bold_challenger-promo-webinar-v1.html
sbk-email-cyber_shield-alert-security-v1.html
sbk-email-clean_developer-nurture-welcome-v1.html

Template Categories¶

templates:
  newsletters:
    default_variant: "trusted_advisor"
    types:
      - monthly-update
      - security-insights
      - industry-news

  promotional:
    default_variant: "bold_challenger"
    types:
      - webinar-invite
      - ebook-download
      - service-announcement

  security:
    default_variant: "cyber_shield"
    types:
      - security-alert
      - threat-report
      - vulnerability-advisory

  nurture:
    default_variant: "trusted_advisor"
    types:
      - welcome-series
      - post-download
      - re-engagement

  transactional:
    default_variant: "trusted_advisor"
    types:
      - welcome
      - confirmation
      - reminder

  developer:
    default_variant: "clean_developer"
    types:
      - api-update
      - documentation-release
      - integration-guide

Integration with Campaigns¶

Reference: Campaign Orchestration

campaign_integration:
  variant_selection:
    automation: "Select variant based on email_variant_mapping"
    override: "Campaign-level variant override supported"
    consistency: "Maintain variant within campaign sequence"

  automation:
    triggers: "Behavior-based sends"
    personalization: "Dynamic content blocks"
    sequences: "Multi-email journeys"

  tracking:
    utm_parameters: "Auto-appended"
    click_tracking: "ESP-provided"
    conversion: "Website integration"

  segmentation:
    lists: "Audience-specific content"
    dynamic: "Content blocks by segment"
    personalization: "Merge fields"

Quality Checklist¶

Before sending any email:

Last Updated: February 2026 Version: 2.0