Design Tokens
Todo valor de cor, tamanho, espaçamento ou tipografia que aparece nas aplicações vem daqui — nunca de valor hardcoded.
Paleta base · Brand
brand-900
brand-700
brand-500
brand-100
Paleta base · Accent
accent-blue
accent-cyan
accent-pink
Paleta base · Neutros
neutral-0
neutral-50
neutral-100
neutral-200
neutral-300
neutral-700
neutral-800
neutral-900
Semânticos · Fundo
--color-bg-base
--color-bg-surface
--color-bg-overlay
Semânticos · Primeiro plano
--color-brand-fg
--color-interactive-fg
--color-success-fg
--color-alert-fg
Cor como fundo usa o token direto. Cor como primeiro plano — texto, borda, ícone, ponto — usa a variante -fg, que ajusta a luminosidade no tema em que a original não alcançava contraste.
Semânticos · Texto
Esta é a única seção do site que falha contraste de propósito: muted e disabled são de baixo contraste por definição, e aqui aparecem como amostra. Nos componentes, muted em texto de tamanho normal é violação de verdade — por isso ele é reservado a texto grande e elementos não-textuais.
Gestão de visitas--color-text-primary
Gestão de visitas--color-text-secondary
Gestão de visitas--color-text-muted
Gestão de visitas--color-text-disabled
Tipografia
Gestão de visitastext-mega
Gestão de visitastext-display
Gestão de visitastext-h1
Gestão de visitastext-h2
Gestão de visitastext-h3
Gestão de visitastext-body-lg
Gestão de visitastext-body
Gestão de visitastext-label
1.284text-numeric
1.284text-numeric-lg
Gestão de visitastext-code
Espaçamento
xs
sm
md
lg
xl
2xl
Border radius
rounded-none
rounded-sm
rounded-md
rounded-lg
A grande maioria dos componentes usa rounded-none. Qualquer outro valor é decisão consciente, não padrão.