Tokens Semânticos
Use sempre estes tokens na UI. Suportam dark/light mode automaticamente.
Backgrounds
| Token | CSS Variable | Valor Dark | Valor 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-overlay | rgba(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-0 | rgba(14,14,14,0) |
Surfaces
| Token | CSS Variable | Valor Dark | Valor 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-info | rgba(61,153,255,0.08) | ||
surface.errorSuperfície de erro | --surface-error | rgba(243,79,69,0.08) | ||
surface.warningSuperfície de alerta | --surface-warning | rgba(255,204,64,0.08) | ||
surface.successSuperfície de sucesso — badge "Instalado" | --surface-success | rgba(79,226,144,0.08) | ||
surface.brandSuperfície da marca — badge "Disponível" | --surface-brand | rgba(0,82,204,0.16) |
Conteúdo (Texto)
| Token | CSS Variable | Valor Dark | Valor 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
| Token | CSS Variable | Valor Dark | Valor 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
| Token | CSS Variable | Valor Dark | Valor 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-disabled | rgba(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
| Token | CSS Variable | Valor Dark | Valor 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-default | rgba(79,226,144,0.08) | ||
context.trading.long.hoverHover de posição long | --context-trading-long-hover | rgba(79,226,144,0.12) | ||
context.trading.long.activeActive de posição long | --context-trading-long-active | rgba(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-default | rgba(243,79,69,0.08) | ||
context.trading.short.hoverHover de posição short | --context-trading-short-hover | rgba(243,79,69,0.12) | ||
context.trading.short.activeActive de posição short | --context-trading-short-active | rgba(243,79,69,0.16) | ||
context.trading.stop.defaultSuperfície de stop loss | --context-trading-stop-default | rgba(255,100,0,0.16) | ||
context.trading.stop.hoverHover de stop loss | --context-trading-stop-hover | rgba(255,100,0,0.24) | ||
context.trading.stop.activeActive de stop loss | --context-trading-stop-active | rgba(255,100,0,0.32) | ||
context.trading.stop.alphaAlpha sutil de stop loss | --context-trading-stop-alpha | rgba(255,100,0,0.08) |
Scale Spacing
| Token | CSS Variable | Valor Dark | Valor Light | |
|---|---|---|---|---|
scale.spacing.xsExtra small — ícones, gaps mínimos | --spacing-xs | 4px | ||
scale.spacing.smSmall — padding interno compacto | --spacing-sm | 8px | ||
scale.spacing.mdMedium — gap padrão entre elementos | --spacing-md | 12px | ||
scale.spacing.lgLarge — padding padrão de containers | --spacing-lg | 16px | ||
scale.spacing.xlExtra large | --spacing-xl | 20px | ||
scale.spacing.2xl2XL — padding de painéis e cards | --spacing-2xl | 24px | ||
scale.spacing.3xl3XL — gap entre seções | --spacing-3xl | 32px | ||
scale.spacing.3xl-240px | --spacing-3xl-2 | 40px | ||
scale.spacing.3xl-348px | --spacing-3xl-3 | 48px | ||
scale.spacing.3xl-456px — altura do header | --spacing-3xl-4 | 56px | ||
scale.spacing.3xl-796px — padding vertical site | --spacing-3xl-7 | 96px |
Scale Border Radius
| Token | CSS Variable | Valor Dark | Valor Light | |
|---|---|---|---|---|
scale.radius.noneSem radius | --radius-none | 0px | ||
scale.radius.xsExtra small | --radius-xs | 2px | ||
scale.radius.smSmall — botões, badges, ícones | --radius-sm | 4px | ||
scale.radius.mdMedium — cards, dropdowns, platform cards | --radius-md | 8px | ||
scale.radius.lgLarge — pill tabs, activity cards, modais | --radius-lg | 16px | ||
scale.radius.xlExtra large | --radius-xl | 20px | ||
scale.radius.fullCircular — switches, avatares, badges pill | --radius-full | 9999px |