StratIQX Email Template Guidelines v2.0

Overview
Design Philosophy
Brand Elements
Typography System
Color System
Lucide Icon System
Layout Structure
Component Library
Email Templates
Content Guidelines
Technical Requirements
Quality Assurance

Overview

This document defines the StratIQX email template design system - a clean, minimalist, invoice-inspired approach that builds trust and maintains brand consistency across all email communications. Our design philosophy prioritizes clarity, professionalism, and user experience while reflecting the premium nature of our intelligence platform through lightweight, accessible design.

The Welcome Email template serves as the design foundation for all StratIQX email communications, with other email types following the same structural patterns and component systems.

Design Philosophy

Core Principles

Clean Minimalism: Focus on content with purposeful white space and lightweight styling
Invoice-Inspired Layout: Structured, scannable information architecture
Professional Trust: Build confidence through clean, enterprise-grade design
Consistent Branding: Maintain StratIQX identity across all touchpoints
Accessibility First: High contrast, readable design that works for everyone
Lightweight Performance: Fast-loading emails with inline SVG icons and minimal dependencies

Visual Hierarchy

Logo & Branding - Clear identification with themed border accent
Status Indicators - Immediate context with Lucide icons and status badges
Primary Content - Main message in clean hero section with circular icon
Supporting Information - Details in structured information cards
Process Steps - Clear sequential information with numbered steps
Contact & Support - Help and assistance in clean card format
Footer - Legal and company info with light background

Brand Elements

Logo Usage

html

<h1 style="color: #111827; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.025em;">
    Strat<span style="color: #2563eb;">IQ</span><span style="color: #06b6d4;">X</span>
</h1>
<p style="color: #6b7280; margin: 4px 0 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.025em;">
    Strategic Intelligence Amplified
</p>

Logo Colors:

Strat: #111827 (Gray-900)
IQ: #2563eb (Blue-600)
X: #06b6d4 (Cyan-500)

Tagline: "Strategic Intelligence Amplified" in muted gray

Typography System

Font Stack

css

font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;

Google Fonts Import:

html

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Text Hierarchy

Headings

css

/* Main Logo */
font-size: 28px;
font-weight: 700;
color: #111827;
letter-spacing: -0.025em;

/* Hero Title (H2) */
font-size: 28px;
font-weight: 700;
color: #111827;
letter-spacing: -0.025em;
margin: 0 0 8px 0;

/* Section Headers (H3) */
font-size: 18px;
font-weight: 600;
color: #111827;
margin: 0;

/* Card Headers (H4) */
font-size: 16px;
font-weight: 600;
color: varies by theme;
margin: 0;

Body Text

css

/* Primary Body */
font-size: 16px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 16px 0;

/* Secondary Text */
font-size: 14px;
color: #374151;
font-weight: 500;
line-height: 1.5;

/* Small Text/Labels */
font-size: 12px;
color: #6b7280;
font-weight: 500;
line-height: 1.4;

Color System

Primary Brand Colors

css

--stratiq-gray-900: #111827;    /* Primary text, logo */
--stratiq-blue-600: #2563eb;    /* IQ brand color, primary actions */
--stratiq-cyan-500: #06b6d4;    /* X brand color, accents */
--stratiq-white: #ffffff;       /* Clean backgrounds */

Background Colors

css

--bg-primary: #ffffff;          /* Main email background */
--bg-secondary: #f8fafc;        /* Card backgrounds, subtle sections */
--bg-tertiary: #f9fafb;         /* Footer, muted areas */
--bg-light-gray: #f3f4f6;       /* Very subtle backgrounds */

Text Colors

css

--text-primary: #111827;        /* Primary headings, important text */
--text-secondary: #6b7280;      /* Body text, descriptions */
--text-muted: #9ca3af;          /* Supporting text, footer */
--text-subtle: #374151;         /* Secondary information */

Theme Colors by Email Type

Welcome/Success Theme (Green)

css

--success-primary: #10b981;     /* Emerald-500 */
--success-light: #dcfce7;       /* Emerald-100 */
--success-border: #bbf7d0;      /* Emerald-200 */
--success-text: #059669;        /* Emerald-600 */
--success-dark: #065f46;        /* Emerald-800 */

Security/OTP Theme (Blue)

css

--security-primary: #2563eb;    /* Blue-600 */
--security-light: #dbeafe;      /* Blue-100 */
--security-border: #bfdbfe;     /* Blue-200 */
--security-text: #1d4ed8;       /* Blue-700 */
--security-dark: #1e40af;       /* Blue-800 */

Payment/Billing Theme (Amber/Gold)

css

--payment-primary: #f59e0b;     /* Amber-500 */
--payment-light: #fffbeb;       /* Amber-50 */
--payment-border: #fed7aa;      /* Amber-200 */
--payment-text: #92400e;        /* Amber-800 */
--payment-dark: #d97706;        /* Amber-600 */

Lucide Icon System

Why Lucide Icons?

Lightweight: Minimal inline SVG markup, no external dependencies
Universal Email Support: Works consistently across Gmail, Outlook, Apple Mail, and mobile clients
Scalable: Vector-based icons that look crisp at any size
Performance: Fast loading with no external requests
Maintenance: Active community support and regular updates

Icon Implementation Standards

Basic Inline SVG Structure

html

<svg width="[size]" height="[size]" viewBox="0 0 24 24" fill="none" stroke="[color]" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <!-- Icon paths -->
</svg>

Size Guidelines

Context	Size	Usage
Hero Icons	32px × 32px	Main visual elements in circular backgrounds
Section Headers	20px × 20px	Section titles, feature highlights
Process Steps	18px × 18px	Step indicators, inline elements
Status Badges	16px × 16px	Status indicators, small accents
Footer Icons	14px × 14px	Contact information, links

Color Usage with Lucide Icons

Color	Hex	Usage
Success Green	`#059669`	Welcome, confirmation, success states
Security Blue	`#2563eb`	OTP, verification, security contexts
Payment Amber	`#f59e0b`	Billing, payment confirmations
Primary Blue	`#2563eb`	General actions, navigation
Dark Gray	`#111827`	Neutral contexts

Email-Specific Icon Catalog

Welcome & Success Icons

Rocket (Welcome/Launch)

html

<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4.5 16.5c-1.5 1.25-2 5 2.5 5s4-3.75 2.5-5L8 15s0-1 1-1 1 1 1 1l-1.5 1.5Z"/>
    <path d="M12 15 9 12"/>
    <path d="m15 9 6 6"/>
    <path d="M20 4c0 9-9 9-9 9s0-9 9-9Z"/>
    <path d="M9 10a4 4 0 0 1-4-4"/>
    <path d="M19 14a4 4 0 0 1-4 4"/>
</svg>

Check Circle (Success/Confirmation)

html

<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#065f46" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
    <path d="m9 11 3 3L22 4"/>
</svg>

Party Popper (Celebration)

html

<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5.8 11.3 2 22l10.7-3.79"/>
    <path d="M4 3h.01"/>
    <path d="M22 8h.01"/>
    <path d="M15 2h.01"/>
    <path d="M22 20h.01"/>
    <path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"/>
    <path d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17"/>
    <path d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7"/>
    <path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"/>
</svg>

Authentication/Security Icons

Lock (Security/OTP)

html

<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>

Shield Check (Verification)

html

<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
    <path d="m9 12 2 2 4-4"/>
</svg>

Intelligence & Analytics Icons

Brain Circuit (Intelligence)

html

<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/>
    <path d="M9 13a4.5 4.5 0 0 0 3-4"/>
    <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/>
    <path d="M3.477 10.896a4 4 0 0 1 .585-.396"/>
    <path d="M6 18a4 4 0 0 1-1.967-.516"/>
    <path d="M12 13h4"/>
    <path d="M12 18h6a2 2 0 0 1 2 2v1"/>
    <path d="M12 8h8"/>
    <path d="M16 8V5a2 2 0 0 1 2-2"/>
    <circle cx="16" cy="13" r="1"/>
</svg>

Target (Strategy/Goals)

html

<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/>
    <circle cx="12" cy="12" r="6"/>
    <circle cx="12" cy="12" r="2"/>
</svg>

Payment & Billing Icons

Receipt (Payment/Billing)

html

<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/>
    <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/>
    <path d="M12 18V6"/>
</svg>

Communication Icons

User (Analyst/Person)

html

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
    <circle cx="12" cy="7" r="4"/>
</svg>

Phone

html

<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>

Message Circle (Support)

html

<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
</svg>

Layout Structure

Container Specifications (Based on Welcome Email)

css

max-width: 600px;
margin: 40px auto;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

Section Structure

Header Section

css

background: #ffffff;
padding: 48px 40px 32px;
border-bottom: 3px solid [THEME_COLOR];

Content Section

css

background: #ffffff;
padding: 40px;

css

background: #f9fafb;
padding: 32px 40px;
text-align: center;
border-top: 1px solid #e5e7eb;

Component Library

All components are extracted from the Welcome Email template structure.

Header Component with Status Badge

html

<div style="background: #ffffff; padding: 48px 40px 32px; border-bottom: 3px solid [THEME_COLOR];">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <!-- Logo -->
        <div>
            <h1 style="color: #111827; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.025em;">
                Strat<span style="color: #2563eb;">IQ</span><span style="color: #06b6d4;">X</span>
            </h1>
            <p style="color: #6b7280; margin: 4px 0 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.025em;">Strategic Intelligence Amplified</p>
        </div>
        
        <!-- Status Badge -->
        <div style="display: flex; align-items: center; gap: 8px; background: [THEME_LIGHT]; padding: 8px 16px; border-radius: 6px; border: 1px solid [THEME_BORDER];">
            [LUCIDE_ICON_SVG]
            <span style="color: [THEME_TEXT]; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">[STATUS_TEXT]</span>
        </div>
    </div>
</div>

Hero Section with Lucide Icon

html

<div style="text-align: center; margin-bottom: 40px;">
    <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: [THEME_LIGHT]; border-radius: 50%; margin-bottom: 16px;">
        [LUCIDE_ICON_SVG]
    </div>
    <h2 style="color: #111827; font-size: 28px; font-weight: 700; margin: 0 0 8px 0; letter-spacing: -0.025em;">[TITLE]</h2>
    <p style="color: #6b7280; font-size: 16px; margin: 0;">Hi <strong style="color: #111827;">[USER_NAME]</strong>, [SUBTITLE]</p>
</div>

Service Activation Card

html

<div style="background: [THEME_LIGHT]; border: 1px solid [THEME_BORDER]; border-left: 4px solid [THEME_COLOR]; border-radius: 8px; padding: 24px; margin-bottom: 32px;">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
        [LUCIDE_ICON_SVG]
        <h3 style="color: [THEME_DARK]; font-size: 16px; font-weight: 600; margin: 0;">[CARD_TITLE]</h3>
    </div>
    <p style="color: [THEME_DARK]; margin: 0; font-size: 14px; line-height: 1.5;">[CARD_CONTENT]</p>
</div>

Information Card (Invoice-Style)

html

<div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
    <div style="background: #f9fafb; padding: 20px; border-bottom: 1px solid #e5e7eb;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <span style="color: #374151; font-weight: 500; font-size: 14px;">[LABEL]</span>
            <div style="display: flex; align-items: center; gap: 8px;">
                [LUCIDE_ICON_SVG]
                <span style="color: #111827; font-weight: 700; font-size: 16px;">[VALUE]</span>
            </div>
        </div>
    </div>
    <!-- Repeat pattern for additional rows -->
</div>

Analyst Contact Card

html

<div style="background: [THEME_LIGHT]; border: 1px solid [THEME_BORDER]; border-left: 4px solid [THEME_COLOR]; border-radius: 8px; padding: 24px;">
    <div style="display: flex; align-items: flex-start; gap: 16px;">
        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: [THEME_COLOR]; border-radius: 50%; flex-shrink: 0;">
            [LUCIDE_USER_ICON_SVG]
        </div>
        <div style="flex: 1;">
            <h4 style="color: [THEME_DARK]; font-size: 16px; font-weight: 600; margin: 0 0 8px 0;">[CARD_TITLE]</h4>
            <p style="color: [THEME_DARK]; margin: 0 0 12px 0; font-size: 14px; line-height: 1.5;">[CARD_DESCRIPTION]</p>
            <div style="display: flex; align-items: center; gap: 8px;">
                [LUCIDE_CLOCK_ICON_SVG]
                <span style="color: [THEME_TEXT]; font-size: 12px; font-weight: 600;">[TIME_INFO]</span>
            </div>
        </div>
    </div>
</div>

Process Steps

html

<div style="display: flex; align-items: flex-start; gap: 16px; padding: 16px; background: #f8fafc; border-radius: 8px; margin-bottom: 12px;">
    <div style="display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #2563eb; color: white; border-radius: 50%; font-size: 12px; font-weight: 600; flex-shrink: 0;">[NUMBER]</div>
    <div style="display: flex; align-items: center; gap: 8px; flex: 1;">
        [LUCIDE_ICON_SVG]
        <p style="color: #374151; margin: 0; font-size: 14px; font-weight: 500;">[STEP_DESCRIPTION]</p>
    </div>
</div>

CTA Section

html

<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #bfdbfe; border-radius: 12px; padding: 28px; text-align: center; margin-bottom: 32px;">
    <div style="margin-bottom: 16px;">
        [LUCIDE_ICON_SVG]
    </div>
    <h4 style="color: #1e40af; font-size: 18px; font-weight: 700; margin: 0 0 8px 0;">[CTA_TITLE]</h4>
    <p style="color: #1e40af; margin: 0 0 20px 0; font-size: 14px;">[CTA_DESCRIPTION]</p>
    
    <a href="[URL]" style="display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: #ffffff; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);">
        [LUCIDE_ICON_SVG]
        [BUTTON_TEXT]
    </a>
</div>

Support Section

html

<div style="background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; text-align: center;">
    <div style="display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px;">
        [LUCIDE_HEADPHONES_ICON_SVG]
        <h3 style="color: #111827; font-size: 16px; font-weight: 600; margin: 0;">[SUPPORT_TITLE]</h3>
    </div>
    
    <p style="color: #6b7280; margin: 0 0 12px 0; font-size: 14px;">[SUPPORT_DESCRIPTION]</p>
    
    <a href="mailto:[EMAIL]" style="color: #2563eb; text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 4px;">
        [LUCIDE_MAIL_ICON_SVG]
        [EMAIL_ADDRESS]
    </a>
    
    <!-- Welcome Message -->
    <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
        <p style="color: #059669; font-size: 12px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600;">
            [LUCIDE_SPARKLES_ICON_SVG]
            <span>[WELCOME_MESSAGE]</span>
            [LUCIDE_TRENDING_UP_ICON_SVG]
        </p>
    </div>
</div>

html

<div style="background: #f9fafb; padding: 32px 40px; text-align: center; border-top: 1px solid #e5e7eb;">
    <p style="color: #6b7280; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;">
        StratIQX Intelligence Platform
    </p>
    <p style="color: #9ca3af; font-size: 12px; margin: 0; line-height: 1.5;">
        © 2025 StratIQX. All rights reserved.<br>
        <a href="#" style="color: #6b7280; text-decoration: none; margin: 0 12px;">Privacy Policy</a>
        <a href="#" style="color: #6b7280; text-decoration: none; margin: 0 12px;">Terms of Service</a>
        <a href="#" style="color: #6b7280; text-decoration: none; margin: 0 12px;">Unsubscribe</a>
    </p>
</div>

Email Templates

All email templates follow the Welcome Email structure with theme-specific variations.

1. Welcome Email (Master Template)

From Address: welcome@stratiqx.ai
Theme: Success Green (#10b981)
Header Border: Green (#10b981)
Status Badge: "Welcome" with Party Popper icon
Hero Icon: Rocket
Key Sections: Service activation, analyst contact, process steps, CTA

2. OTP Verification (Adaptation)

From Address: auth@stratiqx.ai
Theme: Security Blue (#2563eb)
Header Border: Blue (#2563eb)
Status Badge: "Secure" with Lock icon
Hero Icon: Shield Check
Key Sections: Security notice, OTP code box, security guidelines, support

3. Payment Confirmation (Adaptation)

From Address: billing@stratiqx.ai
Theme: Payment Amber (#f59e0b)
Header Border: Amber (#f59e0b)
Status Badge: "Confirmed" with Check Circle icon
Hero Icon: Receipt
Key Sections: Payment details table, next steps, contact information

Content Guidelines

Voice & Tone

Professional yet approachable
Clear and direct communication
Confidence without arrogance
Strategic intelligence focus
Human-centered language

Brand Terminology

Strategic Intelligence (not just "intelligence")
Intelligence Platform (not "app" or "software")
Professional Intelligence Service (official service name)
Intelligence Analyst (not "consultant" or "advisor")
Intelligence Reports (not just "reports")

Technical Requirements

HTML Structure

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Email Subject]</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
</head>
<body style="margin: 0; padding: 0; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; background-color: #f8fafc; line-height: 1.5;">
    <!-- Email content -->
</body>
</html>

Lucide Icon Requirements

Use inline SVG only: No external icon libraries or font dependencies
Standard viewBox: Always use viewBox="0 0 24 24"
Consistent stroke: Set stroke-width="2" for all icons
Rounded edges: Use stroke-linecap="round" and stroke-linejoin="round"
Proper colors: Match theme color specifications
Accessibility: Include meaningful context for screen readers

Email Client Compatibility

Gmail (Desktop/Mobile)
Outlook (2016+, Web, Mobile)
Apple Mail (Desktop/iOS)
Yahoo Mail, Thunderbird
Mobile email clients

Quality Assurance

Pre-Send Checklist

[ ] Logo displays correctly with proper brand colors
[ ] All Lucide icons render as inline SVG across email clients
[ ] Typography hierarchy matches Welcome Email structure
[ ] Theme colors are consistent with specifications
[ ] All links are functional and properly tracked
[ ] Mobile responsiveness verified on multiple devices
[ ] Icon accessibility and fallback text included
[ ] Content follows StratIQX brand terminology
[ ] Footer includes all required legal links

Testing Protocol

Desktop Clients: Outlook 2016+, Apple Mail, Thunderbird
Webmail: Gmail, Outlook Web, Yahoo
Mobile: iOS Mail, Gmail Mobile, Outlook Mobile
Icon Rendering: Verify all Lucide SVGs display correctly
Accessibility: Screen reader compatibility testing

Implementation Guidelines

For Development Teams

Use Welcome Email as Base: Start with Welcome Email structure for all new email templates
Apply Theme Variations: Change colors and icons based on email type (Welcome/OTP/Payment)
Maintain Component Consistency: Use exact component HTML from this guide
Test Lucide Icons: Verify all inline SVGs render properly across email clients
Follow Brand Guidelines: Use correct terminology and voice throughout

Template Creation Process

Copy Welcome Email Structure
Apply Appropriate Theme Colors
Replace Lucide Icons for Context
Update Content and Copy
Test Across Email Clients
Validate Accessibility
Deploy and Monitor

Document Version: 2.0
Last Updated: August 2025
Next Review: November 2025
Approved By: Design Team, Brand Management

This email template system uses the Welcome Email as the design foundation, ensuring consistency across all StratIQX communications while leveraging lightweight Lucide icons for optimal performance and compatibility.

StratIQX Email Template Guidelines v2.0 ​

Table of Contents ​

Overview ​

Design Philosophy ​

Core Principles ​

Visual Hierarchy ​

Brand Elements ​

Logo Usage ​

Typography System ​

Font Stack ​

Text Hierarchy ​

Headings ​

Body Text ​

Color System ​

Primary Brand Colors ​

Background Colors ​

Text Colors ​

Theme Colors by Email Type ​

Welcome/Success Theme (Green) ​

Security/OTP Theme (Blue) ​

Payment/Billing Theme (Amber/Gold) ​

Lucide Icon System ​

Why Lucide Icons? ​

Icon Implementation Standards ​

Basic Inline SVG Structure ​

Size Guidelines ​

Color Usage with Lucide Icons ​

Email-Specific Icon Catalog ​

Welcome & Success Icons ​

Authentication/Security Icons ​

Intelligence & Analytics Icons ​

Payment & Billing Icons ​

Communication Icons ​

Layout Structure ​

Container Specifications (Based on Welcome Email) ​

Section Structure ​

Header Section ​

Content Section ​

Footer Section ​

Component Library ​

Header Component with Status Badge ​

Hero Section with Lucide Icon ​

Service Activation Card ​

Information Card (Invoice-Style) ​

Analyst Contact Card ​

Process Steps ​

CTA Section ​

Support Section ​

Footer Component ​

Email Templates ​

1. Welcome Email (Master Template) ​

2. OTP Verification (Adaptation) ​

3. Payment Confirmation (Adaptation) ​

Content Guidelines ​

Voice & Tone ​

Brand Terminology ​

Technical Requirements ​

HTML Structure ​

Lucide Icon Requirements ​

Email Client Compatibility ​

Quality Assurance ​

Pre-Send Checklist ​

Testing Protocol ​

Implementation Guidelines ​

For Development Teams ​

Template Creation Process ​

StratIQX Email Template Guidelines v2.0

Table of Contents

Overview

Design Philosophy

Core Principles

Visual Hierarchy

Brand Elements

Logo Usage

Typography System

Font Stack

Text Hierarchy

Headings

Body Text

Color System

Primary Brand Colors

Background Colors

Text Colors

Theme Colors by Email Type

Welcome/Success Theme (Green)

Security/OTP Theme (Blue)

Payment/Billing Theme (Amber/Gold)

Lucide Icon System

Why Lucide Icons?

Icon Implementation Standards

Basic Inline SVG Structure

Size Guidelines

Color Usage with Lucide Icons

Email-Specific Icon Catalog

Welcome & Success Icons

Authentication/Security Icons

Intelligence & Analytics Icons

Payment & Billing Icons

Communication Icons

Layout Structure

Container Specifications (Based on Welcome Email)

Section Structure

Header Section

Content Section

Footer Section

Component Library

Header Component with Status Badge

Hero Section with Lucide Icon

Service Activation Card

Information Card (Invoice-Style)

Analyst Contact Card

Process Steps

CTA Section

Support Section

Footer Component

Email Templates

1. Welcome Email (Master Template)

2. OTP Verification (Adaptation)

3. Payment Confirmation (Adaptation)

Content Guidelines

Voice & Tone

Brand Terminology

Technical Requirements

HTML Structure

Lucide Icon Requirements

Email Client Compatibility

Quality Assurance

Pre-Send Checklist

Testing Protocol

Implementation Guidelines

For Development Teams

Template Creation Process