# eToro Email Design System

> Extracted from Shiloh's examples and live email

## Design Links
- **Email Components Figma:** https://www.figma.com/design/GLkGG1wYhrUIyo2tBbtONC/2343---Email--marketing-components
- **LP Design System Figma:** https://www.figma.com/design/VIxgxSDIn777wLoSit6zOZ/LP-Design-System
- **Live Example:** https://view.connect.etoro.com/?vawpToken=6WESKPPB4MKUPIS32LDXEML3YI.500020

---

## Color Palette

### Primary
- **eToro Green:** `#13C636` (buttons, positive %, icons)
- **Navy Blue (dark):** `#0d1421` or `#1a1f36` (dark sections)
- **White:** `#FFFFFF` (light sections)

### Text
- **Headlines (dark bg):** White `#FFFFFF`
- **Headlines (light bg):** Navy `#1a1f36`
- **Body text:** `#666666` or `#888888`
- **Positive %:** Green `#13C636`
- **Negative %:** Red `#E31937` or `#FF4444`

### Tags/Labels
- **Earnings Report:** Green `#13C636` bg, white text
- **Ex-Dividend:** Red/Coral `#FF6B6B` bg
- **Dividend Payment:** Yellow/Gold `#FFD93D` bg
- **Other:** Gray `#E0E0E0` bg

---

## Typography

### Headlines
- **Font:** Sans-serif (system or eToro font)
- **Weight:** Bold (700-800)
- **Size:** 24-32px
- **Color:** Navy (light bg) or White (dark bg)

### Body
- **Weight:** Regular (400)
- **Size:** 14-16px
- **Line-height:** 1.5-1.6
- **Color:** Gray `#666`

### Ticker/Stock Names
- **Ticker:** Bold, 16-18px
- **Company Name:** Regular, 14px, gray

---

## Components

### Stock Card (Light Theme)
```
┌────────────────────────────────────────────────────────┐
│ [Logo]  TICKER           182.68                        │
│         Company Name     ▲(0.03%) green                │
│                                                        │
│ Description text goes here...                          │
└────────────────────────────────────────────────────────┘
```

### Stock Card (Dark Theme with Action)
```
┌────────────────────────────────────────────────────────┐
│ [Logo]  TICKER       182.68      [+] green circle     │
│         Company      (0.03%)                          │
└────────────────────────────────────────────────────────┘
```

### Tag/Label Pill
- Border-radius: 12-16px
- Padding: 4px 12px
- Font-size: 11-12px
- Font-weight: 500-600

### CTA Button
- Background: `#13C636`
- Text: White or Black
- Border-radius: 4-8px
- Padding: 12px 24px
- Font-weight: Bold

### Green Icon Circle
- Background: `#13C636`
- Size: 48-64px diameter
- Icon: White line drawing
- Used for feature benefits

### Content Section (Image + Text)
- Alternating layout (image left/right)
- Image: Square or 4:3 ratio
- Text: Headline + body + CTA link
- CTA: Underlined text link, navy color

---

## Layout Patterns

### Light Section
- Background: White `#FFFFFF`
- Text: Navy/dark
- Used for: Content, features, benefits

### Dark Section
- Background: Navy `#0d1421`
- Text: White
- Used for: Headers, CTAs, emphasis

### Section Spacing
- Padding: 40-60px vertical
- Content max-width: 600px (email)

---

## Disclaimers

### Placement
- After each CTA section (small text)
- Footer (full disclaimer)

### Style
- Font-size: 11-12px
- Color: `#888888` or `#666666`
- Line-height: 1.6

### Standard Text (EU/UK)
```
Copy Trading does not amount to investment advice. The value of your investments may go up or down. Your capital is at risk.

CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. 50% of retail investor accounts lose money when trading CFDs with this provider.

Cryptoasset investing is highly volatile and unregulated in some EU countries. No consumer protection. Tax on profits may apply.
```

---

## Footer Links

Standard footer includes:
- Privacy Policy
- Risk Disclosure
- Terms and Conditions
- Regulation and License
- Unsubscribe

---

*Last updated: 2026-02-02*
