Tokens Primitivos

Valores brutos do sistema. Nunca use diretamente na UI — use tokens semânticos.

50 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
14 tokens

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
10 tokens

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
9 tokens

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