Design Tokens
Tokens são CSS Custom Properties que definem os valores fundamentais do sistema. Todos os componentes deste kit consomem exclusivamente estes valores — nunca hardcode cores ou tamanhos. Clique em qualquer token para copiá-lo.
Explorador de Tokens
Navegue entre cores, tipografia, espaçamento, bordas, sombras e mais.
Primárias — azul institucional
primary-pastel-01
#C5D4EB
primary-pastel-02
#DBE8FB
primary-lighten-01
#2670E8
primary-lighten-02
#5992ED
primary-default
#1351B4
primary-darken-01
#0C326F
primary-darken-02
#071D41
Secundárias — neutros
secondary-01
#FFFFFF
secondary-02
#F8F8F8
secondary-03
#EDEDED
secondary-04
#CCCCCC
secondary-05
#9E9D9D
secondary-06
#888888
secondary-07
#555555
secondary-08
#333333
secondary-09
#000000
Semânticas — feedback
success
#168821
success-bg
#E3F5E1
danger
#E52207
danger-bg
#FDB8AE
danger-darken
#B50909
warning
#FFCD07
warning-bg
#FFF5C2
info
#1351B4
info-bg
#D4E5FF
highlight
#268744
Suporte — gráficos e destaques
support-10
#FF8C00
support-11
#FDF5E6
support-01
#36A191
support-02
#F2E317
support-03
#DB4800
support-04
#A26739
support-05
#40E0D0
support-06
#48CBEB
support-07
#C72487
support-08
#63007F
support-09
#F08080
Interação
focus
#EABD2E
active
#0C326F
selected
#1351B4
visited
#0C326F
Consumindo tokens no código
Prefira sempre a utilitária Tailwind gerada a partir do token. Só use var(--token) em CSS quando não houver classe equivalente.
/* CSS puro — consumindo variáveis */
.card {
color: var(--color-primary-default);
background: var(--color-surface);
padding: var(--spacing-3x);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-size: var(--text-base);
transition: background var(--duration-normal) var(--ease-default);
}
/* Com Tailwind — classes geradas a partir dos tokens */
<div className="bg-primary-default text-secondary-01 p-3x rounded-md shadow-sm" />