eLife Technologies -- Brand Surface Guide

01

Brand Color System

Primary Palette -- 5 Stops (anchored on #f40606)

Red 900 -- Deep #8b0000

Red 700 -- Dark #b80404

Red 500 -- Brand Primary #f40606

Red 300 -- Light #f96a6a

Red 100 -- Tint #fde8e8

Background & Surface Palette

Page Background #ffffff

Section Alt #fafafa

Dark / Contrast #0f0f0f

Body Text #2d2d2d

Muted Text #666666

Context	Color Rule
Page background	#ffffff (white)
Primary CTA buttons	#f40606 background, #ffffff text
Secondary CTA buttons	Transparent bg, #f40606 border + text
Section headings	#0f0f0f (near-black)
Body copy	#2d2d2d
Muted / captions	#666666
Dark sections (hero, footer)	#0f0f0f background, #ffffff text
Accent / highlight	#f40606 (red only)
Red-600 for on-dark elements	#f96a6a (softened red on dark)
Card backgrounds	#ffffff with 1px #e0e0e0 border

Never Use These

Pink or magenta (#ff69b4 etc.) -- dilutes medical urgency
Orange (#ff8c00 etc.) -- conflicts with red primary and reads as warning/caution
Pastel backgrounds -- undermines the product-launch authority feel
Dark green or teal -- confuses brand identity
Multiple reds on the same surface (stick to #f40606 as the single accent)

02

Typography System

01 -- Display Headline

Every Second Counts.

Montserrat 900 | 42px | -0.03em tracking | #0f0f0f | Use: Hero headline, above-fold statement

02 -- Stat / Impact Number

40yrs

Combined healthcare experience

Stat: Montserrat 900 | 64px | #f40606 | Label: Montserrat 600 | 14px | #2d2d2d

03 -- Section Label / Eyebrow

HOW IT WORKS

04 -- Body Copy

eLife stores your complete, nurse-assessed health summary -- conditions, medications, allergies, surgical history, and more. And unlike a bracelet, your data is always up to date and can be shared digitally with any doctor or caregiver in seconds.

Montserrat 400 | 16px | 1.75 line-height | #2d2d2d | Max-width: 620px

05 -- Card / List Title

Faster ER and Hospital Check-In

Emergency responders access your full summary in under 10 seconds.

Title: Montserrat 700 | 18px | #0f0f0f | Sub: Montserrat 400 | 14px | #666666

06 -- CTA Button Text GET EMERGENCY-READY LEARN MORE

03

Section Anatomy

Brand Opener / Top Bar

Background: #0f0f0f
Logo treatment: Wordmark "eLife Technologies" in Montserrat 900 white + red accent. No icon if no logo file.
Nav links: Montserrat 600, 13px, #ffffff, uppercase tracking
CTA in nav: Red pill button, #f40606, white text, Montserrat 800

Never put a white nav bar on a white hero -- always dark or red header for contrast.

Hero / Opening

Background: #0f0f0f with optional red geometric accent element
Eyebrow: Montserrat 700, 11px, #f96a6a, UPPERCASE, 0.2em tracking
Headline: Montserrat 900, 48-64px, #ffffff, -0.03em tracking
Subheadline: Montserrat 400, 18px, #cccccc, 1.6 line-height
CTA: Primary red button + ghost secondary side by side
Max-width: 1200px centered, 80px vertical padding

Never use a light background for the hero -- the brand is high contrast, not soft.

Stat / Data Band

Background: #fde8e8 (red tint) or #f40606 (full red)
Stat number: Montserrat 900, 56px, #f40606 (on tint) or #ffffff (on red)
Stat label: Montserrat 600, 14px, #2d2d2d or #ffffff
Layout: 3-column grid, centered, 80px vertical padding

Never use more than 4 stats in one band -- dilutes impact.

Narrative Body

Background: #ffffff or #fafafa alternating
Section eyebrow: Montserrat 700, 11px, #f40606, UPPERCASE
Section title: Montserrat 800, 28px, #0f0f0f
Body: Montserrat 400, 16px, #2d2d2d, 1.75 line-height, 620px max-width
Layout: 1100px max-width, 60px vertical padding

Never center-align body copy blocks -- left-aligned reads as authority and clarity.

Service / Feature Cards

Background: #ffffff card, 1px #e0e0e0 border, 8px radius, 24px padding
Icon accent: Red circle (#f40606) or red checkmark
Card title: Montserrat 700, 18px, #0f0f0f
Card body: Montserrat 400, 14px, #666666, 1.7 line-height
Grid: 2 or 3 columns, 20px gap, 1100px max-width

Never use colored card backgrounds -- the red accents are the signal, not the surface.

CTA Block

Background: #f40606 (full red) or #0f0f0f (dark)
Headline: Montserrat 900, 36px, #ffffff
Sub: Montserrat 400, 16px, rgba(255,255,255,0.8)
Button: White background, #f40606 text, Montserrat 800 (on red section)
Padding: 80px vertical, centered text

Never put a red CTA button on a red section -- invert to white/dark button.

Footer

Background: #0f0f0f
Logo/brand: White wordmark, top-left
Links: Montserrat 400, 13px, #999999, hover: #ffffff
Tagline: "Every Second Counts" in red (#f96a6a) italic
Divider: 1px #333
Copyright: Montserrat 400, 11px, #555

Never use a white footer -- breaks the dark-anchor identity.

04

Contrast Rules

Foreground	Background	WCAG	Use case
#ffffff	#f40606	AA Pass	CTA buttons, alert banners
#ffffff	#0f0f0f	AAA Pass	Hero, footer, dark sections
#0f0f0f	#ffffff	AAA Pass	Body copy, headings on white
#f40606	#ffffff	AA Pass	Accent text, eyebrows on white
#f96a6a	#0f0f0f	AA Pass	Accent elements on dark bg
#666666	#ffffff	AA Pass	Captions, metadata
#f40606	#fde8e8	FAIL -- avoid	Red on red tint -- not accessible
#ffffff	#fde8e8	FAIL -- avoid	White on light tint -- invisible

05

Surface-Specific Rules

Email

600px max-width, table-based HTML
Fonts: Arial (body), Georgia (pull quotes only). No Google Fonts.
Header: #f40606 strip (8px) at very top, then white background
Logo: text wordmark "eLife Technologies" in Arial Black, bold
Headline: Arial Black, 24px, #0f0f0f
Body: Arial, 15px, #2d2d2d, 1.7 line-height
CTA button: #f40606 background, #ffffff text, Arial Black, 14px uppercase, 16px 32px padding, 4px radius. Use border="0" cellpadding on table cells.
Footer: #0f0f0f background, Arial, 11px, #999999 text
Never use web fonts -- stick to Arial/Georgia for email clients

Website / Landing Page

1100-1200px max-width, CSS Grid or Flexbox
Font: Montserrat via Google Fonts (weights 400, 600, 700, 800, 900)
Mobile breakpoint: 768px -- single column, 24px horizontal padding
Hero: full-width dark (#0f0f0f), headline Montserrat 900
Section padding: 80px top/bottom desktop, 48px mobile
Max content width (body copy): 720px
Cards: 8px border-radius, 24px padding, 1px #e0e0e0 border

Blog

Article max-width: 740px centered
Body: Montserrat 400, 17px, #2d2d2d, 1.85 line-height
H1 (article title): Montserrat 900, 36px, #0f0f0f, -0.02em tracking
H2 (section): Montserrat 800, 24px, #0f0f0f
Pull quote: left border 4px solid #f40606, padding-left 24px, italic, #2d2d2d
Author byline: Montserrat 600, 13px, #666, with red dot separator
Featured image: full-width, 16:9 aspect ratio, dark overlay with headline on top for social sharing

Social Media

Feed (1:1 1080x1080): Brand primary #f40606 as dominant color block, white text, Montserrat 900 headline upper-third
Stories / Reels (9:16 1080x1920): Text in upper third of frame (safe zone 150px from top). White text on dark or red background. Never overlay text below center.
LinkedIn (1200x627): Professional tone -- white card on dark bg, stat-forward composition
Text safe zones: Keep all text 150px from edges on 9:16 format
Caption style: Professional but direct. Short sentences. No filler words. Lead with the hook.
Hashtag limit: 5 max, placed at end

Video Thumbnails

Dimensions: 1280x720px
Text zone: left 60% of frame. Right 40% for visual/product image.
Headline: Montserrat 900, white, 48-60px, with thin dark drop shadow
Brand element: red strip or logo lock-up, bottom-left corner
Background: dark (#0f0f0f) or action/emergency visual

Slide Decks

Format: 16:9, 1920x1080px
Title slide: #0f0f0f bg, Montserrat 900 headline white, red underline accent
Section divider: full #f40606 bg, large white number + section title
Content slides: #ffffff bg, 60px left margin, left-aligned text
Chart color sequence: #f40606 → #b80404 → #8b0000 → #f96a6a → #fde8e8
Slide footer: thin red line, page number right-aligned, Montserrat 400 11px #999

06

Copy Skeleton (HTML)

<!-- HERO SECTION -->
<section style="background:#0f0f0f;padding:80px 60px;text-align:center;">
  <p style="font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
     letter-spacing:0.2em;text-transform:uppercase;color:#f96a6a;">
    EMERGENCY-READY HEALTH TECH
  </p>
  <h1 style="font-family:'Montserrat',sans-serif;font-size:56px;font-weight:900;
     color:#ffffff;letter-spacing:-0.03em;margin:16px 0;">
    Every Second Counts.
  </h1>
  <p style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:400;
     color:#cccccc;max-width:620px;margin:0 auto 36px;line-height:1.6;">
    Your complete health summary, on your wrist, accessible in seconds when you can't speak for yourself.
  </p>
  <a href="#" style="display:inline-block;background:#f40606;color:#ffffff;
     font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;
     letter-spacing:0.08em;text-transform:uppercase;padding:16px 36px;
     border-radius:4px;text-decoration:none;">
    GET EMERGENCY-READY
  </a>
</section>

<!-- STAT BAND -->
<section style="background:#fde8e8;padding:60px;text-align:center;">
  <div style="display:flex;justify-content:center;gap:80px;flex-wrap:wrap;">
    <div>
      <div style="font-family:'Montserrat',sans-serif;font-size:56px;font-weight:900;color:#f40606;">40</div>
      <div style="font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#2d2d2d;">Years Healthcare Experience</div>
    </div>
    <div>
      <div style="font-family:'Montserrat',sans-serif;font-size:56px;font-weight:900;color:#f40606;"><10s</div>
      <div style="font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#2d2d2d;">Emergency Access Time</div>
    </div>
    <div>
      <div style="font-family:'Montserrat',sans-serif;font-size:56px;font-weight:900;color:#f40606;">24/7</div>
      <div style="font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#2d2d2d;">Health Data Access</div>
    </div>
  </div>
</section>

<!-- EMAIL BUTTON (table-safe) -->
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#f40606" style="border-radius:4px;">
      <a href="#" style="display:inline-block;font-family:Arial,sans-serif;font-weight:700;
         font-size:14px;color:#ffffff;text-decoration:none;text-transform:uppercase;
         letter-spacing:0.08em;padding:16px 36px;">
        GET EMERGENCY-READY
      </a>
    </td>
  </tr>
</table>

07

QA Checklist

Red (#f40606) is used as an accent only -- not as a body background or page-wide fill
No orange, pink, or magenta colors appear anywhere on the asset
All CTA buttons use Montserrat 800 or Arial Black (email), UPPERCASE, 0.08em letter-spacing
White text on red (#f40606) passes AA contrast check
Body copy max-width does not exceed 720px (desktop) or goes full-width (mobile)
Social text overlays are placed in the upper third on 9:16 assets
No white or light background on the hero section -- must be dark or red
Brand tagline "Every Second Counts" appears on hero, email header, or footer
Tone is professional and direct -- no casual slang, no em dashes, no exclamation overuse
Email uses Arial/Georgia only -- no Google Fonts loaded in email templates
No pastel backgrounds used on any surface
Page footer is always dark (#0f0f0f) -- never white

08

Content Inventory

Asset Type	Dimensions	Primary Use	Notes
Feed Post	1080x1080px	LinkedIn, Facebook	Red dominant, Montserrat 900 headline
Story/Reel Cover	1080x1920px	LinkedIn Stories	Text in upper third, dark or red bg
LinkedIn Banner	1200x627px	LinkedIn Company	Professional, stat-forward
Video Thumbnail	1280x720px	YouTube, LinkedIn	Text left 60%, product/visual right 40%
Blog Feature	1200x630px	Blog, link previews	16:9, dark overlay, white headline
Email Header	600x180px	Email campaigns	Red strip, white background, wordmark
Email Banner	600x300px	Email campaigns	Dark or red bg, Montserrat headline
Slide Title	1920x1080px	Pitch decks, webinars	Dark bg, red accent underline
Ad Creative	1200x628px	LinkedIn Ads	High contrast, red CTA, single clear benefit
Website Hero	1440x700px	Homepage	Dark bg, full-width, Montserrat 900