← Designer specimen

All tokens

Complete generated inventory from tokens/ai-first.tokens.json. Token count: 104.

TokenValueResult
color.field.primary--ai-color-field-primary #000021
color.field.deep--ai-color-field-deep #0A0A2E
color.field.soft--ai-color-field-soft #10110E
color.field.carbon--ai-color-field-carbon #15170F
color.field.plate--ai-color-field-plate rgba(255,255,255,0.04)
color.field.plateStrong--ai-color-field-plate-strong rgba(255,255,255,0.08)
color.voice.primary--ai-color-voice-primary #FFFFFF
color.voice.cream--ai-color-voice-cream #ECEAD1
color.voice.muted--ai-color-voice-muted rgba(255,255,255,0.72)
color.voice.subtle--ai-color-voice-subtle rgba(255,255,255,0.56)
color.voice.creamMuted--ai-color-voice-cream-muted rgba(236,234,209,0.72)
color.voice.creamSubtle--ai-color-voice-cream-subtle rgba(236,234,209,0.56)
color.signal.etoroGreen--ai-color-signal-etoro-green #13C636
color.signal.green--ai-color-signal-green #6DFF8A
color.signal.cyan--ai-color-signal-cyan #60D4F7
color.signal.warning--ai-color-signal-warning #F59E0B
color.signal.negative--ai-color-signal-negative #FF6B6B
color.border.subtle--ai-color-border-subtle rgba(255,255,255,0.10)
color.border.strong--ai-color-border-strong rgba(255,255,255,0.18)
color.border.signal--ai-color-border-signal rgba(109,255,138,0.32)
color.border.cream--ai-color-border-cream rgba(236,234,209,0.16)
color.surface.page--ai-color-surface-page #000021
color.surface.section--ai-color-surface-section #0A0A2E
color.surface.light--ai-color-surface-light #F4F7F4
color.surface.white--ai-color-surface-white #FFFFFF
typography.fontFamily.brand--ai-typography-font-family-brand 'eToro', 'eToro Variable', Circular, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif —
typography.fontFamily.body--ai-typography-font-family-body 'eToro', 'eToro Variable', Circular, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif —
typography.fontFamily.mono--ai-typography-font-family-mono ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace —
typography.fontFamily.compressed--ai-typography-font-family-compressed 'eToro Compressed', 'eToro', 'eToro Variable', sans-serif —
typography.fontFamily.numbers--ai-typography-font-family-numbers 'eToro Numbers', 'eToro', 'eToro Variable', sans-serif —
typography.display.hero.fontSize--ai-typography-display-hero-font-size clamp(4rem, 10vw, 10rem)
Text size
typography.display.hero.lineHeight--ai-typography-display-hero-line-height 0.86
Line
height
typography.display.hero.letterSpacing--ai-typography-display-hero-letter-spacing -0.075em
Letter spacing
typography.display.hero.fontWeight--ai-typography-display-hero-font-weight 800 —
typography.display.section.fontSize--ai-typography-display-section-font-size clamp(2.75rem, 6vw, 6rem)
Text size
typography.display.section.lineHeight--ai-typography-display-section-line-height 0.9
Line
height
typography.display.section.letterSpacing--ai-typography-display-section-letter-spacing -0.06em
Letter spacing
typography.display.section.fontWeight--ai-typography-display-section-font-weight 800 —
typography.body.large.fontSize--ai-typography-body-large-font-size 1.25rem
Text size
typography.body.large.lineHeight--ai-typography-body-large-line-height 1.55
Line
height
typography.body.large.fontWeight--ai-typography-body-large-font-weight 400 —
typography.body.base.fontSize--ai-typography-body-base-font-size 1rem
Text size
typography.body.base.lineHeight--ai-typography-body-base-line-height 1.6
Line
height
typography.body.base.fontWeight--ai-typography-body-base-font-weight 400 —
typography.body.small.fontSize--ai-typography-body-small-font-size 0.875rem
Text size
typography.body.small.lineHeight--ai-typography-body-small-line-height 1.5
Line
height
typography.body.small.fontWeight--ai-typography-body-small-font-weight 400 —
typography.body.eyebrow.fontSize--ai-typography-body-eyebrow-font-size 0.75rem
Text size
typography.body.eyebrow.lineHeight--ai-typography-body-eyebrow-line-height 1.2
Line
height
typography.body.eyebrow.fontWeight--ai-typography-body-eyebrow-font-weight 700 —
typography.body.eyebrow.letterSpacing--ai-typography-body-eyebrow-letter-spacing 0.18em
Letter spacing
spacing.containerX--ai-spacing-container-x 24px
spacing.sectionY--ai-spacing-section-y 96px
spacing.sectionYMobile--ai-spacing-section-ymobile 64px
spacing.platePadding--ai-spacing-plate-padding 32px
spacing.platePaddingMobile--ai-spacing-plate-padding-mobile 20px
spacing.gap--ai-spacing-gap 24px
spacing.gapSmall--ai-spacing-gap-small 12px
radius.small--ai-radius-small 12px
radius.card--ai-radius-card 24px
radius.plate--ai-radius-plate 32px
radius.pill--ai-radius-pill 9999px
shadow.plate--ai-shadow-plate 0 24px 80px rgba(0,0,0,0.35)
shadow.signal--ai-shadow-signal 0 0 40px rgba(109,255,138,0.16)
shadow.button--ai-shadow-button 0 0 24px rgba(19,198,54,0.28)
button.radius--ai-button-radius {radius.pill}
button.fontWeight--ai-button-font-weight 700 —
button.height.sm--ai-button-height-sm 40px
button.height.md--ai-button-height-md 48px
button.height.lg--ai-button-height-lg 56px
button.paddingX.sm--ai-button-padding-x-sm 18px
button.paddingX.md--ai-button-padding-x-md 24px
button.paddingX.lg--ai-button-padding-x-lg 32px
button.primary.background--ai-button-primary-background {color.signal.etoroGreen}
button.primary.text--ai-button-primary-text {color.field.primary}
button.primary.hoverBackground--ai-button-primary-hover-background {color.signal.green}
button.secondary.background--ai-button-secondary-background transparent —
button.secondary.text--ai-button-secondary-text {color.voice.primary}
button.secondary.border--ai-button-secondary-border {color.border.strong}
button.secondary.hoverBackground--ai-button-secondary-hover-background rgba(255,255,255,0.08)
disclaimer.background--ai-disclaimer-background {color.field.primary}
disclaimer.text--ai-disclaimer-text rgba(255,255,255,0.78)
disclaimer.border--ai-disclaimer-border {color.border.subtle}
disclaimer.fontSize--ai-disclaimer-font-size 12px
Text size
disclaimer.lineHeight--ai-disclaimer-line-height 1.45
Line
height
disclaimer.zIndexFloating--ai-disclaimer-z-index-floating 50 —
breakpoint.mobile--ai-breakpoint-mobile 768px —
breakpoint.tablet--ai-breakpoint-tablet 1024px —
breakpoint.desktop--ai-breakpoint-desktop 1280px —
background.pageGradient--ai-background-page-gradient radial-gradient(circle at 82% 10%, rgba(109,255,138,0.16), transparent 32%), radial-gradient(circle at 9% 58%, rgba(96,212,247,0.08), transparent 28%), linear-gradient(145deg, #000021, #07070A 55%, #0B0B08)
background.newPanel--ai-background-new-panel linear-gradient(180deg, rgba(13,16,19,0.84), rgba(5,7,6,0.94))
background.productLens--ai-background-product-lens linear-gradient(135deg, rgba(109,255,138,0.12), rgba(255,255,255,0.035))
background.noiseDot--ai-background-noise-dot radial-gradient(circle, rgba(255,255,255,0.17) 0.75px, transparent 0.8px)
layout.maxContent--ai-layout-max-content 1120px —
layout.heroAside--ai-layout-hero-aside 430px —
layout.panelMinHeight--ai-layout-panel-min-height 720px —
layout.mobilePanelMinHeight--ai-layout-mobile-panel-min-height calc(100svh - 184px) —
motion.fast--ai-motion-fast 180ms ease —
motion.standard--ai-motion-standard 240ms ease —
stat.fontSize--ai-stat-font-size 38px
Text size
stat.lineHeight--ai-stat-line-height 0.95
Line
height
stat.letterSpacing--ai-stat-letter-spacing -0.05em
Letter spacing
zIndex.sticky--ai-z-index-sticky 20 —
zIndex.overlay--ai-z-index-overlay 40 —