💰 Refer us a customer, Earn $2,000 💰

Get $2k
Email Marketing

Email Design and Visual Style Guide

use this prompt when:

  • You’re establishing or refreshing your brand’s email marketing presence
  • Your email performance metrics (open rates, click-through rates) are underperforming industry standards
  • Your emails look inconsistent across different campaigns or team members
  • You’re preparing to scale your email marketing program with new team members or agencies
  • You need to ensure your emails render properly across the increasing variety of devices and email clients

The prompt

Develop a comprehensive email design and visual style guide for <business name> that ensures brand consistency and optimal subscriber experience across all email communications. Create specific guidelines for email layouts, typography, color usage, image style, button design, spacing, and responsive behavior across devices and email clients used by our <target audience>. Include modular template designs for different email types (newsletters, promotions, transactional), component specifications that balance visual appeal with technical reliability, and practical examples showing correct application. Provide specific guidance on accessibility considerations, file size optimization, and technical constraints while maintaining our brand identity. Address our specific design challenge of <design challenge> to improve visual engagement with our emails.

Copy prompt

How to customize

Email Design and Visual Style Guide
Variables
Description
Variables
business name
Description
Enter your brand or company name that needs an email visual style guide.
Variables
target audience
Description
Define your core email subscriber segments, including demographic information, device preferences, and email clients they typically use.
Variables
design challenge
Description
Specify a particular design issue you're facing with your emails, such as "maintaining visual hierarchy on mobile devices," "creating visual distinction between product categories," or "driving stronger call-to-action engagement."

Example Output

SUNBURST SKINCARE: EMAIL DESIGN & VISUAL STYLE GUIDE

 

1. Brand Identity Application in Email

Core Email Brand Elements:

  • Use the Sunburst primary palette (Coral #FF6B4A, Sand #F9F3E9, Ocean #4A9BAF) consistently across all emails
  • Always maintain 25% white space minimum to reflect our clean, refreshed brand feeling
  • Apply rounded corners (8px radius) to all content containers to maintain our approachable, soft aesthetic

 

Email-Specific Brand Adaptations:

  • Simplified logo lockup (icon + wordmark only, no tagline) in header, 60px maximum height
  • Dark mode color shifts: Replace Sand #F9F3E9 backgrounds with Midnight #1D2A33 and adjust text colors for minimum 4.5:1 contrast ratio

 

2. Modular Email Layouts

Newsletter Template:

  • Vertical structure with feature story (600px width image, 40px padding, 18px headline)
  • Secondary story blocks (2-column on desktop, stacking to single column on mobile)
  • Product spotlight module (3-column on desktop, carousel on mobile)
  • Education/tips section with icon-based visualization

 

Promotional Template:

  • Hero offer design (full-width image with centered text overlay, maximum height 300px)
  • Product grid format (2×2 on desktop, vertical stack on mobile)
  • Tiered offer structure with color-coded backgrounds by discount level
  • Reviews integration module for social proof

 

Transactional Template:

  • Minimalist header (30px padding, logo centered)
  • Order confirmation table with clear hierarchy (16px product names, 14px details)
  • Cross-sell section limited to 2 products maximum with subtle background differentiation
  • Support information section with clear contact pathways

 

3. Typography System

Email-Safe Fonts:

  • Headlines: Montserrat Bold, 22px-28px (desktop), 18px-24px (mobile)
  • Body: Roboto Regular, 16px (desktop), 15px (mobile)
  • Secondary text: Roboto Light, 14px (desktop), 13px (mobile)
  • Fallback stack: sans-serif

 

Text Formatting:

  • Line height: 1.5 for body text, 1.2 for headlines
  • Letter spacing: normal for body, -0.5px for headlines
  • Text alignment: Left-aligned for all body text, centered only for standalone CTAs or section headers
  • Link styling: Coral #FF6B4A with subtle underline, shifting to Ocean #4A9BAF on hover

 

4. Color Application

Background Colors:

  • Primary email background: Sand #F9F3E9
  • Content blocks: White #FFFFFF
  • Accent sections: Soft Coral #FFE8E3 or Pale Ocean #E5F2F5

 

Text Colors:

  • Primary text: Deep Gray #333333
  • Secondary text: Medium Gray #666666
  • Highlight text: Coral #FF6B4A
  • Link text: Ocean #4A9BAF

 

Button Colors:

  • Primary CTA: Coral #FF6B4A with white text
  • Secondary CTA: White with Coral #FF6B4A border and text
  • Disabled: Light Gray #CCCCCC with Medium Gray #666666 text

 

5. Component Specifications

Buttons:

  • Dimensions: 200px width, 50px height (desktop), 180px width, 50px height (mobile)
  • Text: 16px Montserrat Bold, centered, all caps
  • Padding: 15px horizontal, 12px vertical
  • Border radius: 25px (pill shape)
  • Spacing: Minimum 30px vertical space before and after buttons

 

Product Cards:

  • Image dimensions: 1:1 square ratio, 300px maximum width
  • Product name: 16px Montserrat Bold
  • Price: 16px Roboto Regular
  • Description: Limited to 2 lines, 14px Roboto Light
  • Rating stars: 14px height, Coral #FF6B4A color

 

Dividers:

  • Style: 1px solid Light Gray #EEEEEE
  • Spacing: 30px margin above and below
  • Width: 90% of container width, centered

 

6. Image Guidelines

Product Photography:

  • Style: Clean, bright backgrounds with natural shadows
  • Format: JPG at 72dpi, maximum file size 100KB
  • Dimensions: Minimum 600px width, 1:1 ratio for product images

 

Lifestyle Photography:

  • Style: Natural lighting, diverse models, authentic situations
  • Color treatment: Slightly warmed color temperature consistent with brand filter
  • Cropping: Focus on faces and product interaction

 

Icons & Graphics:

  • Style: 2px outline icons in Coral #FF6B4A
  • Dimensions: 30px x 30px standard size
  • Format: SVG preferred, PNG with transparency as fallback
  • Animation: Subtle hover effects only, no auto-playing animations

 

7. Responsive Behavior

Breakpoints:

  • Desktop: 600px and above
  • Mobile: Below 600px

 

Mobile Adaptations:

  • Single column layout for all multi-column desktop sections
  • Font size reduction: 2px smaller than desktop specifications
  • Button width: 80% of container width
  • Image resizing: 100% width of container
  • Navigation: Simplified with increased touch targets (minimum 44px height)

 

8. Addressing Design Challenge: “Creating Stronger Visual Hierarchy for Promotions”

Solution Implementation:

  • Use color blocking to create clear promotional sections
  • Apply 20% larger typography for promotional headlines
  • Implement a consistent “promotional flag” element in top-right corner
  • Establish a consistent location for price information with strike-through for original prices
  • Create visual separation between promotional and non-promotional content with 40px spacing minimum
  • Apply subtle animation (pulsing border) only to the highest-priority promotional CTA

 

9. Accessibility Considerations

Contrast Requirements:

  • All text meets WCAG AA standards (4.5:1 for normal text, 3:1 for large text)
  • CTAs maintain 3:1 minimum contrast against backgrounds
  • Form fields have clear visual boundaries

 

Design Inclusions:

  • Alt text specifications for all images
  • Text size minimum of 14px
  • Clickable areas minimum 44px height/width
  • Descriptive link text rather than “click here”
  • Color is never the only means of conveying information

 

10. Technical Implementation Guidelines

Email Client Compatibility:

  • Designs tested across: Apple Mail, Gmail, Outlook (Office 365, 2019, 2016)
  • Mobile testing on: iOS Mail, Gmail app (Android/iOS), Outlook Mobile

 

Code Standards:

  • Tables-based layout with maximum nesting of 3 levels
  • Inline CSS only, no external stylesheets
  • Graceful degradation approach for unsupported features
  • Maximum email width: 600px
  • Background images always require fallback colors

Pro tips

Email Design and Visual Style Guide
  • Start with your highest priority emails: Apply your new style guide first to your revenue-driving emails like abandoned cart and promotional campaigns before rolling out to newsletters and transactional emails.
  • Create a “component library” for your team: Build a shareable resource with copy-paste HTML/CSS for each approved component to ensure consistency when different team members create emails.
  • Test rendering across dark mode settings: With over 40% of email users now using dark mode, make sure your brand colors and imagery maintain integrity when email clients automatically invert colors.
  • Implement A/B testing for key design elements: Rather than assuming all design choices will perform optimally, systematically test variations of button styles, image sizes, and layouts to identify what drives the best engagement with your specific audience.

Related Prompts

Comprehensive Brand Identity Development

Email Marketing Metrics Dashboard Design

Competitive Pricing Analysis

Customer Needs Hierarchy Assessment

Competitive Content Differentiation Strategy

Blog Content Revitalization Plan

Email Preference Center Optimization

Social Media Engagement Measurement Framework

Have Feedback?

Leave your feedback for how the prompt works for you and how it could be improved.