Tokens de design

Os tokens HalfByte são a fonte única de verdade para todas as decisões visuais da lib. Eles vivem em packages/maka/src/design-system/tokens/index.ts e são consumidos pelo panda.config.ts para gerar as classes CSS em build time.

Paleta primitiva

Token	Valor	Uso
hb.white	#efe8ef	Off-white de marca
hb.black	#111114	Quase-preto de marca
hb.blue	#3381ff	Azul — cor primária
hb.lime	#a6d31c	Limão — cor de detalhe/acento
hb.gray	#878489	Cinza neutro
hb.cyan	#92d5ef	Ciano
hb.blueLight	#92acff	Azul claro (soft accent)
hb.blueDark	#0d3aa0	Azul escuro (hover)

Não referencie os tokens primitivos diretamente nos seus componentes. Use sempre os tokens semânticos abaixo.

Tokens semânticos de cor

Fundos

Token	Valor padrão	Descrição
bg	#efe8ef	Background padrão
bg.inverse	#111114	Fundo escuro/invertido
bg.elevated	#ffffff	Superfície elevada (cards)
bg.muted	#e3dde3	Fundo atenuado (disabled, etc.)

Texto

Token	Valor padrão	Descrição
fg	#111114	Texto primário
fg.inverse	#efe8ef	Texto sobre fundo escuro
fg.muted	#878489	Texto secundário / labels
fg.subtle	#5a585c	Texto terciário

Bordas

Token	Valor padrão	Descrição
border	#d6cfd6	Borda decorativa
border.strong	#111114	Borda de ênfase

Acento (azul)

Token	Valor	Descrição
accent	#3381ff	Cor primária
accent.hover	#0d3aa0	Estado hover
accent.soft	#92acff	Versão suave

Detalhe (limão)

Token	Valor	Descrição
detail	#a6d31c	Cor de detalhe
detail.soft	#c6f995	Versão suave
detail.strong	#5ba323	Versão forte (hover)

Tipografia

Token	Família
display	Space Grotesk
body	Plus Jakarta Sans
mono	Sistema monospace

Gradientes

Token	Uso
blueNoir	Hero sections, banners
limeBlue	CTAs, destaques
aurora	Fundos decorativos

Como alterar tokens

Edite packages/maka/src/design-system/tokens/index.ts e rode:

bun run --cwd packages/maka panda

As mudanças se propagam automaticamente para todos os componentes no próximo build.