eToro design system

Know Better tokens

Exact BrandClaw token surface. No page-specific tokens are exported.

Token	Value
`--bb-color-afterhours`	`#10110E`
`--bb-color-intelligence`	`#ECEAD1`
`--bb-color-signal`	`#6DFF8A`
`--bb-color-collective`	`#183321`
`--bb-font-brand`	`'eToro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif`
`--bb-weight`	`400`
`--bb-type-display`	`clamp(48px, 8vw, 96px)`
`--bb-type-h1`	`clamp(32px, 5vw, 64px)`
`--bb-type-h2`	`clamp(22px, 3.5vw, 44px)`
`--bb-type-h3`	`clamp(18px, 2.5vw, 30px)`
`--bb-type-body`	`16px`
`--bb-type-small`	`13px`
`--bb-type-label`	`11px`
`--bb-title-font`	`'eToro', system-ui, sans-serif`
`--bb-title-weight`	`400`
`--bb-title-tracking`	`-0.02em`
`--bb-title-leading`	`0.88`
`--bb-title-color`	`var(--bb-color-intelligence)`
`--bb-space-section`	`120px`
`--bb-space-block`	`48px`
`--bb-space-element`	`24px`
`--bb-radius-sm`	`8px`
`--bb-radius-lg`	`16px`
`--bb-radius-pill`	`9999px`
`--bb-glass-bg`	`rgba(236, 234, 209, 0)`
`--bb-glass-filter`	`url(#liquid-refract) blur(2px) saturate(1.1) brightness(1.03)`
`--bb-glass-border`	`1px solid rgba(236, 234, 209, 0.12)`
`--bb-glass-shadow`	`inset 0 1px 1px rgba(236,234,209,0.1), 0 8px 32px rgba(16,17,14,0.12)`
`--bb-display-dot`	`var(--bb-color-signal)`
`--bb-hero-aspect`	`16 / 9`
`--bb-setup-size`	`10cqi`
`--bb-payoff-size`	`7.5cqi`
`--bb-body-size`	`4.5cqi`
`--bb-sig-size`	`4cqi`
`--bb-setup-wrap`	`balance`
`--bb-payoff-wrap`	`balance`
`--bb-body-wrap`	`pretty`
`--bb-split-setup-size`	`clamp(22px, 2.8vw, 34px)`
`--bb-split-headline-size`	`clamp(18px, 2vw, 24px)`
`--bb-split-body-size`	`14px`
`--bb-split-category-size`	`10px`
`--bb-split-padding-img`	`32px`
`--bb-split-padding-text`	`48px 40px`
`--bb-split-min-height`	`480px`
`--bb-pa-safe-x`	`5.5%`
`--bb-pa-safe-y`	`5.5%`
`--bb-pa-focal-top`	`30.5%`
`--bb-pa-focal-bottom`	`86.8%`
`--bb-pa-overlay-outer`	`rgba(255, 38, 38, 0.92)`
`--bb-pa-overlay-safe`	`rgba(255, 38, 38, 0.86)`
`--bb-pa-overlay-type-band`	`rgba(82, 22, 126, 0.85)`
`--bb-pa-overlay-focal`	`rgba(232, 224, 28, 0.82)`
`--bb-pa-label-bg`	`rgba(16,17,14,0.66)`
`--bb-pa-label-text`	`rgba(236,234,209,0.82)`
`--bb-pa-scrim`	`linear-gradient(180deg, rgba(16,17,14,0.36) 0%, rgba(16,17,14,0.04) 44%, rgba(16,17,14,0.06) 70%, rgba(16,17,14,0.50) 100%)`