---
name: etoro-design-system
description: Generate pixel-accurate eToro product mockups using the official Figma Design System. Use when creating app screens, product mockups, feature demos, or UI prototypes for eToro. Triggers on "mockup", "product screen", "app design", "UI prototype", "design system", "eToro screen".
version: 1.0.0
source: Figma Design System — React (7 Feb backup)
figma_file: lCCEnYuXIjaHCkXbUMG2PP
---

# eToro Design System Mockup Skill v1.0.0

> Create pixel-accurate eToro product mockups from the official Figma Design System.
> Connected to Figma file: `lCCEnYuXIjaHCkXbUMG2PP`

---

## Figma Connection

```bash
# Read any component
curl -s -H "X-Figma-Token: $(cat .credentials/figma-personal-token.txt)" \
  "https://api.figma.com/v1/files/lCCEnYuXIjaHCkXbUMG2PP/nodes?ids=NODE_ID&depth=4"

# Export any component as PNG
curl -s -H "X-Figma-Token: $(cat .credentials/figma-personal-token.txt)" \
  "https://api.figma.com/v1/images/lCCEnYuXIjaHCkXbUMG2PP?ids=NODE_ID&format=png&scale=2"
```

Token: `.credentials/figma-personal-token.txt` (EDIT access)

---

## Design Tokens (Extracted from Figma)

### Colors
| Token | Hex | Usage |
|-------|-----|-------|
| `--etoro-green` | `#0EB12E` | Primary buttons, CTAs, positive states, gains |
| `--etoro-green-hover` | `#0C9A27` | Button hover state |
| `--navy` | `#000021` | Dark backgrounds, headers, text |
| `--white` | `#FFFFFF` | Light backgrounds, button text on green/navy |
| `--gray-bg` | `#F5F5F5` | Page background (light mode) |
| `--gray-border` | `#E5E5E5` | Input borders, dividers |
| `--gray-text` | `#6B7280` | Secondary text, labels |
| `--red` | `#E31937` | Negative states, losses, sell |
| `--light-blue` | `#C0E8FD` | Secondary backgrounds |
| `--text-dark` | `#1A1A1A` | Primary text (light mode) |

### Typography
| Token | Font | Weight | Size | Usage |
|-------|------|--------|------|-------|
| `--font-primary` | `eToro Variable 0.7` | 400-700 | — | All UI text |
| `--text-xl` | eToro Variable | 700 | 24px | Page titles |
| `--text-lg` | eToro Variable | 600 | 18px | Section headers |
| `--text-md` | eToro Variable | 600 | 16px | Button text, list titles |
| `--text-sm` | eToro Variable | 400 | 14px | Body text |
| `--text-xs` | eToro Variable | 400 | 12px | Labels, captions |

**Font CDN URL:** `https://marketing.etorostatic.com/cache1/fonts/etoro/eToro-VF-v0.7.ttf`

**@font-face declarations (from production):**
```css
@font-face {
  font-family: "eToro";
  src: url("https://marketing.etorostatic.com/cache1/fonts/etoro/eToro-VF-v0.7.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 0% 100%;
}
@font-face {
  font-family: "eToro Compressed";
  src: url("https://marketing.etorostatic.com/cache1/fonts/etoro/eToro-VF-v0.7.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 0%;
}
@font-face {
  font-family: "eToro Numbers";
  src: url("https://marketing.etorostatic.com/cache1/fonts/etoro/eToro-VF-v0.7.ttf") format("truetype-variations");
  font-weight: 620;
  font-stretch: 84%;
}
```

**CSS variables (from production):**
```css
--etoro-body-font: "eToro", sans-serif;
--etoro-numbers-font: 'eToro Numbers', sans-serif;
--etoro-title-font: "eToro Compressed", sans-serif;
```

**Fallback fonts (for HTML mockups):** `'Inter', -apple-system, BlinkMacSystemFont, sans-serif`
(Inter is the closest Google Font to eToro Variable)

### Spacing
| Token | Value | Usage |
|-------|-------|-------|
| `--space-xs` | 4px | Tight gaps |
| `--space-sm` | 8px | Icon gaps, tight padding |
| `--space-md` | 12px | Standard gap |
| `--space-lg` | 16px | Section padding, card inner |
| `--space-xl` | 24px | Card padding (medium), section gaps |
| `--space-2xl` | 32px | Major section spacing |

---

## Component Specs (From Figma)

### Et-Button (Primary)
```
Node: 30143:151121
Fill: #0EB12E (green)
Text: #FFFFFF, eToro Variable, 600, 16px
Radius: 48px (pill)
Padding: 16px 24px 16px 20px
Height: 56px (large), 48px (medium), 36px (small)
Icon: 24x24, fill #1A1A1A
Variants: Primary/Secondary/Tertiary × Large/Medium/Small × Enabled/Pressed/Disabled
```

**CSS:**
```css
.et-btn-primary {
  background: #0EB12E;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 48px;
  padding: 16px 24px;
  height: 56px;
  cursor: pointer;
}
.et-btn-primary:hover { background: #0C9A27; }
.et-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
```

### Buy/Sell Buttons
```
Node: 14074:22055
Buy: Fill #0EB12E, text white
Sell: Fill #E31937, text white
Same radius/padding as Et-Button
```

### Card
```
Node: 30076:80103
Fill: #FFFFFF (light) / dark mode TBD
Radius: 16px
Padding: 24px (medium) / 16px (small)
Shadow: DROP_SHADOW, x:0, y:0, blur:13px, color rgba(0,0,0,0.08)
Variants: Default × Medium/Small padding × with/without Title/Header/Footer/Content
```

**CSS:**
```css
.et-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 13px rgba(0,0,0,0.08);
}
.et-card-sm { padding: 16px; }
```

### Input Field
```
Node: 30894:461875
Fill: #FFFFFF
Border: 1.5px solid #E5E5E5
Radius: 12px
Padding: 0 20px
Height: 72px (large) / 56px (medium)
Text: eToro Variable, 400, 16px
Label: 12px, #6B7280, above input
Focus border: #0EB12E
Error border: #E31937
```

**CSS:**
```css
.et-input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1.5px solid #E5E5E5;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #1A1A1A;
  background: #FFFFFF;
}
.et-input:focus { border-color: #0EB12E; outline: none; }
.et-input-label {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 6px;
  display: block;
}
```

### Switch Toggle
```
Node: 3342:8646
Small: 34×20px
Medium: 50×27px
Track off: #E5E5E5
Track on: #0EB12E
Thumb: #FFFFFF, circle
Radius: fully round (track and thumb)
```

**CSS:**
```css
.et-toggle {
  width: 50px; height: 27px;
  background: #E5E5E5;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.et-toggle.on { background: #0EB12E; }
.et-toggle::after {
  content: "";
  width: 21px; height: 21px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.et-toggle.on::after { transform: translateX(23px); }
```

### Tabs
```
Node: 30829:129981
Height: 48px
Underline variant: 2px green bottom border on active
Text: 16px, 600 weight active, 400 inactive
Active color: #1A1A1A
Inactive color: #6B7280
```

### Top Bar
```
Node: 45130:154418
Height: 105px (with status bar)
Background: #FFFFFF (light) / #000021 (dark)
Title: 18px, 700 weight, centered or left-aligned
Back arrow: left side
Action icons: right side
Progress bar variant available (Node: 45130:154674)
```

### Checkbox
```
Node: 36823:206574
Size: 20×20px (small), 24×24px (medium)
Border: 1.5px solid #E5E5E5
Radius: 4px
Checked fill: #0EB12E
Check mark: white
```

### Badge
```
Node: 38704:262336
Radius: fully round
Background: varies by type (green for positive, red for negative, gray for neutral)
Text: 12px, 600 weight
Padding: 4px 8px
```

### Risk Score
```
Node: 43109:61173
Visual indicator for risk levels 1-10
Uses color gradient from green (low) to red (high)
```

### Progress Bar
```
Node: 38698:187366
Track: #E5E5E5, height 6px, radius 3px
Fill: #0EB12E, radius 3px
```

---

## Screen Templates

### Standard Mobile Screen (375×812 — iPhone)
```html
<div class="et-screen">
  <!-- Status bar: 44px -->
  <div class="et-status-bar">
    <span class="time">09:41</span>
    <div class="icons">📶 🔋</div>
  </div>
  
  <!-- Top bar: ~56px -->
  <div class="et-top-bar">
    <button class="back">←</button>
    <h1 class="title">Page Title</h1>
    <div class="actions">⋯</div>
  </div>
  
  <!-- Content: scrollable -->
  <div class="et-content">
    <!-- Cards, inputs, lists go here -->
  </div>
  
  <!-- Nav bar: 83px (with home indicator) -->
  <nav class="et-nav-bar">
    <div class="nav-item">🏠 Home</div>
    <div class="nav-item">🔍 Discover</div>
    <div class="nav-item active">📊 Portfolio</div>
    <div class="nav-item">👛 Wallet</div>
    <div class="nav-item">👤 Profile</div>
  </nav>
</div>
```

### iPhone Frame Wrapper
```css
.phone-frame {
  width: 375px;
  background: #000;
  border-radius: 44px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,33,0.25);
}
.phone-frame .et-screen {
  background: #F5F5F5;
  border-radius: 32px;
  overflow: hidden;
  min-height: 720px;
  display: flex;
  flex-direction: column;
}
.phone-frame .et-screen.dark { background: #000021; }
```

### Nav Bar Items (from eToro app)
| Icon | Label | Route |
|------|-------|-------|
| 🏠 | Home | /home |
| 🔍 | Discover | /discover |
| 📊 | Portfolio | /portfolio |
| 👛 | Wallet | /wallet |
| 👤 | Profile | /profile |

---

## Dark Mode Mappings

| Light | Dark |
|-------|------|
| `#FFFFFF` (bg) | `#000021` (bg) |
| `#F5F5F5` (page bg) | `#0A0A2E` (page bg) |
| `#1A1A1A` (text) | `#FFFFFF` (text) |
| `#6B7280` (secondary) | `#8B8BA7` (secondary) |
| `#E5E5E5` (border) | `#2A2A4E` (border) |
| Card shadow | Subtle dark shadow |
| `#0EB12E` (green) | `#0EB12E` (unchanged) |
| `#E31937` (red) | `#E31937` (unchanged) |

---

## How to Build a Mockup

### Step 1: Define Screens
List the screens needed (e.g., "Recurring Investment: Portfolio → Setup → Confirm → Success")

### Step 2: Compose from Components
Use the CSS components above. Stack them:
```
Top Bar → Content (Cards with Inputs/Buttons/Toggles) → Nav Bar
```

### Step 3: Wrap in iPhone Frame
Use the `.phone-frame` wrapper for presentation.

### Step 4: Add Flow Arrows
For multi-screen flows, add → arrows between phones.

### Step 5: Export or Deploy
- Deploy to Vercel as interactive HTML
- Or screenshot for static mockups

### Step 6: Verify Against Figma
Export the equivalent Figma component and visually compare:
```bash
curl -s -H "X-Figma-Token: $(cat .credentials/figma-personal-token.txt)" \
  "https://api.figma.com/v1/images/lCCEnYuXIjaHCkXbUMG2PP?ids=NODE_ID&format=png&scale=2"
```

---

## Figma Node Reference (Quick Lookup)

| Component | Node ID | Page |
|-----------|---------|------|
| Card | `30076:80103` | Card |
| Et-Button | `30143:151121` | Button |
| Buy/Sell Buttons | `14074:22055` | Button |
| Group Button | `38488:156948` | Button |
| Badge Button | `34688:160218` | Button |
| Input | `30894:461875` | Input |
| Stepper | `31130:335438` | Stepper |
| Amount Input | `33972:104610` | Stepper |
| Select | `45204:104444` | Select |
| Date Picker | `33983:832651` | Date picker |
| Switch Toggle | `3342:8646` | Toggle |
| Checkbox | `36823:206574` | Checkbox |
| Round Checkbox | `14664:12811` | Checkbox |
| Radio Button | — | Radio button |
| Slider | `36206:211626` | Slider |
| Tabs | `30829:129981` | Tabs |
| Tiles | `37967:347608` | Tiles |
| Top Bar | `45130:154418` | Top bar |
| Top Bar Progress | `45130:154674` | Top bar |
| Top Bar Actions | `44143:113069` | Top bar |
| Header | — | Header |
| Footer | — | Footer |
| Screen Layout | — | Screen layout |
| Bottom Sheet | — | Bottom sheet |
| Dialog | — | Dialog |
| Tooltip | — | Tooltip |
| Dropdown | — | Dropdown |
| Overlay | — | Overlays |
| Badge | `38704:262336` | Badge |
| Popover | — | Popover |
| Progress Bar | `38698:187366` | Progress bar |
| Loader | `38698:187215` | Loader |
| Range | `38698:189476` | Range |
| Risk Score | `43109:61173` | Risk score |
| List | `30894:468953` | List |
| Table | `30894:503378` | Table |
| Charts | `30894:503379` | Charts |
| Post | `38716:316589` | Post |
| Story | `30459:89283` | Story |
| Poll | `45389:4186` | Poll |
| Collapsible Card | `34186:187621` | Card |
| Chip | `38698:163761` | Chip |
| Text Toggle | `38698:174090` | Text toggle |
| Typography/Text | `36335:184468` | Typography |
| Heading L | `38316:394000` | Typography |
| Heading XL | `38338:404278` | Typography |
| Paragraph | `38400:262027` | Typography |

---

## Responsive Rules (MANDATORY)

All mockup pages must follow:
1. `box-sizing: border-box` + `overflow-x: hidden`
2. No fixed widths on containers
3. `clamp()` for large fonts
4. `flex-wrap: wrap` on all flex containers
5. Test at 320px minimum

---

## Changelog

### v1.1.0 (2026-03-06) — Production Audit Update
- Updated font CDN URL and @font-face declarations from production site
- Added marketing CTA CSS from production (`.e-cta` with `#13C636`, hover `#22EA49`)
- Confirmed two color systems: Marketing (`#13C636`) vs Product UI (`#0EB12E`)
- Added production CSS variables
- Source: Production audit March 2026

### v1.0.0 (2026-02-14)
- Extracted all design tokens from Figma DS (colors, typography, spacing)
- Mapped 40+ components with node IDs
- CSS implementations for: Button, Card, Input, Toggle, Tabs, Top Bar, Checkbox, Badge, Progress Bar
- Dark mode mapping
- Screen template with iPhone frame
- Responsive rules