☀️ Light Mode

eToro Design System

Inner Pages — Website Component Library

Brand Identity

eToro is the world's leading social investing platform. Founded in 2007, serving 40M+ users across 100+ countries. This design system covers the website's inner pages — from hero sections to CTAs, navigation to cards.

e
T
o
458
Components
101
Styles
26
Component Sets
45
Pages

Source

Extracted from Figma: Inner Pages Design System
File key: g2KVC2hCTIA5nsvDnZXWds
Last modified: April 9, 2026
Font: Madera (primary), DIN Alternate (numbers)

Colors

Click any swatch to copy its hex value

Primary Colors

Copied!
eToro Green
#13C636 · RGB 19/198/54
Copied!
Dark Blue
#000021 · RGB 0/0/33
Copied!
White
#FFFFFF
Copied!
Light Blue
#C0E8FD · RGB 192/232/253

Secondary Colors

Copied!
Turquoise
#6BF5C0 · RGB 107/245/192
Copied!
Pink Pop
#F887CC · RGB 248/135/204
Copied!
Tangerine
#E96E14 · RGB 223/110/20
Copied!
Yellow
#F7B42C · RGB 247/180/44

Shades of Gray

Copied!
Dark Blue 90%
rgba(0,0,33,0.9)
Copied!
Dark Blue 80%
rgba(0,0,33,0.8)
Copied!
Dark Blue 60%
rgba(0,0,33,0.6)
Copied!
Medium Gray
#9999A6
Copied!
Light Gray 1
#EEEEEE
Copied!
Light Gray 2
#F7F7F7

Gradients

Green → Turquoise
#13C636 → #6BF5C0
Tangerine → Yellow
#E96E14 → #F7B42C
Light Blue → Green
#C0E8FD → #13C636

Code

:root {
  --etoro-green: #13C636;
  --dark-blue: #000021;
  --white: #FFFFFF;
  --light-blue: #C0E8FD;
  --turquoise: #6BF5C0;
  --pink-pop: #F887CC;
  --tangerine: #E96E14;
  --yellow: #F7B42C;
}

Typography

Font: Madera · Numbers: DIN Alternate

Desktop Type Scale

H1The smartest way to investMedium 38px / 46px
H2Discover new marketsMedium 32px / 38px
H3Start investing todayMedium 28px / 32px
H4Copy top investorsMedium 24px / 30px
H5Build your portfolioMedium 22px / 30px
H6Trade with confidenceMedium 20px / 26px
Body LargeGet the confidence to explore new markets and find the right opportunities for you.Regular 18px / 27px
BodyLorem Ipsum is simply dummy text of the printing and typesetting industry.Regular 16px / 26px
Body SmallLorem Ipsum is simply dummy text of the printing and typesetting industry.Regular 14px / 20px
CaptionDemo AccountRegular 12px / auto
DisclaimerCFDs are complex instruments and come with a high risk of losing money rapidly due to leverage.Regular 15px / 20px
Numbers100.00%DIN Alt Bold 26px

Code

.h1 { font-size: 38px; line-height: 46px; font-weight: 500; }
.h2 { font-size: 32px; line-height: 38px; font-weight: 500; }
.h3 { font-size: 28px; line-height: 32px; font-weight: 500; }
.body { font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-size: 14px; line-height: 20px; font-weight: 400; }

Buttons & CTAs

Pill-shaped (100px radius desktop, 22.5px mobile) · All states interactive

Green CTA

Solid

Default
Disabled

Outline

Default
Disabled

Dark Blue CTA

Solid

Default
Disabled

Outline

Default
Disabled

White CTA (on dark backgrounds)

Solid
Outline

Menu CTAs (smaller)

Mobile CTAs

Code

<button class="btn btn-green">Join eToro</button>
<button class="btn btn-green-outline">Learn More</button>
<button class="btn btn-navy">Start Trading</button>
<button class="btn btn-mobile btn-green">Mobile CTA</button>

Cards & Carousels

Content cards with hover effects and carousel patterns

Content Cards

📈
Copy Top Investors

Automatically replicate the portfolios of eToro's top-performing investors.

💹
Smart Portfolios

Invest in ready-made, professionally managed thematic portfolios.

🌍
Global Markets

Access 10,000+ stocks, ETFs, crypto, commodities, and more from one platform.

Carousel Indicators

Active = 24px pill · Inactive = 12px circle

Arrow Controls

‹
›
Side arrows — 30x30px, white or dark blue

Form Elements

Text inputs, selects, and interactive elements

Text Input

Select

Tooltip

CFDs carry risk. 50% of retail investors lose money.

Toggle Switch

Enable notifications

Icons

226 icons · 24×24 grid · Line (146) + Fill (80)

Icon Categories

📊Trading
💰Finance
📱Navigation
👥Social
⚙️System
🔔Alerts
🔍Search
🏷️Assets
🧠AI Brain
🚀Rocket
🛒Cart
⛽Fuel
♻️Recycle
🎨Creative
☁️Cloud
🧭Compass
⏳Hourglass
📞Support
🛍️Shopping
📄ETFs
🖼️NFTs
🏆Awards
🔗Links
📋Copy

Note: Emoji placeholders shown. Full icon set available in the Figma source file.

Layout & Grid

12-column grid system with 4px spacing base

12-Column Grid

1
2
3
4
5
6
7
8
9
10
11
12

Spacing Scale (4px base)

X1 · 4px
X2 · 8px
X3 · 12px
X4 · 16px
X6 · 24px
X8 · 32px
X10 · 40px
X12 · 48px
X16 · 64px
X20 · 80px
X24 · 96px

Border Radius

4px
8px
12px
22.5px
100px
Full

Shadows

Elevation 1
Elevation 2
Popup
Menu

SuperHero Sections

Full-width hero components for landing pages

Dark Hero — Green CTA

Invest in what moves you

Join the world's leading social investing platform. Trade stocks, crypto, and more — or copy the strategies of top investors.
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.

Light Hero

The smartest way to invest

Discover new markets, copy top investors, and build your portfolio with confidence.
eToro (Europe) Ltd. is authorised and regulated by the Cyprus Securities Exchange Commission (CySEC).

Gradient Hero

Your money,
your moves

10,000+ instruments. 40M+ users. One platform.