Tokens semanticos

80 tokens. Estes sao os que voce usa na interface: eles dizem para que serve a cor, nao qual cor e. Um semantico aponta para um primitivo, e e por isso que trocar a marca inteira e uma alteracao num lugar so.

Fundos

TokenDarkLightReferencia
--bg-primary#0E0E0E#EEEEEEcolor.neutral.1200
--bg-secondary#141519#F5F5F5color.neutral.1000
--bg-tertiary#1A1A1A#FAFAFAcolor.neutral.900
--bg-inverse#FFFFFF#1A1A1Acolor.neutral.0
--bg-overlay#FFFFFF29#FFFFFF52valor proprio
--bg-brand#00D4FF#00A8CCcolor.blue.500
--bg-brand2#6350B3igual ao darkcolor.purple.500
--bg-warning#FFCC40igual ao darkcolor.yellow.500
--bg-danger#F34F45igual ao darkcolor.red.600
--bg-success#31DD7Eigual ao darkcolor.green.600
--bg-base-alpha-0#0E0E0E00#FFFFFF00valor proprio

Superficies

TokenDarkLightReferencia
--surface-primary#4A4A4A#D2D2D2color.neutral.700
--surface-secondary#222222#E8E8E8color.neutral.800
--surface-tertiary#1A1A1A#EEEEEEcolor.neutral.900
--surface-interactive#002933#29ECFFcolor.blue.900
--surface-disabled#1A1A1A#FAFAFAcolor.neutral.900
--surface-info#00D4FF14igual ao darkcolor.blue.alpha-08
--surface-error#F1312614igual ao darkvalor proprio
--surface-warning#FFCC4014igual ao darkcolor.yellow.alpha-08
--surface-success#4FE29014igual ao darkcolor.green.alpha-08
--surface-brand#00D4FF29#00D4FF29color.blue.alpha-16

Conteudo e texto

TokenDarkLightReferencia
--content-primary#FFFFFF#1A1A1Acolor.neutral.0
--content-secondary#E8E8E8#222222color.neutral.200
--content-tertiary#A4A4A4#4A4A4Acolor.neutral.500
--content-placeholder#A4A4A4#777777color.neutral.500
--content-disabled#4A4A4A#777777color.neutral.700
--content-inverse#1A1A1A#FFFFFFcolor.neutral.900
--content-info#CCFDFF#00A8CCcolor.blue.100
--content-warning#FFD35A#FFC500valor proprio
--content-error#F34F45igual ao darkcolor.red.600
--content-success#4FE290igual ao darkvalor proprio
--content-brand#00D4FF#007D99color.blue.500

Bordas

TokenDarkLightReferencia
--border-default#4A4A4A#A4A4A4color.neutral.700
--border-subtle#222222#E8E8E8color.neutral.800
--border-strong#A4A4A4#D2D2D2color.neutral.500
--border-focus#00D4FF#00D4FFcolor.blue.500
--border-disabled#777777#E8E8E8color.neutral.600

Acoes

TokenDarkLightReferencia
--action-brand-default#00D4FF#00A8CCcolor.blue.500
--action-brand-hover#00A8CC#007D99color.blue.600
--action-brand-active#007D99#005266color.blue.700
--action-brand-disabled#777777igual ao darkcolor.neutral.600
--action-brand-alpha#00D4FF14igual ao darkcolor.blue.alpha-08
--action-brand-inverse-default#005266#00A8CCcolor.blue.800
--action-brand-inverse-hover#007D99#007D99color.blue.700
--action-brand-inverse-active#002933#005266color.blue.900
--action-brand-inverse-alpha#00D4FF14igual ao darkcolor.blue.alpha-08
--action-brand-inverse-disabled#777777igual ao darkcolor.neutral.600
--action-secondary-default#4A4A4Aigual ao darkcolor.neutral.700
--action-secondary-hover#777777igual ao darkcolor.neutral.600
--action-secondary-active#A4A4A4igual ao darkcolor.neutral.500
--action-secondary-disabled#1A1A1Aigual ao darkcolor.neutral.900
--action-secondary-alpha#FFFFFF00igual ao darkvalor proprio
--action-tertiary-default#50418Eigual ao darkcolor.purple.600
--action-tertiary-hover#3E3467igual ao darkcolor.purple.700
--action-tertiary-active#2A2542igual ao darkcolor.purple.800
--action-tertiary-disabled#777777igual ao darkcolor.neutral.600
--action-tertiary-alpha#6350B314igual ao darkcolor.purple.alpha-08
--action-destructive-default#EA580Cigual ao darkvalor proprio
--action-destructive-hover#C2410Cigual ao darkvalor proprio
--action-destructive-active#9A3412igual ao darkvalor proprio
--action-destructive-disabled#777777igual ao darkcolor.neutral.600
--action-destructive-alpha#F9731614igual ao darkvalor proprio

Contexto de trading

TokenDarkLightReferencia
--context-chart-up#4FE290igual ao darkvalor proprio
--context-chart-down#F34F45igual ao darkcolor.red.600
--context-trading-up#4FE290igual ao darkvalor proprio
--context-trading-up-alpha#4FE29029igual ao darkcolor.green.alpha-16
--context-trading-down#F34F45igual ao darkcolor.red.600
--context-trading-down-alpha#F1312629igual ao darkvalor proprio
--context-trading-long-text#6DE7A2igual ao darkvalor proprio
--context-trading-long-default#4FE29014igual ao darkcolor.green.alpha-08
--context-trading-long-hover#4FE29029igual ao darkcolor.green.alpha-16
--context-trading-long-active#4FE29052igual ao darkcolor.green.alpha-32
--context-trading-short-text#F56D64igual ao darkvalor proprio
--context-trading-short-default#F1312614igual ao darkvalor proprio
--context-trading-short-hover#F1312629igual ao darkvalor proprio
--context-trading-short-active#F1312652igual ao darkvalor proprio
--context-trading-stop-default#F97316igual ao darkvalor proprio
--context-trading-stop-hover#EA580Cigual ao darkvalor proprio
--context-trading-stop-active#C2410Cigual ao darkvalor proprio
--context-trading-stop-alpha#F9731614igual ao darkvalor proprio