Tokens Semânticos

Use sempre estes tokens na UI. Suportam dark/light mode automaticamente.

11 tokens

Backgrounds

Token	CSS Variable	Valor Dark	Valor Light
`bg/primary`Fundo base de toda interface — a camada mais escura da hierarquia. Background da área de conteúdo principal e do canvas geral da plataforma de trading. É o "chão" sobre o qual todos os outros layers existem. Nunca nada deve ser mais escuro dentro de uma tela.	`--bg-primary`	`#0E0E0E`	`#EEEEEE`
`bg/secondary`Fundo de painéis de navegação lateral (sidebar). O sutil tom frio/azulado cria separação visual da content area sem usar bordas. Exclusivo para elementos de navegação global — nunca para painéis internos de conteúdo.	`--bg-secondary`	`#141519`	`#F5F5F5`
`bg/tertiary`Fundo de sub-áreas dentro do conteúdo principal. Situa-se entre bg/secondary e surface/secondary na hierarquia de profundidade. Na plataforma de trading: interior de sub-painéis e zonas de destaque dentro de janelas.	`--bg-tertiary`	`#1A1A1A`	`#FAFAFA`
`bg/overlay`Fundo de overlays, modais e drawers. Cobre o conteúdo abaixo com opacidade para focar atenção no modal. Sempre combinar com opacity/overlay. Nunca usar como fundo de página ou painel fixo.	`--bg-overlay`	`#FFFFFF29`	`#FFFFFF52`
`bg/inverse`Fundo claro (inverso) para casos onde a interface precisa de um contexto de alto contraste oposto ao tema dark. Usado em superfícies que precisam parecer "fora" do sistema dark.	`--bg-inverse`	`#FFFFFF`	`#1A1A1A`
`bg/Base alpha 0`Versão completamente transparente de bg/primary. Usada exclusivamente como ponto inicial ou final em gradientes que precisam "dissipar" sobre o fundo da página. Ex: hero gradient do hub. Nunca usar como fundo sólido.	`--bg-base-alpha-0`	`#0E0E0E00`	`#A4A4A400`
`bg/bg-brand`Fundo de áreas com destaque de marca primária. Usado em seções hero, banners de identidade TRDR e áreas de apresentação da marca.	`--bg-bg-brand`	`#00D4FF`	`#00A8CC`
`bg/bg-brand2`Variante secundária de fundo brand. Para contextos de marca menos prominentes ou que precisam de diferenciação visual em relação a bg/bg-brand.	`--bg-bg-brand2`	`#6350B3`	`#6350B3`
`bg/bg-success`Fundo de áreas e banners de estado de sucesso. Versão contextual da cor de success para uso como background de seção. Usar para confirmações e banners de operação concluída.	`--bg-bg-success`	`#31DD7E`	`#31DD7E`
`bg/bg-warning`Fundo de áreas e banners de estado de aviso. Versão contextual da cor de warning para uso como background de seção inteira. Usar para banners de atenção e alertas de página.	`--bg-bg-warning`	`#FFCC40`	`#FFCC40`
`bg/bg-danger`Fundo de áreas e banners de estado de perigo/erro crítico. Versão contextual da cor de error para uso como background de seção. Usar para alertas críticos e banners de sistema com erro grave.	`--bg-bg-danger`	`#F34F45`	`#F34F45`

10 tokens

Surfaces

Token	CSS Variable	Valor Dark	Valor Light
`surface/primary`Superfície neutra de média luminosidade. Usada para filter pills inativos, botões secundários em estado padrão e elementos de UI que precisam de um background visível mas sem cor. Indica "existe, pode interagir" sem destaque.	`--surface-primary`	`#4A4A4A`	`#D2D2D2`
`surface/secondary`Superfície padrão de cards, janelas e painéis de conteúdo — o token de superfície mais usado. No hub: fundo dos cards da home. Na plataforma: fundo das janelas e order book. Primeira camada de elevação acima de bg/primary.	`--surface-secondary`	`#222222`	`#E8E8E8`
`surface/tertiary`Superfície para sub-seções dentro de um surface/secondary. Usado em painéis aninhados dentro de janelas ou áreas que precisam de uma terceira camada de profundidade visual.	`--surface-tertiary`	`#1A1A1A`	`#EEEEEE`
`surface/interactive`Superfície ciana para estados ativos/selecionados em filtros, pills e seletores de segmento. Ex: filter pill ativo no hub. Reservado para filtros e toggles — NÃO usar para botão CTA primário (usar action/brand inverse/default).	`--surface-interactive`	`#002933`	`#29ECFF`
`surface/disabled`Superfície de componentes desabilitados. Indica visualmente que o elemento não está disponível para interação. Combinar com content/disabled no texto.	`--surface-disabled`	`#1A1A1A`	`#FAFAFA`
`surface/brand`Superfície com cor brand para badges, tags e elementos com identidade visual TRDR. Usar em rótulos de produto, badges de destaque e elementos que comunicam pertencimento à marca.	`--surface-brand`	`#00D4FF29`	`#00D4FF29`
`surface/info`Fundo semi-transparente ciano sutil para indicar contexto informativo em células, seções ou banners. Usar em tooltips expandidos e áreas de informação não-crítica.	`--surface-info`	`#00D4FF14`	`#00D4FF14`
`surface/success`Fundo semi-transparente levíssimo (verde ~8% alpha) para indicar contexto positivo em células ou linhas. Ex: linha de ordem executada com sucesso, posição lucrativa.	`--surface-success`	`#4FE29014`	`#4FE29014`
`surface/warning`Fundo semi-transparente levíssimo (amarelo ~8% alpha) para indicar contexto de aviso em células ou áreas. Usar em linhas com condição de atenção — margem baixa, valores próximos do limite.	`--surface-warning`	`#FFCC4014`	`#FFCC4014`
`surface/error`Fundo semi-transparente levíssimo (vermelho ~8% alpha) para indicar contexto de erro em células ou linhas. Ex: linha da order book com ordem rejeitada. Nunca usar como fundo de card inteiro.	`--surface-error`	`#F1312614`	`#F1312614`

11 tokens

Conteúdo (Texto)

Token	CSS Variable	Valor Dark	Valor Light
`content/primary`Texto de máxima prioridade: títulos H1/H2, labels ativos de navegação, números críticos. Branco puro — máximo contraste sobre qualquer background dark. Usar quando o texto for o elemento mais importante daquele bloco.	`--content-primary`	`#FFFFFF`	`#1A1A1A`
`content/secondary`Texto de prioridade intermediária: subtítulos, descrições de cards, texto de corpo corrido, labels de formulário. Ligeiramente menos brilhante que /primary — cria hierarquia tipográfica sem perda de legibilidade.	`--content-secondary`	`#E8E8E8`	`#222222`
`content/tertiary`Texto de menor prioridade: labels de seção da sidebar (ex: "TOKENS", "COMPONENTES"), placeholders, metadados como fonte e horário, texto auxiliar. Nunca usar para texto que o usuário precise ler com atenção em fluxos críticos.	`--content-tertiary`	`#A4A4A4`	`#4A4A4A`
`content/placeholder`Cor de texto placeholder em campos de input. Indica ao usuário o tipo de dado esperado. Desaparece ao digitar — nunca usar para texto de conteúdo permanente.	`--content-placeholder`	`#A4A4A4`	`#777777`
`content/disabled`Texto em estado desabilitado. Indica que o elemento não está disponível para interação. Usar APENAS em labels e textos de componentes no estado disabled — nunca em texto de conteúdo normal.	`--content-disabled`	`#4A4A4A`	`#777777`
`content/inverse`Texto escuro para uso sobre fundos claros, coloridos ou de alta luminosidade. Ex: label sobre superfície brand. Nunca usar sobre backgrounds escuros — o contraste seria insuficiente.	`--content-inverse`	`#1A1A1A`	`#FFFFFF`
`content/brand`Texto com cor da marca: links clicáveis, valores em destaque brand, labels interativos com identidade TRDR. Ex: "Link com ação" no hub, links de notícias na plataforma, valores com destaque ciano.	`--content-brand`	`#00D4FF`	`#007D99`
`content/info`Texto de mensagens informativas e contexto não-crítico. Ciano muito claro no dark — comunica informação sem urgência. Usar em tooltips, dicas de preenchimento e mensagens de sistema informativas.	`--content-info`	`#CCFDFF`	`#00A8CC`
`content/success`Texto de estados de sucesso e valores financeiros positivos. Verde vibrante — para confirmações de ordem, ganhos e indicadores positivos. Ex: "+R$1.250" em tela de resultado.	`--content-success`	`#4FE290`	`#13C870`
`content/warning`Texto de avisos e alertas de atenção. Amarelo — comunica risco iminente mas não erro crítico. Ex: "Margem insuficiente", "Stop loss muito próximo do preço de mercado".	`--content-warning`	`#FFD35A`	`#FFC500`
`content/error`Texto de estados de erro e valores negativos. Vermelho — para mensagens de validação, erros de sistema e dados de perda. Nunca usar decorativamente.	`--content-error`	`#F34F45`	`#D91B0F`

5 tokens

Bordas

Token	CSS Variable	Valor Dark	Valor Light
`border/subtle`Borda quasi-invisível para separações sutis entre seções e zonas visuais. Usar em divisores de seção, bordas de containers que não precisam se destacar e linhas de separação entre áreas de conteúdo.	`--border-subtle`	`#222222`	`#E8E8E8`
`border/default`Borda padrão de componentes interativos: inputs, dropdowns, cards com borda explícita, botões outlined. É a borda que o usuário espera ver em campos de formulário e componentes com delimitação visível.	`--border-default`	`#4A4A4A`	`#A4A4A4`
`border/strong`Borda de alto contraste para elementos que precisam de forte delimitação visual. Ex: cards selecionados ativamente, elementos em destaque, separadores de alta importância.	`--border-strong`	`#A4A4A4`	`#D2D2D2`
`border/focus`Cor de borda quando um elemento interativo recebe foco via teclado. Fundamental para acessibilidade — nunca remover ou sobrescrever em componentes focáveis. Deve ser sempre visível sobre qualquer background.	`--border-focus`	`#00D4FF`	`#00D4FF`
`border/disabled`Borda de componentes desabilitados. Indica visualmente a indisponibilidade do elemento. Combinar com surface/disabled e content/disabled.	`--border-disabled`	`#777777`	`#E8E8E8`

25 tokens

Ações

Token	CSS Variable	Valor Dark	Valor Light
`action/brand/default`Estado padrão de ações com cor brand que NÃO são botões preenchidos. Usado em ícones interativos brand, indicadores ativos de aba, badges e highlights com identidade TRDR. Ciano — visível mas não dominante.	`--action-brand-default`	`#00D4FF`	`#00A8CC`
`action/brand/hover`Estado hover de ações brand. Versão ligeiramente mais intensa que /default para feedback de mouse over em ícones, indicadores e elementos brand.	`--action-brand-hover`	`#00A8CC`	`#007D99`
`action/brand/active`Estado ativo/pressionado/selecionado de ações brand. Mais intenso que /default. Ex: underline ciano sob aba ativa na página de tokens do hub.	`--action-brand-active`	`#007D99`	`#005266`
`action/brand/disabled`Estado desabilitado de ações brand. Indica que o elemento interativo brand não está disponível no momento.	`--action-brand-disabled`	`#777777`	`#EEEEEE`
`action/brand/alpha`Versão semi-transparente da cor brand para highlights, overlays e indicadores sutis com identidade TRDR.	`--action-brand-alpha`	`#00D4FF14`	`#00D4FF14`
`action/brand inverse/default`Background do botão CTA primário — o call-to-action mais importante de cada tela. Ciano sólido. O texto deve ser content/primary (branco no dark, preto no light). Ex: botão "Gerar prompts" no hub. Usar apenas uma vez por contexto.	`--action-brand-inverse-default`	`#005266`	`#00A8CC`
`action/brand inverse/hover`Estado hover do botão CTA primário. Versão ligeiramente mais clara para feedback de mouse over.	`--action-brand-inverse-hover`	`#007D99`	`#007D99`
`action/brand inverse/active`Estado pressionado/clicado do botão CTA primário.	`--action-brand-inverse-active`	`#002933`	`#005266`
`action/brand inverse/disabled`Estado desabilitado do botão CTA primário.	`--action-brand-inverse-disabled`	`#777777`	`#EEEEEE`
`action/brand inverse/alpha`Versão semi-transparente do CTA brand inverse para overlays e highlights sutis.	`--action-brand-inverse-alpha`	`#00D4FF14`	`#00D4FF14`
`action/secondary/default`Estado padrão de botões e ações secundárias sem identidade de cor. Background de botões que precisam de presença visual mas sem marca. Ex: "Cancelar Ordem", "Inverter" na plataforma de trading.	`--action-secondary-default`	`#4A4A4A`	`#E8E8E8`
`action/secondary/hover`Estado hover de ações secundárias. Feedback visual de mouse over em botões secundários.	`--action-secondary-hover`	`#777777`	`#D2D2D2`
`action/secondary/active`Estado ativo/pressionado de ações secundárias.	`--action-secondary-active`	`#A4A4A4`	`#A4A4A4`
`action/secondary/disabled`Estado desabilitado de ações secundárias.	`--action-secondary-disabled`	`#1A1A1A`	`#FAFAFA`
`action/secondary/alpha`Versão completamente transparente — usada como ponto inicial em transições ou overlays que partem do zero.	`--action-secondary-alpha`	`#FFFFFF00`	`#FFFFFF00`
`action/tertiary/default`Estado padrão de ações terciárias — ghost buttons, links de ação inline, ações de menor importância hierárquica. Menos proeminente que secondary.	`--action-tertiary-default`	`#50418E`	`#3E3467`
`action/tertiary/hover`Estado hover de ações terciárias.	`--action-tertiary-hover`	`#3E3467`	`#2A2542`
`action/tertiary/active`Estado ativo/pressionado de ações terciárias.	`--action-tertiary-active`	`#2A2542`	`#161320`
`action/tertiary/disabled`Estado desabilitado de ações terciárias.	`--action-tertiary-disabled`	`#777777`	`#EEEEEE`
`action/tertiary/alpha`Versão semi-transparente de ação terciária.	`--action-tertiary-alpha`	`#6350B314`	`#6350B314`
`action/destructive/default`Estado padrão de ações destrutivas — botões de exclusão, encerramento forçado, ações irreversíveis. Laranja de alta visibilidade que comunica risco sem conflitar com a semântica de queda de mercado (vermelha).	`--action-destructive-default`	`#EA580C`	`#C2410C`
`action/destructive/hover`Estado hover de ações destrutivas.	`--action-destructive-hover`	`#C2410C`	`#9A3412`
`action/destructive/active`Estado ativo/pressionado de ações destrutivas.	`--action-destructive-active`	`#9A3412`	`#7C2D12`
`action/destructive/disabled`Estado desabilitado de ações destrutivas.	`--action-destructive-disabled`	`#777777`	`#EEEEEE`
`action/destructive/alpha`Versão semi-transparente de ação destrutiva para highlights sutis de risco.	`--action-destructive-alpha`	`#F9731614`	`#F9731614`

18 tokens

Contexto de Trading

Token	CSS Variable	Valor Dark	Valor Light
`context/chart/candles/up`Cor de preenchimento das velas de alta (bullish) no gráfico candlestick. Semanticamente específico para o gráfico — manter separado de context/trading/up para permitir customização independente.	`--context-chart-candles-up`	`#4FE290`	`#0B9E5C`
`context/chart/candles/down`Cor de preenchimento das velas de baixa (bearish) no gráfico candlestick. Nunca usar para texto fora do contexto de visualização de candles.	`--context-chart-candles-down`	`#F34F45`	`#D91B0F`
`context/trading/up`Verde vibrante para indicar movimento de preço para cima em tempo real. Variações positivas (%), preços subindo no order book, indicadores de alta. Cor que o trader associa imediatamente com alta.	`--context-trading-up`	`#4FE290`	`#13C870`
`context/trading/down`Vermelho para indicar movimento de preço para baixo em tempo real. Variações negativas, preços caindo, indicadores de tendência de baixa.	`--context-trading-down`	`#F34F45`	`#D91B0F`
`context/trading/up-alpha`Fundo semi-transparente verde (~16% alpha) para highlight de linhas/células com movimento positivo. Cria destaque colorido sem ofuscar o texto em tabelas densas de cotações.	`--context-trading-up-alpha`	`#4FE29029`	`#4FE29052`
`context/trading/down-alpha`Fundo semi-transparente vermelho (~16% alpha) para highlight de linhas/células com movimento negativo. Análogo a /up-alpha para preços caindo no order book.	`--context-trading-down-alpha`	`#F1312629`	`#F1312652`
`context/trading/long/default`Fundo muito sutil verde (~8% alpha) para indicar posição long aberta na watchlist ou order book. Mais discreto que /up-alpha — destaca a linha de posição sem distrair do conteúdo numérico.	`--context-trading-long-default`	`#4FE29014`	`#4FE2901F`
`context/trading/long/hover`Estado hover de linha de posição long. Feedback visual de mouse over em rows de posição comprada.	`--context-trading-long-hover`	`#4FE29029`	`#4FE29052`
`context/trading/long/active`Estado ativo/selecionado de linha de posição long. Feedback de seleção de row de posição comprada.	`--context-trading-long-active`	`#4FE29052`	`#4FE29066`
`context/trading/long/text`Texto para labels e valores de posição long. Verde levemente mais claro que /up — otimizado para legibilidade em texto pequeno. Ex: badge "LONG", P&L de posição comprada.	`--context-trading-long-text`	`#6DE7A2`	`#0B9E5C`
`context/trading/short/default`Fundo muito sutil vermelho (~8% alpha) para indicar posição short aberta. Análogo a /long/default para o lado vendido.	`--context-trading-short-default`	`#F1312614`	`#F131261F`
`context/trading/short/hover`Estado hover de linha de posição short. Feedback visual de mouse over em rows de posição vendida.	`--context-trading-short-hover`	`#F1312629`	`#F1312652`
`context/trading/short/active`Estado ativo/selecionado de linha de posição short.	`--context-trading-short-active`	`#F1312652`	`#F1312666`
`context/trading/short/text`Texto para labels de posição short. Vermelho suave, otimizado para legibilidade em texto pequeno. Ex: badge "SHORT", rótulos de direção de posição vendida.	`--context-trading-short-text`	`#F56D64`	`#D91B0F`
`context/trading/stop/default`Laranja para ordens de stop loss. Cor distinta de up/down (verde/vermelho) para não confundir com movimentação de preço. Aparece em indicadores de preço de stop no gráfico e campos de stop na order form.	`--context-trading-stop-default`	`#F97316`	`#F97316`
`context/trading/stop/hover`Estado hover de elementos de stop loss. Feedback de mouse over em botões ou indicadores de stop.	`--context-trading-stop-hover`	`#EA580C`	`#EA580C`
`context/trading/stop/active`Estado ativo/pressionado de elementos de stop loss.	`--context-trading-stop-active`	`#C2410C`	`#C2410C`
`context/trading/stop/stop-alpha`Versão semi-transparente da cor de stop loss para highlights sutis de risco em áreas de stop no gráfico.	`--context-trading-stop-alpha`	`#F9731614`	`#F9731614`

11 tokens

Scale Spacing

Token	CSS Variable	Valor Dark
`scale.spacing.xs`Extra small — ícones, gaps mínimos	`--spacing-xs`	`4px`
`scale.spacing.sm`Small — padding interno compacto	`--spacing-sm`	`8px`
`scale.spacing.md`Medium — gap padrão entre elementos	`--spacing-md`	`12px`
`scale.spacing.lg`Large — padding padrão de containers	`--spacing-lg`	`16px`
`scale.spacing.xl`Extra large	`--spacing-xl`	`20px`
`scale.spacing.2xl`2XL — padding de painéis e cards	`--spacing-2xl`	`24px`
`scale.spacing.3xl`3XL — gap entre seções	`--spacing-3xl`	`32px`
`scale.spacing.3xl-2`40px	`--spacing-3xl-2`	`40px`
`scale.spacing.3xl-3`48px	`--spacing-3xl-3`	`48px`
`scale.spacing.3xl-4`56px — altura do header	`--spacing-3xl-4`	`56px`
`scale.spacing.3xl-7`96px — padding vertical site	`--spacing-3xl-7`	`96px`

7 tokens

Scale Border Radius

Token	CSS Variable	Valor Dark
`scale.radius.none`Sem radius	`--radius-none`	`0px`
`scale.radius.xs`Extra small	`--radius-xs`	`2px`
`scale.radius.sm`Small — botões, badges, ícones	`--radius-sm`	`4px`
`scale.radius.md`Medium — cards, dropdowns, platform cards	`--radius-md`	`8px`
`scale.radius.lg`Large — pill tabs, activity cards, modais	`--radius-lg`	`16px`
`scale.radius.xl`Extra large	`--radius-xl`	`20px`
`scale.radius.full`Circular — switches, avatares, badges pill	`--radius-full`	`9999px`