Logo & Colors

Your logo and brand colors are essential to creating a consistent, professional email experience. This guide covers everything you need to know about configuring your visual identity in Airmailer.

Logo Configuration

Uploading Your Logo

1. Navigate to Brand in the sidebar
2. Click the logo upload area or drag and drop your file
3. Preview the logo in the interface
4. Click Save Changes

Logo Requirements

| Requirement | Specification | |-------------|---------------| | Format | PNG (recommended) or JPG | | Minimum Size | 200 x 200 pixels | | Maximum File Size | 2 MB | | Background | Transparent PNG recommended |

Logo Best Practices

For Light Backgrounds:

• Ensure your logo has good contrast against white/light gray
• Use dark or colored logos
• Avoid very light colors that may not be visible

For Dark Backgrounds:

• Upload a separate dark mode logo if needed
• Use light-colored or inverted versions
• Ensure visibility against dark email clients

Dark Mode Logo

Many email clients support dark mode. To ensure your logo looks great everywhere:

1. Upload your primary logo for light backgrounds
2. Optionally upload a dark mode variant
3. If no dark mode logo is provided, your primary logo is used

Color Configuration

Primary Color

Your primary color is used for:

• Main buttons in emails
• Link text
• Header accents
• Key call-to-action elements

How to Set:

1. Navigate to Brand Settings
2. Click the Primary Color picker
3. Enter a hex code (e.g., #0066CC) or use the visual picker
4. Preview in the email template

Accent Color

Your accent color provides secondary visual interest:

• Status badges
• Hover states
• Secondary buttons
• Highlights

Email-Specific Colors

Airmailer lets you configure different color schemes for light and dark mode emails:

Light Mode Email Colors:

• Primary: Main accent color
• Accent: Secondary highlight
• Background: Email background (typically white)
• Text: Main text color (typically dark)

Dark Mode Email Colors:

• Primary: Adjusted for dark backgrounds
• Accent: Complementary highlight
• Background: Dark email background
• Text: Light text for readability

Color Picker Usage

The color picker accepts:

1. Hex Codes: #FF5733 or FF5733
2. Visual Selection: Click in the color gradient
3. Preset Colors: Select from common brand colors

Recommended Color Contrast

For accessibility and readability:

| Element | Recommended Contrast Ratio | |---------|---------------------------| | Text on background | 4.5:1 minimum | | Large text | 3:1 minimum | | UI components | 3:1 minimum |

Preview Your Changes

Before saving, always preview your brand configuration:

1. Make your color/logo changes
2. Navigate to Email in the sidebar
3. Toggle between light and dark mode
4. Check all elements render correctly
5. Return to Brand Settings and save

Common Color Schemes

Corporate/Professional

Primary: #1A365D (Dark Blue)
Accent: #2B6CB0 (Blue)
Background: #FFFFFF (White)
Text: #1A202C (Near Black)

Modern/Tech

Primary: #6366F1 (Indigo)
Accent: #8B5CF6 (Purple)
Background: #F9FAFB (Light Gray)
Text: #111827 (Charcoal)

E-commerce/Retail

Primary: #DC2626 (Red)
Accent: #F97316 (Orange)
Background: #FFFFFF (White)
Text: #171717 (Black)

Troubleshooting

Logo appears blurry

• Upload a higher resolution image (400x400px or larger)
• Use PNG format for sharper edges
• Avoid JPEG compression artifacts

Colors look different in email clients

• Some email clients may render colors slightly differently
• Test your emails in multiple clients (Gmail, Outlook, Apple Mail)
• Use web-safe colors for more consistent rendering

Dark mode logo not appearing

• Ensure the file was uploaded successfully
• Check file format is PNG or JPG
• Try re-uploading the dark mode variant

Color changes not saving

• Check your internet connection
• Refresh the page and try again
• Ensure color values are valid hex codes

Next Steps

• Configure email styling
• Set up your AI agent
• Upload documents