Emerson North · Email Template System Guide

01 — Brand Color System

Primary Palette — Dark Red Spectrum

Every email is built around this five-stop red gradient. Use left-to-right for gradients, standalone for backgrounds.

#6B0000
Deep

#8B0000
Core Dark

#C0392B
Mid Red

#F05454
Bright Accent

#F4827A
Soft Pink

Neutral / Background Palette

#ECEAE6
Page BG

#F8F4F0
Card BG

#FFFFFF
White

#1A1A1A
Near Black

#333333
Dark Gray

#1C1C1E
Footer BG

Text Color Rules (Strict)

Every text color is determined by the background it sits on:

Light backgrounds (#FFF, #F8F4F0, #ECEAE6)

Headings: #1A1A1A · Body: #444444 · Meta: #555555 · Labels: #C0392B

Dark / Red backgrounds (#8B0000, #333333, gradients)

Headlines: #FFFFFF · Body: rgba(255,255,255,0.85) · Meta: rgba(255,255,255,0.60) · Numbers: #F05454

02 — Typography System

Display / Hero Headlines

The gap nobody
is looking for.

Georgia, 'Times New Roman', serif · 28–42px · weight:400 · #FFFFFF or #1A1A1A

Stat / Large Numbers

4×

Georgia, serif · 44px · weight:400 · #F05454 on dark BG / #1A1A1A on light BG

Section Labels / Eyebrows

RISK & PROTECTION — 2026

Montserrat · 9–10px · weight:700 · letter-spacing:4–6px · #C0392B on light / rgba(255,255,255,0.65) on dark

Body Copy

Most advisors only see one piece of your financial picture. We see all of it.

Arial, sans-serif · 13–15px · weight:400 · #444444 (light) / rgba(255,255,255,0.75) (dark)

Card / List Titles

Beneficiary Designations Override Your Will

Montserrat · 11px · weight:700 · letter-spacing:1px · #8B0000 on cream / #FFFFFF on dark

CTA Button Text

SCHEDULE YOUR STRATEGY SESSION →

Montserrat · 12px · weight:700 · letter-spacing:2.5px · #8B0000 on white BG button

03 — Section Anatomy (In Order)

Section	Background	Content	Notes
TOP BRAND BAR Required	`linear-gradient(→, #6B0000, #8B0000, #C0392B, #F05454, #C0392B, #8B0000, #6B0000)`	5px tall · non-text decorative stripe	Opens every email. Creates instant brand recognition.
LOGO HEADER Required	`#FFFFFF` · 1px bottom border `#EAE5E0`	44×44px logo PNG · "EMERSON NORTH" `#1A1A1A` · "STRATEGIC ADVISORY GROUP" `#C0392B`	Padding: 22px 40px.
HERO PHOTO Required	Unsplash image 600×270px · overlay gradient `rgba(20,0,0,0.45)→rgba(10,0,0,0.92)`	Eyebrow label · H1 headline · subtext 13px	Text is bottom-aligned. H1: Georgia 36px white.
STAT BAND Required	`linear-gradient(135deg, #8B0000, #6B0000)`	3 columns · stat number + label below	Stat numbers: Georgia 44px #F05454 or #FFFFFF. NEVER use dark text here.
OPENING STORY Required	`#FFFFFF`	Section label · H2 headline · 2–3 body paragraphs	H2: Georgia 28px #1A1A1A. Body: Arial 15px #444444.
PHOTO + PULL QUOTE SPLIT Optional	Left: Unsplash image · Right: `#333333`	Left: photo 42% · Right: eyebrow + italic quote + body	Quote: Georgia 20px italic #FFFFFF.
NUMBERED LIST SECTION Required	`#FFFFFF` outer · cards: `#F8F4F0` · border-left: `4px solid #C0392B`	4–5 numbered cards	Circle badge: #8B0000 bg, white text.
FULL-WIDTH PHOTO DIVIDER Optional	Unsplash image 600×200px	No text — visual breath	object-fit:cover · scene images, not portraits.
WHAT EN DOES (Service Cards) Required	`#333333`	Label + H2 + white cards with numbered items	White cards with box-shadow.
DARK SPLIT (Quote Panel) Optional	Left: `#1A1A1A` · Right: `#8B0000`	Left: question/challenge · Right: EN answer	All text white or rgba.
CTA CARD Required	Outer: `#333333` · Inner: gradient `#C0392B→#8B0000→#5C0000`	Label · headline · subtext · white button	Button: #FFFFFF bg, #8B0000 text, Montserrat 12px bold.
NEXT IN SERIES Optional	`linear-gradient(→, #1A1A1A, #2A2A2A)`	"UP NEXT" label + title + preview	Label: #F05454.
FOOTER Required	`#1C1C1E`	Logo 36px · wordmarks · links · legal	Website: #F05454. Email: rgba(255,255,255,0.45). Legal: rgba(255,255,255,0.25).

04 — Contrast Rules (Non-Negotiable)

The #1 mistake in every draft: using dark text (#1A1A1A, #333333, #666666) on a dark red or charcoal background — it renders completely invisible in most email clients.

✅ Correct — Light Background

Headings	`#1A1A1A`
Body copy	`#444444`
Secondary text	`#555555`
Labels / eyebrows	`#C0392B`
Numbered badges	`#8B0000` bg + white text
Borders / accents	`4px solid #C0392B`

✅ Correct — Dark/Red Background

Headlines	`#FFFFFF`
Body copy	`rgba(255,255,255,0.85)`
Labels / eyebrows	`rgba(255,255,255,0.65)`
Stat numbers	`#F05454` or `#FFFFFF`
Attribution / small	`rgba(255,255,255,0.55)`
Dividers	`rgba(255,255,255,0.12)`

❌ Never Use These Colors on Dark Backgrounds

These were found and corrected in previous builds. Never place them on red/dark sections:

#1A1A1A #333333 #666666 #888888 #777777 #AAAAAA #BBBBBB #F4827A #F5F0EB #F2EEEB

05 — Gradient Reference

Brand Bar

linear-gradient(→, #6B0000 … #6B0000)

Used: top bar of every email

Stat Band

linear-gradient(135deg, #8B0000, #6B0000)

Used: stat/number row

Hero / Quote Sections

linear-gradient(138deg, #C0392B, #8B0000, #5A1010)

Used: hero overlay, quote blocks

CTA Card Outer Frame

linear-gradient(145deg, #C0392B, #8B0000, #5C0000)

Used: 3px border "glow" frame

CTA Card Inner

linear-gradient(145deg, #A93226, #7B241C, #4C0000)

Used: inside the CTA card

Hero Photo Overlay

linear-gradient(↓, rgba(20,0,0,.45), rgba(10,0,0,.92))

Used: over hero image

06 — Complete HTML Skeleton (Copy-Paste Ready)

<!DOCTYPE html><html lang="en"><head> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <style>body{background-color:#ECEAE6;font-family:Georgia,serif;}</style> </head><body style="background-color:#ECEAE6;">  <div style="display:none;max-height:0;overflow:hidden;">Preview text here.</div>  <table width="100%" style="background:#ECEAE6;"><tr><td align="center" style="padding:32px 16px 52px;"> <table width="600" style="max-width:600px;border-radius:8px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.14);background:#FFFFFF;">  <tr><td style="height:5px;background:linear-gradient(to right,#6B0000,#8B0000,#C0392B,#F05454,#C0392B,#8B0000,#6B0000);"></td></tr>             </table></td></tr></table> </body></html>

07 — Pre-Send QA Checklist

Brand Consistency

Brand bar present

5px gradient stripe at top of every email.

Logo + wordmark

"EMERSON NORTH" #1A1A1A, "STRATEGIC ADVISORY GROUP" #C0392B.

Footer complete

Logo, website (#F05454), email link, legal. No unsubscribe button.

CTA button URL

All buttons → emersonnorth.com/strategize-with-us-finance or updated URL.

Contrast / Accessibility

Stat band text

#F05454 or #FFFFFF — never #1A1A1A or gray.

Dark sections

All text on dark bg must be white or rgba(255,255,255,x).

Light sections

All text on light bg must be #1A1A1A, #444444, or #C0392B.

No ghost colors

Never use #F5F0EB, #F2EEEB, #AAAAAA, #BBBBBB as text.

08 — Current Email Series Inventory

Email	Subject / Theme	File Name	Status
01	Risk & Protection — The gaps your advisors aren't looking for	emerson_north_email_01_final.html	Updated
02	The Hidden Gaps — What a comprehensive review looks like	emerson_north_email_02_v2.html	Updated
03	Business Protection — Buy-sell, key person, entity structure	emerson_north_email_03_v9.html	Updated
04	Exit Planning — The Window in 2026	emerson_north_email_04_final.html	Updated
05	Estate Planning — You have a will. That doesn't mean your family is protected.	emerson_north_email_05.html	Updated
06	Tax Strategy — The tax year you can't get back	emerson_north_email_06.html	Updated
—	ER Nurse TikTok Client · Week 1 Onboarding (v2)	er_nurse_client_email_v2.html	Non-series

Emerson North · Strategic Advisory Group · Internal Template Reference

Emerson NorthEmail Template System