Tokens

292 tokens do design system TRDR — primitivos, semânticos e scale.

PrimitivosSemânticos
TodosCores PrimitivasEspaçamentos PrimitivosBorder Radius PrimitivoTipografia PrimitivaBackgroundsSurfacesConteúdo (Texto)BordasAçõesContexto de TradingScale SpacingScale Border Radius
165 tokens

Cores Primitivas

TokenCSS VariableValor DarkValor Light
color.blue.50Azul mais claro--color-blue-50#F0F7FF
color.blue.100Azul 100--color-blue-100#E0EEFF
color.blue.200Azul 200--color-blue-200#C1DDFF
color.blue.300Azul 300--color-blue-300#A2CDFF
color.blue.400Azul 400--color-blue-400#84BFFF
color.blue.500Azul 500 — border.focus--color-blue-500#65B0FF
color.blue.600Azul 600 — ação primária (brand)--color-blue-600#3D99FF
color.blue.700Azul 700 — hover do brand--color-blue-700#1E82FF
color.blue.800Azul 800 — active do brand--color-blue-800#0066FF
color.blue.900Azul 900 — mais escuro--color-blue-900#0052CC
color.blue.alpha.08Azul com alpha 8%--color-blue-alpha-08#0052CC14
color.blue.alpha.16Azul com alpha 16%--color-blue-alpha-16#0052CC29
color.blue.alpha.32Azul com alpha 32%--color-blue-alpha-32#0052CC52
color.neutral.0Branco puro--color-neutral-0#FFFFFF
color.neutral.50Quase branco--color-neutral-50#FAFAFA
color.neutral.100Neutro 100--color-neutral-100#EEEEEE
color.neutral.200Neutro 200--color-neutral-200#E8E8E8
color.neutral.300Neutro 300--color-neutral-300#D2D2D2
color.neutral.400Neutro 400--color-neutral-400#BCBCBC
color.neutral.500Neutro 500 — content.tertiary (dark)--color-neutral-500#A4A4A4
color.neutral.600Neutro 600--color-neutral-600#777777
color.neutral.700Neutro 700 — surface.primary / border.default--color-neutral-700#4A4A4A
color.neutral.800Neutro 800 — surface.secondary / border.subtle--color-neutral-800#222222
color.neutral.900Neutro 900 — bg.tertiary--color-neutral-900#1A1A1A
color.neutral.1000Neutro 1000 — bg.secondary--color-neutral-1000#141519
color.neutral.1200Neutro 1200 — bg.primary--color-neutral-1200#0E0E0E
color.green.600Verde primário — bg.success--color-green-600#31DD7E
color.green.alpha.08Verde alpha 8% — surface.success--color-green-alpha-08#4FE29014
color.green.alpha.16Verde alpha 16%--color-green-alpha-16#4FE29029
color.green.alpha.32Verde alpha 32%--color-green-alpha-32#4FE29052
color.green.alpha.40Verde alpha 40%--color-green-alpha-40#4FE29066
color.green.alpha.56Verde alpha 56%--color-green-alpha-56#4FE2908F
color.red.600Vermelho primário — bg.danger / short--color-red-600#F34F45
color.red.alpha.08Vermelho alpha 8% — surface.error--color-red-alpha-08#F34F4514
color.red.alpha.16Vermelho alpha 16%--color-red-alpha-16#F34F4529
color.red.alpha.32Vermelho alpha 32%--color-red-alpha-32#F34F4552
color.red.alpha.40Vermelho alpha 40%--color-red-alpha-40#F34F4566
color.red.alpha.56Vermelho alpha 56%--color-red-alpha-56#F34F458F
color.yellow.500Amarelo primário — bg.warning--color-yellow-500#FFCC40
color.yellow.alpha.08Amarelo alpha 8% — surface.warning--color-yellow-alpha-08#FFCC4014
color.yellow.alpha.16Amarelo alpha 16%--color-yellow-alpha-16#FFCC4029
color.yellow.alpha.32Amarelo alpha 32%--color-yellow-alpha-32#FFCC4052
color.orange.600Laranja primário — action.destructive / stop loss--color-orange-600#F57C00
color.orange.alpha.08Laranja alpha 8%--color-orange-alpha-08#FF640014
color.orange.alpha.16Laranja alpha 16%--color-orange-alpha-16#FF640029
color.orange.alpha.32Laranja alpha 32%--color-orange-alpha-32#FF640052
color.purple.500Roxo primário — action.tertiary--color-purple-500#7C4DFF
color.purple.alpha.08Roxo alpha 8%--color-purple-alpha-08#7C4DFF14
color.purple.alpha.16Roxo alpha 16%--color-purple-alpha-16#7C4DFF29
color.purple.alpha.32Roxo alpha 32%--color-purple-alpha-32#7C4DFF52

Espaçamentos Primitivos

TokenCSS VariableValor DarkValor Light
space.0Zero--space-00px
space.50Extra extra small--space-504px
space.100Extra small--space-1008px
space.200Small--space-20012px
space.300Medium--space-30016px
space.400Large--space-40020px
space.500Extra large--space-50024px
space.6002XL--space-60032px
space.7003XL--space-70040px
space.8004XL--space-80048px
space.9005XL--space-90056px
space.10006XL--space-100064px
space.12007XL--space-120080px
space.14008XL--space-140096px

Border Radius Primitivo

TokenCSS VariableValor DarkValor Light
radius.0Sem radius--radius-prim-00px
radius.50Extra small--radius-prim-502px
radius.100Small--radius-prim-1004px
radius.200Medium--radius-prim-2008px
radius.300Large--radius-prim-30012px
radius.400Extra large--radius-prim-40016px
radius.5002XL--radius-prim-50020px
radius.6003XL--radius-prim-60024px
radius.7004XL--radius-prim-70032px
radius.fullCircular / pill--radius-prim-full9999px

Tipografia Primitiva

TokenCSS VariableValor DarkValor Light
font.size.50Text XS--font-size-5012px
font.size.100Text SM — padrão da UI--font-size-10014px
font.size.200Text MD--font-size-20016px
font.size.300Text LG--font-size-30018px
font.size.400Text XL--font-size-40020px
font.size.500Text 2XL--font-size-50024px
font.size.600Text 3XL--font-size-60028px
font.size.700Heading LG--font-size-70032px
font.size.800Display--font-size-80040px

Backgrounds

TokenCSS VariableValor DarkValor Light
bg.primaryFundo base principal da aplicação--bg-primary#0E0E0E
#EEEEEE
bg.secondaryFundo elevado — janelas e painéis--bg-secondary#141519
#F5F5F5
bg.tertiaryFundo base do app desktop launcher--bg-tertiary#1A1A1A
#FAFAFA
bg.inverseFundo invertido (tema oposto)--bg-inverse#FFFFFF
#1A1A1A
bg.overlayOverlay translúcido--bg-overlayrgba(255,255,255,0.16)
bg.brandFundo da marca (azul)--bg-brand#3D99FF
bg.warningFundo de alerta--bg-warning#FFCC40
bg.dangerFundo de erro/perigo--bg-danger#F34F45
bg.successFundo de sucesso--bg-success#31DD7E
bg.base-alpha-0Versão transparente do bg.primary — gradientes--bg-base-alpha-0rgba(14,14,14,0)

Surfaces

TokenCSS VariableValor DarkValor Light
surface.primarySuperfície primária — buttons secondary, cards--surface-primary#4A4A4A
#D2D2D2
surface.secondarySuperfície secundária — containers, tab lists--surface-secondary#222222
#E8E8E8
surface.tertiarySuperfície terciária--surface-tertiary#1A1A1A
#EEEEEE
surface.interactiveSuperfície interativa / hero bg--surface-interactive#0052CC
#84BFFF
surface.disabledSuperfície de elemento desabilitado--surface-disabled#1A1A1A
#FAFAFA
surface.infoSuperfície informativa (azul translúcido)--surface-inforgba(61,153,255,0.08)
surface.errorSuperfície de erro--surface-errorrgba(243,79,69,0.08)
surface.warningSuperfície de alerta--surface-warningrgba(255,204,64,0.08)
surface.successSuperfície de sucesso — badge "Instalado"--surface-successrgba(79,226,144,0.08)
surface.brandSuperfície da marca — badge "Disponível"--surface-brandrgba(0,82,204,0.16)

Conteúdo (Texto)

TokenCSS VariableValor DarkValor Light
content.primaryTexto principal — máxima legibilidade--content-primary#FFFFFF
#1A1A1A
content.secondaryTexto secundário--content-secondary#E8E8E8
#222222
content.tertiaryTexto terciário — labels, hints, placeholders--content-tertiary#A4A4A4
#4A4A4A
content.disabledTexto de elemento desabilitado--content-disabled#4A4A4A
#777777
content.inverseTexto sobre fundos coloridos (ex: botão azul)--content-inverse#1A1A1A
#FFFFFF
content.infoTexto informativo--content-info#65B0FF
content.warningTexto de alerta--content-warning#FFCC40
content.errorTexto de erro--content-error#F34F45
content.successTexto de sucesso — badge "Instalado"--content-success#4FE290
content.brandTexto da marca — links, badge "Disponível"--content-brand#3D99FF
#0066FF
content.on-brandTexto sobre bg.brand--content-on-brand#FFFFFF

Bordas

TokenCSS VariableValor DarkValor Light
border.defaultBorda padrão de componentes--border-default#4A4A4A
#A4A4A4
border.subtleBorda sutil — separadores, divisores--border-subtle#222222
#E8E8E8
border.strongBorda forte — ênfase--border-strong#A4A4A4
#D2D2D2
border.focusBorda de foco — acessibilidade--border-focus#65B0FF
border.disabledBorda de elemento desabilitado--border-disabled#777777
#E8E8E8

Ações

TokenCSS VariableValor DarkValor Light
action.brand.defaultBotão primário — CTA principal--action-brand-default#3D99FF
#0066FF
action.brand.hoverHover do botão primário--action-brand-hover#1E82FF
action.brand.activeEstado pressionado do botão primário--action-brand-active#0066FF
action.brand.disabledBotão primário desabilitado--action-brand-disabledrgba(0,82,204,0.16)
action.brand-inverse.defaultBotão sobre fundo azul--action-brand-inverse-default#FFFFFF
action.secondary.defaultBotão secundário — ação neutra--action-secondary-default#4A4A4A
#D2D2D2
action.secondary.hoverHover do botão secundário--action-secondary-hover#777777
action.secondary.activeEstado pressionado do botão secundário--action-secondary-active#A4A4A4
action.tertiary.defaultBotão roxo — ação terciária / FigJam--action-tertiary-default#7C4DFF
action.tertiary.hoverHover do botão terciário--action-tertiary-hover#6200EA
action.destructive.defaultBotão destrutivo — laranja (aviso forte)--action-destructive-default#F57C00
action.destructive.hoverHover do botão destrutivo--action-destructive-hover#FF6400

Contexto de Trading

TokenCSS VariableValor DarkValor Light
context.chart.candles.upCandle de alta — verde--context-chart-up#31DD7E
context.chart.candles.downCandle de baixa — vermelho--context-chart-down#F34F45
context.trading.upPreço em alta--context-trading-up#4FE290
context.trading.downPreço em baixa--context-trading-down#F34F45
context.trading.long.textTexto de posição long (compra)--context-trading-long-text#4FE290
context.trading.long.defaultSuperfície de posição long--context-trading-long-defaultrgba(79,226,144,0.08)
context.trading.long.hoverHover de posição long--context-trading-long-hoverrgba(79,226,144,0.12)
context.trading.long.activeActive de posição long--context-trading-long-activergba(79,226,144,0.16)
context.trading.short.textTexto de posição short (venda)--context-trading-short-text#F34F45
context.trading.short.defaultSuperfície de posição short--context-trading-short-defaultrgba(243,79,69,0.08)
context.trading.short.hoverHover de posição short--context-trading-short-hoverrgba(243,79,69,0.12)
context.trading.short.activeActive de posição short--context-trading-short-activergba(243,79,69,0.16)
context.trading.stop.defaultSuperfície de stop loss--context-trading-stop-defaultrgba(255,100,0,0.16)
context.trading.stop.hoverHover de stop loss--context-trading-stop-hoverrgba(255,100,0,0.24)
context.trading.stop.activeActive de stop loss--context-trading-stop-activergba(255,100,0,0.32)
context.trading.stop.alphaAlpha sutil de stop loss--context-trading-stop-alphargba(255,100,0,0.08)

Scale Spacing

TokenCSS VariableValor DarkValor Light
scale.spacing.xsExtra small — ícones, gaps mínimos--spacing-xs4px
scale.spacing.smSmall — padding interno compacto--spacing-sm8px
scale.spacing.mdMedium — gap padrão entre elementos--spacing-md12px
scale.spacing.lgLarge — padding padrão de containers--spacing-lg16px
scale.spacing.xlExtra large--spacing-xl20px
scale.spacing.2xl2XL — padding de painéis e cards--spacing-2xl24px
scale.spacing.3xl3XL — gap entre seções--spacing-3xl32px
scale.spacing.3xl-240px--spacing-3xl-240px
scale.spacing.3xl-348px--spacing-3xl-348px
scale.spacing.3xl-456px — altura do header--spacing-3xl-456px
scale.spacing.3xl-796px — padding vertical site--spacing-3xl-796px

Scale Border Radius

TokenCSS VariableValor DarkValor Light
scale.radius.noneSem radius--radius-none0px
scale.radius.xsExtra small--radius-xs2px
scale.radius.smSmall — botões, badges, ícones--radius-sm4px
scale.radius.mdMedium — cards, dropdowns, platform cards--radius-md8px
scale.radius.lgLarge — pill tabs, activity cards, modais--radius-lg16px
scale.radius.xlExtra large--radius-xl20px
scale.radius.fullCircular — switches, avatares, badges pill--radius-full9999px