Protocol Raw Email Design System v1.1¶

Purpose: Define visual and copy standards for all Protocol Raw email communications.
Owner: Protocol Raw Operations
Last Updated: January 2026
Related: Visual Identity Guide v2.1

Brand Positioning (Email Context)¶

Emails are not marketing brochures. They're direct communication with someone who already trusts us enough to give us their email address. Every email should feel like a note from a competent, thoughtful company—not a sales pitch.

Voice in email: - Calm, expert, reassuring - Short, declarative, plain English - Factual without being cold - Respectful of time

We are: Confident, warm, systematic
We are NOT: Salesy, cute, desperate for attention

Colour Palette (Email-Specific)¶

Adapted from Visual Identity Guide v2.1 for email rendering.

Core Colours¶

Name	Hex	Usage
Espresso	`#2B2523`	Headlines, body text, secondary buttons
Cream	`#F9F7F4`	Primary background
Burnt Sienna	`#B85C3A`	Primary CTAs, links
Burnt Sienna Dark	`#9F4D2F`	CTA hover state (web preview only)
Forest Green	`#2D5144`	Verification/proof contexts only

Supporting Colours¶

Name	Hex	Usage
Warm Linen	`#EBE8E3`	Dividers, subtle backgrounds, callout boxes
Warm Gray	`#918A85`	Footer text, muted secondary text
Taupe	`#6B6360`	Tertiary text (use sparingly)
White	`#FFFFFF`	Inside callout boxes only (never main background)

Colour Rules¶

Background is always Cream #F9F7F4 — never pure white
Body text is always Espresso #2B2523 — never black, never grey
Links are always Burnt Sienna #B85C3A
Forest Green is reserved for verification/proof content only
Footer text uses Warm Gray #918A85

Typography¶

Font Stack¶

Email clients have limited font support. We use a progressive stack:

/* Headlines */
font-family: 'Montserrat', 'Trebuchet MS', Arial, sans-serif;

/* Body */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

Note: Include Google Fonts link in <head> for clients that support it:

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

Type Scale¶

Element	Font	Size	Weight	Colour	Line Height
Headline (H1)	Montserrat	28px	700	Espresso	1.3
Subhead (H2)	Montserrat	22px	700	Espresso	1.3
Body	Inter	16px	400	Espresso	1.6
Body Small	Inter	14px	400	Espresso	1.5
Footer	Inter	13px	400	Warm Gray	1.5
Button	Inter	16px	600	(varies)	1.2

Typography Rules¶

One headline per email — keep it simple
No subheads unless necessary — most emails don't need them
Body text is 16px minimum — anything smaller is hard to read on mobile
Use !important on colours — override email client defaults

Layout¶

Structure¶

┌─────────────────────────────────────────â”
│           Cream Background              │
│  ┌───────────────────────────────────â”  │
│  │  ┌─────────────────────────────â”  │  │
│  │  │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│  │  │
│  │  │░░░░░ PROTOCOL RAW ░░░░░░░░░░│  │  │
│  │  │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│  │  │
│  │  └─────────────────────────────┘  │  │
│  │         (Espresso header bar)     │  │
│  │                                   │  │
│  │         HEADLINE                  │  │
│  │                                   │  │
│  │         Body text                 │  │
│  │         Body text                 │  │
│  │                                   │  │
│  │      [Optional CTA]               │  │
│  │                                   │  │
│  │         Sign-off                  │  │
│  │                                   │  │
│  └───────────────────────────────────┘  │
│                                         │
│              Footer                     │
│                                         │
└─────────────────────────────────────────┘

Branded Header Bar¶

Every email begins with an Espresso header bar displaying "Protocol Raw" in Cream text. This provides instant brand recognition and a premium feel.

<tr>
  <td style="background-color: #2B2523; padding: 24px 32px; border-radius: 8px 8px 0 0;">
    <p style="margin: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 18px; font-weight: 700; color: #F9F7F4 !important; letter-spacing: -0.01em;">
      Protocol Raw
    </p>
  </td>
</tr>

Header rules: - Background: Espresso #2B2523 - Text: Cream #F9F7F4 - Font: Montserrat Bold 700, 18px - Padding: 24px 32px - Border radius: 8px on top corners only - Always present on every email

Dimensions¶

Element	Value
Max width	600px
Outer padding (desktop)	40px
Outer padding (mobile)	20px
Paragraph spacing	24px (margin-bottom)
Section spacing	32px

Responsive¶

@media only screen and (max-width: 600px) {
  .content-wrapper { padding: 32px 20px !important; }
  h1 { font-size: 24px !important; }
}

Components¶

Primary Button (CTA)¶

Use sparingly. Not every email needs a button.

<table border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center" bgcolor="#B85C3A" style="border-radius: 8px;">
      <a href="URL" style="display: inline-block; padding: 14px 28px; font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 600; color: #FFFFFF !important; text-decoration: none; border-radius: 8px;">
        Button Text
      </a>
    </td>
  </tr>
</table>

Button rules: - Background: Burnt Sienna #B85C3A - Text: White #FFFFFF - Border radius: 8px - Padding: 14px 28px - Max one primary button per email - Button text is short and specific ("View Your Order", not "Click Here")

Secondary Button (Outline)¶

For supporting actions.

<a href="URL" style="display: inline-block; padding: 12px 26px; font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 600; color: #2B2523 !important; text-decoration: none; border: 2px solid #2B2523; border-radius: 8px;">
  Button Text
</a>

Callout Box (Standard)¶

For important information that needs to stand out.

<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #EBE8E3; border-radius: 8px;">
  <tr>
    <td style="padding: 20px 24px;">
      <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 15px; line-height: 1.6; color: #2B2523 !important;">
        Callout content here.
      </p>
    </td>
  </tr>
</table>

Callout Box (Trust Accent)¶

For verification, credit, or proof-related information. Uses Forest Green left border to connect with the proof system visual language.

<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #F9F7F4; border-radius: 8px; border-left: 4px solid #2D5144;">
  <tr>
    <td style="padding: 20px 24px;">
      <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 15px; line-height: 1.6; color: #2B2523 !important;">
        <strong style="color: #2D5144 !important;">Key point.</strong> Supporting detail here.
      </p>
    </td>
  </tr>
</table>

When to use Trust Accent: - Credit earned/applied notifications - Referral confirmations - Batch verification information - Anything related to the proof system

When NOT to use Trust Accent: - General transactional emails (dispatch, order confirmation) - Lifecycle emails (welcome, check-ins) - Support communications

Callout rules: - Standard: Warm Linen background #EBE8E3 - Trust: Cream background with Forest Green #2D5144 left border - Border radius: 8px - Max one callout per email

Divider¶

Simple horizontal rule for separating sections.

<tr>
  <td style="padding: 24px 0;">
    <hr style="border: none; border-top: 1px solid #EBE8E3; margin: 0;">
  </td>
</tr>

Email Types & Templates¶

1. Transactional (Order Confirmation, Dispatch, etc.)¶

Purpose: Inform about something that happened
Tone: Clear, factual, reassuring
Structure: - Headline states what happened - Body provides details - Optional CTA for next action - No marketing content

Example headline patterns: - "Your order is confirmed" - "Your box has been dispatched" - "Your subscription is paused"

2. Lifecycle (Welcome, Check-ins, Win-back)¶

Purpose: Nurture the customer relationship
Tone: Warm but not pushy
Structure: - Headline states the purpose - Body is concise and helpful - One clear CTA if action needed - No multiple offers or distractions

3. Operational (Credit earned, Delivery exceptions)¶

Purpose: Keep customer informed of system events
Tone: Factual, simple
Structure: - Headline states what happened - Body explains what it means for them - CTA only if they need to do something

4. Support (Replies and Proactive Contact)¶

Purpose: Respond to customer enquiries or proactively communicate
Tone: Conversational, helpful, human
Structure: - No headline (it's a reply, not an announcement) - Conversational body - Persona sign-off (see Support Email Variant section below) - No CTA unless genuinely needed

See Support Email Variant for full specification.

Copy Guidelines¶

Subject Lines¶

Length: 40-50 characters ideal (shows fully on mobile)
Tone: Clear and direct, not clever or clickbait
Format: Sentence case, no ALL CAPS, no emojis

Good: - "Your order is confirmed" - "You've earned £15" - "Your box ships tomorrow"

Bad: - "🎉 AMAZING NEWS about your order!!!" - "You won't BELIEVE what's inside" - "Hey there friend!"

Preview Text¶

Length: 40-90 characters
Purpose: Supports subject line, adds context
Don't: Repeat the subject line

Body Copy¶

Paragraphs: 2-3 sentences max
Total length: 50-150 words for most emails
Sentences: Short, declarative, plain English
Person: "You" and "we" — conversational but professional

Sign-off¶

Standard emails end with just the brand name:

Protocol Raw

Not "The Protocol Raw Team", not "Best regards", not "Cheers". Just the brand name. Clean, confident.

Support emails use a persona sign-off (see Support Email Variant):

Sophie
Protocol Raw

What NOT to Do¶

Design¶

✗ Pure white backgrounds (use Cream)
✗ Black text (use Espresso)
✗ Multiple CTAs competing for attention
✗ Images as primary content (deliverability issues)
✗ Fancy layouts with multiple columns
✗ Heavy graphics or large images
✗ Emojis in subject lines or body

Copy¶

✗ "Hey!" or "Hi there!" openers
✗ Exclamation marks (one per email maximum)
✗ Marketing hype ("Amazing!", "Incredible!", "Game-changing!")
✗ Urgency language ("ACT NOW!", "Limited time!")
✗ Multiple topics in one email
✗ Long paragraphs
✗ Apologetic tone without reason

Examples¶

Good Email (Credit Earned)¶

┌──────────────────────────────────────â”
│░░░░░░░░░ Protocol Raw ░░░░░░░░░░░░░░│  â† Espresso header
├──────────────────────────────────────┤
│                                      │
│  You've earned £15                   │  â† Headline
│                                      │
│  Hi Sarah,                           │
│                                      │
│  Your referral came through. Thanks  │
│  for spreading the word.             │
│                                      │
│  ┌────────────────────────────────â”  │
│  │▌ Your balance is now £30.     │  │  â† Trust callout
│  │▌ Auto-refund on next renewal. │  │     (Forest Green border)
│  └────────────────────────────────┘  │
│                                      │
│  Protocol Raw                        │
│                                      │
└──────────────────────────────────────┘
         protocolraw.co.uk               â† Footer

Why it works: - Instant brand recognition (header bar) - Clear headline - Short body copy - Forest Green callout for trust/credit context - Clean sign-off

Good Email (Dispatch Notification)¶

┌──────────────────────────────────────â”
│░░░░░░░░░ Protocol Raw ░░░░░░░░░░░░░░│
├──────────────────────────────────────┤
│                                      │
│  Your box ships tomorrow             │
│                                      │
│  Hi Sarah,                           │
│                                      │
│  Your next delivery is scheduled     │
│  for dispatch tomorrow. Tracking     │
│  details will follow.                │
│                                      │
│  Expected delivery: Thursday 18 Jan  │
│                                      │
│  [  Track Your Delivery  ]           │  â† Primary CTA
│                                      │
│  Protocol Raw                        │
│                                      │
└──────────────────────────────────────┘
         protocolraw.co.uk

Why it works: - Same branded header (consistency) - No green callout (not a trust/verification context) - One clear CTA - No fluff

Support Email Variant¶

Support responses follow the same visual standards but with a modified structure appropriate for conversational replies.

When to Use¶

Reply to customer support emails
Outbound proactive contact
Any 1:1 customer communication

Structure Differences¶

Element	Standard Email	Support Email
Headline	Required	Omitted
Body structure	Paragraphs with callouts	Conversational flow
Sign-off	"Protocol Raw"	"{Persona} Protocol Raw"

Personas¶

Support emails are signed by a named persona to create a human connection:

Sophie
Tom
Lucy

Personas are assigned deterministically per customer (same customer always gets same persona) to maintain consistency across interactions.

Sign-off Format¶

{Response body}

{Persona}
Protocol Raw

Example:

Hi Sarah,

I can see your order #1234 is with DPD and tracking shows it's out for delivery today. You should receive it by this evening.

If anything changes, DPD will send you a text directly.

Sophie
Protocol Raw

Template Variables¶

Variable	Description	Example
`message_data.subject`	Email subject line	"Re: Delivery question"
`message_data.body`	Full response including sign-off	"Hi Sarah,\n\n..."

Copy Guidelines (Support-Specific)¶

Do: - Lead with the answer - Use customer's first name - Include specific details (tracking numbers, dates) - Keep under 150 words - Use "I" not "we" (persona is speaking)

Don't: - Open with apologies unless warranted - Use templates that feel templated - Include marketing messages - Add unnecessary CTAs

Example: Good Support Response¶

┌──────────────────────────────────────────â”
│░░░░░░░░░ Protocol Raw ░░░░░░░░░░░░░░░░░░│  â† Espresso header
├──────────────────────────────────────────┤
│                                          │
│  Hi Sarah,                               │  â† No headline
│                                          │
│  I can see your order is with DPD and    │
│  tracking shows delivery for today.      │
│                                          │
│  The tracking number is 1234567890 if    │
│  you want to check the live status.      │
│                                          │
│  Sophie                                  │  â† Persona sign-off
│  Protocol Raw                            │
│                                          │
└──────────────────────────────────────────┘
         protocolraw.co.uk                    â† Footer

Sources¶

Support emails can originate from:

Source	Sign-off Handling
CS-03 Autonomous Agent	Persona auto-assigned, sign-off auto-appended
Ops Portal (human)	Human writes response, system appends sign-off
Outbound proactive	Human writes response, system appends sign-off

All sources use the same template and produce visually identical emails.

Support Response Template (Customer.io)¶

Transactional Message ID: support_response

HTML Template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ message_data.subject }}</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Montserrat:wght@700&display=swap" rel="stylesheet">
  <style type="text/css">
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    a { color: #B85C3A; }
    a:visited { color: #B85C3A; }
    @media only screen and (max-width: 600px) {
      .content-wrapper { padding: 32px 20px !important; }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; background-color: #F9F7F4;">

  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #F9F7F4; padding: 40px 20px;">
    <tr>
      <td align="center">
        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto;">

          <!-- Branded Header -->
          <tr>
            <td style="background-color: #2B2523; padding: 24px 32px; border-radius: 8px 8px 0 0;">
              <p style="margin: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 18px; font-weight: 700; color: #F9F7F4 !important; letter-spacing: -0.01em;">
                Protocol Raw
              </p>
            </td>
          </tr>

          <!-- Content Area -->
          <tr>
            <td class="content-wrapper" style="background-color: #FFFFFF; padding: 40px 32px; border-radius: 0 0 8px 8px;">

              <!-- Body (no headline for support replies) -->
              <p style="font-family: 'Inter', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #2B2523 !important; margin: 0; white-space: pre-wrap;">{{ message_data.body }}</p>

            </td>
          </tr>

        </table>

        <!-- Footer -->
        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto;">
          <tr>
            <td align="center" style="padding-top: 24px;">
              <p style="font-family: 'Inter', Arial, sans-serif; font-size: 13px; color: #918A85 !important; margin: 0;">
                <a href="https://protocolraw.co.uk" style="color: #918A85; text-decoration: none;">protocolraw.co.uk</a>
              </p>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>
</html>

Plain Text Version:

{{ message_data.body }}

---
protocolraw.co.uk

Technical Requirements¶

Email Client Testing¶

Test all emails in: - Gmail (web + mobile) - Apple Mail (desktop + iOS) - Outlook (web + desktop)

Accessibility¶

Minimum 16px body text
Colour contrast meets WCAG AA (Espresso on Cream: 11.2:1 ✓)
Alt text on any images
Links are descriptive (not "click here")

Inline Styles¶

Email clients strip <style> blocks. Always inline critical styles:

<p style="font-family: 'Inter', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #2B2523 !important; margin: 0 0 24px 0;">

Base Template¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{subject}}</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Montserrat:wght@700&display=swap" rel="stylesheet">
  <style type="text/css">
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    a { color: #B85C3A; }
    a:visited { color: #B85C3A; }
    @media only screen and (max-width: 600px) {
      .content-wrapper { padding: 32px 20px !important; }
      h1 { font-size: 24px !important; }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; background-color: #F9F7F4;">

  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #F9F7F4; padding: 40px 20px;">
    <tr>
      <td align="center">
        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto;">

          <!-- Branded Header -->
          <tr>
            <td style="background-color: #2B2523; padding: 24px 32px; border-radius: 8px 8px 0 0;">
              <p style="margin: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 18px; font-weight: 700; color: #F9F7F4 !important; letter-spacing: -0.01em;">
                Protocol Raw
              </p>
            </td>
          </tr>

          <!-- Content Area -->
          <tr>
            <td class="content-wrapper" style="background-color: #FFFFFF; padding: 40px 32px; border-radius: 0 0 8px 8px;">

              <!-- Headline -->
              <h1 style="font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 28px; color: #2B2523 !important; margin: 0 0 24px 0; line-height: 1.3;">
                {{headline}}
              </h1>

              <!-- Body -->
              {{body_content}}

              <!-- Sign-off -->
              <p style="font-family: 'Inter', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #2B2523 !important; margin: 24px 0 0 0;">
                Protocol Raw
              </p>

            </td>
          </tr>

        </table>

        <!-- Footer -->
        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto;">
          <tr>
            <td align="center" style="padding-top: 24px;">
              <p style="font-family: 'Inter', Arial, sans-serif; font-size: 13px; color: #918A85 !important; margin: 0;">
                <a href="https://protocolraw.co.uk" style="color: #918A85; text-decoration: none;">protocolraw.co.uk</a>
              </p>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>
</html>

Template notes: - Header bar with rounded top corners - Content area in white with rounded bottom corners - Creates a cohesive "card" effect on the cream background - Footer sits outside the card

Checklist Before Sending¶

[ ] Subject line is clear and under 50 characters
[ ] Preview text adds context (not repeating subject)
[ ] Espresso header bar with "Protocol Raw" in Cream
[ ] Content area background is White #FFFFFF
[ ] Outer background is Cream #F9F7F4
[ ] Body text is Espresso #2B2523
[ ] Links are Burnt Sienna #B85C3A
[ ] Trust callout (green border) only used for credit/verification content
[ ] Maximum one primary CTA
[ ] Body is under 150 words
[ ] Sign-off is correct (brand only OR persona + brand for support)
[ ] Footer is minimal (just website link)
[ ] No emojis
[ ] No ALL CAPS
[ ] Tested in Gmail, Apple Mail, Outlook

Version History¶

Version	Date	Changes
1.0	January 2026	Initial release
1.1	January 2026	Added Support Email Variant section with persona sign-offs, Customer.io template

Protocol Raw Email Design System v1.1