Cores

O sistema de cores HalfByte é organizado em duas camadas: a paleta primitiva (valores brutos) e os tokens semânticos (significado de uso). Sempre referencie os tokens semânticos nos seus componentes — nunca os primitivos diretamente.

Paleta primitiva

Blue#3381ffCor primária da marca

Blue Dark#0d3aa0Hover e ênfase

Blue Light#92acffSoft accent

Lime#a6d31cCor de detalhe/acento

Lime Dark#5ba323Hover do detalhe

Lime Light#c6f995Versão suave

Cyan#92d5efAcento complementar

Gray#878489Neutro

White#efe8efOff-white de marca

Black#111114Quase-preto de marca

Tokens semânticos

Os tokens semânticos mapeiam a paleta primitiva para usos específicos. Ao alterar um valor aqui, todos os componentes são atualizados automaticamente.

Fundos

bg#efe8efBackground padrão da aplicação

bg-inverse#111114Fundo invertido / modo escuro

bg-elevated#ffffffCards e superfícies elevadas

bg-muted#e3dde3Estados desabilitados, fundos atenuados

Texto

fg#111114Texto primário

fg-inverse#efe8efTexto sobre fundos escuros

fg-muted#878489Texto secundário, labels, placeholders

fg-subtle#5a585cTexto terciário, helper text

Bordas

border#d6cfd6Borda decorativa padrão

border-strong#111114Borda de ênfase, inputs ativos

Acento (azul)

accent#3381ffCor primária de ação — botões, links, foco

accent-hover#0d3aa0Estado hover/pressed

accent-soft#92acffFundos de badge, estados selecionados suaves

Detalhe (lime)

O lime é uma cor de uso controlado — deve aparecer em pequenas quantidades para criar contraste visual, nunca como cor de fundo dominante.

detail#a6d31cAcentos visuais, highlights, indicadores

detail-soft#c6f995Fundos de badges de sucesso, highlights suaves

detail-strong#5ba323Texto sobre fundos lime, hover

Gradientes

Os gradientes de marca são usados em hero sections, banners e CTAs. Evite usá-los em áreas de leitura.

Blue Noirgradient.blueNoirHero sections, banners de destaque

Lime Bluegradient.limeBlueCTAs, botões de destaque máximo

Auroragradient.auroraFundos decorativos, ilustrações

Sombras

sm0 1px 2px rgba(17,17,20,0.06)

md0 4px 12px rgba(17,17,20,0.08)

lg0 12px 32px rgba(17,17,20,0.12)