Tokens primitivos
140 valores brutos da paleta e das escalas. Documentados para referencia, mas nao se usa primitivo direto na interface: use os semanticos. Um primitivo diz que a cor e ciano; um semantico diz que ela e a cor de acao da marca.
Regra 1 do design system: nenhum componente referencia primitivo. Se o token que voce precisa so existe aqui, e sinal de que falta um semantico, e isso e uma conversa de design, nao um contorno de codigo.
Cores
| Token | Dark | Light | Referencia | ||
|---|---|---|---|---|---|
--color-blue-50 | #E6FEFF | igual ao dark | valor proprio | ||
--color-blue-100 | #CCFDFF | igual ao dark | valor proprio | ||
--color-blue-200 | #99F9FF | igual ao dark | valor proprio | ||
--color-blue-300 | #5CF3FF | igual ao dark | valor proprio | ||
--color-blue-400 | #29ECFF | igual ao dark | valor proprio | ||
--color-blue-500 | #00D4FF | igual ao dark | valor proprio | ||
--color-blue-600 | #00A8CC | igual ao dark | valor proprio | ||
--color-blue-700 | #007D99 | igual ao dark | valor proprio | ||
--color-blue-800 | #005266 | igual ao dark | valor proprio | ||
--color-blue-900 | #002933 | igual ao dark | valor proprio | ||
--color-blue-alpha-08 | #00D4FF14 | igual ao dark | valor proprio | ||
--color-blue-alpha-16 | #00D4FF29 | igual ao dark | valor proprio | ||
--color-blue-alpha-32 | #00D4FF52 | igual ao dark | valor proprio | ||
--color-neutral-0 | #FFFFFF | igual ao dark | valor proprio | ||
--color-neutral-50 | #FAFAFA | igual ao dark | valor proprio | ||
--color-neutral-100 | #EEEEEE | igual ao dark | valor proprio | ||
--color-neutral-200 | #E8E8E8 | igual ao dark | valor proprio | ||
--color-neutral-300 | #D2D2D2 | igual ao dark | valor proprio | ||
--color-neutral-400 | #BCBCBC | igual ao dark | valor proprio | ||
--color-neutral-500 | #A4A4A4 | igual ao dark | valor proprio | ||
--color-neutral-600 | #777777 | igual ao dark | valor proprio | ||
--color-neutral-700 | #4A4A4A | igual ao dark | valor proprio | ||
--color-neutral-800 | #222222 | igual ao dark | valor proprio | ||
--color-neutral-900 | #1A1A1A | igual ao dark | valor proprio | ||
--color-neutral-1000 | #141519 | igual ao dark | valor proprio | ||
--color-neutral-1200 | #0E0E0E | igual ao dark | valor proprio | ||
--color-green-50 | #F0FFF7 | igual ao dark | valor proprio | ||
--color-green-100 | #CCFFDF | igual ao dark | valor proprio | ||
--color-green-200 | #99FFBF | igual ao dark | valor proprio | ||
--color-green-300 | #66FFA0 | igual ao dark | valor proprio | ||
--color-green-400 | #33FF80 | igual ao dark | valor proprio | ||
--color-green-500 | #00FF60 | igual ao dark | valor proprio | ||
--color-green-600 | #31DD7E | igual ao dark | valor proprio | ||
--color-green-700 | #00CC4D | igual ao dark | valor proprio | ||
--color-green-800 | #009933 | igual ao dark | valor proprio | ||
--color-green-900 | #00661F | igual ao dark | valor proprio | ||
--color-green-alpha-08 | #4FE29014 | igual ao dark | valor proprio | ||
--color-green-alpha-12 | #4FE2901F | igual ao dark | valor proprio | ||
--color-green-alpha-16 | #4FE29029 | igual ao dark | valor proprio | ||
--color-green-alpha-32 | #4FE29052 | igual ao dark | valor proprio | ||
--color-green-alpha-40 | #4FE29066 | igual ao dark | valor proprio | ||
--color-green-alpha-48 | #4FE2907A | igual ao dark | valor proprio | ||
--color-green-alpha-56 | #4FE2908F | igual ao dark | valor proprio | ||
--color-red-50 | #FFF0F0 | igual ao dark | valor proprio | ||
--color-red-100 | #FFCCCC | igual ao dark | valor proprio | ||
--color-red-200 | #FF9999 | igual ao dark | valor proprio | ||
--color-red-300 | #FF6666 | igual ao dark | valor proprio | ||
--color-red-400 | #FF3333 | igual ao dark | valor proprio | ||
--color-red-500 | #FF0000 | igual ao dark | valor proprio | ||
--color-red-600 | #F34F45 | igual ao dark | valor proprio | ||
--color-red-700 | #CC0000 | igual ao dark | valor proprio | ||
--color-red-800 | #990000 | igual ao dark | valor proprio | ||
--color-red-900 | #660000 | igual ao dark | valor proprio | ||
--color-red-alpha-08 | #F34F4514 | igual ao dark | valor proprio | ||
--color-red-alpha-12 | #F34F451F | igual ao dark | valor proprio | ||
--color-red-alpha-16 | #F34F4529 | igual ao dark | valor proprio | ||
--color-red-alpha-32 | #F34F4552 | igual ao dark | valor proprio | ||
--color-red-alpha-40 | #F34F4566 | igual ao dark | valor proprio | ||
--color-red-alpha-48 | #F34F457A | igual ao dark | valor proprio | ||
--color-red-alpha-56 | #F34F458F | igual ao dark | valor proprio | ||
--color-yellow-50 | #FFFBF0 | igual ao dark | valor proprio | ||
--color-yellow-100 | #FFF3CC | igual ao dark | valor proprio | ||
--color-yellow-200 | #FFE799 | igual ao dark | valor proprio | ||
--color-yellow-300 | #FFDB66 | igual ao dark | valor proprio | ||
--color-yellow-400 | #FFCF33 | igual ao dark | valor proprio | ||
--color-yellow-500 | #FFCC40 | igual ao dark | valor proprio | ||
--color-yellow-600 | #FFB800 | igual ao dark | valor proprio | ||
--color-yellow-700 | #CC9200 | igual ao dark | valor proprio | ||
--color-yellow-800 | #996D00 | igual ao dark | valor proprio | ||
--color-yellow-900 | #664900 | igual ao dark | valor proprio | ||
--color-yellow-alpha-08 | #FFCC4014 | igual ao dark | valor proprio | ||
--color-yellow-alpha-16 | #FFCC4029 | igual ao dark | valor proprio | ||
--color-yellow-alpha-32 | #FFCC4052 | igual ao dark | valor proprio | ||
--color-orange-50 | #FFF5F0 | igual ao dark | valor proprio | ||
--color-orange-100 | #FFE0CC | igual ao dark | valor proprio | ||
--color-orange-200 | #FFC199 | igual ao dark | valor proprio | ||
--color-orange-300 | #FFA266 | igual ao dark | valor proprio | ||
--color-orange-400 | #FF8333 | igual ao dark | valor proprio | ||
--color-orange-500 | #FF6400 | igual ao dark | valor proprio | ||
--color-orange-600 | #F57C00 | igual ao dark | valor proprio | ||
--color-orange-700 | #CC5000 | igual ao dark | valor proprio | ||
--color-orange-800 | #993C00 | igual ao dark | valor proprio | ||
--color-orange-900 | #662800 | igual ao dark | valor proprio | ||
--color-orange-alpha-08 | #FF640014 | igual ao dark | valor proprio | ||
--color-orange-alpha-16 | #FF640029 | igual ao dark | valor proprio | ||
--color-orange-alpha-32 | #FF640052 | igual ao dark | valor proprio | ||
--color-purple-50 | #F1EFF5 | igual ao dark | valor proprio | ||
--color-purple-100 | #D6D3E5 | igual ao dark | valor proprio | ||
--color-purple-200 | #BBB4D6 | igual ao dark | valor proprio | ||
--color-purple-300 | #9E94C9 | igual ao dark | valor proprio | ||
--color-purple-400 | #8072BE | igual ao dark | valor proprio | ||
--color-purple-500 | #6350B3 | igual ao dark | valor proprio | ||
--color-purple-600 | #50418E | igual ao dark | valor proprio | ||
--color-purple-700 | #3E3467 | igual ao dark | valor proprio | ||
--color-purple-800 | #2A2542 | igual ao dark | valor proprio | ||
--color-purple-900 | #161320 | igual ao dark | valor proprio | ||
--color-purple-alpha-08 | #6350B314 | igual ao dark | valor proprio | ||
--color-purple-alpha-16 | #6350B329 | igual ao dark | valor proprio | ||
--color-purple-alpha-32 | #6350B352 | igual ao dark | valor proprio |
Espacamento primitivo
| Token | Dark | Referencia | |
|---|---|---|---|
--space-0 | 0px | valor proprio | |
--space-50 | 4px | valor proprio | |
--space-100 | 8px | valor proprio | |
--space-200 | 12px | valor proprio | |
--space-300 | 16px | valor proprio | |
--space-400 | 20px | valor proprio | |
--space-500 | 24px | valor proprio | |
--space-600 | 32px | valor proprio | |
--space-700 | 40px | valor proprio | |
--space-800 | 48px | valor proprio | |
--space-900 | 56px | valor proprio | |
--space-1000 | 64px | valor proprio | |
--space-1200 | 80px | valor proprio | |
--space-1400 | 96px | valor proprio |
Tamanho de fonte primitivo
| Token | Dark | Referencia | |
|---|---|---|---|
--font-size-50 | 12px | valor proprio | |
--font-size-100 | 14px | valor proprio | |
--font-size-200 | 16px | valor proprio | |
--font-size-300 | 18px | valor proprio | |
--font-size-400 | 20px | valor proprio | |
--font-size-500 | 24px | valor proprio | |
--font-size-600 | 28px | valor proprio | |
--font-size-700 | 32px | valor proprio | |
--font-size-800 | 40px | valor proprio |
Opacidade
| Token | Dark | Referencia | |
|---|---|---|---|
--opacity-0 | 0 | valor proprio | |
--opacity-16 | 0.16 | valor proprio | |
--opacity-32 | 0.32 | valor proprio | |
--opacity-48 | 0.48 | valor proprio | |
--opacity-64 | 0.64 | valor proprio | |
--opacity-80 | 0.80 | valor proprio | |
--opacity-100 | 1 | valor proprio | |
--opacity-08 | 0.08 | valor proprio |
Raio primitivo
| Token | Dark | Referencia | |
|---|---|---|---|
--radius-prim-0 | 0px | valor proprio | |
--radius-prim-50 | 2px | valor proprio | |
--radius-prim-100 | 4px | valor proprio | |
--radius-prim-200 | 8px | valor proprio | |
--radius-prim-300 | 12px | valor proprio | |
--radius-prim-400 | 16px | valor proprio | |
--radius-prim-500 | 20px | valor proprio | |
--radius-prim-600 | 24px | valor proprio | |
--radius-prim-700 | 32px | valor proprio | |
--radius-prim-full | 9999px | valor proprio |