# eToro Brand & Design System V1

> Last updated: March 30, 2026
> Sources: eToro Brand Book (272MB PDF) + 2 Figma Design System files

---

## Brand Identity

### Mission
eToro's mission is to open the global markets so that everyone can trade and invest in a simple and transparent way.

### Brand Values
- **Simplicity** — Making complex financial markets accessible to everyone
- **Transparency** — Open, honest communication about trading and investing
- **Innovation** — Pioneering social trading and copy trading
- **Community** — Building a global community of traders and investors
- **Trust** — Regulated, secure platform with millions of users worldwide

### Voice & Tone
- **Confident but not arrogant** — We know our stuff, but we're approachable
- **Clear and direct** — No jargon, no fluff
- **Empowering** — Help users feel capable and informed
- **Human** — We talk like real people, not robots
- **Educational** — Always teaching, always guiding

### Logo Rules
- Never tilt, rotate, or distort the eToro logo
- Maintain clear space around the logo (minimum: height of the 'e' in eToro)
- Primary logo: Green on white or white on dark backgrounds
- Do not place logo on busy backgrounds
- Do not change logo colors outside approved palette
- Minimum size: 80px wide for digital

---

## Colors

### Primary Colors
| Name | Hex | Usage |
|------|-----|-------|
| eToro Green (Marketing) | `#13C636` | Primary brand color, CTAs, highlights, marketing materials |
| eToro Green (Product UI) | `#0EB12E` | In-product UI elements |
| Navy / Dark Blue | `#000021` | Backgrounds, text, headers |
| Light Blue | `#C0E8FD` | Accents, backgrounds, informational sections |
| White | `#FFFFFF` | Backgrounds, text on dark |

### Shades of Green
| Name | Hex | Opacity |
|------|-----|---------|
| Green 80% | `#42D15E` | 80% |
| Green 60% | `#71DD86` | 60% |
| Green 40% | `#A1E8AF` | 40% |
| Green 20% | `#D0F4D7` | 20% |
| Green 10% | `#E7F9EB` | 10% |

### Shades of Gray
| Name | Hex | Description |
|------|-----|-------------|
| Dark Blue 90% | `#1A182F` | Near-black, deep backgrounds |
| Dark Blue 80% | `#2E2C43` | Dark surfaces |
| Dark Blue 60% | `#66667A` | Secondary text |
| Medium Gray | `#777777` | Muted text, borders |
| Dark Blue 40% | `#9999A6` | Placeholder text |
| Light Gray 1 | `#EEEEEE` | Borders, dividers |
| Light Gray 2 | `#F7F7F7` | Light backgrounds |

### Secondary Colors
| Name | Hex | Usage |
|------|-----|-------|
| Turquoise | `#6BF5C0` | Accents, highlights, gradients |
| Pink Pop | `#F887CC` | Special promotions, attention |
| Tangerine | `#E96E14` | Warnings, secondary CTAs |
| Yellow | `#F7B42C` | Highlights, awards, attention |

### Gradients
| Name | Colors | Usage |
|------|--------|-------|
| Green → Turquoise | `#13C636` → `#6BF5C0` | Primary gradient, hero sections |
| Green → Light Blue | `#13C636` → `#C0E8FD` | Secondary gradient, informational |
| Tangerine → Yellow | `#E96E14` → `#F7B42C` | Promotions, special offers |

### Default Text Colors on Backgrounds
| Background | Text Color | Link Color |
|-----------|-----------|------------|
| White BG | Navy `#000021` | Green `#13C636` |
| Gray BG | Navy `#000021` | Green `#13C636` |
| Dark Blue BG | White `#FFFFFF` | Green `#13C636` |

---

## Typography

### Font Family
- **Primary:** eToro Variable Font (Madera)
- **CDN:** `https://marketing.etorostatic.com/cache1/fonts/etoro/eToro-VF-v0.7.ttf`
- **Weights:** Light (350), Regular (400), Medium (500), Bold (700)

### Desktop Type Scale
| Style | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------|
| H1 (CTA Fold) | 28px | Medium (500) | 32px | Hero with CTA |
| H1 (No CTA Fold) | 32px | Medium (500) | 38px | Hero without CTA |
| H2 Option 1 | 30px | Light (350) + Bold (700) | 34px | Section headers (mixed weight) |
| H2 Option 2 | 38px | Medium (500) | 46px | Large section headers |
| H3 | 24px | Medium (500) | 30px | Sub-section headers |
| Subtitle | 20px | Medium (500) | 26px | Card titles, sub-headers |
| Cards Title | 24px | Medium (500) | 30px | Card component titles |
| Body | 18px | Regular (400) | 27px | Main body text |
| Body Bold | 18px | Bold (700) | 27px | Emphasized body text |
| Tooltip | 14px | Regular (400) | 21px | Tooltips, small text |
| EXsmall | 12px | Regular (400) | 18px | Disclaimers, fine print |
| CTA Button | 16px | Medium (500) | — | Button labels |
| Menu | 16px | Medium (500) | — | Navigation items |

### Mobile Type Scale
| Style | Size | Weight | Line Height |
|-------|------|--------|-------------|
| H1 (CTA Fold) | 24px | Medium (500) | 28px |
| H1 (No CTA) | 28px | Medium (500) | 32px |
| H2 | 24px | Light/Bold | 28px |
| H3 Bold | 20px | Bold (700) | 24px |
| H3 Medium | 20px | Medium (500) | 24px |
| Subtitle | 18px | Medium (500) | 22px |
| Body | 16px | Regular (400) | 24px |
| Body Bold | 16px | Bold (700) | 24px |
| EXsmall | 11px | Regular (400) | 16px |

---

## Grid & Breakpoints

| Breakpoint | Width | Columns | Gutter | Margin/Offset | Column Width |
|-----------|-------|---------|--------|---------------|-------------|
| EX Small (Mobile) | < 768px | 8 | 16px | 16px | ~29px |
| Small (Tablet) | 768–1023px | 20 | 24px | 60px | ~10px |
| Small (Desktop) | 1024–1279px | 20 | 24px | 60px | ~22px |
| Medium | 1280–1439px | 20 | 24px | 200px | ~21px |
| Medium-Large | 1440–1919px | 20 | 24px | 200px | ~29px |
| Large | 1920px+ | 20 | 24px | 372px | 36px |

### Content Max Width
- Maximum content width: 1176px (1920 - 2×372)
- Common content widths: 1040px (1440 - 2×200)

---

## Components

### SuperHero (Cover)
Three types:
1. **Brand (Marketing, no CTA)** — Full-width hero, image background, H1 + subtitle
2. **Conversion (Marketing with CTA)** — Hero with prominent CTA button, form or action
3. **Informational** — Content-focused hero, educational tone

Color combinations for Informational SuperHero include various pairings of brand colors.

### Buttons
- **Primary CTA:** Green `#13C636` background, white text, rounded corners
- **CTA Outline:** White/transparent background, green border, green text
- **Menu CTA:** Compact variant for navigation
- **Sticky CTA (Mobile):** Fixed bottom bar with CTA
- **App Store Badges:** Official Apple/Google badges
- **Carousel Arrows:** Left/right navigation
- **Switch Toggle:** On/off state

### CTAs
- Desktop and Mobile variants
- Character limits apply
- Always use action verbs ("Start Trading", "Join Now", "Learn More")

### Cards & Carousels
- **Square Cards:** Image + title + description
- **Logo Carousel:** Partner/brand logos
- **Numbered Cards:** Step-by-step cards with numbers

### Navigation / Menu
- **Desktop:** Horizontal nav with dropdowns
- **Mobile:** Hamburger menu with full-screen overlay
- Phase 2 includes enhanced mobile menu

### Footer
- Desktop and Mobile component sets
- Responsive at 1280, 1440 breakpoints
- Contains legal links, social icons, regulatory info

### FAQ Accordion
- Desktop and Mobile variants
- Expandable/collapsible sections
- Schema markup recommended for SEO

### Disclaimer
- **Top Disclaimer:** Risk warning banner at page top
- **Bottom Disclaimer:** Regulatory information at page bottom
- Mobile-specific examples
- Character limits enforced

### Ticker
- Scrolling horizontal ticker
- Gradient fade on both sides
- Scrolls left, stops on hover
- Desktop and Mobile component sets

### Table
- Desktop and Mobile variants
- Sticky header support
- Guidelines for column widths and data formatting

### Steps Components
- **Framed Numbers:** Numbered steps in frames
- **Big Numbers:** Large number + text layout
- **Circle Steps:** Circular number indicators
- **Steps with Images:** Side-by-side image + step content

### Flow Components
- 3-card and 4-card layouts
- Character limits: Title: 15 chars, Text: 130 chars

### Icons
- Advantage icons (Discuss strategies, etc.)
- Arrow icons (Convert, Dollar convert)
- User icons (Create account)
- Asset icons (Indices, Stocks, etc.)
- Social icons (Black & White variants)

### Tooltips
- Desktop variant with hover trigger
- Icon-triggered tooltips

### Cookies Banner
- Desktop and Mobile variants
- Character limit for closed text: 80 + "read more"
- Character limit for button: 25

### Popup
- Desktop and Mobile variants
- QR code variant for app download
- Overlay with backdrop

### Quotes
- Desktop and Mobile
- Author name with Medium/Bold weight options

### Bullets
- Desktop and Mobile list styles

### Emphasis
- Desktop and Mobile text emphasis patterns

### Links
- On white BG, grey BG, dark BG, green BG
- Hover states defined per background

### Breadcrumbs
- Desktop and Mobile component sets

### Select / Tabs
- A-Z Carousel selector
- Tab navigation component

### Awards Component
- Desktop and Mobile
- Responsive at 769, 1280, 1440, 1920 breakpoints

### Shadows
| Type | Usage |
|------|-------|
| Pop-up | Modal/dialog overlays |
| Thumbnails | Image thumbnail hover |
| Cards Hover | Card interaction states |
| Carousel Card | Carousel items |
| Table Sticky | Sticky table headers |
| Menu | Navigation dropdowns |

---

## Logo Variations
- **Desktop/eToro:** Standard horizontal logo
- **Mobile/eToro:** Compact logo for mobile
- **eToro Academy:** Education sub-brand logo

---

## Covers in Languages
Supported language-specific cover fonts:
- **Default:** Tusker Grotesk
- **Chinese Simplified:** Noto Sans SC
- **Chinese Traditional:** Noto Sans TC
- **Arabic:** Zokak
- **Russian:** Big Shoulders Display

---

## File References
- Figma Design System: `g2KVC2hCTIA5nsvDnZXWds`
- Figma Brand Book: `Pkx79yKB8YFZ6NZLcCAyjX`
- Font CDN: `https://marketing.etorostatic.com/cache1/fonts/etoro/eToro-VF-v0.7.ttf`
